@import url('/static/fonts/vazirmatn.css'); @import url('/static/fa/css/all.min.css'); /* ============================================================ UAEPC SITE HEADER - SINGLE SOURCE OF TRUTH Auto-generated (split, header-selectors only, !important). The ONLY place header styles live. No header CSS on any page. The two @imports above make header.css fully SELF-CONTAINED: it carries BOTH the nav font (Vazirmatn) AND the icon font (FontAwesome — used by the mobile bb-bar + drawer). So any page that loads header.css gets a complete, identical nav (layout + font + icons) with NO per-page dependency. (This is why gallery — which had no per-page FA link — used to show icon-less buttons.) ============================================================ */ /* INHERITANCE LOCK — the only drift vector left after stripping page header CSS is inheritable text props leaking from page body/html. Lock EVERY one to a fixed value (NOT inherit) on the header roots. direction is left to so RTL/LTR still work. Direct header.css rules on specific elements still win (direct rule beats inheritance), so nothing breaks. */ .main-nav, .mobile-menu { color: #1a1a1a !important; font-family: Vazirmatn, "Segoe UI", Tahoma, sans-serif !important; font-size: 16px !important; font-weight: 400 !important; font-style: normal !important; font-variant: normal !important; font-stretch: 100% !important; line-height: normal !important; letter-spacing: normal !important; word-spacing: normal !important; text-align: start !important; text-transform: none !important; text-indent: 0px !important; text-shadow: none !important; white-space: normal !important; word-break: normal !important; list-style: none !important; -webkit-font-smoothing: antialiased !important; -webkit-text-size-adjust: 100% !important; text-size-adjust: 100% !important; text-rendering: optimizeLegibility !important; } .main-nav *, .mobile-menu * { -webkit-text-size-adjust: 100% !important; text-size-adjust: 100% !important; } /* FONT DETERMINISM — force every header text element to Vazirmatn so the width can't change between pages that load different web fonts (e.g. some pages load Inter, some don't). High specificity beats the extracted nav stack. Vazirmatn is @imported at the top so it's loaded on every page. */ .main-nav .nav-main-links .nav-link, .main-nav .nav-main-links a, .main-nav .nav-products-toggle, .main-nav .nav-logo-text, .main-nav .nav-logo-text .small, .main-nav .nav-products-menu a, .mobile-menu a { font-family: 'Vazirmatn', sans-serif !important; } .lang-switch a { color: #1a1a1a !important; } .nav-logo-text, .nav-logo-text .small { text-align: start !important; } .main-nav img, .mobile-menu img { content-visibility: visible !important; } .nav-logo-text { direction: ltr !important; } [dir="rtl"] .mobile-menu { right: 0 !important; left: auto !important; transform: translateX(100%) !important; } [dir="rtl"] .mobile-menu.show { transform: translateX(0) !important; } [dir="rtl"] .nav-links .hot-offers::before { content: none !important; } .main-nav { background: #fdfdfd !important; border-bottom: 1px solid #ececec !important; position: relative !important; z-index: 100 !important; width: 100% !important; } .main-nav-inner { max-width: 1300px !important; margin: 0 auto !important; display: flex !important; align-items: center !important; justify-content: space-between !important; padding: 12px 24px !important; gap: 20px !important; } .nav-logo { display: flex !important; align-items: center !important; gap: 10px !important; flex-shrink: 0 !important; text-decoration: none !important; } .nav-logo-img { width: 38px !important; height: 38px !important; background: #000 !important; color: #fff !important; border-radius: 8px !important; display: flex !important; align-items: center !important; justify-content: center !important; font-weight: 900 !important; font-size: 11px !important; line-height: 1 !important; } .nav-logo-text { font-size: 16px !important; font-weight: 900 !important; color: #000 !important; letter-spacing: -0.5px !important; line-height: 1.1 !important; } .nav-logo-text .small { font-size: 10px !important; color: #777 !important; font-weight: 600 !important; letter-spacing: 1px !important; text-transform: uppercase !important; display: block !important; } .nav-links { display: none !important; } .nav-hamburger { display: flex !important; align-items: center !important; justify-content: center !important; gap: 10px !important; padding: 9px 18px 9px 16px !important; border: 1.5px solid #e8e8e8 !important; border-radius: 24px !important; background: #fdfdfd !important; cursor: pointer !important; font-size: 13px !important; font-weight: 600 !important; color: #000 !important; flex-shrink: 0 !important; transition: all 0.25s ease !important; font-family: inherit !important; letter-spacing: 0.3px !important; } .nav-hamburger:hover { border-color: #000 !important; background: #000 !important; color: #fff !important; transform: translateY(-1px) !important; box-shadow: 0 6px 14px rgba(0,0,0,0.15) !important; } .nav-hamburger .dots-icon { display: flex !important; flex-direction: column !important; gap: 3px !important; align-items: center !important; justify-content: center !important; } .nav-hamburger .dots-icon span { width: 4px !important; height: 4px !important; background: currentColor !important; border-radius: 50% !important; transition: all 0.25s ease !important; } .nav-hamburger:hover .dots-icon span:nth-child(1) { transform: translateY(-1px) !important; } .nav-hamburger:hover .dots-icon span:nth-child(3) { transform: translateY(1px) !important; } .nav-hamburger .hamburger-text { font-size: 13px !important; font-weight: 700 !important; letter-spacing: 1px !important; text-transform: uppercase !important; } .nav-actions { display: flex !important; align-items: center !important; gap: 10px !important; flex-shrink: 0 !important; } .nav-actions .btn-login { padding: 9px 20px !important; font-size: 13px !important; font-weight: 600 !important; color: #000 !important; background: transparent !important; border: none !important; border-radius: 0 !important; text-decoration: none !important; transition: color 0.2s ease !important; letter-spacing: 0.3px !important; } .nav-actions .btn-login:hover { color: #25D366 !important; } .nav-actions .btn-signup { padding: 9px 22px !important; font-size: 13px !important; font-weight: 700 !important; color: #fff !important; background: #000 !important; border-radius: 24px !important; text-decoration: none !important; transition: background 0.25s ease, transform 0.2s ease, box-shadow 0.25s ease !important; letter-spacing: 0.5px !important; border: 1.5px solid #000 !important; } .nav-actions .btn-signup:hover { background: #25D366 !important; border-color: #25D366 !important; transform: translateY(-1px) !important; box-shadow: 0 6px 14px rgba(37, 211, 102, 0.3) !important; } .mobile-menu { display: none !important; position: fixed !important; top: 0 !important; right: 0 !important; width: 380px !important; max-width: 90vw !important; height: 100vh !important; background: #fff !important; z-index: 9999 !important; flex-direction: column !important; overflow-y: auto !important; box-shadow: -10px 0 40px rgba(0,0,0,0.2) !important; animation: slideInRight 0.3s ease !important; } .mobile-menu.show { display: flex !important; } .mobile-menu-backdrop { display: none !important; position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; background: rgba(0,0,0,0.5) !important; z-index: 9998 !important; } .mobile-menu-backdrop.show { display: block !important; } .mobile-menu-header { display: flex !important; align-items: center !important; justify-content: space-between !important; padding: 18px 24px !important; border-bottom: 1px solid #eee !important; } .mobile-menu-close { width: 40px !important; height: 40px !important; border: 1px solid #ddd !important; border-radius: 50% !important; background: #fff !important; cursor: pointer !important; font-size: 16px !important; color: #000 !important; display: flex !important; align-items: center !important; justify-content: center !important; transition: all 0.2s !important; } .mobile-menu-close:hover { background: #000 !important; color: #fff !important; } .mobile-menu-links { display: flex !important; flex-direction: column !important; padding: 20px 0 !important; flex: 1 !important; } .mobile-menu-links a { padding: 14px 24px !important; font-size: 15px !important; font-weight: 600 !important; color: #000 !important; border-bottom: 1px solid #f5f5f5 !important; display: flex !important; align-items: center !important; gap: 14px !important; text-decoration: none !important; transition: background 0.2s, padding-left 0.2s !important; } .mobile-menu-links a:hover { background: #f9f9f9 !important; padding-left: 30px !important; } .mobile-menu-links a i { color: #25D366 !important; width: 22px !important; text-align: center !important; font-size: 16px !important; } .mobile-menu-links a.hot-offers { color: #d4900f !important; } .mobile-menu-links a.hot-offers i { color: #d4900f !important; } .mobile-menu-actions { padding: 20px 24px !important; border-top: 1px solid #eee !important; display: flex !important; gap: 10px !important; } .mobile-menu-actions a { flex: 1 !important; padding: 14px !important; text-align: center !important; font-weight: 700 !important; font-size: 14px !important; border-radius: 8px !important; text-decoration: none !important; } .mobile-menu-actions .btn-login { border: 1.5px solid #ddd !important; color: #000 !important; } .mobile-menu-actions .btn-signup { background: #25D366 !important; color: #fff !important; } @media (max-width: 1100px) { .nav-links { display: none !important; } .nav-actions { display: none !important; } .nav-hamburger { display: flex !important; } } @media (max-width: 768px) { .nav-logo-text { font-size: 14px !important; } .nav-logo-text .small { font-size: 9px !important; } .nav-logo-img { width: 34px !important; height: 34px !important; font-size: 10px !important; } .main-nav-inner { padding: 10px 16px !important; } } @media (max-width: 480px) { .nav-logo-text { font-size: 13px !important; } .nav-logo-text .small { display: none !important; } } .mobile-menu .has-mobile-submenu > .submenu-toggle { display: flex !important; align-items: center !important; justify-content: space-between !important; width: 100% !important; cursor: pointer !important; } .mobile-menu .submenu-toggle .toggle-icon { font-size: 18px !important; font-weight: 900 !important; width: 24px !important; height: 24px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; border-radius: 50% !important; background: rgba(255,255,255,0.1) !important; transition: all 0.25s !important; } .mobile-menu .has-mobile-submenu.open .submenu-toggle .toggle-icon { background: #25D366 !important; transform: rotate(45deg) !important; } .mobile-menu .has-mobile-submenu.open .mobile-submenu { max-height: 500px !important; } .nav-main-links { display: flex !important; align-items: center !important; gap: 6px !important; margin: 0 auto !important; } .nav-main-links .nav-link { color: #000 !important; text-decoration: none !important; font-family: 'Vazirmatn', 'Cairo', 'Inter', 'Segoe UI', Tahoma, sans-serif !important; font-size: 14.5px !important; font-weight: 600 !important; letter-spacing: 0 !important; line-height: 1.4 !important; padding: 8px 14px !important; border-radius: 18px !important; transition: all 0.2s !important; position: relative !important; } .nav-main-links .nav-link:hover { background: #f0f0f0 !important; color: #25D366 !important; } .nav-main-links .nav-link.nav-has-dd { display: inline-flex !important; align-items: center !important; } @media (max-width: 900px) { .nav-main-links { display: none !important; } } @media (min-width: 901px) { .nav-hamburger { display: none !important; } } .nav-main-links { display: flex !important; align-items: center !important; gap: 4px !important; margin: 0 auto !important; } .nav-main-links .nav-link { color: #000 !important; text-decoration: none !important; font-family: 'Vazirmatn', 'Cairo', 'Inter', 'Segoe UI', Tahoma, sans-serif !important; font-size: 14.5px !important; font-weight: 600 !important; letter-spacing: 0 !important; line-height: 1.4 !important; padding: 8px 14px !important; border-radius: 18px !important; transition: all 0.2s !important; position: relative !important; } .nav-main-links .nav-link:hover { background: #f0f0f0 !important; color: #25D366 !important; } .nav-main-links .nav-link.nav-has-dd { display: inline-flex !important; align-items: center !important; cursor: pointer !important; } .nav-main-links .nav-disabled { opacity: 0.5 !important; cursor: not-allowed !important; pointer-events: none !important; } @media (max-width: 900px) { .nav-main-links { display: none !important; } } @media (min-width: 901px) { .nav-hamburger { display: none !important; } } .mobile-menu-cta { padding: 16px 24px !important; border-top: 1px solid #eee !important; } .lang-switch { display: inline-flex !important; align-items: center !important; gap: 4px !important; padding: 4px !important; background: #f1f3f5 !important; border-radius: 24px !important; border: 1px solid #e8eaed !important; } .lang-switch a { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 32px !important; height: 32px !important; border-radius: 50% !important; overflow: hidden !important; transition: all .2s !important; border: 2px solid transparent !important; padding: 0 !important; } .lang-switch a img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; } .lang-switch a:hover { transform: scale(1.1) !important; border-color: #f5a623 !important; } .lang-switch a.active { border-color: #f5a623 !important; box-shadow: 0 2px 8px rgba(245,166,35,.3) !important; } @media (max-width: 768px) { .lang-switch a { width: 28px !important; height: 28px !important; } } @media (max-width: 480px) { .lang-switch { padding: 3px !important; gap: 2px !important; } .lang-switch a { width: 24px !important; height: 24px !important; } } .nav-products-wrap { position: relative !important; display: inline-block !important; } .nav-products-toggle { display: inline-flex !important; align-items: center !important; gap: 6px !important; cursor: pointer !important; user-select: none !important; } .nav-products-toggle::after { content: '▾' !important; font-size: 10px !important; margin-left: 2px !important; transition: transform .2s !important; opacity: 0.7 !important; } .nav-products-wrap:hover .nav-products-toggle::after, .nav-products-wrap:focus-within .nav-products-toggle::after { transform: rotate(180deg) !important; } .nav-products-menu { position: absolute !important; top: calc(100% + 8px) !important; left: 50% !important; transform: translateX(-50%) translateY(-6px) !important; background: #fff !important; min-width: 220px !important; border-radius: 12px !important; border: 1px solid #e8eaed !important; box-shadow: 0 12px 32px rgba(0,0,0,.12) !important; padding: 8px !important; opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; transition: all .2s ease !important; z-index: 1000 !important; } [dir="rtl"] .nav-products-menu { left: auto !important; right: 50% !important; transform: translateX(50%) translateY(-6px) !important; } .nav-products-wrap:hover .nav-products-menu, .nav-products-wrap:focus-within .nav-products-menu { opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; transform: translateX(-50%) translateY(0) !important; } [dir="rtl"] .nav-products-wrap:hover .nav-products-menu, [dir="rtl"] .nav-products-wrap:focus-within .nav-products-menu { transform: translateX(50%) translateY(0) !important; } .nav-products-menu::before { content: '' !important; position: absolute !important; top: -6px !important; left: 50% !important; transform: translateX(-50%) rotate(45deg) !important; width: 12px !important; height: 12px !important; background: #fff !important; border-top: 1px solid #e8eaed !important; border-left: 1px solid #e8eaed !important; } .nav-products-menu a { display: flex !important; align-items: center !important; gap: 10px !important; padding: 9px 12px !important; border-radius: 8px !important; font-size: 14px !important; font-weight: 500 !important; color: #1a1a1a !important; background: transparent !important; transition: all .15s !important; text-decoration: none !important; white-space: nowrap !important; } .nav-products-menu a:hover { background: #f8f9fb !important; color: #f5a623 !important; transform: none !important; } .nav-products-menu .pm-emoji { font-size: 18px !important; width: 24px !important; text-align: center !important; flex-shrink: 0 !important; } @media (max-width: 900px) { .nav-products-wrap { display: none !important; } } .nav-products-wrap { position: relative !important; display: inline-block !important; } .nav-products-wrap::after { content: '' !important; position: absolute !important; top: 100% !important; left: -10px !important; right: -10px !important; height: 16px !important; background: transparent !important; z-index: 999 !important; } .nav-products-menu { position: absolute !important; top: calc(100% + 14px) !important; left: 50% !important; transform: translateX(-50%) translateY(-4px) !important; background: #fff !important; min-width: 220px !important; border-radius: 12px !important; border: 1px solid #e8eaed !important; box-shadow: 0 12px 32px rgba(0,0,0,.12) !important; padding: 8px !important; opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; transition: opacity .2s, visibility .2s, transform .2s !important; z-index: 1001 !important; } [dir="rtl"] .nav-products-menu { left: auto !important; right: 50% !important; transform: translateX(50%) translateY(-4px) !important; } .nav-products-wrap:hover .nav-products-menu { opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; transform: translateX(-50%) translateY(0) !important; } [dir="rtl"] .nav-products-wrap:hover .nav-products-menu { transform: translateX(50%) translateY(0) !important; } .nav-products-menu::before { content: '' !important; position: absolute !important; top: -6px !important; left: 50% !important; transform: translateX(-50%) rotate(45deg) !important; width: 12px !important; height: 12px !important; background: #fff !important; border-top: 1px solid #e8eaed !important; border-left: 1px solid #e8eaed !important; } .nav-products-toggle { display: inline-flex !important; align-items: center !important; gap: 6px !important; cursor: pointer !important; user-select: none !important; } .nav-products-toggle::after { content: '▾' !important; font-size: 10px !important; opacity: 0.7 !important; transition: transform .2s !important; } .nav-products-wrap:hover .nav-products-toggle::after { transform: rotate(180deg) !important; } @media (max-width: 900px) { .nav-products-wrap { display: none !important; } } html:has(.mobile-menu-backdrop.show), html:has(.mobile-menu.show), html:has(#bbMoreOverlay.show) { overflow:hidden !important } @media (max-width: 768px) { .main-nav-inner { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; } } .mobile-menu { display: none !important; position: fixed !important; top: 0 !important; bottom: auto !important; } .mobile-menu.show { display: flex !important; } .mobile-menu-backdrop { display: none !important; } .mobile-menu-backdrop.show { display: block !important; } @media (max-width:768px) { .main-nav-inner { padding:10px 14px !important;gap:8px !important } .main-nav-inner>* { flex-shrink:0 !important } .nav-logo { margin-right:auto !important } [dir="rtl"] .nav-logo { margin-right:0 !important;margin-left:auto !important } } .main-nav { background: #fff !important; border-bottom: 1px solid #eee !important; padding: 14px 0 !important; position: sticky !important; top: 0 !important; z-index: 1000 !important; box-shadow: 0 2px 8px rgba(0,0,0,0.04) !important; } .main-nav-inner { max-width: 1280px !important; margin: 0 auto !important; padding: 0 24px !important; display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 20px !important; } .nav-logo { display: flex !important; align-items: center !important; gap: 10px !important; text-decoration: none !important; color: #000 !important; flex-shrink: 0 !important; } .nav-logo-img { width: 38px !important; height: 38px !important; display: block !important; object-fit: contain !important; border-radius: 0 !important; background: none !important; box-shadow: none !important; flex-shrink: 0 !important; } .nav-logo-img span { display: block !important; } .nav-logo-text { font-size: 17px !important; font-weight: 800 !important; color: #000 !important; line-height: 1.1 !important; } .nav-logo-text .small { display: block !important; font-size: 10px !important; font-weight: 500 !important; color: #666 !important; letter-spacing: 1.5px !important; text-transform: uppercase !important; margin-top: 1px !important; } .nav-main-links { display: flex !important; align-items: center !important; gap: 4px !important; } .nav-main-links a { padding: 10px 16px !important; font-size: 14px !important; font-weight: 600 !important; color: #444 !important; text-decoration: none !important; border-radius: 8px !important; transition: all 0.2s !important; position: relative !important; } .nav-main-links a:hover { background: #f5f5f5 !important; color: #000 !important; } .nav-main-links a.active { color: #f5a623 !important; } .lang-switch { display: inline-flex !important; align-items: center !important; gap: 4px !important; padding: 4px !important; background: #f8f8f8 !important; border-radius: 24px !important; border: 1px solid #eee !important; } .lang-switch a { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 32px !important; height: 32px !important; border-radius: 50% !important; overflow: hidden !important; transition: all .2s !important; border: 2px solid transparent !important; padding: 0 !important; text-decoration: none !important; } .lang-switch a img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; } .lang-switch a:hover { transform: scale(1.1) !important; border-color: #f5a623 !important; } .lang-switch a.active { border-color: #f5a623 !important; box-shadow: 0 2px 8px rgba(245,166,35,.3) !important; } .nav-products-wrap { position: relative !important; display: inline-block !important; } .nav-products-wrap::after { content: '' !important; position: absolute !important; top: 100% !important; left: -10px !important; right: -10px !important; height: 16px !important; background: transparent !important; z-index: 999 !important; } .nav-products-toggle { display: inline-flex !important; align-items: center !important; gap: 6px !important; cursor: pointer !important; user-select: none !important; background: none !important; border: none !important; } .nav-products-toggle::after { content: '▾' !important; font-size: 10px !important; opacity: 0.7 !important; transition: transform .2s !important; } .nav-products-wrap:hover .nav-products-toggle::after { transform: rotate(180deg) !important; } .nav-products-menu { position: absolute !important; top: calc(100% + 14px) !important; left: 50% !important; transform: translateX(-50%) translateY(-4px) !important; background: #fff !important; min-width: 220px !important; border-radius: 12px !important; border: 1px solid #e8eaed !important; box-shadow: 0 12px 32px rgba(0,0,0,.12) !important; padding: 8px !important; opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; transition: opacity .2s, visibility .2s, transform .2s !important; z-index: 1001 !important; } [dir="rtl"] .nav-products-menu { left: auto !important; right: 50% !important; transform: translateX(50%) translateY(-4px) !important; } .nav-products-wrap:hover .nav-products-menu { opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; transform: translateX(-50%) translateY(0) !important; } [dir="rtl"] .nav-products-wrap:hover .nav-products-menu { transform: translateX(50%) translateY(0) !important; } .nav-products-menu::before { content: '' !important; position: absolute !important; top: -6px !important; left: 50% !important; transform: translateX(-50%) rotate(45deg) !important; width: 12px !important; height: 12px !important; background: #fff !important; border-top: 1px solid #e8eaed !important; border-left: 1px solid #e8eaed !important; } .nav-products-menu a { display: flex !important; align-items: center !important; gap: 10px !important; padding: 9px 12px !important; border-radius: 8px !important; font-size: 14px !important; font-weight: 500 !important; color: #1a1a1a !important; background: transparent !important; transition: all .15s !important; text-decoration: none !important; white-space: nowrap !important; } .nav-products-menu a:hover { background: #f8f9fb !important; color: #f5a623 !important; transform: none !important; } .nav-products-menu .pm-emoji { font-size: 18px !important; width: 24px !important; text-align: center !important; flex-shrink: 0 !important; } .nav-hamburger { display: none !important; align-items: center !important; justify-content: center !important; gap: 10px !important; padding: 9px 18px 9px 16px !important; border: 1.5px solid #e8e8e8 !important; border-radius: 24px !important; background: #fdfdfd !important; color: #1a1a1a !important; font-size: 13px !important; font-weight: 700 !important; cursor: pointer !important; transition: all 0.2s !important; } .nav-hamburger:hover { border-color: #000 !important; background: #000 !important; color: #fff !important; transform: translateY(-1px) !important; } .nav-hamburger .dots-icon { display: inline-flex !important; flex-direction: column !important; justify-content: center !important; gap: 3px !important; } .nav-hamburger .dots-icon span { width: 18px !important; height: 2px !important; background: currentColor !important; border-radius: 2px !important; } .mobile-menu { display: none !important; position: fixed !important; top: 0 !important; right: 0 !important; width: 380px !important; max-width: 90vw !important; height: 100vh !important; background: #fff !important; z-index: 9999 !important; flex-direction: column !important; overflow-y: auto !important; box-shadow: -10px 0 40px rgba(0,0,0,0.2) !important; animation: slideInRight 0.3s ease !important; } [dir="rtl"] .mobile-menu { right: auto !important; left: 0 !important; box-shadow: 10px 0 40px rgba(0,0,0,0.2) !important; animation: slideInLeft 0.3s ease !important; } .mobile-menu.show { display: flex !important; } .mobile-menu-backdrop { display: none !important; position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; background: rgba(0,0,0,0.5) !important; z-index: 9998 !important; } .mobile-menu-backdrop.show { display: block !important; } .mobile-menu-header { display: flex !important; align-items: center !important; justify-content: space-between !important; padding: 18px 24px !important; border-bottom: 1px solid #eee !important; } .mobile-menu-close { width: 40px !important; height: 40px !important; border: 1px solid #ddd !important; border-radius: 50% !important; background: #fff !important; cursor: pointer !important; font-size: 16px !important; color: #000 !important; display: flex !important; align-items: center !important; justify-content: center !important; transition: all 0.2s !important; } .mobile-menu-close:hover { background: #000 !important; color: #fff !important; } .mobile-menu-links { display: flex !important; flex-direction: column !important; padding: 20px 0 !important; flex: 1 !important; } .mobile-menu-links > a { padding: 14px 24px !important; font-size: 15px !important; font-weight: 600 !important; color: #000 !important; border-bottom: 1px solid #f5f5f5 !important; display: flex !important; align-items: center !important; gap: 14px !important; text-decoration: none !important; transition: all 0.2s !important; } .mobile-menu-links > a:hover { background: #f9f9f9 !important; padding-left: 30px !important; } [dir="rtl"] .mobile-menu-links > a:hover { padding-left: 24px !important; padding-right: 30px !important; } .mobile-menu-links > a i { color: #25D366 !important; width: 22px !important; text-align: center !important; font-size: 16px !important; } .mobile-menu-cta { padding: 20px 24px !important; border-top: 1px solid #eee !important; } @media (max-width: 900px) { .nav-main-links { display: none !important; } .nav-hamburger { display: inline-flex !important; } } #mobile-menu, #mobile-menu-backdrop, .mobile-menu, .mobile-menu-backdrop, .mobile-menu-header, .mobile-menu-links, .mobile-menu-cta, .mobile-menu-overlay, .mobile-menu-close, .nav-hamburger { display: none !important; visibility: hidden !important; opacity: 0 !important; height: 0 !important; overflow: hidden !important; pointer-events: none !important; } .bb-more-overlay { display: none !important; } @media (max-width: 900px) { .bb-more-overlay { position: fixed !important; inset: 0 !important; background: rgba(0,0,0,0.6) !important; backdrop-filter: blur(4px) !important; z-index: 10000 !important; display: none !important; align-items: flex-end !important; animation: bbFadeIn 0.15s cubic-bezier(0.4, 0, 0.2, 1) !important; will-change: opacity !important; } .bb-more-overlay.show { display: flex !important; } .bb-more-panel { background: #fff !important; width: 100% !important; max-height: 80vh !important; border-radius: 24px 24px 0 0 !important; padding: 8px 0 16px !important; animation: bbSlideUp 0.22s cubic-bezier(0.32, 0.72, 0.18, 1) !important; will-change: transform !important; overflow-y: auto !important; } .bb-more-handle { width: 40px !important; height: 4px !important; background: #ddd !important; border-radius: 2px !important; margin: 8px auto 16px !important; } .bb-more-header { display: flex !important; align-items: center !important; justify-content: space-between !important; padding: 0 20px 12px !important; border-bottom: 1px solid #f0f0f0 !important; } .bb-more-title { font-size: 17px !important; font-weight: 700 !important; color: #0a0e1a !important; } .bb-more-close { background: #f5f5f5 !important; border: none !important; width: 36px !important; height: 36px !important; border-radius: 50% !important; font-size: 18px !important; color: #555 !important; cursor: pointer !important; display: flex !important; align-items: center !important; justify-content: center !important; } .bb-more-links { padding: 8px 0 !important; } .bb-more-link { display: flex !important; align-items: center !important; gap: 14px !important; padding: 14px 20px !important; text-decoration: none !important; color: #1a1a1a !important; font-size: 15px !important; font-weight: 600 !important; border-bottom: 1px solid #f5f5f5 !important; transition: background 0.15s !important; } .bb-more-link:last-child { border-bottom: none !important; } .bb-more-link:active { background: #f9f9f9 !important; } .bb-more-link i { width: 28px !important; font-size: 18px !important; color: #f5a623 !important; text-align: center !important; } .bb-more-link.bb-cta { background: linear-gradient(135deg, #f5a623 0%, #ffc966 100%) !important; color: #0a0e1a !important; margin: 14px 20px 4px !important; border-radius: 12px !important; justify-content: center !important; font-weight: 700 !important; border: none !important; box-shadow: 0 6px 16px rgba(245,166,35,0.35) !important; } .bb-more-link.bb-cta i { color: #0a0e1a !important; width: auto !important; } body.bb-more-open { overflow: hidden !important; } .mobile-menu-btn, .mobile-menu-trigger { display: none !important; } } [dir="rtl"] .bb-more-link i { text-align: center !important; } .nav-hamburger { display: none !important; } .main-nav { transform:translateZ(0) !important;contain:layout style !important } .nav-main-links { flex-wrap: nowrap !important; } .main-nav-inner { gap: 12px !important; } @media (min-width: 901px) and (max-width: 1280px) { .nav-main-links { gap: 2px !important; } .nav-main-links .nav-link { padding: 6px 10px !important; font-size: 13px !important; } } @media (min-width: 901px) and (max-width: 1080px) { .nav-main-links .nav-link { padding: 5px 8px !important; font-size: 12.5px !important; } .main-nav-inner { gap: 8px !important; padding: 0 14px !important; } } .nav-main-links .nav-link.active { color: #f5a623 !important; } .nav-main-links .nav-products-toggle.active { color: #f5a623 !important; } /* ===== Variant C (2026-07-14, user-picked): flat gold icons, no chips, floating gold home circle in the center ===== */ /* ===== Mobile nav = bb-bar (bottom) ONLY. The old hamburger opened an EMPTY #mobile-menu slide-in panel, so it is hidden on mobile to avoid a dead button. On desktop (>=901px) it was already hidden. ===== */ @media (max-width: 900px) { .nav-hamburger { display: none !important; } } /* ============================================================ NO TAP-HIGHLIGHT BOX (owner, 2026-08-06) Android Chrome paints a translucent rectangle over whatever the finger touches. It framed the bottom-bar home icon in a grey box and looked broken. Killing only the tap flash — focus outlines are untouched, so keyboard users still see where they are, and every control keeps its own :hover/:active feedback. ============================================================ */ html { -webkit-tap-highlight-color: transparent; } /* ============================================================ THE ORDER BUTTON (2026-08-09) One action in a row of destinations, so the nav reads as "here is the thing to do" rather than one more place to go. These four rules used to sit inline in all 125 pages; they live here now because uaepc-header-sync.py strips header selectors out of the pages, and anything it strips that is not in this file simply disappears. ============================================================ */ .nav-main-links .nav-link.nav-order{ background:#f5a623; color:#0a0e1a !important; border-radius:20px; padding:8px 16px; font-weight:800; } .nav-main-links .nav-link.nav-order:hover{ background:#ffc966; color:#0a0e1a !important } /* ============================================================ THE MARKET / PORTAL ENTRY STAYS OUT OF THE DRAWER 82 of the 125 pages carried this rule inline, home included. It is a drawer rule, so the sync strips it from the pages — and anything stripped that is not here simply stops working. Kept here it also settles an inconsistency: the entry used to be hidden on 82 pages and visible on the rest. (The hero "Enter Market" button is a separate, page-level rule and is untouched — home still shows it.) ============================================================ */ /* ============================================================ MOBILE MENU LOCK (2026-08-09) — the same treatment the footer got. The header locked .main-nav and .mobile-menu and stopped there, so the bottom bar and the drawer went on inheriting whatever each page happened to set. Measured across eight pages at 390px, every one of these came out different: line-height arrived as normal / 27.2 / 28 / 28.8 / 29.6px, and the font fallback chain in four variants. What that cost: .bb-label height 18 → 21.27 (18% taller) .bb-label top 36 → 34.36 (the label moves) drawer row height 78 → 85.78 (7.8px per row) Same bar, same drawer, different size depending on which page it sat on. Home is the reference — these are the values it renders. ============================================================ */ /* descendants follow the container, so a page rule cannot reach a label or a drawer row either */ /* The browser's own margins on text elements — the footer's root cause, and the drawer is built from the same kind of markup. Specificity (0,1,1) beats a bare element rule and the UA default, and every real bar/drawer rule is (0,2,0) or higher, so nothing of ours is touched. */ /* FONT DETERMINISM — the full stack per language, not just the primary. Pages name the same primary font but different fallbacks, so while the webfont is still loading the bar renders in a different face, and since the line boxes use font metrics the whole bar changes height. Per the site rule: en=Inter, fa=Vazirmatn, ar=Cairo. */ /* everything inside follows — EXCEPT the icons, whose glyphs live in the Font Awesome font; inheriting here would turn every icon into an empty box */ /* Layout isolation. The bar also gets its own compositing layer so it snaps to whole device pixels, the way .main-nav and .site-footer do. The drawer does NOT get transform — it slides on translateY, and a transform here would overwrite the animation. */ /* ============================================================ THE CHROME OWNS ITS CONTAINER (2026-08-09) A page may pad its — /pricelist uses 14px/12px, 10px/8px under 640 — and the header, being a child of it, then arrives inset: a strip of empty page above it and a gap at both edges, while the site bar is flush everywhere else. Patching that in the page's own stylesheet is how the chrome drifts in the first place, so the mechanism lives here and the page only declares how much padding it has. page: body { --chrome-pad-x: 12px; --chrome-pad-y: 14px } chrome: everything below Both default to 0, so a page that pads nothing is untouched. Deliberately NOT 100vw — vw counts the scrollbar and would give every page without overflow-x:hidden a horizontal scrollbar. ============================================================ */ .main-nav { width: calc(100% + var(--chrome-pad-x, 0px) * 2) !important; margin-left: calc(-1 * var(--chrome-pad-x, 0px)) !important; margin-right: calc(-1 * var(--chrome-pad-x, 0px)) !important; margin-top: calc(-1 * var(--chrome-pad-y, 0px)) !important; } /* ============================================================ ONE BAR, ONE COLOUR (owner, 2026-08-10) «همشون همه یک رنگ باشه · افکت نداشته باشه · هیچ تغییری وقتی روش کلیک میشه نداشته باشه · فقط وقتی صفحهٔ اون باز است سبز بشه» The bar had five different treatments: gold icons by default, a green Quote, a red Market, and the order slot as a raised gold disc hanging above the bar. Everything is now the one neutral, and the single piece of colour in the bar is the page you are actually on. Bar background is #0a0e1a; #c8cdd8 on it is 12.6:1, the green 8.3:1. ============================================================ */ /* the centre slot is a normal item now, not a disc hanging over the bar */ /* nothing moves or changes colour on hover, press or tap. The focus outline is deliberately NOT removed — a keyboard user still needs to see where they are. */ /* the one colour in the bar: the page you are on. `.active` is set by the bundle's own setActive(), which matches location.pathname — so it follows the visitor on every page family without any per-page markup. */ /* ============================================================ NARROW PHONES: the bar labels were losing their last letters (measured 2026-08-13, ops/responsive-scan) At 320px the five slots are 64px each, and `padding: 8px 2px` left the label 60.0px to draw in. "Wholesale" needs 60.3px and «سفارش عمده» 63px, so Chrome cut them to "Wholes…" and «سفارش عمد…» — on 413 pages. Sub-pixel, which is why scrollWidth (60) never showed it. Giving the side padding back is enough for both; the font, the icons and every wider phone stay exactly as they were. ============================================================ */ /* ============================================================ TWO NARROW-PHONE SAFETY RULES (measured 2026-08-13, ops/responsive-scan) 1) SVG labels in an RTL page. text-anchor="end" is direction-aware, so on /fa and /ar the UAEPC.COM watermark was anchored the wrong way and drawn outside its own viewBox, and "60-DAY WARRANTY" came out as "DAY WARRANTY-60". These rules live here, not in the page, because the home pages are re-baked on the server and an inline fix does not survive. 2) A single long word has no break opportunity, so a few headings and inline links ran 2-11px past their box at 320px. Breaking the word is better than losing it off the edge; nothing above 360px is affected. ============================================================ */ .hb-cover svg text, .blog-article-image svg text { unicode-bidi: plaintext !important; } @media (max-width: 360px) { main h2, main h3, article h2, article h3, section h2, section h3, .section-sub, .p-section-sub, .mn-section-sub, .mc-section-sub, .sw--section-sub, .sp--section-sub, .pr--section-sub, .pj--section-sub, .lp--section-sub, .cp--section-sub, .aio--section-sub, .ac--section-sub, .section-sub a, .p-section-sub a, .mn-section-sub a, .mc-section-sub a, .sw--section-sub a, .sp--section-sub a, .pr--section-sub a, .pj--section-sub a, .lp--section-sub a, .cp--section-sub a, .aio--section-sub a, .ac--section-sub a { overflow-wrap: anywhere; } /* Spelled out, never [class*="section-sub"]: an attribute selector on `class` with a descendant `a` makes EVERY class toggle on EVERY element re-resolve every link under it — traced 2026-08-23 as the biggest cost of opening the bottom-bar panels on a 360px phone (the 12 tokens are the repo's complete list). */ } /* ============================================================ EXPORT PROMO STRIP (owner, 2026-08-13; redesigned 2026-08-29) «مشتری باید بدونه که به این کشورها مستقیم ارسال داریم بدون دردسر» Advertising only. It never touches money — the destination chips, the freight and the proforma all live in the cart wizard. The markup sits INSIDE the header block of home-{lang}.html, so uaepc-header-sync.py carries it to every page, /pricelist included. 2026-08-29 — the owner found the top of the site crowded (measured: 150px desktop, 249px on a phone, nine flags, two orange buttons a few centimetres apart). He picked this: the strip goes ABOVE the menu, one line, hazard stripes AROUND a dark plate — never behind the text or the flags, «وضوح پرچم‌ها و متن رو خراب نکنن» — and the two travel together, locked to the top. The block is now 121px / 175px. The plate needs the padding to live on .upromo, not a margin on .upromo-in: margins collapse out of a parent that has neither padding nor border, and that opened a transparent gap between the strip and the menu through which the page scrolled — the owner photographed it. The second line («ارسال مستقیم به عراق…») is gone from the markup rather than hidden with display:none. Text nobody can read is text Google discounts; if it is not shown it should not be shipped. The rule below is only a guard for a page that has not been re-synced yet. Same container maths as .main-nav — a page that pads its declares --chrome-pad-x/y and the strip still runs edge to edge. ============================================================ */ /* the strip and the menu are one sticking block: the wrapper carries the position, so the offset is the strip's real height and never a guess. width/align-self are not decoration — home-{lang}.html gives display:flex with align-items:center, and without them the wrapper shrink-wraps to its content and lands in the middle of the page. */ .uhwrap { position: sticky; top: 0; z-index: 1000; width: 100%; align-self: stretch; flex: 0 0 auto; box-shadow: 0 2px 12px rgba(10, 14, 26, .10); } .uhwrap .main-nav { position: relative; top: auto; box-shadow: none; } .upromo { width: calc(100% + var(--chrome-pad-x, 0px) * 2); margin-left: calc(-1 * var(--chrome-pad-x, 0px)); margin-right: calc(-1 * var(--chrome-pad-x, 0px)); background: repeating-linear-gradient(135deg, #0a0e1a 0 16px, #ffd400 16px 32px); padding: 7px 0; position: relative; z-index: 900; } .upromo-in { width: fit-content; max-width: calc(100% - 20px); margin: 0 auto; background: #0a0e1a; border-radius: 9px; padding: 6px 20px; display: flex; align-items: center; gap: 12px; text-decoration: none; color: #fff; font-family: 'Vazirmatn', 'Cairo', 'Inter', 'Segoe UI', Tahoma, sans-serif; } .upromo-k { flex: 0 0 auto; display: inline-flex; gap: 6px; align-items: center; } /* flex-shrink is 1 by default, so inside a narrow row the browser squeezes the images themselves rather than the gaps — on a phone the six flags climbed into one another. They keep their width; the row wraps instead. */ .upromo-k img { flex: 0 0 auto; width: 19px; height: 13px; display: block; border-radius: 2px; object-fit: cover; box-shadow: 0 0 0 1px rgba(255, 255, 255, .3); } .upromo-tx { min-width: 0; } .upromo-h { display: block; font-size: 12.5px; font-weight: 600; line-height: 1.6; color: #e9edf6; } .upromo-h b { color: #ffd400; font-weight: 800; } .upromo-s { display: none; } /* guard: pages not yet re-synced */ .upromo-c { flex: 0 0 auto; margin-inline-start: 4px; color: #ffd400; font-size: 12px; font-weight: 700; white-space: nowrap; } .upromo-c::after { content: " →"; } .upromo-in:hover .upromo-c { color: #fff; } @media (max-width: 900px) { /* 2026-08-29 (evening) — the owner held the strip against his phone and asked for the smallest plate that still reads («فضای توی گوشیش کوچیک نشه»). The CTA's own line was a third of the height for six words, so it moved up beside the flags; the flags stay apart (his earlier «نمیخوام جمع بشن» rule holds — they share a row, not a clump). 92px → 48px on a 390px phone; on a 320px phone the CTA wraps under the flags and the strip is still shorter than it was. */ .upromo { padding: 3px 0; } .upromo-in { flex-wrap: wrap; justify-content: center; text-align: center; gap: 4px 12px; padding: 4px 10px 5px; width: calc(100% - 20px); } .upromo-k { order: 1; flex: 0 1 auto; gap: clamp(5px, 2.5vw, 12px); } .upromo-k img { width: 21px; height: 14px; } .upromo-c { order: 2; flex: 0 0 auto; margin: 0; font-size: 10.5px; } .upromo-tx { order: 3; flex: 1 0 100%; } .upromo-h { font-size: 10.5px; line-height: 1.45; } } /* ---- language control ------------------------------------------------------ All three flags stay out (owner, 2026-08-29: «پرچم زبان بیرون باشه»). A globe sits in front of them, because three flags on their own say "countries" as readily as they say "language" — the mark is what tells a first-time visitor what the row is for. Inline SVG, not an emoji: colour emoji do not render in headless captures and are inconsistent across real devices. ---------------------------------------------------------------------------- */ .lang-switch::before { content: ''; flex: 0 0 auto; width: 16px; height: 16px; margin-inline: 6px 2px; opacity: .75; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23596273' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18'/%3E%3Cpath d='M12 3c2.5 2.6 3.8 5.7 3.8 9s-1.3 6.4-3.8 9c-2.5-2.6-3.8-5.7-3.8-9s1.3-6.4 3.8-9z'/%3E%3C/svg%3E") no-repeat center / contain; } @media (max-width: 480px) { .lang-switch::before { width: 14px; height: 14px; margin-inline: 4px 1px; } } /* ============================================================ CART BUTTON — the one cart entry point (owner, 2026-08-15) «هر صفحه سازه خودشو نزنه». Every floating bar and popup was removed; this replaces them. Desktop shows it in the header row, because the header is sticky and therefore always one click away. On a phone it is hidden — the shared bottom bar already sits under the thumb and carries the count on its order slot instead. The number is written by /pricelist into localStorage and painted by static/uaepc-cart-badge.v1.js; nothing else may render a cart. ============================================================ */ .hcart { display: inline-flex !important; align-items: center !important; gap: 7px !important; flex: 0 0 auto !important; white-space: nowrap !important; border: 1.5px solid #0a0e1a !important; background: #fff !important; border-radius: 22px !important; padding: 7px 13px !important; font-family: 'Vazirmatn', 'Cairo', 'Inter', 'Segoe UI', Tahoma, sans-serif !important; font-size: 13px !important; font-weight: 800 !important; color: #0a0e1a !important; text-decoration: none !important; transition: background .18s, border-color .18s !important; } .hcart:hover { background: #fff7e0 !important; border-color: #d97706 !important; } .hcart i { font-size: 14px !important; color: #0a0e1a !important; } .hcart .hcart-n { background: #f5a623 !important; color: #0a0e1a !important; font-size: 11.5px !important; font-weight: 900 !important; border-radius: 20px !important; padding: 1px 8px !important; line-height: 1.7 !important; direction: ltr !important; unicode-bidi: isolate !important; } .hcart .hcart-t { color: #5f6368 !important; font-weight: 700 !important; font-size: 12px !important; direction: ltr !important; unicode-bidi: isolate !important; } .hcart.is-empty { border-color: #d8d8d8 !important; } .hcart.is-empty .hcart-n { background: #eceff3 !important; color: #6b6b6b !important; } .hcart.is-empty .hcart-t { display: none !important; } /* Measured: at 1024px the full button (186px) pushed the nav onto a second row, which it never did before. It sheds the total first, then the word, so the nav stays on one line all the way down to the phone breakpoint. */ /* 2026-08-29: the word and the total are gone at every width, not only where they used to break the row. The icon and the count say the same thing in a third of the space, and the room bought here is what lets the full menu stay on one line beside the strip. */ .hcart .hcart-w, .hcart .hcart-t { display: none !important; } .hcart { padding: 7px 11px !important; gap: 6px !important; } @media (max-width: 900px) { .hcart { display: none !important; } } /* THE HEADER MUST NOT GROW (owner, 2026-08-15: «هدر هم بزرگ کردی خراب شده») Shedding parts of the cart button was not enough, because it treated the symptom at the widths I happened to test. Measured on the live site with the fullest button (count + total): between 901 and 1149px every multi-word English label wrapped onto a second line — «Products & Prices», «Place a Wholesale Order», «Quote Request», «Customer Portal» — and the header went from 71px to 77px. Persian and Arabic were untouched, which is why one look at one language said everything was fine. A flex line squeezes its items before it wraps their text, so the fix is to forbid the text wrap and let the row give up gap and padding instead. The header then holds ONE height, 71px, from 1500px down to the phone bar — with or without the cart, in all three languages. Verified by sweeping 900→1500 in 20px steps and measuring the text with Range rects, not the element box. */ .main-nav .nav-main-links .nav-link { white-space: nowrap !important; } @media (max-width: 1200px) { .main-nav .nav-main-links { gap: 0 !important; } .main-nav .nav-main-links .nav-link { padding-left: 9px !important; padding-right: 9px !important; } } @media (max-width: 1060px) { .main-nav .nav-main-links .nav-link { padding-left: 6px !important; padding-right: 6px !important; font-size: 13.5px !important; } } /* the count on the bottom bar's order slot — the phone's cart entry */ /* An empty cart shows nothing. It has to be a class, not the inline `style.display = 'none'` the painter used to set: the bottom bar declares `.bb-bar .bb-item span { display: block !important }` for its labels, and an !important rule beats an inline style — so every visitor with an empty cart was carrying a gold «۰» on the order slot. Measured, not guessed: computed display stayed `block` while the inline style said `none`. */ /* ============================================================ STICKY REPAIR (2026-08-15) — the header said sticky and wasn't Owner: «همه صفحات هدر چسبان داشته باشن». It already declared position:sticky, and on most pages it scrolled away anyway: home, products, the category pages, about, blog, faq. Only pricelist, gallery and inquiry actually stuck. The cause is in the pages, not in the header. They each carry `overflow-x: hidden` on html/body to stop sideways scrolling — and by spec, when one axis is not visible the other computes to `auto`, which turns into a scroll container. A sticky child then sticks to THAT box, which never scrolls, so it rides the page up and out of sight. getComputedStyle still answers "sticky", which is why reading the value proves nothing. `overflow-x: clip` does the same job — no sideways scrolling — without creating a scroll container, so sticky survives. The hidden line stays first as the fallback: a browser too old for clip keeps exactly today's behaviour, nothing regresses. This belongs here, in the one stylesheet every page loads, and not as 131 page edits: the mechanism is the chrome's, and the pages keep their own declarations untouched. ============================================================ */ /* `html body` rather than `body`: the category pages repeat the declaration in a late