/* * Light Theme — Gopnik Wallet 2026 Redesign * * This stylesheet defines a complementary light colour palette to the * existing cosmic (dark) theme. It follows the same naming scheme for * CSS variables so that both themes can share component definitions. * Simply toggle the `light-theme` class on the `` element to * activate these colours. The palette is inspired by modern UI trends * emphasising high contrast, spacious layouts and subtle gradients. See * our research on UI trends for 2026 that highlight minimalism with * purposeful micro‑interactions【838951392609359†L159-L171】 and hyper‑personalised * experiences【838951392609359†L78-L90】. */ :root { --light-bg: #f9f9fb; --light-bg-secondary: #ffffff; --light-bg-card: rgba(255, 255, 255, 0.65); --light-fg-dark: #1f2348; --light-fg-muted: #70779a; --light-accent: #7c3aed; /* violet */ --light-accent-hover: #5b21b6; --light-accent-secondary: #f97316; /* orange */ --light-accent-sec-hover: #c2410c; --light-teal: #0e7490; --light-green: #15803d; --light-red: #b91c1c; --light-yellow: #b45309; --light-glass-bg: rgba(255, 255, 255, 0.5); --light-glass-border: rgba(0, 0, 0, 0.1); --light-glass-bg-strong: rgba(255, 255, 255, 0.8); --light-shadow: 0 4px 24px rgba(0, 0, 0, 0.05); --light-shadow-glow: 0 0 24px rgba(124, 58, 237, 0.2); --light-radius: 14px; --light-radius-sm: 8px; --light-radius-lg: 20px; --light-transition: 0.22s cubic-bezier(0.4, 0, 0.2, 1); --light-font: 'Inter', 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif; } /* Body & Global */ body.light-theme { background-color: var(--light-bg); color: var(--light-fg-dark); font-family: var(--light-font); } /* Scoped theme so div-level usage works (templates use .light-theme on div) */ .light-theme { --bs-body-bg: var(--light-bg); --bs-body-color: var(--light-fg-dark); } /* Scrollbar */ .light-theme ::-webkit-scrollbar { width: 6px; height: 6px; } .light-theme ::-webkit-scrollbar-track { background: var(--light-bg-secondary); } .light-theme ::-webkit-scrollbar-thumb { background: var(--light-accent); border-radius: 3px; } .light-theme ::-webkit-scrollbar-thumb:hover { background: var(--light-accent-hover); } /* Selection */ .light-theme ::selection { background: var(--light-accent); color: #fff; } /* Cards & Glass */ .light-theme .card, .light-theme .glass-card { background: var(--light-bg-card); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid var(--light-glass-border); border-radius: var(--light-radius); color: var(--light-fg-dark); box-shadow: var(--light-shadow); transition: transform var(--light-transition), box-shadow var(--light-transition), border-color var(--light-transition); } .light-theme .card:hover, .light-theme .glass-card:hover { transform: translateY(-3px); box-shadow: var(--light-shadow), var(--light-shadow-glow); border-color: rgba(124, 58, 237, 0.4); } .light-theme .card-body { color: var(--light-fg-dark); } .light-theme .card-title { color: var(--light-fg-dark); font-weight: 600; } /* Strong glass for hero elements */ .light-theme .glass-card-strong { background: var(--light-glass-bg-strong); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); border: 1px solid rgba(0, 0, 0, 0.05); border-radius: var(--light-radius-lg); } /* Typography */ .light-theme .text-muted { color: var(--light-fg-muted) !important; } .light-theme .text-accent { color: var(--light-accent) !important; } .light-theme .text-orange { color: var(--light-accent-secondary) !important; } .light-theme .text-teal { color: var(--light-teal) !important; } .light-theme .text-green { color: var(--light-green) !important; } .light-theme h1, .light-theme h2, .light-theme h3, .light-theme h4, .light-theme h5, .light-theme h6 { color: var(--light-fg-dark); font-weight: 700; } /* Gradient headline utility */ .light-theme .text-gradient { background: linear-gradient(135deg, var(--light-accent) 0%, var(--light-teal) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* Buttons */ .light-theme .btn-primary { background: linear-gradient(135deg, var(--light-accent) 0%, var(--light-accent-hover) 100%); border: none; border-radius: var(--light-radius-sm); color: #fff; font-weight: 600; transition: filter var(--light-transition), transform var(--light-transition), box-shadow var(--light-transition); } .light-theme .btn-primary:hover { filter: brightness(1.1); transform: translateY(-1px); box-shadow: 0 4px 18px rgba(124, 58, 237, 0.3); color: #fff; } .light-theme .btn-primary:active { transform: translateY(0); filter: brightness(0.95); } .light-theme .btn-secondary { background: linear-gradient(135deg, var(--light-accent-secondary) 0%, var(--light-accent-sec-hover) 100%); border: none; border-radius: var(--light-radius-sm); color: #fff; font-weight: 600; transition: filter var(--light-transition), transform var(--light-transition); } .light-theme .btn-secondary:hover { filter: brightness(1.1); transform: translateY(-1px); color: #fff; } /* ================================================================ Iteration 6 & 7 Page Overrides — Light Theme ================================================================ */ /* ── Smooth Theme Transition ──────────────────────────────────────── */ .light-theme, .light-theme * { transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease; } /* ── Trading Feed ─────────────────────────────────────────────────── */ .light-theme .feed-card { background: var(--light-bg-card); border-color: var(--light-glass-border); } .light-theme .feed-card:hover { border-color: rgba(124,58,237,0.3); } .light-theme .feed-action-btn { color: var(--light-fg-muted); } .light-theme .feed-action-btn:hover { color: var(--light-fg-dark); } .light-theme .feed-action-btn.liked { color: #ec4899; } .light-theme .feed-tab { border-color: rgba(124,58,237,0.2); color: var(--light-fg-muted); background: transparent; } .light-theme .feed-tab.active { background: rgba(124,58,237,0.1); color: var(--light-accent); border-color: var(--light-accent); } /* ── Analytics Dashboard ──────────────────────────────────────────── */ .light-theme .stat-card, .light-theme .chart-card, .light-theme .panel { background: var(--light-bg-card); border-color: var(--light-glass-border); backdrop-filter: blur(8px); } .light-theme .stat-value { color: var(--light-fg-dark); } .light-theme .stat-label { color: var(--light-fg-muted); } /* ── Offer Management ─────────────────────────────────────────────── */ .light-theme .offer-card { background: var(--light-bg-card); border-color: var(--light-glass-border); } /* ── Watchlist ────────────────────────────────────────────────────── */ .light-theme .watchlist-card { background: var(--light-bg-card); border-color: var(--light-glass-border); } /* ── Metadata Editor ──────────────────────────────────────────────── */ .light-theme .editor-panel, .light-theme .preview-panel { background: var(--light-bg-card); border-color: var(--light-glass-border); } /* ── Advanced Search ──────────────────────────────────────────────── */ .light-theme .search-input { background: var(--light-bg-card); border-color: rgba(124,58,237,0.2); color: var(--light-fg-dark); } .light-theme .search-input::placeholder { color: var(--light-fg-muted); } .light-theme .autocomplete-list { background: var(--light-bg-secondary); border-color: var(--light-glass-border); } .light-theme .autocomplete-item { color: var(--light-fg-dark); } .light-theme .autocomplete-item:hover { background: rgba(124,58,237,0.06); } .light-theme .result-card { background: var(--light-bg-card); border-color: var(--light-glass-border); } .light-theme .result-card:hover { border-color: rgba(124,58,237,0.3); } .light-theme .result-icon { background: rgba(124,58,237,0.08); } .light-theme .filter-select, .light-theme .filter-input { background: var(--light-bg-card); border-color: rgba(124,58,237,0.2); color: var(--light-fg-dark); } .light-theme .saved-chip { background: rgba(124,58,237,0.06); border-color: rgba(124,58,237,0.15); color: var(--light-accent); } /* ── Creator Dashboard ────────────────────────────────────────────── */ .light-theme .collector-item { border-color: rgba(0,0,0,0.06); } .light-theme .collector-address { color: var(--light-accent); } .light-theme .range-btn { border-color: rgba(124,58,237,0.2); color: var(--light-fg-muted); } .light-theme .range-btn.active { background: rgba(124,58,237,0.1); color: var(--light-accent); border-color: var(--light-accent); } /* ── Email Preferences ────────────────────────────────────────────── */ .light-theme .pref-card { background: var(--light-bg-card); border-color: var(--light-glass-border); } .light-theme .pref-row { border-color: rgba(0,0,0,0.06); } .light-theme .pref-label { color: var(--light-fg-dark); } .light-theme .pref-desc { color: var(--light-fg-muted); } .light-theme .toggle-track { background: rgba(124,58,237,0.1); } /* ── Performance Monitor ──────────────────────────────────────────── */ .light-theme .metric-card { background: var(--light-bg-card); border-color: var(--light-glass-border); } .light-theme .metric-label { color: var(--light-fg-muted); } .light-theme .perf-table th { color: var(--light-fg-muted); border-color: rgba(0,0,0,0.08); } .light-theme .perf-table td { color: var(--light-fg-dark); border-color: rgba(0,0,0,0.04); } /* ── API Docs Playground ──────────────────────────────────────────── */ .light-theme .endpoint-card { background: var(--light-bg-card); border-color: var(--light-glass-border); } /* ── General Form Controls ────────────────────────────────────────── */ .light-theme .form-control, .light-theme .form-select { background: var(--light-bg-secondary) !important; border-color: rgba(124,58,237,0.2) !important; color: var(--light-fg-dark) !important; } .light-theme .form-control::placeholder { color: var(--light-fg-muted) !important; } /* ── Modal Overrides ──────────────────────────────────────────────── */ .light-theme .modal-content { background: var(--light-bg-secondary); border-color: var(--light-glass-border); color: var(--light-fg-dark); }