/* =========================== THEME DEFINITIONS Applied as [data-theme="name"] on =========================== */ /* ── Shared theme helpers ── */ [data-theme] .stroke-background::after { /* Dot grid adapts to theme bg */ background-image: radial-gradient(circle, rgba(128, 128, 160, 0.08) 1px, transparent 1px); } /* ------------------------------------------------------- THEME 0: Zen Green (Vibrant Green & Cream — Zen.com Style) ------------------------------------------------------- */ [data-theme="zen-green"] { --color-bg: #fdfdfa; --color-surface: #ffffff; --color-surface-2: #f4f4f6; --color-text-primary: #111111; --color-text-secondary: #666666; --color-text-muted: #999999; --color-accent: #111111; --color-accent-hover: #333333; --color-highlight: #00ea61; --color-highlight-rgb: 0, 234, 97; --color-highlight-soft: rgba(0, 234, 97, 0.1); --color-border: #eaeaec; --color-success: #10a342; --color-error: #e53e3e; --color-blob-1: #00ea61; --color-blob-2: #afff3d; --color-blob-3: #ffffff; } [data-theme="zen-green"] .logo span { color: #00ea61; } [data-theme="zen-green"] .btn-primary { background: #00ea61; color: #000000; font-weight: 700; } /* ------------------------------------------------------- THEME 1: Default / Zen Classic (clean white + orange) Already defined in :root in style.css ------------------------------------------------------- */ /* ------------------------------------------------------- THEME 2: Midnight Purple (2024 trend: deep violet, neon pop) ------------------------------------------------------- */ [data-theme="midnight-purple"] { --color-bg: #f5f3ff; --color-surface: #ffffff; --color-surface-2: #f0ecff; --color-text-primary: #1e1730; --color-text-secondary: #5a5070; --color-text-muted: #9b8fb0; --color-accent: #6d28d9; --color-accent-hover: #5b21b6; --color-highlight: #7c3aed; --color-highlight-rgb: 124, 58, 237; --color-highlight-soft: rgba(124, 58, 237, 0.08); --color-border: #ede9fe; --color-success: #059669; --color-error: #dc2626; --color-blob-1: #7c3aed; --color-blob-2: #db2777; --color-blob-3: #4c1d95; } [data-theme="midnight-purple"] .bg-gradient-mesh { background: radial-gradient(at 0% 0%, var(--gradient-mesh-1) 0px, transparent 55%), radial-gradient(at 100% 0%, var(--gradient-mesh-2) 0px, transparent 55%); background-color: var(--color-bg); } [data-theme="midnight-purple"] .btn-primary, [data-theme="midnight-purple"] .btn-primary:hover { background: linear-gradient(135deg, #7c3aed, #6d28d9); } [data-theme="midnight-purple"] .logo span { color: #7c3aed; } /* ------------------------------------------------------- THEME 3: Arctic Blue (clean, sky-cool — Fintech 2025 trend) ------------------------------------------------------- */ [data-theme="arctic-blue"] { --color-bg: #f0f7ff; --color-surface: #ffffff; --color-surface-2: #e6f2ff; --color-text-primary: #0c2340; --color-text-secondary: #3f6080; --color-text-muted: #7ea3c0; --color-accent: #0071e3; --color-accent-hover: #005bb5; --color-highlight: #0071e3; --color-highlight-rgb: 0, 113, 227; --color-highlight-soft: rgba(0, 113, 227, 0.08); --color-border: #d6eaff; --color-success: #00a86b; --color-error: #e53e3e; --color-blob-1: #0071e3; --color-blob-2: #00a86b; --color-blob-3: #bae6fd; } [data-theme="arctic-blue"] .bg-gradient-mesh { background: radial-gradient(at 0% 0%, var(--gradient-mesh-1) 0px, transparent 55%), radial-gradient(at 100% 0%, var(--gradient-mesh-2) 0px, transparent 55%); background-color: var(--color-bg); } [data-theme="arctic-blue"] .btn-primary, [data-theme="arctic-blue"] .btn-primary:hover { background: linear-gradient(135deg, #0071e3, #005bb5); } [data-theme="arctic-blue"] .logo span { color: #0071e3; } /* ------------------------------------------------------- THEME 4: Emerald Forest (neo-minimalism, rich green + cream) ------------------------------------------------------- */ [data-theme="emerald-forest"] { --color-bg: #f0faf4; --color-surface: #ffffff; --color-surface-2: #e6f7ef; --color-text-primary: #0d2619; --color-text-secondary: #3d6651; --color-text-muted: #7aaa8e; --color-accent: #059669; --color-accent-hover: #047857; --color-highlight: #10b981; --color-highlight-rgb: 16, 185, 129; --color-highlight-soft: rgba(16, 185, 129, 0.08); --color-border: #d1fae5; --color-success: #10b981; --color-error: #ef4444; --color-blob-1: #059669; --color-blob-2: #10b981; --color-blob-3: #ecfdf5; } [data-theme="emerald-forest"] .bg-gradient-mesh { background: radial-gradient(at 0% 0%, var(--gradient-mesh-1) 0px, transparent 55%), radial-gradient(at 100% 0%, var(--gradient-mesh-2) 0px, transparent 55%); background-color: var(--color-bg); } [data-theme="emerald-forest"] .btn-primary, [data-theme="emerald-forest"] .btn-primary:hover { background: linear-gradient(135deg, #10b981, #059669); } [data-theme="emerald-forest"] .logo span { color: #10b981; } /* ------------------------------------------------------- THEME 5: Coral Sunset (warm, energetic — 2025 brand trend) ------------------------------------------------------- */ [data-theme="coral-sunset"] { --color-bg: #fff8f6; --color-surface: #ffffff; --color-surface-2: #fff0ea; --color-text-primary: #2d1207; --color-text-secondary: #7a4030; --color-text-muted: #b07060; --color-accent: #e05a30; --color-accent-hover: #c24322; --color-highlight: #e05a30; --color-highlight-rgb: 224, 90, 48; --color-highlight-soft: rgba(224, 90, 48, 0.08); --color-border: #ffe8df; --color-success: #10a342; --color-error: #dc2626; --color-blob-1: #e05a30; --color-blob-2: #f97316; --color-blob-3: #fee2e2; } [data-theme="coral-sunset"] .bg-gradient-mesh { background: radial-gradient(at 0% 0%, var(--gradient-mesh-1) 0px, transparent 55%), radial-gradient(at 100% 0%, var(--gradient-mesh-2) 0px, transparent 55%); background-color: var(--color-bg); } [data-theme="coral-sunset"] .btn-primary, [data-theme="coral-sunset"] .btn-primary:hover { background: linear-gradient(135deg, #e05a30, #c24322); } [data-theme="coral-sunset"] .logo span { color: #e05a30; } /* ------------------------------------------------------- THEME 6: Dark Mode (universal dark — deep charcoal) ------------------------------------------------------- */ [data-theme="dark"] { --color-bg: #0f0f10; --color-surface: #1c1c1e; --color-surface-2: #252528; --color-surface-3: #2e2e32; --color-text-primary: #f5f5f7; --color-text-secondary: #a0a0a8; --color-text-muted: #636370; --color-accent: #ffffff; --color-accent-hover: #e5e5e5; --color-highlight: #ff5722; --color-highlight-rgb: 255, 87, 34; --color-highlight-soft: rgba(255, 87, 34, 0.12); --color-border: #2c2c30; --color-border-strong: #3c3c42; --color-success: #30d158; --color-success-rgb: 48, 209, 88; --color-success-soft: rgba(48, 209, 88, 0.1); --color-success-text: #28b568; --color-error: #ff453a; --color-error-soft: rgba(255, 69, 58, 0.1); --color-blob-1: #312e81; --color-blob-2: #1e1b4b; --color-blob-3: #4338ca; --gradient-brand: linear-gradient(135deg, #ff5722, #ff8a50); --gradient-dark: linear-gradient(135deg, #1c1c1e, #2a2a30); /* Shadows are more subtle in dark mode */ --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.25); --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.35); --shadow-lg: 0 20px 48px rgba(0, 0, 0, 0.45); --shadow-hover: 0 12px 32px rgba(0, 0, 0, 0.55); } [data-theme="dark"] .bg-gradient-mesh { background: radial-gradient(at 0% 0%, var(--gradient-mesh-1) 0px, transparent 50%), radial-gradient(at 100% 0%, var(--gradient-mesh-2) 0px, transparent 50%); background-color: var(--color-bg); } [data-theme="dark"] .navbar { background: rgba(15, 15, 16, 0.92); border-color: #2c2c30; } [data-theme="dark"] .card, [data-theme="dark"] .calc-mockup { background: var(--color-surface) !important; border-color: var(--color-border) !important; } [data-theme="dark"] .btn-primary { background: var(--color-highlight); } [data-theme="dark"] input[type="text"] { color: var(--color-text-primary); } [data-theme="dark"] .footer { background: #09090a; } /* Fix: dark mode calculator inner cards have hardcoded white bg inline — override here */ [data-theme="dark"] .calc-mockup div[style*="background: #ffffff"], [data-theme="dark"] .calc-mockup div[style*="background:#ffffff"] { background: #2c2c30 !important; border-color: #3a3a40 !important; color: var(--color-text-primary) !important; } [data-theme="dark"] .calc-mockup span[style*="color: #002244"], [data-theme="dark"] .calc-mockup span[style*="color:#002244"], [data-theme="dark"] .calc-mockup input[type="text"] { color: var(--color-text-primary) !important; } [data-theme="dark"] .calc-mockup div[style*="color: #002244"] { color: var(--color-text-primary) !important; } /* ------------------------------------------------------- THEME 7: Binance (iconic black + golden yellow) ------------------------------------------------------- */ [data-theme="binance"] { --color-bg: #121619; --color-surface: #1e2329; --color-surface-2: #2b2f36; --color-surface-3: #323842; --color-text-primary: #ffffff; --color-text-secondary: #eaecef; --color-text-muted: #707a8a; --color-accent: #f0b90b; --color-accent-hover: #d4a309; --color-highlight: #f0b90b; --color-highlight-rgb: 240, 185, 11; --color-highlight-soft: rgba(240, 185, 11, 0.12); --color-border: #2b2f36; --color-border-strong: #3d4450; --gradient-brand: linear-gradient(135deg, #f0b90b, #d4a309); --gradient-dark: linear-gradient(135deg, #1e2329, #2b2f36); --color-success: #02c076; --color-error: #f6465d; --color-blob-1: #f0b90b; --color-blob-2: #1e2329; --color-blob-3: #fcd535; --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.4); --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.5); --shadow-lg: 0 20px 48px rgba(0, 0, 0, 0.6); --shadow-hover: 0 12px 32px rgba(240, 185, 11, 0.1); } [data-theme="binance"] .bg-gradient-mesh { background: radial-gradient(at 0% 0%, var(--gradient-mesh-1) 0px, transparent 60%), radial-gradient(at 100% 0%, var(--gradient-mesh-2) 0px, transparent 60%); background-color: var(--color-bg); } [data-theme="binance"] .navbar { background: rgba(11, 14, 17, 0.95); border-color: #2b2f36; } [data-theme="binance"] .btn-primary { background: linear-gradient(135deg, #f0b90b, #d4a309); color: #000000; font-weight: 800; } [data-theme="binance"] .btn-primary:hover { background: linear-gradient(135deg, #f9c825, #f0b90b); } [data-theme="binance"] .footer { background: #080b0e; } [data-theme="binance"] .logo span { color: #f0b90b; } [data-theme="binance"] .card, [data-theme="binance"] .calc-mockup { background: var(--color-surface) !important; border-color: var(--color-border) !important; } [data-theme="binance"] .calc-mockup div[style*="background: #ffffff"], [data-theme="binance"] .calc-mockup div[style*="background:#ffffff"] { background: #2b2f36 !important; border-color: #3a3f48 !important; } [data-theme="binance"] .calc-mockup .calc-label { color: #707a8a !important; } [data-theme="binance"] .calc-mockup span[style*="color: var(--color-text-primary)"], [data-theme="binance"] .calc-mockup div[style*="color: var(--color-text-primary)"], [data-theme="binance"] .calc-mockup input { color: #ffffff !important; } [data-theme="binance"] .calc-mockup div[style*="color: var(--color-text-primary)"] { color: #ffffff !important; } [data-theme="binance"] .calc-mockup div[style*="background: var(--color-text-primary)"] { background: #f0b90b !important; color: #000000 !important; } [data-theme="binance"] .calc-mockup div[style*="color: var(--color-text-secondary)"] { color: #eaecef !important; } /* ------------------------------------------------------- THEME 8: Revolut (near-black navy + electric violet) ------------------------------------------------------- */ [data-theme="revolut"] { --color-bg: #ffffff; --color-surface: #ffffff; --color-text-primary: #000000; --color-text-secondary: #5a5d6a; --color-text-muted: #9498b0; --color-accent: #000000; --color-accent-hover: #111111; --color-highlight: #0075ff; /* Electric Blue */ --color-highlight-rgb: 0, 117, 255; --color-border: #f0f1f3; --color-success: #00c087; --color-error: #e53e3e; --color-blob-1: #0075ff; --color-blob-2: #000000; --color-blob-3: #f6f6f6; /* Revolut uses more pronounced subtle shadows */ --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.04); --shadow-md: 0 8px 20px rgba(0, 0, 0, 0.06); --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.08); } [data-theme="revolut"] .bg-gradient-mesh { background: radial-gradient(at 0% 0%, rgba(0, 117, 255, 0.05) 0px, transparent 60%), radial-gradient(at 100% 0%, rgba(0, 0, 0, 0.03) 0px, transparent 60%); background-color: var(--color-bg); } [data-theme="revolut"] .btn-primary { background: #000000; color: #ffffff; border-radius: 100px; font-weight: 600; letter-spacing: -0.01em; } [data-theme="revolut"] .btn-primary:hover { background: #222222; transform: translateY(-1px); } [data-theme="revolut"] .logo span { color: #0075ff; } [data-theme="revolut"] .navbar { background: rgba(255, 255, 255, 0.85); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-color: #f0f1f3; } [data-theme="revolut"] .card, [data-theme="revolut"] .calc-mockup { border-radius: 24px; border-color: #f0f1f3 !important; box-shadow: 0 20px 60px rgba(0,0,0,0.05); } /* Revolut-style button in calculator */ [data-theme="revolut"] .calc-mockup .btn-primary { background: #0075ff !important; color: #ffffff !important; } /* ------------------------------------------------------- THEME 9: Glass (Glassmorphism — Translucent & Vibrant) ------------------------------------------------------- */ [data-theme="glass"] { --color-bg: #e0e7ff; --color-surface: rgba(255, 255, 255, 0.4); --color-text-primary: #1e1b4b; --color-text-secondary: #4338ca; --color-text-muted: #6366f1; --color-accent: #4f46e5; --color-accent-hover: #4338ca; --color-highlight: #6366f1; --color-highlight-rgb: 99, 102, 241; --color-border: rgba(255, 255, 255, 0.5); --color-success: #10b981; --color-error: #ef4444; --color-blob-1: #6366f1; --color-blob-2: #a855f7; --color-blob-3: #ec4899; } [data-theme="glass"] .bg-gradient-mesh { background: radial-gradient(at 0% 0%, var(--gradient-mesh-1) 0px, transparent 50%), radial-gradient(at 100% 0%, var(--gradient-mesh-2) 0px, transparent 50%), radial-gradient(at 50% 100%, rgba(236, 72, 153, 0.15) 0px, transparent 50%); background-color: var(--color-bg); } [data-theme="glass"] .navbar, [data-theme="glass"] .card, [data-theme="glass"] .calc-mockup, [data-theme="glass"] .cta-box { background-color: rgba(255, 255, 255, 0.25); backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%); border: 1px solid rgba(255, 255, 255, 0.4); box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.07); } [data-theme="glass"] .btn-primary { background: rgba(79, 70, 229, 0.8); backdrop-filter: blur(4px); border: 1px solid rgba(255, 255, 255, 0.2); } [data-theme="glass"] .calc-mockup div[style*="background: #ffffff"], [data-theme="glass"] .calc-mockup div[style*="background:#ffffff"] { background: rgba(255, 255, 255, 0.3) !important; backdrop-filter: blur(10px); border-color: rgba(255, 255, 255, 0.4) !important; } /* ------------------------------------------------------- THEME 10: Drops (Liquid — Aqua & Deep Blue) ------------------------------------------------------- */ [data-theme="drops"] { --color-bg: #f0fdfa; --color-surface: #ffffff; --color-text-primary: #134e4a; --color-text-secondary: #0d9488; --color-text-muted: #5eead4; --color-accent: #0f766e; --color-accent-hover: #115e59; --color-highlight: #2dd4bf; --color-border: #ccfbf1; --color-success: #14b8a6; --color-error: #f43f5e; --color-blob-1: #2dd4bf; --color-blob-2: #0d9488; --color-blob-3: #f0fdfa; } [data-theme="drops"] .bg-gradient-mesh { background: radial-gradient(at 0% 0%, var(--gradient-mesh-1) 0px, transparent 60%), radial-gradient(at 100% 100%, var(--gradient-mesh-2) 0px, transparent 60%); background-color: var(--color-bg); } [data-theme="drops"] .btn-primary { background: linear-gradient(135deg, #2dd4bf, #0d9488); border-radius: 30px; } [data-theme="drops"] .navbar, [data-theme="drops"] .card, [data-theme="drops"] .calc-mockup { border-radius: 40px; box-shadow: 0 15px 35px rgba(13, 148, 136, 0.05); } /* ------------------------------------------------------- THEME 11: iOS (Apple Style — Minimalist & Systemic) ------------------------------------------------------- */ [data-theme="ios"] { --color-bg: #f2f2f7; --color-surface: #ffffff; --color-text-primary: #000000; --color-text-secondary: #3c3c43; --color-text-muted: #8e8e93; --color-accent: #007aff; --color-accent-hover: #0056b3; --color-highlight: #007aff; --color-border: #d1d1d6; --color-success: #34c759; --color-error: #ff3b30; --color-blob-1: #007aff; --color-blob-2: #5856d6; --color-blob-3: #f2f2f7; } [data-theme="ios"] body { font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", sans-serif; } [data-theme="ios"] .navbar { background: rgba(255, 255, 255, 0.7); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); border-color: rgba(0,0,0,0.1); } [data-theme="ios"] .btn-primary { background: #007aff; font-weight: 500; } [data-theme="ios"] .card, [data-theme="ios"] .calc-mockup { border-radius: 20px; border: none; box-shadow: 0 10px 30px rgba(0,0,0,0.04); } /* Scale down calculator by 20% in iOS theme (Desktop) */ [data-theme="ios"] .calc-container { transform: scale(0.8); transform-origin: center center; margin-top: 0; } /* Increase calculator size by 15% on mobile */ @media (max-width: 992px) { [data-theme="ios"] .calc-container { transform: scale(1.15); margin-top: 20px; } } [data-theme="ios"] .calc-mockup div[style*="background: #ffffff"], [data-theme="ios"] .calc-mockup div[style*="background:#ffffff"], [data-theme="ios"] .calc-mockup div[style*="background: #ffffff"] + div, [data-theme="ios"] .calc-mockup input { background: #ffffff !important; border: 1.5px solid rgba(0,0,0,0.08) !important; } /* ============================================================ THEME SWITCHER WIDGET (floating panel) ============================================================ */ #theme-switcher { position: fixed; bottom: 32px; right: 28px; z-index: 9999; display: flex; flex-direction: column; align-items: flex-end; gap: 12px; } #theme-toggle-btn { width: 52px; height: 52px; border-radius: 50%; background: var(--color-text-primary); color: var(--color-surface); border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1); font-size: 1.25rem; } #theme-toggle-btn:hover { transform: scale(1.12); } #theme-panel { display: none; flex-direction: column; gap: 6px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 24px; padding: 16px; box-shadow: 0 20px 48px rgba(0,0,0,0.15); min-width: 200px; animation: slideUpFade 0.25s ease-out; } #theme-panel.open { display: flex; } @keyframes slideUpFade { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } #theme-panel h4 { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--color-text-muted); margin-bottom: 8px; padding: 0 4px; } .theme-option { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; cursor: pointer; border: 1px solid transparent; transition: all 0.15s ease; font-size: 0.9rem; font-weight: 500; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; color: var(--color-text-primary); background: transparent; width: 100%; text-align: left; } .theme-option:hover { background: rgba(0,0,0,0.04); } .theme-option.active { background: rgba(0,0,0,0.06); border-color: rgba(0,0,0,0.1); font-weight: 700; } [data-theme="dark"] .theme-option:hover { background: rgba(255,255,255,0.06); } [data-theme="dark"] .theme-option.active { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.15); } .theme-swatch { width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0; border: 2px solid rgba(0,0,0,0.08); } /* ============================================================ NEW VARIABLE OVERRIDES for all themes (Syne + PJS design) ============================================================ */ [data-theme="dark"] { --color-surface-2: #252528; --color-surface-3: #2e2e32; --color-border: #2c2c30; --color-border-strong: #3c3c42; --gradient-brand: linear-gradient(135deg, #FF5722, #FF8A50); --gradient-dark: linear-gradient(135deg, #1c1c1e, #2a2a30); } [data-theme="dark"] .stroke-background::after { background-image: radial-gradient(circle, rgba(255, 255, 255, 0.04) 1px, transparent 1px); } [data-theme="dark"] .compare-bar-toggle, [data-theme="dark"] .compare-bar, [data-theme="dark"] .bar-picker-btn, [data-theme="dark"] .compare-bar-field .field-inner { background: var(--color-surface) !important; border-color: var(--color-border) !important; color: var(--color-text-primary) !important; } [data-theme="dark"] .country-search { background: var(--color-surface-2) !important; color: var(--color-text-primary) !important; border-color: var(--color-border) !important; } [data-theme="dark"] .method, [data-theme="dark"] .result-card, [data-theme="dark"] #results .card, [data-theme="dark"] .corridor-card, [data-theme="dark"] .feature-card, [data-theme="dark"] .testimonial-card, [data-theme="dark"] .step-card, [data-theme="dark"] .sidebar-card, [data-theme="dark"] .transfer-option, [data-theme="dark"] .bonus-step, [data-theme="dark"] .about-feature-item, [data-theme="dark"] .video-card, [data-theme="dark"] .rec-card { background: var(--color-surface) !important; border-color: var(--color-border) !important; } [data-theme="dark"] .drawer { background: #1c1c1e !important; } [data-theme="dark"] .drawer-handle { background: #3c3c42 !important; } [data-theme="dark"] .drawer-header, [data-theme="dark"] .drawer-tabs { background: #1c1c1e !important; border-color: var(--color-border) !important; } [data-theme="dark"] .drawer-tab { background: var(--color-surface-2) !important; border-color: var(--color-border) !important; color: var(--color-text-secondary) !important; } [data-theme="dark"] .drawer-tab.active { background: var(--color-text-primary) !important; border-color: var(--color-text-primary) !important; color: var(--color-bg) !important; } [data-theme="dark"] .drawer-stat { background: #252528 !important; } [data-theme="dark"] .cta-box { background: linear-gradient(135deg, #1c1c1e, #252528) !important; } [data-theme="dark"] .stats-grid, [data-theme="dark"] .stat-item { background: var(--color-surface) !important; } [data-theme="dark"] .mobile-nav-panel { background: var(--color-surface) !important; border-color: var(--color-border) !important; } [data-theme="dark"] .hero-calc-field { background: var(--color-surface-2) !important; border-color: var(--color-border) !important; } [data-theme="dark"] .compare-bar-chip, [data-theme="dark"] .service-logo-chip, [data-theme="dark"] .pill { background: var(--color-surface-2) !important; border-color: var(--color-border) !important; } [data-theme="binance"] { --color-surface-2: #2b2f36; --color-surface-3: #323842; --color-border: #2b2f36; --color-border-strong: #3d4450; --gradient-brand: linear-gradient(135deg, #f0b90b, #d4a309); --gradient-dark: linear-gradient(135deg, #1e2329, #2b2f36); } [data-theme="dark"] .theme-option:hover, [data-theme="binance"] .theme-option:hover { background: rgba(255,255,255,0.05) !important; } /* Inline navbar theme switcher */ .theme-switcher-slot { position: relative; display: inline-flex; align-items: center; justify-content: center; margin-left: 2px; } #theme-switcher.theme-switcher-inline { position: relative; inset: auto; bottom: auto; right: auto; z-index: 30; display: inline-flex !important; flex-direction: column; align-items: center; justify-content: center; gap: 8px; } #theme-switcher.theme-switcher-inline #theme-toggle-btn { width: 34px; height: 34px; border-radius: 999px; background: var(--color-surface-2); color: var(--color-text-secondary); border: 1px solid var(--color-border); box-shadow: none; } #theme-switcher.theme-switcher-inline #theme-toggle-btn:hover { transform: scale(1.06); color: var(--color-text-primary); } #theme-switcher.theme-switcher-inline #theme-panel { position: absolute; top: calc(100% + 12px); right: -8px; min-width: 220px; border-radius: 20px; background: var(--color-surface); border: 1px solid var(--color-border); box-shadow: 0 20px 48px rgba(0,0,0,0.14); } #theme-switcher.theme-switcher-inline #theme-panel h4 { font-size: 0.7rem; } @media (max-width: 768px) { .theme-switcher-slot { display: none; } }