/** Shopify CDN: Minification failed Line 42:0 All "@import" rules must come first **/ /* ============================================================ 9JA Enterprise Tools & Equipment Header & Navigation Override — Supply Theme Matches: dark/gold design system used on all custom pages HOW TO INSTALL: 1. Shopify Admin → Online Store → Themes → Actions → Edit Code 2. Assets folder → Add new asset → Blank file → name it: 9ja-header-override.css 3. Paste this entire file → Save 4. Then open: Layout → theme.liquid 5. Find the line: {{ 'theme.css' | asset_url | stylesheet_tag }} (or any other stylesheet_tag line near the top in ) 6. ADD THIS LINE directly after it: {{ '9ja-header-override.css' | asset_url | stylesheet_tag }} 7. Save theme.liquid ============================================================ */ /* ── DESIGN TOKENS ── */ :root { --hdr-gold: #c8922a; --hdr-gold-light: #e8b04a; --hdr-gold-dim: rgba(200,146,42,0.15); --hdr-black: #0a0a0a; --hdr-dark: #111418; --hdr-panel: #181c22; --hdr-border: #2a2f38; --hdr-white: #f0ede8; --hdr-muted: #8a8f99; --hdr-font-head: 'Barlow Condensed', sans-serif; --hdr-font-body: 'Lato', sans-serif; } /* ── GOOGLE FONTS ── */ @import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;600;700;800&family=Lato:wght@300;400;700&display=swap'); /* ════════════════════════════════════════════ TOP ANNOUNCEMENT / PROMO BAR ════════════════════════════════════════════ */ .site-header__promo-bar, .announcement-bar, [class*="announcement"] { background: var(--hdr-gold) !important; color: var(--hdr-black) !important; font-family: var(--hdr-font-head) !important; font-size: 13px !important; font-weight: 700 !important; letter-spacing: 0.2em !important; text-transform: uppercase !important; } /* ════════════════════════════════════════════ MAIN HEADER WRAPPER ════════════════════════════════════════════ */ .site-header, header.site-header, .header-wrapper, #shopify-section-header { background: var(--hdr-dark) !important; border-bottom: 1px solid var(--hdr-border) !important; box-shadow: 0 2px 24px rgba(0,0,0,0.5) !important; } /* Remove any white or light backgrounds from header children */ .site-header__logo, .site-header__icons, .site-header__search, .site-header__cart, .site-header__account { background: transparent !important; } /* ── LOGO AREA ── */ .site-header__logo { padding: 4px 0 !important; } /* Reduce header top/bottom padding to close the gap */ .site-header__logo-bar, .site-header .grid, .site-header .grid--no-gutters, .site-header__wrapper { padding-top: 8px !important; padding-bottom: 8px !important; min-height: unset !important; } .site-header { padding-top: 0 !important; padding-bottom: 0 !important; } .site-header__logo a { display: flex !important; align-items: center !important; gap: 14px !important; text-decoration: none !important; } .site-header__logo img, .site-header__logo-image, .site-header__logo a img { max-height: 52px !important; width: auto !important; filter: none !important; background: transparent !important; mix-blend-mode: lighten !important; } /* Tagline text next to logo */ .site-header__logo-link span, .site-header__logo p, .site-header__tagline { font-family: var(--hdr-font-body) !important; font-size: 13px !important; font-weight: 300 !important; color: var(--hdr-muted) !important; letter-spacing: 0.05em !important; display: none; /* hide by default — logo image only */ } /* ── SEARCH BAR ── */ .site-header__search-form, .site-header__search, form[action="/search"] { background: var(--hdr-panel) !important; border: 1px solid var(--hdr-border) !important; border-radius: 0 !important; } .site-header__search-form input, .site-header__search input[type="search"], .site-header__search input[type="text"], input.search-bar__input { background: var(--hdr-panel) !important; color: var(--hdr-white) !important; font-family: var(--hdr-font-body) !important; font-size: 14px !important; border: none !important; outline: none !important; padding: 10px 16px !important; } .site-header__search-form input::placeholder, input.search-bar__input::placeholder { color: var(--hdr-muted) !important; } .site-header__search-form button, .search-bar__submit, button[type="submit"] .icon { background: transparent !important; color: var(--hdr-gold) !important; } .site-header__search-form svg, .search-bar__submit svg { fill: var(--hdr-gold) !important; stroke: var(--hdr-gold) !important; } /* ── CART & ACCOUNT ICONS ── */ .site-header__cart, .site-header__cart-toggle, .site-header__account, .site-nav__link--icon { color: var(--hdr-white) !important; } .site-header__cart svg, .site-header__account svg, .site-nav__link--icon svg { fill: var(--hdr-white) !important; stroke: var(--hdr-white) !important; } .site-header__cart:hover svg, .site-header__account:hover svg { fill: var(--hdr-gold) !important; stroke: var(--hdr-gold) !important; } /* Cart count bubble */ .cart-link__bubble, .site-header__cart-count, [class*="cart-count"], [class*="cart-bubble"] { background: var(--hdr-gold) !important; color: var(--hdr-black) !important; font-family: var(--hdr-font-head) !important; font-weight: 800 !important; font-size: 11px !important; } /* Cart text */ .site-header__cart-count-title, .site-header__cart span { color: var(--hdr-white) !important; font-family: var(--hdr-font-head) !important; font-size: 13px !important; font-weight: 700 !important; letter-spacing: 0.1em !important; text-transform: uppercase !important; } /* Sign in / Create account links in header */ .site-header__account a, .site-header a[href*="account"], .site-header a[href*="login"] { color: var(--hdr-muted) !important; font-family: var(--hdr-font-head) !important; font-size: 12px !important; font-weight: 600 !important; letter-spacing: 0.1em !important; text-transform: uppercase !important; text-decoration: none !important; transition: color 0.2s !important; } .site-header__account a:hover, .site-header a[href*="login"]:hover { color: var(--hdr-gold) !important; } /* ════════════════════════════════════════════ NAVIGATION BAR — Supply Theme = logo/search/cart (desktop) = hamburger/cart (mobile only) = search-bar + mobile-nav + site-nav ════════════════════════════════════════════ */ /* Hide search-bar & mobile-nav inside #navBar — already shown in header */ nav#navBar .search-bar, nav#navBar #SearchInput, nav#navBar form[action*="search"], nav#navBar .mobile-nav { display: none !important; } /* #mobileNavBar — hide on desktop, show on mobile */ #mobileNavBar { display: none !important; } @media screen and (max-width: 768px) { #mobileNavBar { display: table !important; } /* On mobile, hide desktop header search/cart */ .site-header .header-cart-btn, .site-header .search-bar { display: none !important; } } /* Style #navBar */ nav#navBar, .nav-bar { background: var(--hdr-black) !important; border-top: 2px solid var(--hdr-border) !important; border-bottom: none !important; padding: 0 !important; } /* Nav list */ .site-nav__list, .site-nav > ul, nav ul { display: flex !important; align-items: center !important; margin: 0 !important; padding: 0 !important; list-style: none !important; } /* Individual nav links */ .site-nav__link, .site-nav a, nav.site-nav a, .site-nav__list > li > a { font-family: var(--hdr-font-head) !important; font-size: 12px !important; font-weight: 700 !important; letter-spacing: 0.12em !important; text-transform: uppercase !important; color: var(--hdr-white) !important; text-decoration: none !important; padding: 14px 14px !important; display: block !important; position: relative !important; transition: color 0.2s !important; background: transparent !important; border: none !important; white-space: nowrap !important; line-height: 1.2 !important; } /* Gold underline on hover */ .site-nav__link::after, .site-nav a::after, .site-nav__list > li > a::after { content: '' !important; position: absolute !important; bottom: 0 !important; left: 14px !important; right: 14px !important; height: 2px !important; background: var(--hdr-gold) !important; transform: scaleX(0) !important; transition: transform 0.25s ease !important; } .site-nav__link:hover, .site-nav a:hover, .site-nav__list > li > a:hover { color: var(--hdr-gold) !important; background: transparent !important; } .site-nav__link:hover::after, .site-nav a:hover::after, .site-nav__list > li > a:hover::after { transform: scaleX(1) !important; } /* Active/current page */ .site-nav__link--active, .site-nav .active > a, .site-nav li.active a { color: var(--hdr-gold) !important; } .site-nav__link--active::after, .site-nav .active > a::after { transform: scaleX(1) !important; } /* SPECIAL: Sell Your Equipment — highlight it gold */ .site-nav a[href*="sell"], .site-nav__link[href*="sell"] { color: var(--hdr-gold) !important; border: 1px solid rgba(200,146,42,0.3) !important; padding: 6px 12px !important; margin: 4px 6px !important; transition: background 0.2s, color 0.2s !important; } .site-nav a[href*="sell"]:hover, .site-nav__link[href*="sell"]:hover { background: var(--hdr-gold) !important; color: var(--hdr-black) !important; border-color: var(--hdr-gold) !important; } .site-nav a[href*="sell"]::after, .site-nav__link[href*="sell"]::after { display: none !important; } /* ════════════════════════════════════════════ DROPDOWN MENUS (More▾ etc.) ════════════════════════════════════════════ */ .site-nav__dropdown, .site-nav__dropdown-list, .site-nav .dropdown, [class*="nav-dropdown"], [class*="dropdown-list"] { background: var(--hdr-panel) !important; border: 1px solid var(--hdr-border) !important; border-top: 2px solid var(--hdr-gold) !important; box-shadow: 0 8px 32px rgba(0,0,0,0.5) !important; border-radius: 0 !important; } .site-nav__dropdown a, .site-nav__dropdown-list a, .site-nav .dropdown a { font-family: var(--hdr-font-head) !important; font-size: 13px !important; font-weight: 600 !important; letter-spacing: 0.1em !important; text-transform: uppercase !important; color: var(--hdr-white) !important; padding: 12px 20px !important; border-bottom: 1px solid var(--hdr-border) !important; display: block !important; transition: color 0.2s, padding-left 0.2s !important; } .site-nav__dropdown a:last-child, .site-nav__dropdown-list a:last-child { border-bottom: none !important; } .site-nav__dropdown a:hover, .site-nav__dropdown-list a:hover { color: var(--hdr-gold) !important; padding-left: 28px !important; background: rgba(200,146,42,0.05) !important; } /* Dropdown arrow indicator */ .site-nav__child-toggle, .site-nav__link--has-dropdown::after, [class*="dropdown-toggle"]::after { color: var(--hdr-gold) !important; border-color: var(--hdr-gold) !important; } /* ════════════════════════════════════════════ MOBILE MENU TOGGLE BUTTON ════════════════════════════════════════════ */ .site-nav--mobile, .site-nav__toggle, .mobile-nav__toggle, button[class*="menu-toggle"], button[aria-label*="menu"], button[aria-label*="Menu"] { background: transparent !important; color: var(--hdr-white) !important; border: 1px solid var(--hdr-border) !important; padding: 8px 12px !important; } .site-nav__toggle svg, .mobile-nav__toggle svg, button[class*="menu-toggle"] svg { fill: var(--hdr-white) !important; stroke: var(--hdr-white) !important; } .site-nav__toggle:hover, .mobile-nav__toggle:hover { border-color: var(--hdr-gold) !important; color: var(--hdr-gold) !important; } .site-nav__toggle:hover svg, .mobile-nav__toggle:hover svg { fill: var(--hdr-gold) !important; stroke: var(--hdr-gold) !important; } /* ════════════════════════════════════════════ MOBILE DRAWER / SLIDE-OUT MENU ════════════════════════════════════════════ */ .mobile-nav, .mobile-nav__container, [class*="mobile-nav"], .drawer, .drawer__inner, #MobileNav, #NavDrawer { background: var(--hdr-dark) !important; color: var(--hdr-white) !important; border-right: 1px solid var(--hdr-border) !important; } .mobile-nav__link, .mobile-nav a, [class*="mobile-nav"] a, .drawer a { font-family: var(--hdr-font-head) !important; font-size: 16px !important; font-weight: 700 !important; letter-spacing: 0.12em !important; text-transform: uppercase !important; color: var(--hdr-white) !important; padding: 16px 24px !important; border-bottom: 1px solid var(--hdr-border) !important; text-decoration: none !important; display: block !important; transition: color 0.2s, padding-left 0.2s !important; } .mobile-nav__link:hover, .mobile-nav a:hover, [class*="mobile-nav"] a:hover { color: var(--hdr-gold) !important; padding-left: 32px !important; background: rgba(200,146,42,0.05) !important; } /* Mobile: sell link highlight */ .mobile-nav a[href*="sell"], [class*="mobile-nav"] a[href*="sell"] { color: var(--hdr-gold) !important; } /* Mobile close button */ .mobile-nav__close, .drawer__close, button[class*="close"] { color: var(--hdr-white) !important; background: transparent !important; } .mobile-nav__close svg, .drawer__close svg { fill: var(--hdr-white) !important; } .mobile-nav__close:hover svg, .drawer__close:hover svg { fill: var(--hdr-gold) !important; } /* ════════════════════════════════════════════ SITEWIDE BODY & GENERAL OVERRIDES ════════════════════════════════════════════ */ /* Body background */ body { background: var(--hdr-dark) !important; } /* ════════════════════════════════════════════ FOOTER OVERRIDE — Match dark theme ════════════════════════════════════════════ */ .site-footer, footer.site-footer, #shopify-section-footer { background: var(--hdr-black) !important; border-top: 1px solid var(--hdr-border) !important; color: var(--hdr-muted) !important; } .site-footer a, .site-footer__link { color: var(--hdr-muted) !important; font-family: var(--hdr-font-head) !important; font-size: 13px !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; text-decoration: none !important; transition: color 0.2s !important; } .site-footer a:hover, .site-footer__link:hover { color: var(--hdr-gold) !important; } .site-footer h3, .site-footer h4, .site-footer__title, .footer__heading { font-family: var(--hdr-font-head) !important; font-size: 14px !important; font-weight: 800 !important; letter-spacing: 0.2em !important; text-transform: uppercase !important; color: var(--hdr-gold) !important; margin-bottom: 16px !important; } .site-footer p, .site-footer span, .site-footer li { color: var(--hdr-muted) !important; font-family: var(--hdr-font-body) !important; font-size: 13px !important; } /* Footer email input */ .site-footer input[type="email"], .site-footer input[type="text"] { background: var(--hdr-panel) !important; border: 1px solid var(--hdr-border) !important; color: var(--hdr-white) !important; padding: 10px 14px !important; border-radius: 0 !important; outline: none !important; } .site-footer input:focus { border-color: var(--hdr-gold) !important; } .site-footer button, .site-footer input[type="submit"], .site-footer .btn { background: var(--hdr-gold) !important; color: var(--hdr-black) !important; border: none !important; font-family: var(--hdr-font-head) !important; font-weight: 800 !important; letter-spacing: 0.15em !important; text-transform: uppercase !important; padding: 10px 20px !important; cursor: pointer !important; transition: background 0.2s !important; border-radius: 0 !important; } .site-footer button:hover, .site-footer input[type="submit"]:hover { background: var(--hdr-gold-light) !important; } .site-footer__copyright, .copyright { border-top: 1px solid var(--hdr-border) !important; color: rgba(138,143,153,0.5) !important; font-size: 12px !important; } /* ════════════════════════════════════════════ COLLECTION & PRODUCT PAGES — General polish ════════════════════════════════════════════ */ /* Collection title */ .collection-hero__title, .page-title, h1.page-title, .section-title { font-family: var(--hdr-font-head) !important; font-weight: 800 !important; text-transform: uppercase !important; color: var(--hdr-white) !important; } /* Product cards */ .product-card, .grid__item .product-card-wrapper, .product-item { background: var(--hdr-panel) !important; border: 1px solid var(--hdr-border) !important; transition: border-color 0.3s, transform 0.3s !important; } .product-card:hover, .product-item:hover { border-color: var(--hdr-gold) !important; transform: translateY(-4px) !important; } /* Product titles */ .product-card__name, .product-card .card__heading, .product-item__title, .card__heading { font-family: var(--hdr-font-head) !important; font-weight: 700 !important; text-transform: uppercase !important; color: var(--hdr-white) !important; } /* Product prices */ .product-card__price, .price, .product-item__price { color: var(--hdr-gold) !important; font-family: var(--hdr-font-head) !important; font-weight: 800 !important; font-size: 18px !important; } /* Add to cart buttons everywhere */ .btn--add-to-cart, .btn[name="add"], button[type="submit"].add-to-cart, .product-form__submit { background: var(--hdr-gold) !important; color: var(--hdr-black) !important; font-family: var(--hdr-font-head) !important; font-size: 14px !important; font-weight: 800 !important; letter-spacing: 0.15em !important; text-transform: uppercase !important; border: none !important; border-radius: 0 !important; cursor: pointer !important; transition: background 0.2s, transform 0.2s !important; } .btn--add-to-cart:hover, button[type="submit"].add-to-cart:hover, .product-form__submit:hover { background: var(--hdr-gold-light) !important; transform: translateY(-2px) !important; } /* ════════════════════════════════════════════ SCROLLBAR — subtle dark theme ════════════════════════════════════════════ */ ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { background: var(--hdr-dark); } ::-webkit-scrollbar-thumb { background: var(--hdr-border); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: var(--hdr-gold); } /* ════════════════════════════════════════════ STICKY HEADER SCROLL EFFECT ════════════════════════════════════════════ */ .site-header.scrolled, .site-header--scrolled { box-shadow: 0 4px 40px rgba(0,0,0,0.7) !important; border-bottom-color: var(--hdr-gold) !important; } /* ════════════════════════════════════════════ THEME TOGGLE — ABOVE CHAT WIDGET ════════════════════════════════════════════ */ #theme-toggle-wrap { z-index: 2147483647 !important; position: fixed !important; bottom: 80px !important; right: 24px !important; } /* ════════════════════════════════════════════ LIGHT MODE — COLLECTION PAGE OVERRIDES ════════════════════════════════════════════ */ body.light-mode .col-page { background: #f8f7f4 !important; } /* Hero */ body.light-mode .col-hero { background: #f0ede8 !important; } body.light-mode .col-hero h1 { color: #111111 !important; } body.light-mode .col-hero h1 span { color: #b8821e !important; } body.light-mode .col-hero-sub { color: #555555 !important; } body.light-mode .col-hero-stat-num { color: #b8821e !important; } body.light-mode .col-hero-stat-lbl { color: #666666 !important; } body.light-mode .col-hero-badge { background: #ffffff !important; border-color: #e0ddd8 !important; color: #222222 !important; } /* Trust bar */ body.light-mode .col-trust { background: #e8e0d4 !important; } body.light-mode .col-trust-item { color: #444444 !important; } /* Filter bar */ body.light-mode .col-filters { background: #f0ede8 !important; border-color: #ddd8d0 !important; } body.light-mode .col-filter-btn { color: #666666 !important; } body.light-mode .col-filter-btn:hover, body.light-mode .col-filter-btn.active { color: #b8821e !important; border-bottom-color: #b8821e !important; } body.light-mode .col-sort-select { background: #ffffff !important; color: #222222 !important; border-color: #d0ccc8 !important; } body.light-mode .col-result-count { color: #666666 !important; } /* Main background */ body.light-mode .col-main { background: #f8f7f4 !important; } /* Product cards */ body.light-mode .col-card { background: #ffffff !important; border-color: #e0ddd8 !important; box-shadow: 0 2px 12px rgba(0,0,0,0.06) !important; } body.light-mode .col-card:hover { box-shadow: 0 8px 32px rgba(0,0,0,0.12) !important; border-color: rgba(184,130,30,0.4) !important; } body.light-mode .col-card-category { color: #b8821e !important; } body.light-mode .col-card-title { color: #111111 !important; } body.light-mode .col-card-title:hover { color: #b8821e !important; } body.light-mode .col-card-pn { color: #888888 !important; } body.light-mode .col-condition-label { color: #666666 !important; } body.light-mode .col-condition-dot { background: #d0ccc8 !important; } body.light-mode .col-condition-dot.filled { background: #2ea84a !important; } body.light-mode .col-price-current { color: #111111 !important; } body.light-mode .col-price-was { color: #999999 !important; } body.light-mode .col-card-cta { background: rgba(184,130,30,0.08) !important; border-color: rgba(184,130,30,0.3) !important; color: #b8821e !important; } body.light-mode .col-card-cta:hover { background: #b8821e !important; color: #ffffff !important; } body.light-mode .col-card--soldout .col-card-cta { background: #f0ede8 !important; border-color: #d0ccc8 !important; color: #999999 !important; } /* Pagination */ body.light-mode .col-page-btn { background: #ffffff !important; border-color: #e0ddd8 !important; color: #666666 !important; } body.light-mode .col-page-btn:hover, body.light-mode .col-page-btn.current { background: rgba(184,130,30,0.1) !important; border-color: rgba(184,130,30,0.3) !important; color: #b8821e !important; } /* SEO catalog section */ body.light-mode .col-seo { background: #f0ede8 !important; } body.light-mode .col-seo h2 { color: #111111 !important; } body.light-mode .col-seo p { color: #555555 !important; } body.light-mode .col-seo-kw { background: #e8e0d4 !important; border-color: #d0c8be !important; color: #555555 !important; } body.light-mode .col-cat-block { background: #ffffff !important; border-color: #e0ddd8 !important; } body.light-mode .col-cat-block-header { background: #fff8ee !important; border-color: #e8e0d8 !important; } body.light-mode .col-cat-block-title { color: #111111 !important; } body.light-mode .col-cat-item { background: #f4f1ec !important; border-color: #e0ddd8 !important; color: #444444 !important; } body.light-mode .col-cat-item:hover { background: rgba(184,130,30,0.1) !important; color: #b8821e !important; } /* CTA band */ body.light-mode .col-cta-band { background: #e8e0d4 !important; } body.light-mode .col-cta-band h3 { color: #111111 !important; } body.light-mode .col-cta-band p { color: #555555 !important; } body.light-mode .col-btn-outline { color: #333333 !important; border-color: rgba(51,51,51,0.3) !important; } body.light-mode .col-btn-outline:hover { color: #b8821e !important; border-color: #b8821e !important; }