/* ============================================================ MWARE.STOCKA — MULTI-THEME LAYER Loaded AFTER theme.css. theme.css :root defines the default "Ocean Teal" tokens; the blocks below re-map those same tokens for the other themes, keyed on . Themes: ocean (default) · emerald · indigo · dark Switching = set document.documentElement.dataset.theme. ============================================================ */ /* Smooth, tasteful transition when the theme changes. Guarded so it doesn't fight reduced-motion users. */ :root { --theme-transition: background-color .35s ease, border-color .35s ease, color .25s ease, box-shadow .35s ease; } html[data-theme] body, html[data-theme] .dashboard-page, html[data-theme] .card, html[data-theme] .table, html[data-theme] .sidebar, html[data-theme] .dashboard-header, html[data-theme] .auth-shell, html[data-theme] .auth-card, html[data-theme] .btn { transition: var(--theme-transition); } @media (prefers-reduced-motion: reduce) { :root { --theme-transition: none; } } /* ===== OCEAN TEAL (default / explicit) ===== */ /* Values already live in theme.css :root — nothing to override. */ /* ===== EMERALD FRESH ===== */ :root[data-theme="emerald"] { --brand: #10b981; --brand-600: #059669; --brand-700: #047857; --brand-800: #065f46; --brand-tint: #d1fae5; --brand-tint-2: #a7f3d0; --brand-ring: rgba(16, 185, 129, 0.25); } /* ===== INDIGO CORPORATE ===== */ :root[data-theme="indigo"] { --brand: #6366f1; --brand-600: #4f46e5; --brand-700: #4338ca; --brand-800: #3730a3; --brand-tint: #e0e7ff; --brand-tint-2: #c7d2fe; --brand-ring: rgba(99, 102, 241, 0.28); } /* ===== MIDNIGHT DARK ===== */ :root[data-theme="dark"] { color-scheme: dark; /* Accent — bright teal that pops on dark surfaces */ --brand: #2dd4bf; --brand-600: #14b8a6; --brand-700: #5eead4; --brand-800: #99f6e4; --brand-tint: #123536; --brand-tint-2: #17494a; --brand-ring: rgba(45, 212, 191, 0.35); /* Text / ink — inverted ramp. Brightest tone is softened off pure white to avoid halation (which reads as "blurry") on the dark surfaces. */ --ink-900: #eef2f8; --ink-800: #dbe3ee; --ink-700: #c4cede; --ink-600: #9aa7ba; --ink-500: #8896a9; --ink-400: #6a7789; /* Surfaces & lines — lifted off pure black for depth and comfort */ --app-bg: #0b1220; --surface: #172136; --surface-1: #121b2e; --surface-2: #212e49; --line: #273451; --line-soft: #1b2740; /* Status — muted fills, legible ink on dark */ --success: #34d399; --success-bg: rgba(16, 185, 129, 0.16); --success-ink: #6ee7b7; --warning: #fbbf24; --warning-bg: rgba(245, 158, 11, 0.16); --warning-ink: #fcd34d; --danger: #f87171; --danger-bg: rgba(239, 68, 68, 0.16); --danger-ink: #fca5a5; --info: #60a5fa; --info-bg: rgba(59, 130, 246, 0.16); --info-ink: #93c5fd; /* Shadows — deeper on dark */ --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.45), 0 1px 2px rgba(0, 0, 0, 0.35); --shadow: 0 6px 20px rgba(0, 0, 0, 0.5); --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.6); } /* Dark-mode scrollbars */ :root[data-theme="dark"] * { scrollbar-color: #33425c transparent; } :root[data-theme="dark"] *::-webkit-scrollbar-thumb { background: #33425c; background-clip: content-box; } /* In dark mode the bright teal accent is perfect for text, links and icons, but as a BACKGROUND it leaves white text washed-out (reads as "blurry"). Give brand-coloured surfaces that carry white text a deep teal instead. */ :root[data-theme="dark"] .dashboard-header, :root[data-theme="dark"] .auth-brand, :root[data-theme="dark"] .btn-primary, :root[data-theme="dark"] .sidebar-nav a.active, :root[data-theme="dark"] .lp-hero__card, :root[data-theme="dark"] .lp-product__media, :root[data-theme="dark"] .lp-plan__badge, :root[data-theme="dark"] .lp-plan--featured .lp-plan__btn, :root[data-theme="dark"] .auth-main .btn-primary, :root[data-theme="dark"] .auth-main .btn-full-width, :root[data-theme="dark"] .btn-lp--primary { background: linear-gradient(135deg, #0f9488 0%, #0a5f58 100%); } /* Keep the success/pay actions green (semantic), but deep enough for white text */ :root[data-theme="dark"] .btn-success { background: linear-gradient(135deg, #0f9d6f 0%, #076647 100%); } /* Sidebar nav links read a touch brighter in dark mode for crispness */ :root[data-theme="dark"] .sidebar-nav a { color: var(--ink-700); } /* ============================================================ THEME SWITCHER COMPONENT Reusable control rendered by _ThemeSwitcher.cshtml. Self-contained so it looks right on landing, auth and dashboard. ============================================================ */ .theme-switch { position: relative; display: inline-block; font-family: var(--font, 'Inter', sans-serif); } .theme-switch__toggle { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px; border-radius: var(--r-pill, 999px); border: 1px solid var(--line, #e7ebf0); background: var(--surface, #fff); color: var(--ink-700, #334155); font-size: 13px; font-weight: 600; cursor: pointer; transition: border-color .2s, background .2s, transform .1s; -webkit-tap-highlight-color: transparent; } .theme-switch__toggle:hover { border-color: var(--brand); } .theme-switch__toggle:active { transform: scale(0.97); } .theme-switch__swatch { width: 16px; height: 16px; border-radius: 50%; background: var(--brand); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.55); flex: 0 0 auto; } .theme-switch__label { white-space: nowrap; } .theme-switch__caret { width: 14px; height: 14px; opacity: 0.6; transition: transform .2s; } .theme-switch.open .theme-switch__caret { transform: rotate(180deg); } .theme-switch__menu { position: absolute; top: calc(100% + 8px); right: 0; min-width: 220px; background: var(--surface, #fff); border: 1px solid var(--line, #e7ebf0); border-radius: var(--r, 12px); box-shadow: var(--shadow-lg, 0 12px 32px rgba(15, 23, 42, 0.18)); padding: 8px; z-index: 4000; opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .18s ease, transform .18s ease, visibility .18s; } .theme-switch.open .theme-switch__menu { opacity: 1; visibility: visible; transform: translateY(0); } .theme-switch__heading { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-500, #64748b); padding: 6px 10px 8px; } .theme-switch__option { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px; border: none; background: none; border-radius: var(--r-sm, 8px); cursor: pointer; text-align: left; color: var(--ink-800, #1e293b); font-size: 14px; font-weight: 500; transition: background .15s; } .theme-switch__option:hover { background: var(--surface-2, #f1f5f9); } .theme-switch__option[aria-checked="true"] { background: var(--brand-tint, #ccfbf1); color: var(--brand-800, #0b5d57); font-weight: 700; } .theme-switch__dot { width: 22px; height: 22px; border-radius: 50%; flex: 0 0 auto; border: 2px solid rgba(255, 255, 255, 0.6); box-shadow: var(--shadow-xs); } .theme-switch__dot--ocean { background: linear-gradient(135deg, #00A884, #0F766E); } .theme-switch__dot--emerald { background: linear-gradient(135deg, #10b981, #047857); } .theme-switch__dot--indigo { background: linear-gradient(135deg, #6366f1, #4338ca); } .theme-switch__dot--dark { background: linear-gradient(135deg, #1b2740, #2dd4bf); } .theme-switch__check { margin-left: auto; width: 18px; height: 18px; color: var(--brand-700); opacity: 0; } .theme-switch__option[aria-checked="true"] .theme-switch__check { opacity: 1; } /* On dark backgrounds (landing hero, auth brand panel) allow a translucent variant */ .theme-switch--on-dark .theme-switch__toggle { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.25); color: #fff; backdrop-filter: blur(6px); } .theme-switch--on-dark .theme-switch__toggle:hover { background: rgba(255, 255, 255, 0.2); border-color: rgba(255, 255, 255, 0.4); } /* Compact the switcher inside the dashboard header on small screens */ @media (max-width: 768px) { .user-menu .theme-switch__label { display: none; } .user-menu .theme-switch__toggle { padding: 0 9px; height: 36px; } .user-menu .theme-switch__menu { min-width: 200px; } }