/* ============================================================ MOJI BANDE — BRIGHT THEME OVERRIDE Drop this in every page AFTER style.css and style-updates.css Turns the dark site into a vibrant, colourful Snitch-style store ============================================================ */ /* ── 1. GLOBAL COLOR TOKENS ───────────────────────────────── */ /* LIGHT mode only — bright white theme */ :root, [data-theme="light"] { --bg: #FFFFFF; --bg2: #F5F5F5; --bg3: #EDEDEE; --bg4: #E2E2E6; --border: rgba(0,0,0,.10); --shadow: 0 2px 12px rgba(0,0,0,.08); --shadow-lg: 0 8px 32px rgba(0,0,0,.13); --text: #111111; --text2: #555555; --text3: #888888; --gold: #C9A227; --gold2: #D4AE2F; --gold-d: #A88520; --g-gold: linear-gradient(135deg,#D4AE2F,#A88520); --glow-gold: 0 4px 20px rgba(180,140,15,.35); --red: #E8323A; --red-d: #C42028; --blue: #2563EB; --green: #16A34A; --amber: #D97706; --purple: #7C3AED; --r: 8px; --r-lg: 16px; --r-pill: 100px; --trans: .22s ease; } /* DARK mode — keep original dark variables from style.css */ [data-theme="dark"] { --bg: #080808; --bg2: #0f0f0f; --bg3: #161616; --bg4: #1e1e1e; --border: rgba(255,255,255,.08); --card: #181818; --text: #F4F4F4; --text2: #9A9A9A; --text3: #606060; --gold: #C9A227; --gold2: #B89520; --gold-d: #C9A96E; --red: #E8323A; } /* ── 2. BODY & BASE ───────────────────────────────────────── */ [data-theme="light"] body, body { background: var(--bg); color: var(--text); } [data-theme="dark"] body { background: #080808 !important; color: #F4F4F4 !important; } [data-theme="light"] body { background: #FFFFFF !important; color: #111111 !important; } /* ── 3. NAVBAR ─────────────────────────────────────────────── */ /* LIGHT MODE navbar — white background */ [data-theme="light"] .nav-inner, [data-theme="light"] .nav-inner.scrolled { background: #FFFFFF !important; border-bottom: 2px solid #C9A227 !important; box-shadow: 0 2px 12px rgba(0,0,0,.08) !important; } /* DARK MODE navbar — black background (from style.css, don't override) */ [data-theme="dark"] .nav-inner, [data-theme="dark"] .nav-inner.scrolled { background: #000000 !important; border-bottom: 2px solid #C9A227 !important; box-shadow: 0 6px 30px rgba(0,0,0,.8) !important; } /* LIGHT MODE nav brand */ [data-theme="light"] .nav-brand { color: #111111 !important; } [data-theme="light"] .nav-brand span { color: #C9A227 !important; } /* DARK MODE nav brand */ [data-theme="dark"] .nav-brand { color: #FFFFFF !important; } [data-theme="dark"] .nav-brand span { color: #C9A227 !important; } /* Nav links — LIGHT MODE: dark text */ [data-theme="light"] .nav-links a { color: #111111 !important; } [data-theme="light"] .nav-links a:hover, [data-theme="light"] .nav-links a.active { color: #B8920F !important; } /* Nav links — DARK MODE: white text */ [data-theme="dark"] .nav-links a { color: #FFFFFF !important; } [data-theme="dark"] .nav-links a:hover, [data-theme="dark"] .nav-links a.active { color: #C9A227 !important; } .nav-links a::after { background: #C9A227 !important; } /* Search bar — LIGHT */ [data-theme="light"] .nav-search-input { background: #F5F5F5 !important; border-color: #DEDEDE !important; color: #111111 !important; } /* Search bar — DARK */ [data-theme="dark"] .nav-search-input { background: rgba(255,255,255,.08) !important; border-color: rgba(255,255,255,.15) !important; color: #FFFFFF !important; } .nav-search-icon { color: #888 !important; } /* Theme toggle — LIGHT */ [data-theme="light"] .theme-toggle { background: #F0F0F0 !important; border-color: #DEDEDE !important; color: #333 !important; } /* Theme toggle — DARK */ [data-theme="dark"] .theme-toggle { background: rgba(255,255,255,.1) !important; border-color: rgba(255,255,255,.15) !important; color: #FFFFFF !important; } /* Cart icon — LIGHT: dark */ [data-theme="light"] .cart-btn, [data-theme="light"] .cart-btn svg { color: #111111 !important; stroke: #111111 !important; } /* Cart icon — DARK: white */ [data-theme="dark"] .cart-btn, [data-theme="dark"] .cart-btn svg { color: #FFFFFF !important; stroke: #FFFFFF !important; } .cart-btn:hover, .cart-btn:hover svg { color: #C9A227 !important; stroke: #C9A227 !important; } /* Login button — LIGHT: visible on white bg */ [data-theme="light"] #nav-login-btn { background: linear-gradient(135deg,#C9A227,#B89520) !important; color: #111 !important; border: none !important; } /* Login button — DARK: gold on black */ [data-theme="dark"] #nav-login-btn { background: linear-gradient(135deg,#C9A227,#B89520) !important; color: #111 !important; border: none !important; } /* Hamburger — LIGHT: dark bars */ [data-theme="light"] .hamburger span { background: #111111 !important; } /* Hamburger — DARK: white bars */ [data-theme="dark"] .hamburger span { background: #FFFFFF !important; } /* Mobile menu — LIGHT */ [data-theme="light"] .mobile-menu { background: rgba(255,255,255,.98) !important; } [data-theme="light"] .mobile-menu a { color: #333 !important; } [data-theme="light"] .mobile-menu a:hover { color: #C9A227 !important; } /* Mobile menu — DARK */ [data-theme="dark"] .mobile-menu { background: rgba(8,8,8,.98) !important; } [data-theme="dark"] .mobile-menu a { color: #CCCCCC !important; } [data-theme="dark"] .mobile-menu a:hover { color: #C9A227 !important; } /* Cart badge */ .cart-count { background: #C9A227 !important; color: #111 !important; } /* Moji Wallet nav button — always visible styling */ .moji-wallet-nav { background: linear-gradient(135deg,#1A2B47,#243657) !important; color: #C9A96E !important; border: 1.5px solid rgba(181,144,90,.5) !important; border-radius: 100px !important; padding: .3rem .75rem .3rem .5rem !important; font-size: .72rem !important; font-weight: 700 !important; text-decoration: none !important; display: flex !important; align-items: center !important; gap: .35rem !important; white-space: nowrap !important; transition: all .2s !important; } .moji-wallet-nav:hover { background: linear-gradient(135deg,#243657,#2e4571) !important; border-color: #C9A96E !important; color: #C9A227 !important; } /* (hamburger + mobile-menu rules moved to section 3 above) */ /* ── 4. BUTTONS ───────────────────────────────────────────── */ .btn-primary { background: linear-gradient(135deg,#C9A227,#B89520) !important; color: #fff !important; box-shadow: 0 4px 20px rgba(180,140,15,.30) !important; } .btn-primary:hover { filter: brightness(1.07); transform: translateY(-2px); } .btn-ghost { background: transparent !important; color: #C9A227 !important; border: 2px solid #C9A227 !important; } .btn-ghost:hover { background: #C9A227 !important; color: #fff !important; } .btn-secondary { border-color: #DEDEDE !important; color: #111 !important; } .btn-secondary:hover { border-color: #C9A227 !important; color: #C9A227 !important; } /* ── 5. BADGES ────────────────────────────────────────────── */ .badge-gold { background: #C9A227 !important; color: #111 !important; } .badge-hot { background: linear-gradient(135deg,#C9A227,#B89520) !important; color: #111 !important; } .badge-new { background: #2563EB !important; color: #fff !important; } .badge-red { background: #E8323A !important; color: #fff !important; } .badge-outline{ border-color: #C9A227 !important; color: #B8920F !important; } .badge-sold { background: #E2E2E6 !important; color: #888 !important; } /* ── 6. CARDS ─────────────────────────────────────────────── */ .product-card { background: #FFFFFF !important; border: 1px solid #EDEDEE !important; box-shadow: 0 2px 10px rgba(0,0,0,.06) !important; } .product-card:hover { border-color: rgba(180,140,15,.35) !important; box-shadow: 0 8px 32px rgba(0,0,0,.12) !important; } .product-brand { color: #B8920F !important; } .product-name { color: #111111 !important; } .price-current { color: #111111 !important; } .price-old { color: #888 !important; } .price-save { color: #16A34A !important; } .product-actions .btn { border-color: #C9A227 !important; color: #B8920F !important; } .product-actions .btn:hover { background: #C9A227 !important; color: #111 !important; } /* ── 7. HERO / SECTIONS ───────────────────────────────────── */ .eyebrow { color: #C9A227 !important; } .section-title span { color: #C9A227 !important; } /* ── 8. FOOTER ────────────────────────────────────────────── */ #footer-wrap { background: #111111 !important; border-top: 3px solid #C9A227 !important; } .footer-brand-name { color: #fff !important; } .footer-brand-name span { color: #C9A227 !important; } .footer-desc { color: #aaa !important; } .footer-col h4 { color: #C9A227 !important; } .footer-col ul li a { color: #aaa !important; } .footer-col ul li a:hover { color: #C9A227 !important; } .social-link { border-color: #333 !important; color: #aaa !important; } .social-link:hover { border-color: #C9A227 !important; color: #C9A227 !important; } .footer-bottom p { color: #666 !important; } .footer-bottom-links a { color: #666 !important; } .footer-bottom-links a:hover { color: #C9A227 !important; } /* ── 9. SCROLLBAR ─────────────────────────────────────────── */ ::-webkit-scrollbar-track { background: #F5F5F5 !important; } ::-webkit-scrollbar-thumb { background: #C9A227 !important; } ::-webkit-scrollbar-thumb:hover { background: #B89520 !important; } /* ── 10. TOAST NOTIFICATIONS ──────────────────────────────── */ .toast-success { background: #16A34A !important; } .toast-error { background: #E8323A !important; } /* ── 11. PRODUCT PAGE OVERRIDES ───────────────────────────── */ .pd-brand { color: #B8920F !important; } .pd-price-now { color: #111111 !important; } .pd-price-save{ color: #16A34A !important; background: rgba(22,163,74,.10) !important; } .pd-size-btn { border-color: #DEDEDE !important; color: #111 !important; background: #fff !important; } .pd-size-btn:hover { border-color: #C9A227 !important; color: #B8920F !important; } .pd-size-btn.selected { border-color: #C9A227 !important; background: rgba(180,140,15,.10) !important; color: #B8920F !important; } .pd-size-label a { color: #C9A227 !important; } .pd-tab-btn.active { color: #C9A227 !important; border-bottom-color: #C9A227 !important; } .pd-tab-btn:hover { color: #111 !important; } .pd-tab-btn { color: #555 !important; } .pd-thumb.active, .pd-thumb:hover { border-color: #C9A227 !important; } .pd-skel { background: linear-gradient(90deg,#F0F0F0 25%,#E8E8E8 50%,#F0F0F0 75%) !important; } .pd-wish-btn:hover, .pd-wish-btn.active { border-color: #C9A227 !important; background: rgba(180,140,15,.10) !important; } /* Review stars */ .pd-stars, .review-stars, .reviews-big-stars { color: #F59E0B !important; } .review-bar-fill { background: #F59E0B !important; } .reviewer-avatar { background: linear-gradient(135deg,#C9A227,#B89520) !important; color: #111 !important; } .review-card { background: #FAFAFA !important; border-color: #EDEDEE !important; } .review-verified { color: #16A34A !important; } .reviews-summary { background: #FFFBEB !important; border: 1px solid #FDE68A !important; } /* Size table */ .size-table th { background: #F5F5F5 !important; color: #555 !important; } .size-table tr:hover td { background: #FFF5F5 !important; } /* Shipping panels */ .pd-tab-panel [style*="background:var(--bg2)"] { background: #F8F8F8 !important; } /* Breadcrumb */ .breadcrumb a { color: #C9A227 !important; } /* Related section */ .related-section { background: #FAFAFA !important; } /* ── 12. ANNOUNCEMENT BAR (if any) ───────────────────────── */ .announce-bar { background: linear-gradient(90deg,#C9A227,#B89520) !important; } /* ── 13. INPUT FIELDS ─────────────────────────────────────── */ input, select, textarea { background: #FFFFFF !important; border-color: #DEDEDE !important; color: #111 !important; } input:focus, select:focus, textarea:focus { border-color: #C9A227 !important; box-shadow: 0 0 0 3px rgba(180,140,15,.20) !important; } /* ── 14. SHOP PAGE FILTERS ────────────────────────────────── */ .filter-btn, .sort-btn { background: #fff !important; border-color: #DEDEDE !important; color: #111 !important; } .filter-btn.active, .filter-btn:hover { background: #C9A227 !important; border-color: #C9A227 !important; color: #111 !important; } /* ── 15. CATEGORY CARDS ───────────────────────────────────── */ .cat-card:hover { border-color: #C9A227 !important; } /* ── 16. SALE BANNER ──────────────────────────────────────── */ .sale-banner, .hero-sale { background: linear-gradient(135deg,#C9A227,#B89520) !important; } /* ── 17. SHOP CATEGORY BAR ────────────────────────────────── */ .cat-bar { background: #FFFFFF !important; border-bottom: 2px solid #F0F0F0 !important; box-shadow: 0 2px 10px rgba(0,0,0,.06) !important; } .cat-btn { color: #555 !important; border-color: #E0E0E0 !important; background: #F8F8F8 !important; } .cat-btn:hover, .cat-btn.active { border-color: #C9A227 !important; color: #B8920F !important; background: #FFFBEB !important; } .cat-btn.sale { color: #B8920F !important; border-color: #C9A227 !important; } .cat-btn.sale:hover, .cat-btn.sale.active { background: #C9A227 !important; color: #111 !important; } /* ── 18. SHOP FILTERS SIDEBAR ─────────────────────────────── */ .shop-filter { background: #FAFAFA !important; border-color: #F0F0F0 !important; } .filter-section-title { color: #111 !important; } .filter-chip { background: #F5F5F5 !important; color: #555 !important; border-color: #E0E0E0 !important; } .filter-chip:hover, .filter-chip.active { background: #FFFBEB !important; color: #B8920F !important; border-color: #C9A227 !important; } /* ── 19. PAGE HERO SECTIONS ───────────────────────────────── */ .hero-section { background: #FFFFFF !important; } .hero-badge { background: #FFFBEB !important; color: #B8920F !important; } /* ── 20. PROMO BANNER ON SHOP PAGE ────────────────────────── */ .cat-bar-promo { background: linear-gradient(90deg,#C9A227,#B89520) !important; color: #111 !important; } /* ── 21. ALL SECTION BACKGROUNDS ─────────────────────────── */ .section, section { background: #fff !important; } .section-alt, .bg-alt { background: #FAFAFA !important; } /* Moji Wallet section — preserve dark navy background */ #moji-wallet-section, section#moji-wallet-section { background: #1A2B47 !important; } /* Ensure all text inside wallet section is visible */ #moji-wallet-section .section-title, #moji-wallet-section h2 { color: #ffffff !important; } #moji-wallet-section .eyebrow { color: #C9A96E !important; } #moji-wallet-section p, #moji-wallet-section li { color: rgba(255,255,255,.8) !important; } #moji-wallet-section .section-title span, #moji-wallet-section h2 span { color: #C9A227 !important; } /* ═══════════════════════════════════════════════ MOJI BANDE OFFICIAL STORE — FASHION BRAND FIXES Targets problems seen in screenshot: - Hero stats white text now bold & visible - Promo chips full-width grid, not cut off - Marquee ticker readable - Brand name corrections sitewide ═══════════════════════════════════════════════ */ /* Hero stats — force visibility */ .hero-stat-n { color: #C9A227 !important; font-size: 1.9rem !important; } .hero-stat-l { color: #ffffff !important; font-weight: 700 !important; font-size: .63rem !important; opacity: 1 !important; } .hero-stat-div { background: rgba(255,255,255,.3) !important; } .hero-v2-img-badge { background: rgba(8,8,8,.95) !important; border: 1.5px solid rgba(232,50,58,.4) !important; padding: 1.1rem 1.5rem !important; } /* Marquee ticker — dark text on yellow for readability */ .marquee-v2 { background: #111111 !important; border-top:2px solid #C9A227; border-bottom:2px solid #C9A227; } .marquee-v2-inner span { color: #ffffff !important; } .marquee-v2-inner span.dot { color: #C9A227 !important; } /* Promo offers grid — never cut off */ .offers-section { background: #ffffff !important; padding: 1.75rem 0 !important; } .offers-bar { display: grid !important; grid-template-columns: repeat(5,1fr) !important; gap: .85rem !important; overflow: visible !important; } @media(max-width:1100px){ .offers-bar { grid-template-columns: repeat(3,1fr) !important; } } @media(max-width:680px) { .offers-bar { grid-template-columns: repeat(2,1fr) !important; } } .offer-chip { background: #FFFBEB !important; border: 1.5px dashed #C9A227 !important; border-radius: 12px !important; padding: .85rem !important; min-width: 0 !important; width: 100% !important; } .offer-chip-code { color: #B8920F !important; font-size: 1rem !important; } .offer-chip-desc { color: #555 !important; } .offer-chip-copy { background: #C9A227 !important; color: #fff !important; border: none !important; border-radius: 6px !important; font-weight: 700 !important; padding: .3rem .7rem !important; flex-shrink: 0 !important; margin-left: auto !important; } .offer-chip-copy:hover { background: #B89520 !important; } /* Brand story section — gold left panel stays, stat numbers gold */ .story-stat-n { color: #C9A227 !important; } /* Category grid — footwear block colour */ .cb-footwear { background: linear-gradient(135deg,#1a1a2e 0%,#C9A227 100%) !important; } .cb-hoodies { background: linear-gradient(135deg,#1a1a2e 0%,#4338CA 100%) !important; } .cb-sale { background: linear-gradient(135deg,#C9A227 0%,#B8920F 100%) !important; } /* Floating tags on hero */ .hero-float { background: rgba(10,10,10,.92) !important; color: #fff !important; border:1px solid rgba(180,140,15,.4) !important; } /* Brand eyebrow badge on hero */ .hero-v2-eyebrow { background: rgba(180,140,15,.12) !important; border-color: rgba(180,140,15,.40) !important; color: #B8920F !important; } /* nav-brand rules handled in section 3 above — scoped by data-theme */