/* ============================================================ * TECH ZONE — orange-theme.css * Orange & White professional eCommerce theme override. * Load LAST in (after all other stylesheets). * Converts every green accent to the premium orange palette. * Does NOT touch any layout, content, PHP, JS, or DB logic. * ============================================================ */ /* ── 1. OVERRIDE CSS CUSTOM PROPERTIES (Design Tokens) ─────── */ :root { /* Primary orange palette */ --orange: #ff7a00; --orange-dark: #e56700; --orange-light: #fff4e8; /* Map legacy green tokens → orange equivalents */ --green-500: #ff7a00; /* was #4caf50 */ --green-600: #ff7a00; /* was #388e3c */ --green-700: #e56700; /* was #2e7d32 */ --green-800: #cc5a00; /* was #1b5e20 */ --green-900: #1f2937; /* was #0a3d18 — dark charcoal for navbar */ --green-50: #fff4e8; /* was #e8f5e9 — soft orange tint */ /* Jumia-mobile token overrides */ --j-green: #ff7a00; --j-green-bg: #fff4e8; } /* ── 2. ANNOUNCEMENT BAR ───────────────────────────────────── Was: background: var(--green-700) → premium orange gradient */ .tz-announce-bar { background: linear-gradient(90deg, #ff7a00 0%, #e56700 60%, #cc5a00 100%) !important; } /* ── 3. NAVBAR TOP ROW ─────────────────────────────────────── Was: background: var(--green-900) → deep charcoal (#1f2937) Keeps white text readable on dark bg; feels premium & neutral */ .tz-navbar__top { background: #1f2937 !important; } /* ── 4. SEARCH BAR FOCUS ───────────────────────────────────── Was: border: 2px solid var(--green-900) → orange border */ .tz-search-wrap:focus-within, .tz-search-input:focus { border-color: #ff7a00 !important; box-shadow: 0 0 0 3px rgba(255, 122, 0, 0.18) !important; outline: none; } .tz-search-btn { background: #ff7a00 !important; } .tz-search-btn:hover { background: #e56700 !important; } /* ── 5. CATEGORY DRAWER HOVER ──────────────────────────────── Was: background: var(--green-50); color: var(--green-700) */ .tz-cats-drawer a:hover { background: #fff4e8 !important; color: #ff7a00 !important; } /* ── 6. ALERT SUCCESS ──────────────────────────────────────── Keep semantic green for success alerts — accessibility intact. Override only the green CSS variables used elsewhere. */ /* (intentionally left — alert-success stays green for UX clarity) */ /* ── 7. BREADCRUMB LINKS ────────────────────────────────────── Was: color: var(--green-600) → orange */ .breadcrumb a { color: #ff7a00 !important; } .breadcrumb a:hover { color: #e56700 !important; } /* ── 8. BUTTON: btn-green / tz-btn-green ───────────────────── Legacy .btn-green class → orange */ .btn-green, .tz-btn-green { background: #ff7a00 !important; color: #fff !important; border-color: #ff7a00 !important; } .btn-green:hover, .tz-btn-green:hover { background: #e56700 !important; border-color: #e56700 !important; } /* Outline green variant */ .btn-outline-green { background: transparent !important; color: #ff7a00 !important; border-color: #ff7a00 !important; } .btn-outline-green:hover { background: #fff4e8 !important; } /* ── 9. FORM CONTROLS ──────────────────────────────────────── Was: border-color: var(--green-600) on focus → orange */ .form-control:focus, input:focus, select:focus, textarea:focus { border-color: #ff7a00 !important; box-shadow: 0 0 0 3px rgba(255, 122, 0, 0.15) !important; outline: none !important; } /* ── 10. ORDER / BADGE STATUS COLORS ───────────────────────── .status-delivered & .badge-delivered Was: background: #e8f5e9; color: #2e7d32 → soft orange */ .status-delivered, .badge-delivered { background: #fff4e8 !important; color: #cc5a00 !important; } /* ── 11. SPINNER / LOADER ───────────────────────────────────── Was: border-top-color: var(--green-600) → orange */ .spinner, [class*="spinner"], [class*="loader"] { border-top-color: #ff7a00 !important; } /* ── 12. STATIC HERO SECTION ───────────────────────────────── Was: linear-gradient(135deg, var(--green-900) 0%, var(--green-700) 60%, var(--green-800) 100%) → premium orange gradient */ .tz-static-hero { background: linear-gradient(135deg, #1f2937 0%, #ff7a00 55%, #e56700 100%) !important; } /* Radial accent glow — orange tinted */ .tz-static-hero__bg { background: radial-gradient( ellipse at 70% 50%, rgba(255, 122, 0, 0.22) 0%, transparent 65% ) !important; } /* ── 13. TRUST RIBBON ICONS ────────────────────────────────── Was: color: var(--green-600) → orange */ .tz-trust-icon { color: #ff7a00 !important; } /* ── 14. CATEGORY CARDS ────────────────────────────────────── Icon tint: was green-600 → orange Hover border: was green-600 → orange Hover bg: was green-50 → soft orange */ .tz-category-card__img { color: #ff7a00 !important; } .tz-category-card:hover .tz-category-card__img { background: #fff4e8 !important; border-color: #ff7a00 !important; } /* ── 15. SECTION HEADER "SEE ALL" LINKS ────────────────────── Was: color: var(--green-600) → orange */ .tz-see-all, .j-section-header__see-all { color: #ff7a00 !important; } .tz-see-all:hover, .j-section-header__see-all:hover { color: #e56700 !important; } /* ── 16. FLASH SALE BAR ────────────────────────────────────── Keep the red flash-sale label (urgency styling) but add a polished orange border accent beneath the bar */ .j-flash-bar { border-bottom: 2px solid #ff7a00 !important; } /* ── 17. PROMO CARD #1 (gradient banner) ───────────────────── Was: linear-gradient(135deg, #1b5e20, #388e3c) → rich orange */ .tz-promo-card--1 { background: linear-gradient(135deg, #cc5a00, #ff7a00) !important; } /* Promo cards 2 & 3 — keep their own gradients; add orange accent */ .tz-promo-card--2 { background: linear-gradient(135deg, #1f2937, #374151) !important; } .tz-promo-card--3 { background: linear-gradient(135deg, #374151, #4b5563) !important; } /* ── 18. CTA REGISTER BANNER ───────────────────────────────── Was: linear-gradient(135deg, var(--green-900) 0%, var(--green-800) 100%) → deep charcoal-to-orange premium gradient */ .tz-cta-banner { background: linear-gradient(135deg, #1f2937 0%, #cc5a00 60%, #ff7a00 100%) !important; } .tz-cta-banner__bg { background: radial-gradient( ellipse at 30% 50%, rgba(255, 122, 0, 0.18) 0%, transparent 65% ) !important; } /* ── 19. HERO AD SECTION BACKGROUND ────────────────────────── Was: background: var(--green-900) → charcoal */ .tz-hero-ad-section { background: #1f2937 !important; } /* ── 20. PRODUCT CARD HOVER EFFECTS ───────────────────────── Smooth lift + soft orange glow on hover */ .j-product-card:hover, .tz-product-card:hover, [class*="product-card"]:hover { transform: translateY(-3px) !important; box-shadow: 0 8px 24px rgba(255, 122, 0, 0.18) !important; transition: transform 0.2s ease, box-shadow 0.2s ease !important; } /* ── 21. PRODUCT CARD BADGES / ACCENTS ─────────────────────── Green discount/sale badges → orange */ .j-badge-discount, [class*="badge-discount"], [class*="badge-sale"], [class*="badge-new"] { background: #ff7a00 !important; color: #fff !important; } /* ── 22. CART DELIVERY BOX (jumia-mobile.css) ──────────────── Was: background: var(--j-green-bg); border: #a5d6a7; color: var(--j-green) → soft orange info box */ .j-cart-summary__delivery-box { background: #fff4e8 !important; border-color: #ffb366 !important; color: #cc5a00 !important; } /* "FREE" label in cart summary */ .j-summary-free { color: #ff7a00 !important; } /* ── 23. FOOTER ─────────────────────────────────────────────── Keep clean white/light-gray footer; add orange accents */ .tz-footer__top { background: #f9fafb !important; } .tz-footer__heading, .tz-footer h4, .tz-footer h5 { color: #ff7a00 !important; } .tz-footer__bottom { background: #1f2937 !important; } /* ── 24. ACTIVE NAV LINKS / MENU STATES ────────────────────── Any active or highlighted nav items use orange */ .tz-topnav-links a.active, .tz-topnav-links a:hover, .navbar-nav a.active, .navbar-nav a:hover { background: rgba(255, 122, 0, 0.15) !important; color: #ff7a00 !important; } /* ── 25. BOTTOM NAVIGATION ACTIVE TAB ──────────────────────── Already uses --j-orange; this reinforces it */ .j-bnav-tab--active, .j-bnav-tab:hover { color: #ff7a00 !important; } /* ── 26. GENERAL LINK & ACCENT SWEEP ──────────────────────── Any remaining stray green-600 / green-700 usage */ [class*="text-green"], [class*="color-green"] { color: #ff7a00 !important; } [class*="bg-green"] { background-color: #fff4e8 !important; color: #cc5a00 !important; } [class*="border-green"] { border-color: #ff7a00 !important; } /* ── 27. PRIMARY BUTTONS ───────────────────────────────────── Ensure .tz-btn-primary is orange */ .tz-btn-primary, .btn-primary { background: #ff7a00 !important; border-color: #ff7a00 !important; color: #fff !important; } .tz-btn-primary:hover, .btn-primary:hover { background: #e56700 !important; border-color: #e56700 !important; } /* ── 28. SMOOTH TRANSITIONS ────────────────────────────────── Global transition polish for all interactive elements */ a, button, .tz-btn, [class*="btn"], [class*="card"] { transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease; }