/* ========================================================= * toko-themes.css — Multi-theme system for Toko.ma * Themes: purple (default) | dark | ocean | pro * Applied via: data-theme attribute on * ========================================================= */ /* ── Theme: Purple (default) ──────────────────────────── */ :root, html[data-theme="purple"] { --primary-color: #6354ff; --primary-hover: #4f42d4; --primary-light: #eeebff; --primary-mid: #8b7dff; --primary-glow: rgba(99, 84, 255, 0.18); --accent-color: #FF6B35; --accent-hover: #E55A24; --dark-bg: #1a1a2e; --dark-surface: #252540; --dark-border: #32325a; --success-color: #10B981; --error-color: #EF4444; --text-dark: #1a1a2e; --text-gray: #555577; --text-light: #8888aa; --bg-body: #f2f3f7; --bg-white: #ffffff; --bg-light: #f8f8fc; --bg-gray: #f0f0f8; --border-color: #eaecf0; --border-mid: #d0d5dd; --card-bg: #ffffff; --card-border: #eaecf0; --hero-bg: linear-gradient(135deg, #1a1a2e 0%, #252550 50%, #1e1e3a 100%); --badge-bg: #ef4444; --badge-new-bg: #6354ff; --badge-text: #ffffff; } /* ── Theme: Dark Mode ─────────────────────────────────── */ html[data-theme="dark"] { --primary-color: #7c6dff; --primary-hover: #6a5cf0; --primary-light: rgba(124,109,255,0.18); --primary-mid: #9b8eff; --primary-glow: rgba(124, 109, 255, 0.25); --accent-color: #ff7e5f; --accent-hover: #ff6a47; --dark-bg: #0d0d1a; --dark-surface: #1a1a2e; --dark-border: #2a2a4a; --success-color: #10B981; --error-color: #EF4444; --text-dark: #e8e8f5; --text-gray: #9999bb; --text-light: #5555aa; --bg-body: #0d0d1a; --bg-white: #1a1a2e; --bg-light: #1f1f35; --bg-gray: #252545; --border-color: #2a2a4a; --border-mid: #363660; --card-bg: #1f1f35; --card-border: rgba(124,109,255,0.15); --hero-bg: linear-gradient(135deg, #080810 0%, #12122a 50%, #0a0a1e 100%); --badge-bg: #ef4444; --badge-new-bg: #7c6dff; --badge-text: #ffffff; } html[data-theme="dark"] body { background: var(--bg-body); color: var(--text-dark); } html[data-theme="dark"] .hero { background: var(--hero-bg); } html[data-theme="dark"] .product-card-hunt { background: var(--card-bg); border-color: var(--card-border); } html[data-theme="dark"] .hunt-title { color: var(--text-dark); } html[data-theme="dark"] .hunt-subtitle { color: var(--text-gray); } html[data-theme="dark"] .current-price { color: var(--primary-color); } html[data-theme="dark"] .cat-card { background: var(--bg-light); border-color: var(--border-color); color: var(--text-dark); } html[data-theme="dark"] .cat-card:hover { background: var(--primary-light); border-color: var(--primary-color); } html[data-theme="dark"] .brand-pill { background: var(--bg-light); border-color: var(--border-color); color: var(--text-dark); } html[data-theme="dark"] .brand-pill:hover { background: var(--primary-light); border-color: var(--primary-color); } html[data-theme="dark"] .section-title { color: var(--text-dark); } html[data-theme="dark"] .section-link { color: var(--primary-color); } html[data-theme="dark"] .trust-card { background: var(--bg-light); border-color: var(--border-color); } html[data-theme="dark"] .trust-card h3 { color: var(--text-dark); } html[data-theme="dark"] .trust-card p { color: var(--text-gray); } html[data-theme="dark"] .faq-item { background: var(--bg-light); border-color: var(--border-color); } html[data-theme="dark"] .faq-q { color: var(--text-dark); } html[data-theme="dark"] .faq-a { color: var(--text-gray); } html[data-theme="dark"] .how-section { background: var(--bg-light); } html[data-theme="dark"] .how-step h3 { color: var(--text-dark); } html[data-theme="dark"] .how-step p { color: var(--text-gray); } html[data-theme="dark"] .divider { border-color: var(--border-color); } html[data-theme="dark"] .popular-item { background: var(--bg-light); border-color: var(--border-color); } html[data-theme="dark"] .popular-item:hover { background: var(--primary-light); } html[data-theme="dark"] .popular-name { color: var(--text-dark); } html[data-theme="dark"] .search-input-wrap input { background: var(--bg-gray); border-color: var(--border-color); color: var(--text-dark); } /* ── Theme: Ocean Blue ────────────────────────────────── */ html[data-theme="ocean"] { --primary-color: #0ea5e9; --primary-hover: #0284c7; --primary-light: #e0f2fe; --primary-mid: #38bdf8; --primary-glow: rgba(14, 165, 233, 0.18); --accent-color: #14b8a6; --accent-hover: #0d9488; --dark-bg: #0c2340; --dark-surface: #1e3a5f; --dark-border: #2e4a6f; --success-color: #10B981; --error-color: #EF4444; --text-dark: #0c2340; --text-gray: #475569; --text-light: #94a3b8; --bg-body: #f0f9ff; --bg-white: #ffffff; --bg-light: #f0f9ff; --bg-gray: #e0f2fe; --border-color: #bae6fd; --border-mid: #7dd3fc; --card-bg: #ffffff; --card-border: rgba(14,165,233,0.15); --hero-bg: linear-gradient(135deg, #0c2340 0%, #1e3a5f 50%, #0a1e38 100%); --badge-bg: #ef4444; --badge-new-bg: #0ea5e9; --badge-text: #ffffff; --font-primary: 'Poppins', sans-serif; --font-secondary: 'Inter', sans-serif; --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-xl: 24px; --radius-full: 9999px; --shadow-sm: 0 1px 2px rgba(0,0,0,0.05); --shadow-md: 0 4px 6px rgba(0,0,0,0.07),0 2px 4px rgba(0,0,0,0.04); --shadow-lg: 0 10px 15px rgba(0,0,0,0.08),0 4px 6px rgba(0,0,0,0.04); --transition-fast: 150ms ease; --transition-base: 280ms ease; } /* ── Theme: Pro (Minimalism & Swiss Style) ────────────── */ html[data-theme="pro"] { --primary-color: #0369a1; --primary-hover: #0284c7; --primary-light: #e0f2fe; --primary-mid: #38bdf8; --primary-glow: rgba(3, 105, 161, 0.12); --accent-color: #0369a1; --accent-hover: #0284c7; --dark-bg: #0f172a; --dark-surface: #1e293b; --dark-border: #334155; --success-color: #16a34a; --error-color: #dc2626; --text-dark: #0f172a; --text-gray: #475569; --text-light: #94a3b8; --bg-body: #f8fafc; --bg-white: #ffffff; --bg-light: #f1f5f9; --bg-gray: #e2e8f0; --border-color: #e2e8f0; --border-mid: #cbd5e1; --card-bg: #ffffff; --card-border: #e2e8f0; --hero-bg: linear-gradient(160deg, #0f172a 0%, #1e293b 60%, #0369a1 100%); --badge-bg: #dc2626; --badge-new-bg: #0369a1; --badge-text: #ffffff; --radius-sm: 4px; --radius-md: 6px; --radius-lg: 8px; --radius-xl: 12px; --radius-full: 4px; --shadow-sm: 0 1px 3px rgba(0,0,0,0.08); --shadow-md: 0 2px 8px rgba(0,0,0,0.08); --shadow-lg: 0 4px 16px rgba(0,0,0,0.08); --transition-fast: 150ms ease; --transition-base: 200ms ease; } /* Pro — complete component overrides */ html[data-theme="pro"] body { background: var(--bg-body); font-family: 'Poppins', system-ui, sans-serif; } /* Pro — Product cards: flat, bordered, no glass */ html[data-theme="pro"] .product-card-hunt { background: #fff; border: 1px solid var(--border-color); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); transition: border-color 0.15s ease, box-shadow 0.15s ease; } html[data-theme="pro"] .product-card-hunt:hover { border-color: var(--primary-color); box-shadow: 0 0 0 3px rgba(3,105,161,0.08), var(--shadow-md); transform: none; } /* Pro — Hero */ html[data-theme="pro"] .hero { background: var(--hero-bg); } html[data-theme="pro"] .hero-blob1, html[data-theme="pro"] .hero-blob2 { display: none; } /* Pro — Section titles: uppercase overline label style */ html[data-theme="pro"] .section-title { font-size: 18px; font-weight: 700; letter-spacing: -0.01em; color: var(--text-dark); } html[data-theme="pro"] .section-title::before { content: ''; display: block; width: 28px; height: 3px; background: var(--primary-color); border-radius: 2px; margin-bottom: 8px; } html[data-theme="pro"] .section-title::after { display: none; } html[data-theme="pro"] .section-link { font-size: 13px; font-weight: 600; color: var(--primary-color); letter-spacing: 0; } /* Pro — Savings badge: flat solid pill, no gradient */ html[data-theme="pro"] .hunt-savings-badge { background: var(--badge-bg) !important; border-radius: var(--radius-sm); font-size: 10.5px; font-weight: 700; letter-spacing: 0.04em; box-shadow: none; } html[data-theme="pro"] .new-launch-badge, html[data-theme="pro"] .badge-new { background: var(--badge-new-bg) !important; border-radius: var(--radius-sm) !important; } html[data-theme="pro"] .dod-badge { background: var(--badge-bg) !important; border-radius: var(--radius-sm) !important; } /* Pro — Deal card */ html[data-theme="pro"] .product-card-deal { border-top: 3px solid var(--badge-bg); } html[data-theme="pro"] .dod-saving-badge { background: var(--bg-light) !important; color: var(--badge-bg) !important; border: 1px solid #fecaca !important; border-radius: var(--radius-sm) !important; } /* Pro — Category cards */ html[data-theme="pro"] .cat-card { background: #fff; border: 1px solid var(--border-color); border-radius: var(--radius-lg); box-shadow: none; transition: border-color 0.15s, box-shadow 0.15s; } html[data-theme="pro"] .cat-card:hover { border-color: var(--primary-color); box-shadow: var(--shadow-md); transform: none; } html[data-theme="pro"] .cat-card-icon { background: var(--primary-light); color: var(--primary-color); border-radius: var(--radius-md); } html[data-theme="pro"] .cat-card:hover .cat-card-icon { background: var(--primary-color); color: #fff; transform: none; } /* Pro — Brand pills */ html[data-theme="pro"] .brand-pill { border-radius: var(--radius-sm); border: 1px solid var(--border-color); background: #fff; transition: border-color 0.15s, color 0.15s, background 0.15s; } html[data-theme="pro"] .brand-pill:hover { border-color: var(--primary-color); color: var(--primary-color); background: var(--primary-light); transform: none; box-shadow: none; } /* Pro — Trust cards */ html[data-theme="pro"] .trust-card { background: #fff; border: 1px solid var(--border-color); border-radius: var(--radius-lg); box-shadow: none; transition: border-color 0.15s; } html[data-theme="pro"] .trust-card:hover { border-color: var(--primary-color); box-shadow: none; transform: none; } html[data-theme="pro"] .trust-icon { background: var(--primary-light); color: var(--primary-color); } html[data-theme="pro"] .trust-card:hover .trust-icon { background: var(--primary-color); color: #fff; transform: none; } /* Pro — FAQ */ html[data-theme="pro"] .faq-item { background: #fff; border: 1px solid var(--border-color); border-radius: var(--radius-md); box-shadow: none; } html[data-theme="pro"] .faq-item[open], html[data-theme="pro"] .faq-item:hover { border-color: var(--primary-color); box-shadow: none; } /* Pro — Popular items */ html[data-theme="pro"] .popular-item { background: #fff; border: 1px solid var(--border-color); border-radius: var(--radius-md); transition: border-color 0.15s; } html[data-theme="pro"] .popular-item:hover { border-color: var(--primary-color); background: var(--primary-light); transform: none; } /* Pro — Hero card: clean with border instead of glass */ html[data-theme="pro"] .hero-mock-card { background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.15); backdrop-filter: none; -webkit-backdrop-filter: none; border-radius: var(--radius-xl); box-shadow: 0 8px 32px rgba(0,0,0,0.2); } html[data-theme="pro"] .hero-mock-card:hover { transform: none; box-shadow: 0 8px 32px rgba(0,0,0,0.2); } /* Pro — Scroll-to-top */ html[data-theme="pro"] .scroll-to-top { border-radius: var(--radius-md); background: var(--primary-color); box-shadow: var(--shadow-md); } html[data-theme="pro"] .scroll-to-top:hover { background: var(--primary-hover); transform: none; } /* Pro — Hunt badges (store count) */ html[data-theme="pro"] .hunt-badge { background: var(--bg-light) !important; color: var(--text-gray) !important; border: 1px solid var(--border-color) !important; border-radius: var(--radius-sm) !important; font-size: 11px !important; } html[data-theme="pro"] .hunt-badge.badge-blue { color: var(--primary-color) !important; border-color: #bae6fd !important; background: #e0f2fe !important; } /* Pro — Buttons */ html[data-theme="pro"] .btn-buy-sm, html[data-theme="pro"] .hunt-details-btn { border-radius: var(--radius-md); } /* Pro — Price drop section header accent */ html[data-theme="pro"] .dod-title { font-size: 20px; font-weight: 700; color: var(--text-dark); } html[data-theme="pro"] .dod-subtitle { color: var(--text-gray); font-size: 13px; } /* ═══════════════════════════════════════════════════════════ GLOBAL COMPONENT ENHANCEMENTS (all themes except pro) ═══════════════════════════════════════════════════════════ */ /* ── Product Cards — subtle hover only (no lift) ──────── */ html:not([data-theme="pro"]) .product-card-hunt { background: var(--card-bg, #fff); border: 1px solid var(--card-border, #eaecf0); border-radius: var(--radius-lg, 16px); box-shadow: 0 1px 4px rgba(0,0,0,0.05); transition: border-color 0.2s ease, box-shadow 0.2s ease; } html:not([data-theme="pro"]) .product-card-hunt:hover { border-color: var(--primary-color); box-shadow: 0 4px 20px var(--primary-glow, rgba(99,84,255,0.12)); transform: none; } /* ── Savings badge — flat solid, no gradient ──────────── */ .hunt-savings-badge { background: var(--badge-bg, #ef4444) !important; color: var(--badge-text, #fff) !important; border-radius: 6px; font-size: 11px; font-weight: 700; letter-spacing: 0.03em; box-shadow: none; } .new-launch-badge, .badge-new { background: var(--badge-new-bg, #6354ff) !important; } .dod-badge { background: var(--badge-bg, #ef4444) !important; } /* ── Category Cards ───────────────────────────────────── */ .cat-card { background: var(--bg-white, #fff); border: 1.5px solid var(--border-color, #eaecf0); border-radius: var(--radius-lg, 16px); transition: border-color 0.18s ease, box-shadow 0.18s ease; box-shadow: var(--shadow-sm, 0 1px 2px rgba(0,0,0,0.05)); } .cat-card:hover { border-color: var(--primary-color); box-shadow: 0 4px 16px var(--primary-glow, rgba(99,84,255,0.12)); transform: none; background: var(--primary-light); } .cat-card-icon { background: var(--primary-light); color: var(--primary-color); border-radius: var(--radius-md); transition: background 0.18s ease; } .cat-card:hover .cat-card-icon { background: var(--primary-color); color: #fff; transform: none; } /* ── Brand Pills ──────────────────────────────────────── */ .brand-pill { border-radius: var(--radius-full, 9999px); border: 1.5px solid var(--border-color, #eaecf0); background: var(--bg-white, #fff); transition: border-color 0.18s, background 0.18s, color 0.18s, box-shadow 0.18s; } .brand-pill:hover { border-color: var(--primary-color); background: var(--primary-light); color: var(--primary-color); transform: none; box-shadow: 0 2px 8px var(--primary-glow, rgba(99,84,255,0.12)); } /* ── Section Title underline ──────────────────────────── */ .section-title { position: relative; display: inline-block; } .section-title::after { content: ''; display: block; width: 32px; height: 3px; background: var(--primary-color); border-radius: 9999px; margin-top: 5px; } /* ── Hero animated blobs ──────────────────────────────── */ .hero { background: var(--hero-bg, linear-gradient(135deg, #1a1a2e 0%, #252550 50%, #1e1e3a 100%)); position: relative; overflow: hidden; } .hero-blob1, .hero-blob2 { position: absolute; border-radius: 50%; filter: blur(80px); pointer-events: none; animation: blobFloat 8s ease-in-out infinite; } .hero-blob1 { width: 460px; height: 460px; background: radial-gradient(circle, var(--primary-color) 0%, transparent 70%); top: -160px; right: -100px; opacity: 0.15; } .hero-blob2 { width: 340px; height: 340px; background: radial-gradient(circle, var(--accent-color, #ff6b35) 0%, transparent 70%); bottom: -90px; left: -70px; opacity: 0.1; animation-delay: -4s; } @keyframes blobFloat { 0%, 100% { transform: translate(0, 0) scale(1); } 33% { transform: translate(10px, -14px) scale(1.03); } 66% { transform: translate(-6px, 8px) scale(0.98); } } /* ── Hero mock card ───────────────────────────────────── */ .hero-mock-card { background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.18); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-radius: 20px; box-shadow: 0 16px 48px rgba(0,0,0,0.22); transition: box-shadow 0.2s ease; } .hero-mock-card:hover { box-shadow: 0 24px 64px rgba(0,0,0,0.28); transform: none; } /* ── Trust cards ──────────────────────────────────────── */ .trust-card { background: var(--bg-white, #fff); border: 1.5px solid var(--border-color, #eaecf0); border-radius: var(--radius-lg, 16px); transition: border-color 0.18s, box-shadow 0.18s; box-shadow: var(--shadow-sm); } .trust-card:hover { border-color: var(--primary-color); box-shadow: 0 4px 16px var(--primary-glow, rgba(99,84,255,0.1)); transform: none; } .trust-icon { background: var(--primary-light); color: var(--primary-color); border-radius: var(--radius-md); transition: background 0.18s; } .trust-card:hover .trust-icon { background: var(--primary-color); color: #fff; transform: none; } /* ── Popular items ────────────────────────────────────── */ .popular-item { background: var(--bg-white, #fff); border: 1.5px solid var(--border-color, #eaecf0); border-radius: var(--radius-md, 10px); transition: border-color 0.18s, background 0.18s; } .popular-item:hover { border-color: var(--primary-color); background: var(--primary-light); transform: none; } /* ── FAQ items ────────────────────────────────────────── */ .faq-item { background: var(--bg-white, #fff); border: 1.5px solid var(--border-color, #eaecf0); border-radius: var(--radius-md, 10px); transition: border-color 0.18s; overflow: hidden; } .faq-item[open], .faq-item:hover { border-color: var(--primary-color); box-shadow: 0 2px 12px var(--primary-glow, rgba(99,84,255,0.08)); } /* ── Scroll-to-top ────────────────────────────────────── */ .scroll-to-top { background: var(--primary-color); box-shadow: 0 2px 12px var(--primary-glow, rgba(99,84,255,0.3)); transition: background 0.18s, box-shadow 0.18s; } .scroll-to-top:hover { background: var(--primary-hover); transform: none; box-shadow: 0 4px 18px var(--primary-glow, rgba(99,84,255,0.4)); } /* ── Theme transition ─────────────────────────────────── */ html { transition: background-color 0.3s ease; } /* ── Reduced motion ───────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { html, body, .product-card-hunt, .cat-card, .brand-pill, .trust-card, .faq-item, .popular-item, .hero-blob1, .hero-blob2 { animation: none !important; transition-duration: 0.01ms !important; } }