/* ════════════════════════════════════════════════════════════ مازند موتور بریمانی — استایل مشترک سایت معرفی (پس از colors_and_type.css و components.css لود شود) ════════════════════════════════════════════════════════════ */ body { background: var(--neutral-50); } .container { max-width: 1200px; margin: 0 auto; padding: 0 24px; } /* جلوگیری از اسکرول/سرریز افقی ناخواسته در کل سایت. ⚠️ فقط روی — و نه روی . مقدارِ overflow عنصر ریشه به viewport منتقل می‌شود و خودِ ریشه visible می‌ماند، پس بریدنِ افقی سر جایش است. ولی اگر همین را روی هم بگذاریم، overflow-y آن به auto محاسبه می‌شود و body خودش «ظرف اسکرول» می‌شود؛ آن‌وقت هر `position:sticky` داخل صفحه به scrollport ِ body می‌چسبد که هرگز اسکرول نمی‌شود ⇒ نوار کناری فیلترها و سربرگ چسبان، بی‌اثر. */ html { max-width: 100%; overflow-x: hidden; } body { max-width: 100%; } a { color: inherit; } .ic { display: inline-flex; } .ic svg { display: block; } /* ── Top utility bar ── */ /* wrapper بدون اثر روی چیدمان در صفحات معمولی (sticky هدر حفظ می‌شود) */ .site-topwrap { display: contents; } /* حالت شفاف و شناور روی هیرو (فقط صفحهٔ اصلی) */ .site-topwrap.overlay { display: block; position: absolute; inset-inline: 0; top: 0; z-index: 50; background: linear-gradient(to bottom, rgba(10,14,10,0.9) 0%, rgba(10,14,10,0.6) 50%, rgba(10,14,10,0) 100%); } .site-topwrap.overlay .topbar { background: transparent; } .site-topwrap.overlay .site-header { position: static; background: transparent; backdrop-filter: none; border-bottom: none; } .site-topwrap.overlay .topbar a, .site-topwrap.overlay .brand-lockup .name, .site-topwrap.overlay .main-nav a, .site-topwrap.overlay .header-actions .btn-ghost { color: #fff; text-shadow: 0 1px 10px rgba(0,0,0,0.7); } .site-topwrap.overlay .brand-full { color: rgba(255,255,255,0.85); text-shadow: 0 1px 6px rgba(0,0,0,0.5); } .site-topwrap.overlay .brand-full .cap { color: #fff; } .site-topwrap.overlay .main-nav a:hover, .site-topwrap.overlay .main-nav a.active { color: #fff; } .site-topwrap.overlay .main-nav a { text-shadow: none; } .site-topwrap.overlay .nav-toggle { color: #fff; } /* سایهٔ نرم روی همهٔ آیکن‌های هدر تا روی هر بخش عکس خوانا بمانند */ .site-topwrap.overlay .site-header svg { filter: drop-shadow(0 1px 5px rgba(0,0,0,0.8)); } /* دکمهٔ خروج: قرمز در همه‌جا؛ روی هیروی صفحهٔ اصلی قرمزِ روشن‌تر و درخشان برای دیده‌شدن */ .logout-act { color: var(--danger-500); } .site-topwrap.overlay .header-actions .logout-act { color: #ff7a7a; } .site-topwrap.overlay .header-actions .logout-act svg { filter: drop-shadow(0 1px 6px rgba(0,0,0,0.95)); } /* محتوای منوهای کشویی روی کارت روشن قرار دارد → همیشه متن تیره */ .site-topwrap.overlay .nav-mega .nav-menu-item { color: var(--text-secondary); } .site-topwrap.overlay .nav-mega .nav-menu-item:hover { color: var(--brand-600); } .site-topwrap.overlay .nav-mega .nav-menu-phone { color: var(--text-primary); } .site-topwrap.overlay .nav-mega .nav-menu-phone:hover { color: var(--brand-600); } .site-topwrap.overlay .nav-mega .nav-mega-all { color: var(--brand-600); } .site-topwrap.overlay + main .hero { padding-top: 110px; } .site-topwrap.overlay + main .acc-head { padding-top: 104px; } .topbar { background: var(--neutral-900); color: var(--neutral-100); font-size: 12.5px; } .topbar .container { display: flex; align-items: center; gap: 20px; height: 40px; } .topbar a { color: var(--neutral-100); display: inline-flex; align-items: center; gap: 6px; opacity: 0.85; } .topbar a:hover { opacity: 1; text-decoration: none; } /* ── Header ── */ .site-header { position: sticky; top: 0; z-index: 50; background: rgba(251, 246, 238, 0.88); backdrop-filter: blur(12px); border-bottom: 1px solid var(--border-subtle); } .site-header .container { display: flex; align-items: center; gap: 18px; height: 72px; } .brand-lockup { display: flex; align-items: center; gap: 12px; } .brand-lockup .name { font-family: var(--font-display); font-weight: 800; font-size: 18px; color: var(--text-primary); line-height: 1.15; white-space: nowrap; } .brand-full { font-size: 8.5px; font-weight: 600; letter-spacing: 1.4px; color: var(--text-tertiary); white-space: nowrap; margin-top: 2px; } .brand-full .cap { font-size: 11px; font-weight: 800; color: var(--text-secondary); } .main-nav { display: flex; align-items: center; gap: 16px; flex: 1; } .main-nav a { font-size: 14.5px; font-weight: 600; color: var(--text-secondary); transition: color .15s; } .main-nav a:hover, .main-nav a.active { color: var(--brand-600); text-decoration: none; } .main-nav a svg { transition: transform .2s; } /* لینک ویژهٔ «همکاران» — انتهای سمت چپ منو با فلش مورب */ .nav-business { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; color: var(--brand-600); } .nav-business:hover { color: var(--brand-600); text-decoration: none; } .nav-business:hover svg { transform: translate(-2px, -2px); } /* منوی کشویی دسته‌بندی محصولات */ .nav-dropdown { position: relative; display: flex; align-items: center; } .nav-dropdown > a { display: inline-flex; align-items: center; gap: 4px; } .nav-dropdown:hover > a svg { transform: rotate(180deg); } .nav-mega { position: absolute; top: 100%; inset-inline-start: 0; transform: translateY(8px); padding-top: 16px; opacity: 0; visibility: hidden; transition: opacity .18s ease, transform .18s ease; z-index: 60; } .site-header .container .nav-dropdown:hover .nav-mega { opacity: 1; visibility: visible; transform: translateY(0); } .nav-mega-card { width: 560px; max-width: 80vw; background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: 14px; } .nav-mega-card.narrow { width: 230px; padding: 8px; } .nav-menu-list { display: flex; flex-direction: column; gap: 2px; } .nav-menu-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--radius-md); font-size: 14px; font-weight: 600; color: var(--text-secondary); transition: background .15s, color .15s; } .nav-menu-item:hover { background: var(--bg-hover); color: var(--brand-600); text-decoration: none; } .nav-menu-item svg { color: var(--brand-500); } .nav-menu-sep { height: 1px; background: var(--border-subtle); margin: 8px 4px; } .nav-menu-label { font-size: 11px; font-weight: 700; color: var(--text-tertiary); padding: 2px 12px 6px; } .nav-menu-phone { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: var(--radius-md); font-family: var(--font-mono); font-weight: 700; font-size: 15px; color: var(--text-primary); direction: ltr; justify-content: flex-end; transition: background .15s, color .15s; } .nav-menu-phone svg { color: var(--accent-500); } .nav-menu-phone:hover { background: var(--bg-hover); color: var(--brand-600); text-decoration: none; } .nav-menu-hours { display: flex; align-items: center; gap: 6px; padding: 8px 12px 4px; font-size: 11.5px; color: var(--text-tertiary); } .nav-mega-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; } .nav-mega-item { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: var(--radius-md); transition: background .15s; } .nav-mega-item:hover { background: var(--bg-hover); text-decoration: none; } .nav-mega-item .ico { width: 40px; height: 40px; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .nav-mega-text { display: flex; flex-direction: column; min-width: 0; } .nav-mega-text .t { font-size: 13.5px; font-weight: 700; color: var(--text-primary); white-space: nowrap; } .nav-mega-text .d { font-size: 11px; color: var(--text-tertiary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .nav-mega-all { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 8px; padding: 10px; border-top: 1px solid var(--border-subtle); font-size: 13px; font-weight: 700; color: var(--brand-600); } .nav-mega-all:hover { text-decoration: none; color: var(--brand-700); } /* ── کادر جستجوی هدر (≈۲.۵ برابر دکمهٔ مشاوره خرید) ── */ .header-search { width: 200px; flex-shrink: 0; margin-inline-end: 8px; } .header-search .input { height: 42px; } .header-search > svg { color: var(--text-tertiary); } @media (max-width: 1180px) { .header-search { width: 150px; } } /* موبایل: کادر جستجو تمام‌عرض بالای صفحه */ @media (max-width: 860px) { .header-search { width: auto; flex: 1; margin: 0; } } /* ── Section scaffolding ── */ section.s { padding: 78px 0; } .sec-head { text-align: center; max-width: 660px; margin: 0 auto 44px; } .sec-head .eyebrow { display: inline-flex; align-items: center; gap: 6px; color: var(--brand-600); font-weight: 700; font-size: 13px; letter-spacing: 0.4px; margin-bottom: 12px; } .sec-head h2 { font-family: var(--font-display); font-size: 36px; font-weight: 800; letter-spacing: -0.015em; margin: 0 0 12px; } .sec-head p { color: var(--text-secondary); font-size: 16px; line-height: 1.8; margin: 0; } /* ── Page header (sub-pages) ── */ .page-head { background: linear-gradient(180deg, var(--brand-50), var(--neutral-50)); border-bottom: 1px solid var(--border-subtle); padding: 40px 0 36px; } .breadcrumb { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-tertiary); margin-bottom: 14px; } .breadcrumb a { font-weight: 500; } .breadcrumb a:hover { color: var(--brand-600); text-decoration: none; } .page-head h1 { font-family: var(--font-display); font-size: 34px; font-weight: 800; margin: 0; letter-spacing: -0.015em; } .page-head p { color: var(--text-secondary); font-size: 15px; margin: 10px 0 0; max-width: 620px; line-height: 1.8; } /* ── Hero (home) ── */ .hero { position: relative; overflow: hidden; background: radial-gradient(circle at 78% 12%, var(--brand-200) 0%, transparent 46%), radial-gradient(circle at 10% 88%, var(--accent-100) 0%, transparent 52%), var(--neutral-50); padding: 72px 0 88px; } .hero::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(var(--border-subtle) 1px, transparent 1px), linear-gradient(90deg, var(--border-subtle) 1px, transparent 1px); background-size: 34px 34px; opacity: 0.45; -webkit-mask-image: radial-gradient(circle at 60% 40%, black 0%, transparent 72%); mask-image: radial-gradient(circle at 60% 40%, black 0%, transparent 72%); } .hero .container { position: relative; z-index: 1; display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items: center; } .hero h1 { font-family: var(--font-display); font-size: 50px; font-weight: 800; line-height: 1.18; letter-spacing: -0.02em; color: var(--text-primary); margin: 0; } .hero h1 em { font-style: normal; color: var(--brand-600); } .hero .lead { font-size: 17px; color: var(--text-secondary); line-height: 1.85; max-width: 540px; } .cta-row { display: flex; flex-wrap: wrap; gap: 12px; } .hero-stats { display: flex; gap: 28px; padding-top: 26px; margin-top: 6px; border-top: 1px solid var(--border-subtle); } .hero-stats > div { display: flex; flex-direction: column; gap: 2px; } .hero-stats .v { font-family: var(--font-display); font-size: 24px; font-weight: 800; color: var(--text-primary); white-space: nowrap; } .hero-stats .k { font-size: 12px; color: var(--text-tertiary); font-weight: 500; white-space: nowrap; } .hero-visual { position: relative; } .hero-photo { width: 100%; height: 440px; border-radius: var(--radius-2xl); overflow: hidden; box-shadow: var(--shadow-lg); border: 1px solid var(--border-subtle); } .float-card { position: absolute; background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: 14px 16px; display: flex; align-items: center; gap: 12px; } @keyframes floatY { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-7px); } } .fl-a { bottom: 28px; inset-inline-start: -26px; animation: floatY 5s var(--easing-default) infinite; } .fl-b { top: 24px; inset-inline-end: -22px; animation: floatY 6s var(--easing-default) infinite; animation-delay: 1.2s; } /* ── Hero با عکس تمام‌صفحه (صفحهٔ اصلی) ── */ .hero.hero-cover { position: relative; display: block; min-height: 100vh; padding: 0; overflow: hidden; background: linear-gradient(to left, rgba(8,16,9,0.74) 0%, rgba(8,16,9,0.38) 44%, rgba(8,16,9,0) 76%), linear-gradient(to top, rgba(8,16,9,0.42) 0%, rgba(8,16,9,0) 38%), url("/images/hero-tractor.jpg") center 38% / cover no-repeat; } .hero.hero-cover::before { display: none; } .hero-cover-inner { position: absolute; top: 50%; right: clamp(22px, 6vw, 96px); transform: translateY(-50%); z-index: 1; max-width: 560px; display: flex; flex-direction: column; align-items: flex-start; gap: 22px; text-align: right; } .hero-eyebrow { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; background: rgba(255,255,255,0.16); border: 1px solid rgba(255,255,255,0.3); color: #fff; font-size: 13px; font-weight: 600; padding: 7px 14px; border-radius: 999px; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } .hero.hero-cover h1 { color: #fff; font-size: 54px; line-height: 1.18; text-shadow: 0 2px 26px rgba(0,0,0,0.45); margin: 0; } .hero-cover-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; } .btn-glass { background: rgba(255,255,255,0.16); color: #fff; border: 1px solid rgba(255,255,255,0.36); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } .btn-glass:hover { background: rgba(255,255,255,0.28); color: #fff; } .hero-scroll { position: absolute; bottom: 22px; inset-inline-start: 50%; transform: translateX(-50%); color: rgba(255,255,255,0.85); animation: floatY 2.4s var(--easing-default) infinite; z-index: 1; } @media (max-width: 920px) { .hero.hero-cover { min-height: 86vh; padding-top: 100px; } .hero.hero-cover h1 { font-size: 36px; } .hero.hero-cover { background: linear-gradient(to top, rgba(8,16,9,0.62) 0%, rgba(8,16,9,0.18) 50%, rgba(8,16,9,0.35) 100%), url("/images/hero-tractor.jpg") center / cover no-repeat; } } /* ── Trust strip ── */ .trust { background: var(--bg-surface); border-block: 1px solid var(--border-subtle); } .trust .container { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; padding-block: 26px; } .trust-item { display: flex; align-items: center; gap: 14px; } .trust-item .ico { width: 46px; height: 46px; border-radius: var(--radius-lg); background: var(--brand-50); color: var(--brand-600); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .trust-item .t { font-weight: 700; font-size: 14.5px; } .trust-item .d { font-size: 12px; color: var(--text-tertiary); } /* ── Category grid ── */ .cat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .cat-card { background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: 26px; display: flex; flex-direction: column; gap: 14px; transition: box-shadow .2s, transform .2s, border-color .2s; cursor: pointer; } .cat-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); border-color: var(--border-default); } .cat-card .ico { width: 56px; height: 56px; border-radius: var(--radius-lg); display: flex; align-items: center; justify-content: center; } .cat-card h3 { font-family: var(--font-display); font-size: 20px; font-weight: 700; margin: 0; } .cat-card .items { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; } .cat-card .more { margin-top: auto; padding-top: 8px; color: var(--brand-600); font-weight: 700; font-size: 13.5px; display: inline-flex; align-items: center; gap: 6px; } /* ── Product card ── */ .prod-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } /* شبکهٔ فهرست /products: تعداد ستون از عرضِ موجود درمی‌آید، نه از عدد ثابت ۳. پس هر عرضی که از نوار کناری باقی می‌ماند پر می‌شود و ستون‌ها لاغر و کشیده نمی‌مانند. عمداً پیش از @media‌های پایین فایل است تا در ۹۲۰px و ۵۲۰px همان‌ها حاکم بمانند. */ .prod-grid-filter { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); } .prod-card { position: relative; background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); overflow: hidden; display: flex; flex-direction: column; transition: box-shadow .2s, transform .2s; } .prod-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); } /* ── پیوند کششی ── ⚠️ کارت پیش‌تر خودش یک `` بود و کل محتوا داخلش. با آمدن ستارهٔ علاقه‌مندی — که برای کاربر واردشده یک `

` واقعی است — آن ساختار دیگر ممکن نبود: `` داخل `` هم HTML نامعتبر است و هم کلیک روی ستاره را به پیمایش به صفحهٔ کالا تبدیل می‌کند. حالا لنگر فقط دور **نام محصول** است و این شبه‌عنصر ناحیهٔ کلیکش را به کل کارت می‌کشد. `.prod-card` برای همین `position:relative` گرفت. */ .prod-card .card-link { color: inherit; text-decoration: none; } .prod-card .card-link::after { content: ''; position: absolute; inset: 0; border-radius: inherit; } /* ستاره باید **بالای** آن ناحیهٔ کشیده بنشیند، وگرنه کلیکش به صفحهٔ کالا می‌رود. */ .prod-card .fav { position: absolute; inset-block-end: 10px; inset-inline-start: 10px; z-index: 2; } /* `.btn-outline` زمینهٔ شفاف دارد و ستاره روی عکس خوانا نبود. ⚠️ `:not(...)` لازم است: بدون آن این قاعده — که ویژه‌تر است — زردِ حالت فعال را هم پاک می‌کرد. */ .prod-card .fav .fav-btn:not([aria-pressed="true"]) { background: var(--bg-surface); } /* نشان‌های روی تصویر لایه‌شان بالای پیوند کششی است ولی کلیک‌پذیر نیستند؛ بدون این، یک نوار از بالای کارت به صفحهٔ کالا نمی‌رفت. */ .prod-card .tags { pointer-events: none; } .prod-card .media { height: 180px; background: linear-gradient(135deg, var(--brand-50), var(--accent-50)); display: flex; align-items: center; justify-content: center; color: var(--brand-300); position: relative; } .prod-card .media image-slot { width: 100%; height: 100%; } /* ── نشان‌های روی تصویر کارت محصول ── ⚠️ همهٔ نشان‌ها در **یک گروه** می‌نشینند، نه هر کدام چسبیده به یک گوشه با عدد دستی. تا وقتی دو نشان بود، دو گوشهٔ مقابل هم جواب می‌داد؛ با آمدن نشان سوم (تخفیف) روی هم افتادند. حالا یک ردیف flex است که کل عرض کارت را می‌گیرد و هرجا جا کم بیاید می‌شکند — پس نشان چهارم هم بی‌دردسر اضافه می‌شود. ترتیب اولویت = ترتیب DOM: تخفیف، سپس نشان‌های محصول، سپس برند. */ .badge-row, .prod-card .tags { position: absolute; top: 12px; inset-inline: 12px; display: flex; flex-wrap: wrap; align-items: flex-start; gap: 6px; z-index: 1; } /* نام برند بلند به‌جای بیرون‌زدن، با سه‌نقطه کوتاه می‌شود */ .badge-row > *, .prod-card .tags > * { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex-shrink: 1; min-width: 0; } .prod-card .body { padding: 16px; display: flex; flex-direction: column; gap: 8px; flex: 1; } .prod-card .cat { font-size: 11.5px; color: var(--text-tertiary); font-weight: 600; } /* نام محصول: حداکثر دو خط، با ارتفاعِ همیشه‌دوخطی. نام یک‌خطی و دوخطی ریتم یکسانی می‌سازند و نام سه‌خطی کارت را بلند نمی‌کند. (۳em = دو خطِ ۱.۵ برابرِ ۱۵px) */ .prod-card .nm { font-size: 15px; font-weight: 700; line-height: 1.5; min-height: 3em; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; } /* ── ردیف پایین کارت ── `margin-top:auto` از قبل بود و کار می‌کرد؛ ناترازیِ دیدهٔ مالک از جای دیگری می‌آمد: کارتِ تخفیف‌دار یک خط بیشتر دارد (قیمت پیشین + نشان درصد)، پس `.foot` بلندتر می‌شد و چون به کف چسبیده است، خطِ جداکنندهٔ بالایش و دکمهٔ «جزئیات» بالاتر می‌نشستند. حالا جای آن خط **همیشه** رزرو است — تخفیف باشد یا نباشد — و قیمت و دکمه هر دو به کف ردیف تراز می‌شوند. */ .prod-card .foot { margin-top: auto; padding-top: 10px; display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; border-top: 1px solid var(--border-subtle); } /* «تماس برای قیمت» هم باید همان جای رزروشده را بگیرد، وگرنه خطِ جداکنندهٔ کارتِ بدون‌قیمت با کارت‌های کناری‌اش یکی درنمی‌آید. */ .prod-card .foot .price-tag, .prod-card .foot .price-call { min-height: 46px; display: inline-flex; flex-direction: column; justify-content: flex-end; } .price { font-family: var(--font-mono); font-weight: 700; direction: ltr; unicode-bidi: plaintext; white-space: nowrap; font-size: 15px; font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; } .price .u { font-family: var(--font-sans); font-weight: 500; color: var(--text-tertiary); font-size: 11.5px; } /* واحد «تومان» نباید با طول عدد جابه‌جا شود. عدد در پوستهٔ `.n` می‌نشیند با عرض کفِ نُه نویسه — یعنی بلندترین قیمت متداول (۹,۹۹۹,۹۹۹) — و از سمت خودش تراز می‌شود. پس لبهٔ راستِ عدد و جای «تومان» در همهٔ کارت‌ها یکی است. قیمت گران‌تر فقط عرض را باز می‌کند و چیزی نمی‌بُرد. `direction:ltr` جداگانه اعلام می‌شود تا عدد لاتین درون بستر فارسی وارونه خوانده نشود. */ .prod-card .foot .price .n { display: inline-block; min-width: 9ch; direction: ltr; text-align: right; } .price-call { color: var(--accent-600); font-weight: 700; font-size: 13px; } /* ── دو قیمت و درصد تخفیف ── قیمت قبلی خط‌خورده + نشان درصد در یک ردیف، و قیمت جدید زیر آن با رنگ برند. ردیف بالایی wrap می‌شود تا در ۳۹۰px هم چیزی سرریز نکند. */ .price-tag { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0; } .price-tag-was { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; } .price-was { font-family: var(--font-mono); font-size: 12px; color: var(--text-tertiary); text-decoration: line-through; text-decoration-thickness: 1.5px; direction: ltr; unicode-bidi: plaintext; white-space: nowrap; font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; } .price-off { font-size: 11px; font-weight: 800; line-height: 1; padding: 3px 7px; border-radius: 999px; background: var(--brand-500); color: #fff; white-space: nowrap; } .price-now { color: var(--brand-600); } .price-tag-lg .price-was { font-size: 14px; } .price-tag-lg .price-off { font-size: 12.5px; padding: 4px 9px; } /* تم تیره: نارنجی برند روی زمینهٔ تیره کم‌کنتراست می‌شود ⇒ یک پله روشن‌تر. الگوی خانه: فقط `data-theme` روی ریشه، بدون prefers-color-scheme. */ :root[data-theme="dark"] .price-now { color: var(--brand-400); } :root[data-theme="dark"] .price-was { opacity: .8; } /* نشان تخفیف — عضو همان گروه `.tags` است، نه یک عنصر مستقلِ چسبیده به گوشه. نخستین فرزند است تا در تنگی جا همیشه روی خط اول بماند. */ .off-flag { display: inline-flex; align-items: center; font-size: 11.5px; font-weight: 800; line-height: 1; padding: 5px 9px; border-radius: 999px; background: var(--brand-500); color: #fff; box-shadow: var(--shadow-sm); white-space: nowrap; flex-shrink: 0; } /* ── گالری چندتصویری صفحهٔ محصول ── */ .pdp-thumbs > button { flex: 0 0 80px; height: 80px; padding: 0; border-radius: var(--radius-md); background: var(--brand-50); border: 1px solid var(--border-subtle); overflow: hidden; cursor: pointer; transition: border-color .15s, box-shadow .15s; } .pdp-thumbs > button.on { border-color: var(--brand-500); box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand-500) 30%, transparent); } .pdp-thumbs > button img { width: 100%; height: 100%; object-fit: cover; display: block; } .pdp-thumbs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; padding-bottom: 4px; } /* ── Catalog layout ── */ /* `minmax(0,1fr)` تا ستون شبکه هرگز از عرض سهمش بزرگ‌تر نشود (پیش‌فرض ستون گرید `auto` است و می‌تواند با محتوای بلندِ نشکن سرریز کند). */ .catalog { display: grid; grid-template-columns: 228px minmax(0, 1fr); gap: 24px; align-items: start; } /* نوار کناری بلندتر از یک صفحه است؛ اگر آزادش بگذاریم، چسبندگی عملاً فقط تا ته خودش کار می‌کند و پایین‌ترش یک ستون خالی می‌ماند. با سقفِ ارتفاعِ یک صفحه و اسکرول درونی، همیشه کنار محصولات می‌ماند و همهٔ فیلترها هم در دسترس‌اند. */ .filter-card { background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: 20px; position: sticky; top: 88px; max-height: calc(100vh - 108px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; } .filter-card h4 { font-size: 13px; font-weight: 700; margin: 0 0 12px; color: var(--text-secondary); } .filter-list { display: flex; flex-direction: column; gap: 2px; margin-bottom: 22px; } .filter-list button { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 12px; border: none; background: transparent; border-radius: var(--radius-md); font-family: var(--font-sans); font-size: 13.5px; color: var(--text-secondary); cursor: pointer; text-align: start; width: 100%; transition: background .15s, color .15s; } .filter-list button:hover { background: var(--bg-hover); } .filter-list button.active { background: var(--brand-50); color: var(--brand-700); font-weight: 700; } .filter-list button .cnt { font-size: 11px; color: var(--text-tertiary); font-family: var(--font-mono); } .catalog-bar { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; } /* ── Product detail (public) ── */ .pdp { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: start; } .pdp-gallery .main { height: 420px; border-radius: var(--radius-2xl); overflow: hidden; background: linear-gradient(135deg, var(--brand-50), var(--accent-50)); border: 1px solid var(--border-subtle); display:flex; align-items:center; justify-content:center; color: var(--brand-300); } .pdp-thumbs { display: flex; gap: 12px; margin-top: 12px; } .pdp-thumbs > div { flex: 1; height: 80px; border-radius: var(--radius-md); background: var(--brand-50); border: 1px solid var(--border-subtle); display: flex; align-items: center; justify-content: center; color: var(--brand-300); cursor: pointer; } .spec-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; } .spec { display: flex; align-items: center; gap: 12px; padding: 14px; background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); } .spec .ico { color: var(--accent-600); flex-shrink: 0; } .spec .sv { font-weight: 700; font-size: 14px; } .spec .sk { font-size: 11.5px; color: var(--text-tertiary); } .spec-table { width: 100%; border-collapse: collapse; font-size: 14px; } .spec-table td { padding: 12px 4px; border-bottom: 1px solid var(--border-subtle); } .spec-table td:first-child { color: var(--text-tertiary); width: 40%; } .spec-table td:last-child { font-weight: 600; } /* ── B.CO band ── */ .bco { background: linear-gradient(135deg, var(--brand-700), var(--brand-600) 55%, var(--brand-500)); color: white; border-radius: var(--radius-2xl); overflow: hidden; position: relative; } .bco::after { content: ''; position: absolute; inset: 0; background-image: radial-gradient(circle at 85% 15%, rgba(255,255,255,0.14), transparent 40%); pointer-events: none; } .bco-inner { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 48px; align-items: center; padding: 52px; position: relative; z-index: 1; } .bco-logo { font-family: var(--font-display); font-weight: 800; font-size: 52px; letter-spacing: 1px; line-height: 1; } .bco h2 { font-family: var(--font-display); font-size: 30px; font-weight: 800; margin: 14px 0 14px; } .bco p { font-size: 15.5px; line-height: 1.9; opacity: 0.94; margin: 0 0 22px; } .bco .perks { display: flex; flex-direction: column; gap: 12px; } .bco .perk { display: flex; align-items: center; gap: 10px; font-size: 14.5px; } .bco .perk .ck { width: 24px; height: 24px; border-radius: 50%; background: rgba(255,255,255,0.18); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } /* ── Flagship ── */ .flagship { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 48px; align-items: center; } .flagship-photo { height: 460px; border-radius: var(--radius-2xl); overflow: hidden; background: linear-gradient(135deg, var(--brand-50), var(--accent-50)); border: 1px solid var(--border-subtle); } /* ── Advantages ── */ .adv-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; } .adv { background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: 24px 20px; display: flex; flex-direction: column; gap: 12px; } .adv .ico { width: 48px; height: 48px; border-radius: var(--radius-lg); background: var(--accent-50); color: var(--accent-600); display: flex; align-items: center; justify-content: center; } .adv h3 { font-size: 15.5px; font-weight: 700; margin: 0; } .adv p { font-size: 13px; color: var(--text-secondary); line-height: 1.75; margin: 0; } /* ── Partner band + form ── */ .partner { background: var(--accent-500); color: white; border-radius: var(--radius-2xl); padding: 48px 52px; display: flex; align-items: center; gap: 36px; position: relative; overflow: hidden; } .partner::after { content: ''; position: absolute; inset: 0; background-image: radial-gradient(circle at 90% 120%, rgba(255,255,255,0.16), transparent 45%); } .partner h2 { font-family: var(--font-display); font-size: 30px; font-weight: 800; margin: 0 0 10px; position: relative; z-index: 1; } .partner p { font-size: 15.5px; line-height: 1.85; opacity: 0.95; margin: 0; max-width: 560px; position: relative; z-index: 1; } .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } .field { display: flex; flex-direction: column; gap: 7px; } .field label { font-size: 13px; font-weight: 600; color: var(--text-secondary); } .field.full { grid-column: 1 / -1; } .benefit-list { display: flex; flex-direction: column; gap: 16px; } .benefit { display: flex; gap: 14px; align-items: flex-start; } .benefit .bi { width: 44px; height: 44px; border-radius: var(--radius-md); background: var(--accent-50); color: var(--accent-600); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .benefit h4 { font-size: 15px; font-weight: 700; margin: 0 0 4px; } .benefit p { font-size: 13px; color: var(--text-secondary); line-height: 1.7; margin: 0; } /* ── Warranty ── */ .warranty-box { background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-2xl); padding: 44px; display: grid; grid-template-columns: 1fr 1.1fr; gap: 44px; align-items: center; box-shadow: var(--shadow-sm); } .warranty-input { display: flex; gap: 10px; margin-top: 18px; } .warranty-input input { direction: ltr; text-align: left; font-family: var(--font-mono); } .warranty-result { display: none; margin-top: 16px; padding: 14px 16px; border-radius: var(--radius-md); font-size: 13.5px; font-weight: 600; align-items: center; gap: 8px; } .wcard { background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-xl); padding: 28px; margin-top: 22px; display: none; } /* ── Articles ── */ .art-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } .art { background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); overflow: hidden; transition: box-shadow .2s, transform .2s; cursor: pointer; } .art:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); } .art .thumb { height: 168px; background: linear-gradient(135deg, var(--accent-50), var(--brand-50)); display: flex; align-items: center; justify-content: center; color: var(--brand-300); } .art .body { padding: 20px; } .art .body h3 { font-size: 16.5px; font-weight: 700; margin: 0 0 8px; line-height: 1.5; } .art .body p { font-size: 13px; color: var(--text-secondary); line-height: 1.75; margin: 0 0 14px; } .art .more { color: var(--brand-600); font-weight: 700; font-size: 13.5px; display: inline-flex; gap: 6px; align-items: center; } /* ── Trust / certifications row ── */ .cert-row { display: flex; align-items: center; justify-content: center; gap: 40px; flex-wrap: wrap; } .cert { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 130px; text-align: center; } .cert .badge-circle { width: 76px; height: 76px; border-radius: 50%; background: var(--bg-surface); border: 1px solid var(--border-default); display: flex; align-items: center; justify-content: center; color: var(--brand-500); box-shadow: var(--shadow-sm); } .cert span { font-size: 12.5px; color: var(--text-secondary); font-weight: 600; } /* ── Footer ── */ .site-footer { background: var(--neutral-900); color: var(--neutral-300); padding: 60px 0 28px; } .footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.3fr; gap: 40px; } .site-footer h4 { color: white; font-family: var(--font-sans); font-size: 14px; font-weight: 700; margin: 0 0 18px; } .site-footer a, .site-footer li { color: var(--neutral-400); font-size: 13.5px; line-height: 2.1; } .site-footer a:hover { color: white; text-decoration: none; } .footer-list { list-style: none; padding: 0; margin: 0; } .footer-contact { display: flex; flex-direction: column; gap: 12px; } .footer-contact .row { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; line-height: 1.7; } .footer-contact .row .ico { color: var(--brand-400); flex-shrink: 0; margin-top: 2px; } .footer-bottom { margin-top: 44px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,0.1); display: flex; justify-content: space-between; align-items: center; font-size: 12.5px; color: var(--neutral-500); } .social { display: flex; gap: 10px; } .social a { width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,0.08); display: flex; align-items: center; justify-content: center; color: var(--neutral-300); } .social a:hover { background: var(--brand-500); color: white; } @media (max-width: 920px) { .hero .container, .bco-inner, .flagship, .warranty-box, .partner, .pdp, .form-grid { grid-template-columns: 1fr; } .hero h1 { font-size: 38px; } .cat-grid, .art-grid, .prod-grid, .prod-grid-filter { grid-template-columns: 1fr 1fr; } .adv-grid { grid-template-columns: 1fr 1fr; } .trust .container, .footer-grid { grid-template-columns: 1fr 1fr; } .catalog { grid-template-columns: 1fr; } /* روی موبایل نوار کناری بالای فهرست می‌آید؛ نه چسبان است و نه جعبهٔ اسکرولِ تودرتو — وگرنه اسکرول صفحه داخلش گیر می‌کند. */ .filter-card { position: static; max-height: none; overflow: visible; } .main-nav, .topbar { display: none; } .partner { flex-direction: column; align-items: flex-start; } } /* ─── واکنش‌گرایی صفحات داخلی (منتقل‌شده از استایل‌های inline اصلی) ─── */ @media (max-width: 920px) { .pdp-detail { grid-template-columns: 1fr !important; } .w-lookup { grid-template-columns: 1fr !important; } .proc-grid { grid-template-columns: 1fr 1fr !important; } } /* ─── منوی موبایل هدر سایت ─── */ .nav-toggle { display: none; } .mobile-nav { display: none; } .mobile-nav.open { display: flex; flex-direction: column; gap: 2px; padding: 10px 16px 16px; border-top: 1px solid var(--border-subtle); background: var(--bg-surface); } .mobile-nav a { padding: 12px 10px; border-radius: var(--radius-md); font-weight: 600; color: var(--text-secondary); text-decoration: none; } .mobile-nav a.active { background: var(--brand-50); color: var(--brand-700); } .mobile-nav-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; padding-top: 12px; border-top: 1px solid var(--border-subtle); } /* ─── بخش دسته‌بندی‌ها در سرِ شیت موبایل ─── */ .mobile-cats-head { display: flex; align-items: center; justify-content: space-between; padding: 2px 2px 10px; font-size: 13px; font-weight: 800; color: var(--text-primary); } .mobile-cats-head a { font-size: 12.5px; font-weight: 700; color: var(--brand-600); text-decoration: none; } .mobile-cats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .mobile-cats .mobile-cat { display: flex; align-items: center; gap: 9px; min-height: 48px; padding: 9px 10px; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: var(--bg-surface); font-size: 12.5px; font-weight: 600; line-height: 1.35; color: var(--text-secondary); text-decoration: none; } .mobile-cats .mobile-cat .ico { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: var(--radius-sm); flex-shrink: 0; } .mobile-cats .mobile-cat:active { border-color: var(--brand-500); } @media (max-width: 860px) { .site-header .main-nav { display: none !important; } .site-header .header-actions { display: none !important; } .nav-toggle { display: none !important; } } /* نشان شمار سبد در سربرگ — ظاهرش اینجاست تا JS با خالی‌کردن display به همین برگردد */ .cart-badge { position: absolute; top: 0; inset-inline-end: 0; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 999px; background: var(--brand-500); color: #fff; font-size: 10px; font-weight: 700; display: flex; align-items: center; justify-content: center; line-height: 1; } /* ─── نوار ناوبری پایینی موبایل (Bottom Tab Bar) ─── */ .mobile-tabbar { display: none; } .tabbar-badge { display: none; } @media (max-width: 860px) { .mobile-tabbar { display: flex; position: fixed; bottom: 0; inset-inline: 0; z-index: 100; height: calc(64px + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); background: var(--bg-surface); border-top: 2px solid var(--brand-500); border-radius: 18px 18px 0 0; box-shadow: 0 -6px 24px rgba(31, 26, 20, 0.18); } .tabbar-item { flex: 1; min-width: 0; min-height: 48px; display: flex; align-items: center; justify-content: center; position: relative; color: var(--text-tertiary); background: none; border: none; cursor: pointer; text-decoration: none; transition: color .15s; } .tabbar-item:hover, .tabbar-item:active { color: var(--brand-600); text-decoration: none; } /* آیکون صفحهٔ جاری — رنگ برند + نشانگر بالا */ .tabbar-item.active { color: var(--brand-600); } .tabbar-item.active::after { content: ""; position: absolute; top: 0; inset-inline: 24%; height: 3px; border-radius: 0 0 3px 3px; background: var(--brand-500); } /* جداکنندهٔ ظریف بین آیکون‌ها برای تفکیک واضح‌تر */ .tabbar-item + .tabbar-item::before { content: ""; position: absolute; inset-inline-end: 0; top: 50%; transform: translateY(-50%); height: 24px; width: 1px; background: var(--border-subtle); } .tabbar-badge { display: flex; position: absolute; top: 9px; inset-inline-start: calc(50% + 7px); min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: var(--brand-500); color: white; font-size: 10px; font-weight: 700; align-items: center; justify-content: center; line-height: 1; } /* فضای انتهای صفحه تا محتوا زیر نوار پایین پنهان نشود (+ ناحیهٔ امن iOS) */ body { padding-bottom: calc(64px + env(safe-area-inset-bottom)); } /* منوی موبایل به‌صورت پنل کشویی از پایین (روی نوار پایین) — همیشه دیده می‌شود */ .mobile-nav-backdrop { position: fixed; inset: 0; z-index: 95; background: var(--bg-overlay); } .mobile-nav.open { position: fixed; inset-inline: 0; bottom: calc(64px + env(safe-area-inset-bottom)); max-height: 72vh; overflow-y: auto; z-index: 96; border-radius: 18px 18px 0 0; border-top: 2px solid var(--brand-500); box-shadow: 0 -8px 30px rgba(31, 26, 20, 0.22); padding: 16px; } } /* ─── لینک پرش به محتوا (دسترس‌پذیری) ─── */ .skip-link { position: absolute; inset-inline-start: 12px; top: -60px; z-index: 2000; background: var(--brand-600); color: white; padding: 10px 16px; border-radius: var(--radius-md); font-weight: 700; font-size: 14px; text-decoration: none; transition: top 0.15s var(--easing-out); } .skip-link:focus { top: 12px; color: white; text-decoration: none; } /* ════════ لایهٔ واکنش‌گرای سراسری صفحات سایت ════════ */ /* مرحلهٔ ۱: گریدهای سه/چهار/پنج‌ستونهٔ inline → دوستونه */ @media (max-width: 980px) { #main [style*="repeat(3"], #main [style*="repeat(4"], #main [style*="repeat(5"] { grid-template-columns: 1fr 1fr !important; } } /* مرحلهٔ ۲: همهٔ گریدهای چندستونهٔ inline → تک‌ستون + اصلاح فاصله و جدول‌ها */ @media (max-width: 760px) { .container { padding: 0 16px; } #main [style*="repeat("], #main [style*="1fr 1fr"], #main [style*="1fr 1.25fr"], #main [style*="1fr 1.1fr"], #main [style*="1.4fr 1fr"], #main [style*="1.2fr 0.8fr"], #main [style*="1.6fr"], #main [style*="1.05fr"] { grid-template-columns: 1fr !important; } /* جدول‌ها روی موبایل افقی‌اسکرول شوند تا فشرده/درهم نشوند */ #main .card { overflow-x: auto !important; } #main .table { min-width: 560px; } /* ردیف آمار هیرو روی موبایل بشکند تا سرریز نکند */ .hero-stats { flex-wrap: wrap; gap: 14px 24px; } .hero-stats > div { flex: 1 1 38%; } } /* ─── ریزبریک‌پوینت گوشی‌های کوچک ─── */ @media (max-width: 520px) { .cat-grid, .art-grid, .prod-grid, .prod-grid-filter { grid-template-columns: 1fr !important; } .footer-grid { grid-template-columns: 1fr !important; } .cert-row { flex-wrap: wrap; justify-content: center; } }