/* ============================================ Diamond Cosmo Custom Theme Green accent palette, Arabic storefront copy, direction-aware layout (site default is LTR; Arabic (RTL) is also selectable), clean design ============================================ */ /* Google Fonts import */ @import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700;800&display=swap'); /* ============================================ CSS Custom Properties (Green Palette) ============================================ */ :root { --d-primary: #1B3A2D; /* Dark green */ --d-primary-light: #2D5A46; /* Medium green */ --d-accent: #1B7A4E; /* Green accent - 5.3:1 on white (was #25A56A, 3.15:1) */ --d-accent-light: #4DD28D; /* Light green */ --d-accent-glow: #A8E6C1; /* Subtle glow */ --d-gold: #C9952A; /* Gold accent */ --d-gold-light: #E2A63E; /* Gold hover */ --d-bg: #FFFFFF; /* Clean white */ --d-bg-alt: #F8FAF9; /* Slightly off-white */ --d-bg-dark: #0F1F1A; /* Very dark */ --d-text: #2D3436; /* Dark text */ --d-text-light: #636E72; /* Gray text */ --d-text-inverse: #FFFFFF; /* White text on dark */ --d-border: #E0E6E3; /* Subtle borders */ --d-header-bg: #1B3A2D; /* Dark green header */ --d-sidebar-bg: #F8FAF9; /* Sidebar bg */ --d-shadow: 0 2px 8px rgba(0,0,0,0.08); --d-radius: 10px; --d-radius-sm: 6px; --d-transition: all 0.2s ease; --font-tajawal: 'Tajawal', sans-serif; } /* ============================================ Global Styles ============================================ */ html, body { font-family: var(--font-tajawal); background: var(--d-bg); color: var(--d-text); overflow-x: hidden; } a { color: var(--d-accent); transition: var(--d-transition); } a:hover { color: var(--d-primary); text-decoration: none; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-tajawal); font-weight: 700; } /* ============================================ Header - Dark Green ============================================ */ #wrapwrap > header, header#top { background: var(--d-header-bg) !important; border-bottom: 2px solid var(--d-accent); } #wrapwrap > header .navbar, header#top .navbar { background: var(--d-header-bg) !important; padding: 0.5rem 1rem; min-height: 56px; } /* Logo area */ #wrapwrap > header .navbar-brand, header#top .navbar-brand { font-family: var(--font-tajawal); font-weight: 800; font-size: 1.4rem; color: var(--d-text-inverse) !important; } /* Nav links */ #wrapwrap > header .navbar-nav .nav-link, header#top .navbar-nav .nav-link { color: rgba(255,255,255,0.90) !important; font-family: var(--font-tajawal); font-weight: 500; padding: 0.5rem 1rem; transition: var(--d-transition); font-size: 0.95rem; } #wrapwrap > header .navbar-nav .nav-link:hover, header#top .navbar-nav .nav-link:hover { color: var(--d-accent-light) !important; background: rgba(255,255,255,0.08); border-radius: var(--d-radius-sm); } /* نفس روابط القائمة على الموبايل. القاعدتين اللي فوق مكتوبين للشريط الأخضر الغامق بتاع الديسكتوب، لكن أودو 18 بتنقل نفس .navbar-nav بالظبط جوه الدرج الجانبي (.o_navbar_mobile) اللي الكور بيلوّنه فاتح #E5EDF2 - فالأبيض بـ!important كان بيخلي كل عناصر القائمة (الرئيسية، المتجر، المنتجات، العلامات التجارية، الشركات، العروض، حسابي) غير مقروءة على الموبايل: تباين 1.2:1، وهي الملاحة الوحيدة الموجودة على التليفون. الوزن هنا أعلى من اللي فوق (كلاس زيادة) + !important عشان يكسب. */ #wrapwrap > header .o_navbar_mobile .navbar-nav .nav-link, header#top .o_navbar_mobile .navbar-nav .nav-link, .o_navbar_mobile .navbar-nav .nav-link { color: var(--d-primary) !important; font-weight: 600; } #wrapwrap > header .o_navbar_mobile .navbar-nav .nav-link:hover, header#top .o_navbar_mobile .navbar-nav .nav-link:hover, .o_navbar_mobile .navbar-nav .nav-link:hover { color: var(--d-accent) !important; background: rgba(27,58,45,0.06); } /* باقي محتوى الدرج (رقم التليفون، تسجيل الدخول، مبدّل اللغة) ورث نفس الأبيض من الهيدر. */ .o_navbar_mobile, .o_navbar_mobile .o_header_hide_on_scroll, .o_navbar_mobile span, .o_navbar_mobile small { color: var(--d-text); } .o_navbar_mobile a:not(.btn) { color: var(--d-primary); } .o_navbar_mobile .fa, .o_navbar_mobile .oi { color: var(--d-accent); } /* Special section labels */ .nav-special-label { display: inline-block; font-size: 0.7rem; font-weight: 700; padding: 1px 8px; border-radius: 20px; margin-right: 4px; vertical-align: middle; } .nav-label-new { background: var(--d-accent); color: white; } .nav-label-hot { background: var(--d-gold); color: white; } /* ============================================ Product Cards ============================================ */ .oe_product { border: 1px solid var(--d-border); border-radius: var(--d-radius); background: var(--d-bg); transition: var(--d-transition); overflow: hidden; margin-bottom: 1.5rem; } .oe_product:hover { box-shadow: var(--d-shadow); transform: translateY(-2px); border-color: var(--d-accent); } /* Odoo only gives .oe_product_image a real width in list/stretch layouts; this site's grid config never sets --o-wsale-card-thumb-size, so it was falling back to width:auto while the padding below still applied - images rendered tiny with empty space around them. The image itself is absolutely positioned to fill this box (core website_sale CSS), so giving the box a real size is what actually controls the visible size. */ .oe_product_cart { --o-wsale-card-thumb-size: 100%; } .oe_product .o_wsale_products_item_title { font-family: var(--font-tajawal); font-weight: 700; font-size: 0.95rem; color: var(--d-text); line-height: 1.3; min-height: 2.6rem; } /* The visible name is the inside this h6, not the h6 itself, and it carries Bootstrap's !important .text-primary - override it directly rather than relying on inheritance, which never reaches it. */ .oe_product .o_wsale_products_item_title a { color: var(--d-text) !important; } .oe_product .o_wsale_products_item_title a:hover { color: var(--d-accent) !important; } /* SKU badge on product cards */ .product_sku { display: block; font-size: 0.75rem; color: var(--d-text-light); font-weight: 500; margin: 4px 0; font-family: 'Courier New', monospace; background: var(--d-bg-alt); padding: 2px 8px; border-radius: 4px; text-align: center; } /* Price styling */ .product_price { font-family: var(--font-tajawal); font-weight: 800; font-size: 1.1rem; color: var(--d-accent) !important; margin: 6px 0; } /* Product name on card */ .oe_product .oe_subdescription { text-align: center; padding: 0.5rem; } /* "Log in to view prices" prompt shown to public visitors in place of the price (shop grid, product page, cart lines - see views/price_gating.xml) */ .o_diamond_login_for_price { font-size: 0.85rem; } .o_diamond_login_for_price a { color: var(--d-accent); font-weight: 600; text-decoration: underline; } .o_diamond_login_for_price a:hover { color: var(--d-primary); } /* Out-of-stock add-to-cart: Bootstrap's .disabled already handles pointer-events/opacity - this just keeps the label readable against the accent-green background instead of the default muted button text. */ .oe_product a.btn-primary.disabled, #add_to_cart.disabled { color: white !important; } /* "Add to Cart" button */ .oe_product a.btn-primary, .oe_product button[name="add_to_cart"], .a-submit { background: var(--d-accent) !important; border: none !important; color: white !important; border-radius: var(--d-radius-sm); font-family: var(--font-tajawal); font-weight: 700; font-size: 0.9rem; padding: 8px 16px; transition: var(--d-transition); } .oe_product a.btn-primary:hover, .oe_product button[name="add_to_cart"]:hover, .a-submit:hover { background: var(--d-primary-light) !important; transform: scale(1.02); } /* Stock badge */ .stock_badge { display: inline-block; /* 0.7rem كانت 11.2px - تحت حد الـ12px اللي النص بيبتدي يتقري تحته بصعوبة على شاشة تليفون. */ font-size: 0.78rem; padding: 2px 10px; border-radius: 20px; font-weight: 600; margin: 4px auto; } .stock_badge.in_stock { background: #E8F5E9; color: #2E7D32; } .stock_badge.out_of_stock { background: #FBE9E7; color: #C62828; } /* Product image container. Sizing is handled by --o-wsale-card-thumb-size above plus Odoo's own aspect-ratio/object-fit rules on the img itself - this just adds breathing room inside the box. */ .oe_product .oe_product_image { padding: 0.75rem; } /* Quantity input */ .oe_product .css_quantity_input { border: 1px solid var(--d-border); border-radius: var(--d-radius-sm); padding: 4px 8px; max-width: 70px; text-align: center; } /* ============================================ Category Sidebar (direction-aware) ============================================ */ /* Main sidebar container. كان معاه سيليكتورين تانيين اتشالوا: `section > div > div:first-child` و`.oe_shop_header + div > div:first-child`. الأول بيطابق **أي** أول div جوه div جوه section في الموقع كله، مش سايدبار المتجر - يعني صف الفوتر في كل صفحة (بلوك 1041px) كان بياخد أرضية شبه بيضا #F8FAF9 والنص الأبيض اللي جواه (تواصل معنا، عنّا، العنوان) بيختفي: تباين 1.05:1 والروابط 1.83:1. وكمان ٢١ عنصر في /shop (كروت المنتجات نفسها، وده مصدر البانل الفاتح المزدوج حوالين الكارت)، وصف صفحة "تواصل معنا" كامل، وعمود الصورة في صفحة المنتج. والتاني (.oe_shop_header) بقايا من نسخة أودو قديمة، مش موجود في الـDOM أصلاً. #products_grid_before هو سايدبار المتجر الفعلي في أودو 18. */ #products_grid_before { background: var(--d-sidebar-bg); border-radius: var(--d-radius); padding: 1rem; border: 1px solid var(--d-border); } /* Category section title */ #products_grid_before h4, #products_grid_before .h4, .oe_shop_header + div h4 { font-family: var(--font-tajawal); font-weight: 800; color: var(--d-primary); font-size: 1.1rem; border-bottom: 2px solid var(--d-accent); padding-bottom: 0.5rem; margin-bottom: 1rem; } /* Category items */ #products_grid_before ul, .oe_shop_header + div ul { list-style: none; padding: 0; margin: 0; } #products_grid_before ul li, .oe_shop_header + div ul li { padding: 0.25rem 0; } #products_grid_before ul li a, .oe_shop_header + div ul li a { color: var(--d-text); font-family: var(--font-tajawal); font-size: 0.9rem; padding: 0.4rem 0.75rem; display: block; border-radius: var(--d-radius-sm); transition: var(--d-transition); } #products_grid_before ul li a:hover, #products_grid_before ul li a:focus, .oe_shop_header + div ul li a:hover { background: var(--d-accent); color: white; } #products_grid_before ul li a.active, .oe_shop_header + div ul li a.active { background: var(--d-accent); color: white; font-weight: 700; } /* Subcategories indentation. Logical property so it indents toward the reading direction's "start" side in both English (LTR, site default) and Arabic (RTL) rather than assuming one direction. */ #products_grid_before ul li ul, .oe_shop_header + div ul li ul { padding-inline-start: 1rem; } #products_grid_before ul li ul li a, .oe_shop_header + div ul li ul li a { font-size: 0.85rem; padding-inline-start: 1rem; } /* ============================================ Featured Sections (Homepage) ============================================ */ .featured_section { margin-top: 2rem; margin-bottom: 2rem; } .featured_section h2 { font-family: var(--font-tajawal); font-weight: 800; color: var(--d-primary); font-size: 1.5rem; margin-bottom: 1.5rem; border-bottom: 3px solid var(--d-accent); padding-bottom: 0.5rem; display: inline-block; } .featured_product { background: var(--d-bg); border: 1px solid var(--d-border); border-radius: var(--d-radius); padding: 1rem; transition: var(--d-transition); text-align: center; } .featured_product:hover { box-shadow: var(--d-shadow); transform: translateY(-3px); } .featured_product img { width: 100%; height: 140px; object-fit: contain; margin-bottom: 0.5rem; } .featured_product .name { font-family: var(--font-tajawal); font-weight: 700; font-size: 0.85rem; color: var(--d-text); } .featured_product .price { font-family: var(--font-tajawal); font-weight: 800; font-size: 0.95rem; color: var(--d-accent); margin-top: 4px; } .featured_box { background: linear-gradient(135deg, var(--d-primary), var(--d-accent)); border-radius: var(--d-radius); padding: 1.5rem; color: white; } .featured_box.featured_box--gold { background: linear-gradient(135deg, var(--d-gold), var(--d-gold-light)); } .featured_box h3 { color: white; font-weight: 800; } .featured_box p { color: var(--d-accent-glow); } .featured_box a.btn-light { background: white; border: none; border-radius: var(--d-radius-sm); font-family: var(--font-tajawal); font-weight: 600; } .featured_box a.btn-light:hover { background: var(--d-accent-glow); } /* ============================================ Footer ============================================ */ /* Selectors are boosted (body ancestor + !important) to reliably beat the Website > Custom Code block's #footer/.o_footer_copyright rules, which set a bright background against a low-saturation light-gray text color - about 1.5:1 contrast, well under the 4.5:1 WCAG AA minimum. */ body footer, body #footer { background: var(--d-header-bg) !important; color: rgba(255,255,255,0.92) !important; border-top: 3px solid var(--d-accent); padding-top: 2rem; padding-bottom: 1.5rem; font-family: var(--font-tajawal); } body footer h5, body footer h4, body #footer h5, body #footer h4 { color: #fff !important; font-weight: 800; margin-bottom: 1rem; font-size: 1.1rem; } body footer p, body #footer p { color: rgba(255,255,255,0.85) !important; font-size: 0.9rem; line-height: 1.7; } /* :not(#wa-float-btn a) - زرار الواتساب العائم متحقون بعد .o_footer_copyright، يعني هو تقنياً جوه