/* ========================================================================= VOKAALY - LIGHT THEME Scoped to ; the dark theme is never touched. Load order: _generated-utilities.css (role-based utility remap) then this file, which designs the components themselves - elevation, hairlines, controls, catalog rows, player, dashboards, commerce flows. ========================================================================= */ html[data-theme="light"] { /* surfaces ---------------------------------------------------------- */ --vkl-canvas: #f2f1f1; --vkl-canvas-2: #ebeae9; --vkl-surface: #ffffff; --vkl-surface-2: #f8f8f7; --vkl-surface-3: #eeeded; /* ink --------------------------------------------------------------- */ --vkl-ink: #17181c; --vkl-ink-hover: #2a2d35; --vkl-ink-2: #3c4049; --vkl-ink-3: #646975; --vkl-ink-4: #8b909b; --vkl-ink-5: #adb1ba; /* lines ------------------------------------------------------------- */ --vkl-line: rgba(20, 22, 28, 0.09); --vkl-line-2: rgba(20, 22, 28, 0.14); --vkl-line-3: rgba(20, 22, 28, 0.22); /* brand ------------------------------------------------------------- */ --vkl-accent: #0071e3; --vkl-accent-ink: #0062c8; --vkl-accent-deep: #005bb5; --vkl-accent-tint: rgba(0, 113, 227, 0.10); --vkl-accent-tint-2: rgba(0, 113, 227, 0.18); /* elevation --------------------------------------------------------- */ --vkl-shadow-sm: 0 1px 2px rgba(18, 20, 26, 0.06); --vkl-shadow: 0 1px 2px rgba(18, 20, 26, 0.05), 0 10px 24px -16px rgba(18, 20, 26, 0.35); --vkl-shadow-md: 0 2px 6px rgba(18, 20, 26, 0.06), 0 18px 40px -22px rgba(18, 20, 26, 0.45); --vkl-shadow-lg: 0 8px 20px rgba(18, 20, 26, 0.08), 0 32px 70px -28px rgba(18, 20, 26, 0.5); color-scheme: light; } /* ========================================================================= 1. Canvas ========================================================================= */ html[data-theme="light"] body { background-color: var(--vkl-canvas) !important; color: var(--vkl-ink) !important; } html[data-theme="light"] #vokaaly-page-content, html[data-theme="light"] #main-content, html[data-theme="light"] main, html[data-theme="light"] .vkl-page-wrapper, html[data-theme="light"] .vocals-page-wrapper, html[data-theme="light"] .dashboard-container, html[data-theme="light"] .vmp { background-color: var(--vkl-canvas) !important; color: var(--vkl-ink) !important; } html[data-theme="light"] ::selection { background: rgba(0, 113, 227, 0.16); color: var(--vkl-ink); } html[data-theme="light"] .gradient-text, html[data-theme="light"] .v-gradient-text, html[data-theme="light"] .hiw-gradient-text { background: linear-gradient(140deg, #17181c 0%, #5b6070 100%) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; } html[data-theme="light"] .text-stroke { -webkit-text-stroke: 1px rgba(20, 22, 28, 0.2) !important; } /* ========================================================================= 2. Content that must stay light: brand fills and scrims over artwork ========================================================================= */ /* A translucent black layer stretched over artwork (absolute inset-0) is a scrim: it stays dark, so the glyphs printed on it stay white. A black wash used as chrome or as a card is handled further down as a light surface. */ html[data-theme="light"] :is([class*="bg-black/"][class*="inset-0"], .play-icon-overlay, .vmp-play-overlay, .play-overlay, .play-bg), html[data-theme="light"] :is([class*="bg-black/"][class*="inset-0"], .play-icon-overlay, .vmp-play-overlay, .play-overlay, .play-bg) :is(.text-white, .fill-white, i, svg, span, p, strong, h1, h2, h3, h4, [class*="text-white/"], [class*="text-neutral-"], [class*="text-zinc-"]) { color: #ffffff !important; } html[data-theme="light"] :is([class*="bg-black/"][class*="inset-0"], .play-icon-overlay, .vmp-play-overlay, .play-overlay) :is(.fill-white, svg) { fill: #ffffff !important; } /* ...and a black wash used as a bar, a sidebar or a card becomes a surface. */ html[data-theme="light"] header[class*="bg-black/"], html[data-theme="light"] nav[class*="bg-black/"], html[data-theme="light"] aside[class*="bg-black/"], html[data-theme="light"] [class*="bg-black/"][class*="rounded-"]:not([class*="inset-0"]):not(.play-overlay) { background-color: rgba(255, 255, 255, 0.9) !important; border-color: var(--vkl-line) !important; color: var(--vkl-ink) !important; } html[data-theme="light"] :is(header[class*="bg-black/"], nav[class*="bg-black/"], aside[class*="bg-black/"], [class*="bg-black/"][class*="rounded-"]:not([class*="inset-0"]):not(.play-overlay)) :is(.text-white, .fill-white) { color: var(--vkl-ink) !important; } html[data-theme="light"] :is([class~="bg-stickz-blue"], [class~="bg-stickz-blueHover"], [class~="bg-blue-500"], [class~="bg-blue-600"], [class~="bg-blue-700"], [class~="bg-[#0071e3]"], [class~="bg-[#0081f2]"], [class~="bg-[#2563eb]"], [class~="bg-[#005bb5]"], [class~="bg-[#0060c7]"], [class~="bg-emerald-400"], [class~="bg-emerald-500"], [class~="bg-emerald-600"], [class~="bg-green-500"], [class~="bg-green-600"], [class~="bg-[#10b981]"], [class~="bg-rose-500"], [class~="bg-rose-600"], [class~="bg-red-500"], [class~="bg-red-600"], [class~="bg-[#FF3B30]"], [class~="bg-[#ff453a]"], [class~="bg-amber-500"], [class~="bg-orange-500"], [class~="bg-purple-500"], [class~="bg-purple-600"], [class~="bg-indigo-600"], [class~="from-blue-500"], [class~="from-blue-600"], [class~="from-purple-600"]):is(.text-white, .fill-white), html[data-theme="light"] :is([class~="bg-stickz-blue"], [class~="bg-stickz-blueHover"], [class~="bg-blue-500"], [class~="bg-blue-600"], [class~="bg-blue-700"], [class~="bg-[#0071e3]"], [class~="bg-[#0081f2]"], [class~="bg-[#2563eb]"], [class~="bg-[#005bb5]"], [class~="bg-[#0060c7]"], [class~="bg-emerald-400"], [class~="bg-emerald-500"], [class~="bg-emerald-600"], [class~="bg-green-500"], [class~="bg-green-600"], [class~="bg-[#10b981]"], [class~="bg-rose-500"], [class~="bg-rose-600"], [class~="bg-red-500"], [class~="bg-red-600"], [class~="bg-[#FF3B30]"], [class~="bg-[#ff453a]"], [class~="bg-amber-500"], [class~="bg-orange-500"], [class~="bg-purple-500"], [class~="bg-purple-600"], [class~="bg-indigo-600"], [class~="from-blue-500"], [class~="from-blue-600"], [class~="from-purple-600"]) :is(.text-white, .fill-white, [class*="text-white/"]) { color: #ffffff !important; fill: #ffffff !important; } /* Chips and dividers printed inside a brand fill keep their white wash. */ html[data-theme="light"] :is([class~="bg-stickz-blue"], [class~="bg-blue-500"], [class~="bg-blue-600"], [class~="bg-blue-700"], [class~="bg-[#0071e3]"], [class~="bg-[#0081f2]"], [class~="bg-[#2563eb]"], [class~="bg-emerald-500"], [class~="bg-emerald-600"], [class~="bg-rose-500"], [class~="bg-red-500"], [class~="bg-purple-600"]) :is([class*="bg-white/"], [class*="bg-white\\/"]) { background-color: rgba(255, 255, 255, 0.22) !important; } /* Pastel fills keep their dark type. */ html[data-theme="light"] :is([class~="bg-[#EDFF96]"], [class~="bg-[#FF96C5]"]):is(.text-black, [class~="text-[#050505]"]), html[data-theme="light"] :is([class~="bg-[#EDFF96]"], [class~="bg-[#FF96C5]"]) :is(.text-black, [class~="text-[#050505]"]) { color: #17181c !important; } /* ========================================================================= 3. Logos and monochrome artwork ========================================================================= */ html[data-theme="light"] img[src*="logo"], html[data-theme="light"] .vkl-logo-img { filter: brightness(0) !important; } html[data-theme="light"] .logo-slider-container img { filter: brightness(0) !important; opacity: 0.5; } html[data-theme="light"] .vkl-verified-icon, html[data-theme="light"] .vkl-vocal-row.product-card.playing-active .vkl-verified-icon { filter: none !important; } /* The verified tick is a black glyph inverted to white for the dark UI; on light it takes the brand blue instead of turning invisible. */ html[data-theme="light"] .bluefiltercheck { filter: brightness(0) saturate(100%) invert(37%) sepia(34%) saturate(5261%) hue-rotate(191deg) brightness(102%) contrast(100%) !important; } /* Signatures and other user artwork are dark ink on transparent. */ html[data-theme="light"] #vkl-sig-current-img, html[data-theme="light"] .vkl-signature-img { filter: none !important; } /* ========================================================================= 4. Theme switch ========================================================================= */ .vkl-theme-toggle { align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 9999px; border: none; background: transparent; color: inherit; cursor: pointer; transition: background-color 0.25s ease, color 0.25s ease; } .vkl-theme-toggle:hover { background: rgba(255, 255, 255, 0.10); } html[data-theme="light"] .vkl-theme-toggle { color: var(--vkl-ink-2) !important; } html[data-theme="light"] .vkl-theme-toggle:hover { background: rgba(20, 22, 28, 0.06); color: var(--vkl-ink) !important; } .vkl-theme-icon-light { display: none; } html[data-theme="light"] .vkl-theme-icon-dark { display: none; } html[data-theme="light"] .vkl-theme-icon-light { display: inline-block; } .vkl-theme-toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 14px 20px; border-radius: 16px; background: rgba(255, 255, 255, 0.05); color: #a3a3a3; font-size: 12px; font-weight: 900; letter-spacing: 0.1em; text-transform: uppercase; border: none; cursor: pointer; } html[data-theme="light"] .vkl-theme-toggle-row { background: var(--vkl-surface); border: 1px solid var(--vkl-line); box-shadow: var(--vkl-shadow-sm); color: var(--vkl-ink-2); } /* ========================================================================= 5. Header, navigation, overlays ========================================================================= */ html[data-theme="light"] header.glass-header.scrolled, html[data-theme="light"] .glass-header.scrolled { background: rgba(242, 241, 241, 0.78) !important; border-bottom: 1px solid var(--vkl-line) !important; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset !important; } html[data-theme="light"] #desktop-nav a { color: var(--vkl-ink-3) !important; } html[data-theme="light"] #desktop-nav a:hover { color: var(--vkl-ink) !important; } html[data-theme="light"] #sidebar-overlay, html[data-theme="light"] #auth-backdrop { background: rgba(20, 22, 28, 0.32) !important; } html[data-theme="light"] #mobile-menu-sidebar, html[data-theme="light"] #mobile-auth-sidebar, html[data-theme="light"] #vkl-mobile-filter-sidebar { background: var(--vkl-surface) !important; border-color: var(--vkl-line) !important; box-shadow: var(--vkl-shadow-lg) !important; } html[data-theme="light"] #user-dropdown, html[data-theme="light"] #mini-cart, html[data-theme="light"] .vkl-dropdown-menu { background: var(--vkl-surface) !important; border-color: var(--vkl-line) !important; box-shadow: var(--vkl-shadow-lg) !important; } /* ========================================================================= 6. Controls: primary action, ghost buttons, inputs ========================================================================= */ /* The dark UI's white pill is the primary action; on light it becomes ink. */ html[data-theme="light"] .bg-white:is(a, button, [role="button"]), html[data-theme="light"] :is(a, button, [role="button"]).bg-white { background-color: var(--vkl-ink) !important; color: #ffffff !important; box-shadow: var(--vkl-shadow) !important; } html[data-theme="light"] :is(a, button).bg-white:hover { background-color: var(--vkl-ink-hover) !important; } html[data-theme="light"] :is(a, button).bg-white :is(i, svg, span) { color: #ffffff !important; } html[data-theme="light"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), html[data-theme="light"] textarea, html[data-theme="light"] select { color: var(--vkl-ink); } html[data-theme="light"] select option { background: var(--vkl-surface); color: var(--vkl-ink); } html[data-theme="light"] input::placeholder, html[data-theme="light"] textarea::placeholder { color: var(--vkl-ink-4); } html[data-theme="light"] input:focus-visible, html[data-theme="light"] textarea:focus-visible, html[data-theme="light"] select:focus-visible { outline-color: var(--vkl-accent); } /* ========================================================================= 7. Scrollbars ========================================================================= */ html[data-theme="light"] ::-webkit-scrollbar-track, html[data-theme="light"] .custom-scrollbar::-webkit-scrollbar-track, html[data-theme="light"] .custom-vocal-scrollbar::-webkit-scrollbar-track { background: rgba(20, 22, 28, 0.04) !important; } html[data-theme="light"] ::-webkit-scrollbar-thumb, html[data-theme="light"] .custom-scrollbar::-webkit-scrollbar-thumb, html[data-theme="light"] .custom-vocal-scrollbar::-webkit-scrollbar-thumb, html[data-theme="light"] .vkl-dropdown-menu::-webkit-scrollbar-thumb { background: rgba(20, 22, 28, 0.18) !important; border-color: transparent !important; } html[data-theme="light"] .custom-scrollbar::-webkit-scrollbar-thumb:hover, html[data-theme="light"] .custom-vocal-scrollbar::-webkit-scrollbar-thumb:hover, html[data-theme="light"] .vkl-dropdown-menu::-webkit-scrollbar-thumb:hover { background: var(--vkl-accent) !important; } html[data-theme="light"] .custom-scrollbar { scrollbar-color: rgba(20, 22, 28, 0.2) transparent !important; } /* ========================================================================= 8. Catalog: rows, filter bar, carousel ========================================================================= */ html[data-theme="light"] .vkl-vocal-row.product-card, html[data-theme="light"] .vocal-row { background: var(--vkl-surface) !important; border: 1px solid var(--vkl-line) !important; box-shadow: var(--vkl-shadow-sm) !important; } html[data-theme="light"] .vkl-vocal-row.product-card:hover { background: var(--vkl-surface) !important; border-color: rgba(0, 113, 227, 0.4) !important; box-shadow: 0 2px 4px rgba(18, 20, 26, 0.05), 0 18px 38px -20px rgba(0, 92, 190, 0.45) !important; } html[data-theme="light"] .vkl-vocal-row.product-card.playing-active, html[data-theme="light"] .vocal-row.playing-active, html[data-theme="light"] .product-card.playing-active { background: linear-gradient(90deg, rgba(0, 113, 227, 0.10) 0%, rgba(0, 113, 227, 0.02) 100%) !important; border-color: rgba(0, 113, 227, 0.45) !important; box-shadow: 0 14px 34px -18px rgba(0, 92, 190, 0.55) !important; } html[data-theme="light"] .vkl-vocal-row.product-card.playing-active h3, html[data-theme="light"] .vkl-vocal-row.product-card.playing-active span:not(.text-blue-400):not(.text-emerald-400):not(.text-purple-400):not(.text-amber-400), html[data-theme="light"] .vkl-vocal-row.product-card.playing-active i { color: var(--vkl-ink) !important; } /* Row artwork keeps its dark scrim + white glyph (it sits on a photo). */ html[data-theme="light"] .play-preview-hitbox img+div, html[data-theme="light"] .play-preview-hitbox .play-icon-overlay { color: #ffffff !important; } html[data-theme="light"] .vkl-vocal-row.product-card.playing-active .play-preview-hitbox, html[data-theme="light"] .play-preview-hitbox.playing-active { background-color: var(--vkl-accent) !important; color: #ffffff !important; } html[data-theme="light"] .vkl-vocal-row.product-card.playing-active .play-preview-hitbox i, html[data-theme="light"] .play-preview-hitbox.playing-active i { color: #ffffff !important; } html[data-theme="light"] #vkl-unique-filters, html[data-theme="light"] #vkl-shop-filters { background: rgba(242, 241, 241, 0.9) !important; border-bottom: 1px solid var(--vkl-line) !important; } html[data-theme="light"] .vkl-mobile-key-circle.bg-white { background-color: var(--vkl-ink) !important; color: #ffffff !important; border-color: var(--vkl-ink) !important; box-shadow: var(--vkl-shadow) !important; } html[data-theme="light"] .vkl-dropdown-root.open .vkl-dropdown-trigger { background: var(--vkl-accent-tint) !important; border-color: var(--vkl-accent) !important; color: var(--vkl-accent-ink) !important; } html[data-theme="light"] .vkl-bpm-range-input::-webkit-slider-thumb, html[data-theme="light"] #vkl-bpm-range-min::-webkit-slider-thumb, html[data-theme="light"] #vkl-bpm-range-max::-webkit-slider-thumb { border-color: #ffffff !important; box-shadow: var(--vkl-shadow-sm) !important; } html[data-theme="light"] .vkl-bpm-range-input::-moz-range-thumb { border-color: #ffffff !important; } html[data-theme="light"] .vkl-carousel-item { border-color: var(--vkl-line) !important; box-shadow: var(--vkl-shadow) !important; } html[data-theme="light"] .vkl-btn-shimmer::after { background: linear-gradient(90deg, transparent, rgba(20, 22, 28, 0.04) 30%, rgba(20, 22, 28, 0.09) 50%, rgba(20, 22, 28, 0.04) 70%, transparent) !important; } /* ========================================================================= 9. Cards, tooltips, product page ========================================================================= */ html[data-theme="light"] .glass-card { background: rgba(255, 255, 255, 0.78) !important; border: 1px solid var(--vkl-line) !important; box-shadow: var(--vkl-shadow) !important; } html[data-theme="light"] .glass-card:hover { border-color: var(--vkl-line-2) !important; box-shadow: var(--vkl-shadow-md) !important; } html[data-theme="light"] .bento-card { background: var(--vkl-surface) !important; border: 1px solid var(--vkl-line) !important; box-shadow: var(--vkl-shadow-sm) !important; } html[data-theme="light"] .bento-card:hover { background: var(--vkl-surface) !important; border-color: rgba(0, 113, 227, 0.32) !important; box-shadow: var(--vkl-shadow-md) !important; } html[data-theme="light"] .tooltip-content { background: var(--vkl-ink) !important; border-color: rgba(20, 22, 28, 0.28) !important; color: #ffffff !important; box-shadow: var(--vkl-shadow-md) !important; } html[data-theme="light"] .tooltip-content * { color: #ffffff !important; } html[data-theme="light"] .tooltip-content::before { border-color: rgba(20, 22, 28, 0.28) transparent transparent !important; } html[data-theme="light"] .tooltip-content::after { border-color: var(--vkl-ink) transparent transparent !important; } html[data-theme="light"] .vkl-stems-tab-active { background: var(--vkl-accent-tint) !important; color: var(--vkl-accent-ink) !important; } html[data-theme="light"] .vkl-stems-tab:hover:not(.vkl-stems-tab-active) { background: rgba(20, 22, 28, 0.04) !important; } /* ========================================================================= 10. Audio: sticky player and waveforms ========================================================================= */ html[data-theme="light"] #sticky-player { background: rgba(255, 255, 255, 0.92) !important; backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); border-top: 1px solid var(--vkl-line) !important; box-shadow: 0 -12px 40px -24px rgba(18, 20, 26, 0.55) !important; color: var(--vkl-ink) !important; } html[data-theme="light"] #play-pause-btn, html[data-theme="light"] #vkl-mobile-play-btn { background: var(--vkl-ink) !important; color: #ffffff !important; box-shadow: var(--vkl-shadow) !important; } html[data-theme="light"] #play-pause-btn:hover { background: var(--vkl-accent) !important; } html[data-theme="light"] #play-pause-btn i, html[data-theme="light"] #vkl-mobile-play-btn i { color: #ffffff !important; } html[data-theme="light"] #player-prev-btn, html[data-theme="light"] #player-next-btn, html[data-theme="light"] #sticky-player .close-player { color: var(--vkl-ink-3) !important; } html[data-theme="light"] #player-prev-btn:hover, html[data-theme="light"] #player-next-btn:hover, html[data-theme="light"] #sticky-player .close-player:hover { color: var(--vkl-ink) !important; } html[data-theme="light"] #sticky-player .text-white { color: var(--vkl-ink) !important; } html[data-theme="light"] #player-img { border: 1px solid var(--vkl-line); } /* ========================================================================= 11. Forms: auth, singer application, onboarding ========================================================================= */ html[data-theme="light"] .vkl-auth-container .vkl-input, html[data-theme="light"] #singer-apply-card .vkl-input, html[data-theme="light"] .vkl-input { background: var(--vkl-surface-2) !important; border-color: var(--vkl-line-2) !important; color: var(--vkl-ink) !important; } html[data-theme="light"] .vkl-auth-container .vkl-input:focus, html[data-theme="light"] #singer-apply-card .vkl-input:focus { background: var(--vkl-surface) !important; border-color: var(--vkl-accent) !important; box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.14) !important; } html[data-theme="light"] .vkl-auth-container .vkl-input::placeholder, html[data-theme="light"] #singer-apply-card .vkl-input::placeholder { color: var(--vkl-ink-4) !important; } html[data-theme="light"] .vkl-auth-container .vkl-label, html[data-theme="light"] #singer-apply-card .vkl-label { color: var(--vkl-ink-3) !important; } html[data-theme="light"] #auth-modal-content, html[data-theme="light"] #singer-apply-card, html[data-theme="light"] #vkl-onboarding-overlay>div { background: var(--vkl-surface) !important; border: 1px solid var(--vkl-line) !important; box-shadow: var(--vkl-shadow-lg) !important; } html[data-theme="light"] #vkl-onboarding-overlay { background: rgba(20, 22, 28, 0.35) !important; } html[data-theme="light"] #close-auth-modal:hover, html[data-theme="light"] #close-singer-modal:hover { background: rgba(20, 22, 28, 0.06) !important; color: var(--vkl-ink) !important; } html[data-theme="light"] #singer-apply-card .dropdown-menu { background: var(--vkl-surface) !important; border-color: var(--vkl-line) !important; box-shadow: var(--vkl-shadow-lg) !important; } html[data-theme="light"] #singer-apply-card .dropdown-item:hover { background: var(--vkl-accent-tint) !important; color: var(--vkl-accent-ink) !important; } html[data-theme="light"] #singer-apply-card .dropdown-item, html[data-theme="light"] #singer-apply-card .selected-value { color: var(--vkl-ink-3) !important; } html[data-theme="light"] .singer-chk-box, html[data-theme="light"] .vkl-auth-container .vkl-chk-box { border-color: var(--vkl-line-3) !important; background: var(--vkl-surface) !important; } html[data-theme="light"] #vkl-onboarding-overlay .vkl-ob-step, html[data-theme="light"] #vkl-ob-font-menu, html[data-theme="light"] #vkl-ob-font-trigger, html[data-theme="light"] #vkl-onboarding-overlay input[type="text"], html[data-theme="light"] #vkl-onboarding-overlay input[type="email"] { background: var(--vkl-surface-2) !important; border-color: var(--vkl-line) !important; color: var(--vkl-ink) !important; } /* These modals colour themselves with inline styles. */ html[data-theme="light"] :is(#auth-modal, .vkl-auth-container, #singer-apply-card, #vkl-onboarding-overlay) :is([style*="color:white"], [style*="color: white"], [style*="color:#fff"], [style*="color: #fff"]):not(.vkl-chk-box *):not(.singer-chk-box *):not(.vkl-submit-btn):not(.vkl-submit-btn *):not(.vkl-ob-save-btn):not(.vkl-ob-save-btn *):not(#vkl-ob-finish):not(#vkl-ob-sig-preview) { color: var(--vkl-ink) !important; } html[data-theme="light"] :is(#auth-modal, .vkl-auth-container, #singer-apply-card, #vkl-onboarding-overlay) :is([style*="color:rgba(255,255,255"], [style*="color: rgba(255,255,255"], [style*="color:rgba(255, 255, 255"]) { color: var(--vkl-ink-3) !important; } /* ========================================================================= 12. Singer dashboard ========================================================================= */ html[data-theme="light"] .vkl-active-nav-bullet { color: var(--vkl-ink) !important; background: var(--vkl-surface) !important; box-shadow: var(--vkl-shadow-sm) !important; } html[data-theme="light"] .vkl-active-nav-bullet::before { background-color: var(--vkl-accent) !important; } html[data-theme="light"] .nav-btn:not(.vkl-active-nav-bullet):hover { background: rgba(20, 22, 28, 0.04) !important; color: var(--vkl-ink) !important; } html[data-theme="light"] .nav-btn-mobile:not(.bg-blue-600) { background: var(--vkl-surface) !important; border-color: var(--vkl-line) !important; color: var(--vkl-ink-3) !important; } /* Dashboard hero + stat tiles: the dark gradients become a light brand wash. */ html[data-theme="light"] [class*="from-[#0f1020]"], html[data-theme="light"] [class*="from-[#12141a]"], html[data-theme="light"] [class*="from-[#1a1c2e]"] { background-image: linear-gradient(135deg, #ffffff 0%, #eef3fc 100%) !important; border-color: var(--vkl-line) !important; box-shadow: var(--vkl-shadow) !important; } html[data-theme="light"] .vkl-stat-card, html[data-theme="light"] [class*="from-[#0f1020]"] .text-white { color: var(--vkl-ink) !important; } /* Lyrics editor: a transparent textarea over a coloured highlight layer. */ html[data-theme="light"] #vkl-main-lyrics-highlighter, html[data-theme="light"] #vkl-lyrics-highlighter { color: var(--vkl-ink) !important; } html[data-theme="light"] #vkl-lyrics-modal-textarea, html[data-theme="light"] textarea[name="lyrics"] { caret-color: var(--vkl-ink) !important; } html[data-theme="light"] :is(#vkl-main-lyrics-highlighter, #vkl-lyrics-highlighter) span[style*="#34d399"] { color: #1f8f66 !important; } html[data-theme="light"] .sig-font-item:hover:not(.active-font) { border-color: var(--vkl-line-2) !important; background-color: rgba(20, 22, 28, 0.04) !important; } html[data-theme="light"] .sig-font-item.active-font { border-color: var(--vkl-accent) !important; background-color: var(--vkl-accent-tint) !important; } html[data-theme="light"] .account-indicator, html[data-theme="light"] .bg-card { background: var(--vkl-surface) !important; } html[data-theme="light"] table thead th { color: var(--vkl-ink-4) !important; border-color: var(--vkl-line) !important; } html[data-theme="light"] table tbody td { color: var(--vkl-ink-2) !important; border-color: var(--vkl-line) !important; } html[data-theme="light"] .custom-scrollbar::-webkit-scrollbar-thumb { border-color: transparent !important; } /* Drop zones and empty states read as dashed wells, not as dark holes. */ html[data-theme="light"] [class*="border-dashed"] { border-color: var(--vkl-line-2) !important; background-color: rgba(20, 22, 28, 0.02) !important; } /* ========================================================================= 13. Buyer account (desktop + mobile) ========================================================================= */ html[data-theme="light"] .vkl-buyer-mob { background: var(--vkl-canvas) !important; color: var(--vkl-ink) !important; } html[data-theme="light"] #vkl-mob-sidebar, html[data-theme="light"] .vkl-buyer-mob form.woocommerce-EditAccountForm, html[data-theme="light"] .vkl-buyer-mob header .flex.items-center.bg-white\/\[0\.02\] { background: var(--vkl-surface) !important; border-color: var(--vkl-line) !important; } html[data-theme="light"] .vkl-buyer-mob header { background: rgba(255, 255, 255, 0.92) !important; border-bottom: 1px solid var(--vkl-line) !important; } html[data-theme="light"] .vkl-buyer-mob header #header-title { color: var(--vkl-ink) !important; border-color: var(--vkl-line) !important; } html[data-theme="light"] .vkl-buyer-mob header button:hover { background: rgba(20, 22, 28, 0.05) !important; } html[data-theme="light"] .vkl-buyer-mob thead th { color: var(--vkl-ink-4) !important; } html[data-theme="light"] .vkl-buyer-mob tbody td { color: var(--vkl-ink-2) !important; } html[data-theme="light"] .vkl-buyer-mob .woocommerce-form-row input, html[data-theme="light"] .vkl-buyer-mob .woocommerce-form-row select, html[data-theme="light"] .vkl-buyer-mob form.woocommerce-EditAccountForm input[type="text"], html[data-theme="light"] .vkl-buyer-mob form.woocommerce-EditAccountForm input[type="email"], html[data-theme="light"] .vkl-buyer-mob form.woocommerce-EditAccountForm input[type="password"], html[data-theme="light"] .vkl-buyer-mob form.woocommerce-EditAccountForm select, html[data-theme="light"] .vkl-buyer-mob .vocal-row .group\/pdf>div { background: var(--vkl-surface-2) !important; border-color: var(--vkl-line-2) !important; color: var(--vkl-ink) !important; } html[data-theme="light"] .vkl-buyer-mob form.woocommerce-EditAccountForm .flex-col.md\:flex-row, html[data-theme="light"] .vkl-buyer-mob .vocal-row { background: var(--vkl-surface) !important; border-color: var(--vkl-line) !important; box-shadow: var(--vkl-shadow-sm) !important; } html[data-theme="light"] .vkl-buyer-mob .vocal-row .group\/pdf>button { background: var(--vkl-surface-2) !important; border-color: var(--vkl-line) !important; color: var(--vkl-ink-3) !important; } html[data-theme="light"] .vkl-buyer-mob .vocal-row button[data-pdf-order="1"]:hover, html[data-theme="light"] .vkl-buyer-mob .vocal-row button[data-pdf-license="1"]:hover, html[data-theme="light"] .vkl-buyer-mob .vocal-row button[data-pdf-lyrics="1"]:hover { background: var(--vkl-accent-tint) !important; color: var(--vkl-accent-ink) !important; } html[data-theme="light"] .select2-dropdown, html[data-theme="light"] .select2-results__option, html[data-theme="light"] .select2-search--dropdown, html[data-theme="light"] .select2-search--dropdown .select2-search__field { background-color: var(--vkl-surface) !important; border-color: var(--vkl-line-2) !important; color: var(--vkl-ink-2) !important; } html[data-theme="light"] .select2-results__option--highlighted[aria-selected], html[data-theme="light"] .select2-results__option[aria-selected="true"] { background-color: var(--vkl-accent) !important; color: #ffffff !important; } /* ========================================================================= 14. Checkout, thank-you, verification ========================================================================= */ html[data-theme="light"] #vkl-checkout-page { background: linear-gradient(to right, #ffffff 0%, #ffffff max(380px, calc(50% - 270px)), var(--vkl-canvas) max(380px, calc(50% - 270px)), var(--vkl-canvas) 100%) !important; color: var(--vkl-ink) !important; } html[data-theme="light"] .vkl-checkout-aside { background: #ffffff !important; border-right-color: var(--vkl-line) !important; } html[data-theme="light"] .vkl-terms-wrap { background: var(--vkl-surface-2) !important; border-color: var(--vkl-line) !important; } html[data-theme="light"] .vkl-terms-wrap:hover { background: var(--vkl-surface-3) !important; border-color: var(--vkl-line-2) !important; } html[data-theme="light"] .vkl-checkbox-custom { background: var(--vkl-surface) !important; border-color: var(--vkl-line-3) !important; } html[data-theme="light"] .vkl-terms-text a, html[data-theme="light"] .vkl-back-link:hover, html[data-theme="light"] .vkl-mobile-back:hover, html[data-theme="light"] .vkl-mobile-title, html[data-theme="light"] .vkl-step span, html[data-theme="light"] .vkl-ty-header h1, html[data-theme="light"] .vkl-ty-info-item strong, html[data-theme="light"] .vkl-ty-failed-meta-item strong, html[data-theme="light"] .vkl-ty-item-name, html[data-theme="light"] .vkl-ty-item-total, html[data-theme="light"] .vkl-btn-ghost:hover, html[data-theme="light"] #vkl-verify-page h1, html[data-theme="light"] .vkl-verify-home:hover, html[data-theme="light"] #vkl-terms-modal-body h1, html[data-theme="light"] #vkl-terms-modal-body h2 { color: var(--vkl-ink) !important; } html[data-theme="light"] .vkl-product-thumb, html[data-theme="light"] .vkl-multi-thumb, html[data-theme="light"] .vkl-order-totals, html[data-theme="light"] .vkl-aside-footer, html[data-theme="light"] .vkl-ty-item, html[data-theme="light"] .vkl-ty-item-img-wrap, html[data-theme="light"] .vkl-ty-items-list, html[data-theme="light"] .vkl-btn-ghost { border-color: var(--vkl-line) !important; } html[data-theme="light"] .vkl-mobile-head, html[data-theme="light"] .vkl-mobile-back-wrap, html[data-theme="light"] .vkl-auth-card, html[data-theme="light"] .vkl-method-card, html[data-theme="light"] .vkl-paypal-hint-box, html[data-theme="light"] .vkl-terms-modal-content { background: var(--vkl-surface) !important; border-color: var(--vkl-line) !important; } html[data-theme="light"] .vkl-auth-card, html[data-theme="light"] .vkl-terms-modal-content { box-shadow: var(--vkl-shadow-lg) !important; } html[data-theme="light"] .vkl-method-card { box-shadow: var(--vkl-shadow-sm) !important; } html[data-theme="light"] .vkl-method-card:hover { background: var(--vkl-surface) !important; border-color: var(--vkl-accent) !important; box-shadow: var(--vkl-shadow) !important; } html[data-theme="light"] .vkl-step-line { background: var(--vkl-line-2) !important; } html[data-theme="light"] .vkl-step-dot { background: var(--vkl-surface) !important; border-color: var(--vkl-line-2) !important; color: var(--vkl-ink-4) !important; } html[data-theme="light"] .vkl-skel-bar { background: var(--vkl-surface-2) !important; border-color: var(--vkl-line) !important; } html[data-theme="light"] .vkl-cf-input, html[data-theme="light"] .vkl-cf-select { background: var(--vkl-surface-2) !important; border-color: var(--vkl-line-2) !important; color: var(--vkl-ink) !important; } html[data-theme="light"] .vkl-cf-input:focus, html[data-theme="light"] .vkl-cf-sf.vkl-sf-focus { background: var(--vkl-surface) !important; border-color: var(--vkl-accent) !important; box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.14) !important; } html[data-theme="light"] .vkl-cf-input::placeholder { color: var(--vkl-ink-4) !important; } html[data-theme="light"] .vkl-cf-select option { background: var(--vkl-surface) !important; color: var(--vkl-ink) !important; } html[data-theme="light"] .vkl-terms-modal-close { background: rgba(20, 22, 28, 0.05) !important; border-color: var(--vkl-line) !important; color: var(--vkl-ink) !important; } html[data-theme="light"] .vkl-terms-modal-backdrop, html[data-theme="light"] #vkl-processing-overlay { background: rgba(20, 22, 28, 0.45) !important; } html[data-theme="light"] #vkl-processing-overlay h3 { color: #ffffff !important; } html[data-theme="light"] #vkl-thankyou-page, html[data-theme="light"] #vkl-verify-page { background-color: var(--vkl-canvas) !important; } html[data-theme="light"] .vkl-ty-details-card { background: var(--vkl-surface) !important; border-color: var(--vkl-line) !important; box-shadow: var(--vkl-shadow-md) !important; } html[data-theme="light"] .vkl-ty-items-list { background: var(--vkl-surface-2) !important; } html[data-theme="light"] .vkl-ty-icon-lock, html[data-theme="light"] .vkl-verify-icon-wrap { background: linear-gradient(135deg, rgba(20, 22, 28, 0.06), rgba(20, 22, 28, 0.02)) !important; border-color: var(--vkl-line) !important; } /* The credit-card preview is artwork: it stays dark in both themes. */ html[data-theme="light"] .vkl-card-front, html[data-theme="light"] .vkl-card-back { color: #ffffff !important; } html[data-theme="light"] :is(.vkl-card-front, .vkl-card-back) * { color: inherit !important; } /* ========================================================================= 15. Marketing pages, editorial, mobile product page ========================================================================= */ html[data-theme="light"] { --hiw-glass: rgba(20, 22, 28, 0.02); --hiw-glass-hover: rgba(20, 22, 28, 0.04); --hiw-border: rgba(20, 22, 28, 0.09); --hiw-text-muted: #646975; --v-dark: #f2f1f1; --v-glass: rgba(20, 22, 28, 0.02); --v-border: rgba(20, 22, 28, 0.09); --v-text-muted: #646975; } html[data-theme="light"] #singers-root, html[data-theme="light"] #singers-mobile-root { color: var(--vkl-ink) !important; } html[data-theme="light"] :is(#singers-root, #singers-mobile-root, #hiw-root) :is([style*="color: white"], [style*="color:white"]) { color: var(--vkl-ink) !important; } html[data-theme="light"] :is(#singers-root, #singers-mobile-root, #hiw-root) [style*="color: rgba(255,255,255"] { color: var(--vkl-ink-3) !important; } /* "Become a singer" CTA: the white pill becomes the ink pill. */ html[data-theme="light"] .v-btn-primary { background: var(--vkl-ink) !important; color: #ffffff !important; box-shadow: var(--vkl-shadow) !important; } html[data-theme="light"] .v-btn-primary:hover { background: var(--vkl-ink-hover) !important; } html[data-theme="light"] .hiw-timeline::before { background: var(--vkl-line-2) !important; } html[data-theme="light"] .hiw-step-dot { background: var(--vkl-surface) !important; border-color: var(--vkl-line-3) !important; } html[data-theme="light"] .v-hero-bg { opacity: 0.22 !important; } html[data-theme="light"] .v-hero-bg img { filter: grayscale(100%) blur(4px) brightness(1.2) !important; } html[data-theme="light"] .v-hero-overlay { background: linear-gradient(180deg, rgba(242, 241, 241, 0) 0%, rgba(242, 241, 241, 0.85) 60%, var(--vkl-canvas) 100%) !important; } html[data-theme="light"] .hiw-faq-card.active { background: var(--vkl-surface) !important; border-color: rgba(0, 113, 227, 0.32) !important; box-shadow: var(--vkl-shadow) !important; } html[data-theme="light"] .post-content blockquote { background: var(--vkl-surface) !important; box-shadow: var(--vkl-shadow-sm) !important; } html[data-theme="light"] .post-content hr { background: linear-gradient(to right, transparent, var(--vkl-line-2), transparent) !important; } html[data-theme="light"] .post-content img { border-color: var(--vkl-line) !important; box-shadow: var(--vkl-shadow-md) !important; } html[data-theme="light"] .vmp, html[data-theme="light"] .vmp-popup { background: var(--vkl-canvas) !important; color: var(--vkl-ink) !important; } html[data-theme="light"] .vmp-tag { background: var(--vkl-surface) !important; border: 1px solid var(--vkl-line); color: var(--vkl-ink) !important; } html[data-theme="light"] .vmp-time { background: var(--vkl-surface) !important; color: var(--vkl-ink-3) !important; } html[data-theme="light"] .vmp-bg::after { background: linear-gradient(180deg, rgba(242, 241, 241, 0), var(--vkl-canvas)) !important; } html[data-theme="light"] .vmp-wishlist-btn, html[data-theme="light"] .vmp-cart-btn.is-sold { background: var(--vkl-surface-3) !important; color: var(--vkl-ink-3) !important; } html[data-theme="light"] .vmp-pkg-ico { background: var(--vkl-surface-3) !important; } html[data-theme="light"] .vmp-pkg-name, html[data-theme="light"] .vmp-popup-title, html[data-theme="light"] .vmp-popup-item, html[data-theme="light"] .vmp-pkg-head, html[data-theme="light"] .vmp-pkg-file, html[data-theme="light"] .vmp-more { color: var(--vkl-ink) !important; } html[data-theme="light"] .vmp-producer-avatar, html[data-theme="light"] .vmp-track-card__img { border-color: var(--vkl-line) !important; } html[data-theme="light"] .vmp-title, html[data-theme="light"] .vmp-more-title, html[data-theme="light"] .vmp-track-card__title, html[data-theme="light"] .vmp-pkg-title, html[data-theme="light"] .vmp-pkg-group-title, html[data-theme="light"] .vmp-back:hover, html[data-theme="light"] .vmp-producer-link:hover, html[data-theme="light"] .vmp-meta-btn:hover, html[data-theme="light"] .vmp-popup-back:hover { color: var(--vkl-ink) !important; } html[data-theme="light"] .vmp-also-from { background: var(--vkl-surface-3) !important; color: var(--vkl-ink-2) !important; } /* ========================================================================= 16. WooCommerce address form ========================================================================= */ html[data-theme="light"] .vokaaly-edit-address-form .input-text, html[data-theme="light"] .vokaaly-edit-address-form select, html[data-theme="light"] .vokaaly-edit-address-form .select2-container--default .select2-selection--single { background-color: var(--vkl-surface-2) !important; border-color: var(--vkl-line-2) !important; color: var(--vkl-ink) !important; } html[data-theme="light"] .vokaaly-edit-address-form .select2-container--default .select2-selection__rendered { color: var(--vkl-ink) !important; } html[data-theme="light"] .vkl-ty-failed-meta-divider { background: var(--vkl-line-2) !important; }