/* ========================================================================== هوم‌پیج تازه -- فاز ۳ (templates/tpls/home_new.tpl.html) همه‌ی کلاس‌ها با bprh- شروع می‌شوند تا با CSS قدیمی سایت (CSS-Bprshop-Merg-*) تداخل نکنند. یک زبان طراحی برای همه‌ی بخش‌ها: کادر سفید با گوشه‌ی ۱۶ پیکسلی و خط نازک، عنوان با خط رنگی، کارت‌های هم‌اندازه، بدون نوار اسکرول. ========================================================================== */ .bprh { --bprh-brand: #00b3aa; --bprh-brand-dark: #00867f; --bprh-text: #23254e; /* ۵٫۱ به ۱ روی سفید؛ #81858b قبلی ۳٫۷ بود و متن‌های ریز («تومان») کنتراست کافی نداشتند (پیج‌اسپید، حداقل ۴٫۵). */ --bprh-muted: #6b6e74; --bprh-line: #ebebeb; --bprh-radius: 16px; --bprh-card-w: 132px; --bprh-gap: 16px; max-width: 1440px; margin: 0 auto; padding: 0 12px 24px; direction: rtl; color: var(--bprh-text); box-sizing: border-box; } .bprh *, .bprh *::before, .bprh *::after { box-sizing: border-box; } .bprh a { text-decoration: none; color: inherit; } .bprh img { max-width: 100%; } .bprh svg { display: block; } /* اسلایدر تمام‌عرض از کادر بیرون می‌زند؛ بدون این، پهنای نوار اسکرول عمودی ویندوز یک اسکرول افقی چند پیکسلی می‌سازد. clip (نه hidden) تا sticky هدر نشکند. */ html:has(#bpr-home) { overflow-x: clip; } /* ---------------------------------------------------------------- سرتیتر اصلی (h1) */ /* تنها h1 صفحه، زیر اسلایدر و وسط‌چین. CSS قدیمی سایت روی هر h1 اندازه‌ی ۳۶ پیکسل و حاشیه‌ی ۲۰ پیکسلی و رنگ سیاه (با !important) می‌گذارد؛ برای همین #bpr-home و !important. */ #bpr-home .bprh-h1 { margin: 0 0 var(--bprh-gap); padding: 0 8px; font-size: 14px; font-weight: bold; line-height: 1.9; text-align: center; text-wrap: balance; /* خط دوم یک کلمه‌ی تنها نشود */ color: var(--bprh-text) !important; } /* تکه‌های جدا با «؛» (home_new.tpl.html): اگر در یک خط جا نشوند، خط بین آن‌ها می‌شکند */ #bpr-home .bprh-h1 span { display: inline-block; } /* پنهان از چشم، خوانا برای گوگل و صفحه‌خوان. h1 فعلا این را دارد (تصمیم مدیر سایت، ۱۴۰۵/۰۷/۰۴)؛ برای دیده شدن فقط bprh-sr را از قالب بردار. !important تا بر قاعده‌های #bpr-home .bprh-h1 بالا بچربد. */ #bpr-home .bprh-sr { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; } /* ---------------------------------------------------------------- دکمه‌ی فلش */ .bprh-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 40px; height: 40px; border-radius: 50%; padding: 0; cursor: pointer; border: 1px solid var(--bprh-line); background: #fff; color: #3f4064; display: none; align-items: center; justify-content: center; box-shadow: 0 1px 6px rgba(0,0,0,.12); transition: opacity .15s; } .bprh-nav svg { margin: auto; } .bprh-nav:hover { color: var(--bprh-brand); } .bprh-nav[disabled] { opacity: 0; pointer-events: none; } /* ---------------------------------------------------------------- اسلایدر */ .bprh-slider { position: relative; /* تمام‌عرض صفحه، هر قدر هم ظرف والد باریک باشد. --bprh-sbw پهنای نوار اسکرول عمودی است که bpr-home.js اندازه می‌گیرد. */ /* تقریبا تمام‌عرض: ۳ پیکسل فاصله از لبه‌ی صفحه و گوشه‌ی گرد هم‌اندازه‌ی باقی کادرها */ width: calc(100vw - var(--bprh-sbw, 0px) - 6px); margin: 0 calc(50% - (100vw - var(--bprh-sbw, 0px)) / 2 + 3px) var(--bprh-gap); border-radius: var(--bprh-radius); overflow: hidden; background: #f3f3f3; } .bprh-slider-track { display: flex; align-items: flex-start; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -ms-overflow-style: none; } .bprh-slider-track::-webkit-scrollbar { display: none; } .bprh-slide { flex: 0 0 100%; width: 100%; scroll-snap-align: start; display: block; line-height: 0; } .bprh-slide picture { display: block; width: 100%; height: 100%; } .bprh-slide img { width: 100%; height: auto; display: block; } /* روی تبلت و دسکتاپ کادر اسلاید «نسبت ثابت» دارد، نه ارتفاع ثابت. --bprh-slider-ar از پنل می‌آید و برابر است با ۱۹۲۰ تقسیم بر «ارتفاع اسلایدر»؛ یعنی عدد پنل ارتفاع روی نمایشگر ۱۹۲۰ پیکسلی است و روی نمایشگر باریک‌تر ارتفاع با همان نسبت کوچک می‌شود. چون نسبت کادر همیشه یکی است، تصویری که با همین نسبت ساخته شده باشد در هیچ رزولوشنی برش نمی‌خورد و زوم هم نمی‌شود. (قبلا ارتفاع پیکسلی ثابت بود و کادر روی هر عرضی نسبت متفاوتی پیدا می‌کرد، برای همین تصویر از بالا و پایین بریده و بزرگ‌نمایی می‌شد.) */ @media (min-width: 768px) { .bprh-slide { aspect-ratio: var(--bprh-slider-ar, 1920 / 470); height: auto; } .bprh-slide picture { height: 100%; } .bprh-slide img { height: 100%; object-fit: cover; object-position: center; } } .bprh-slider-nav.bprh-prev { right: 24px; } .bprh-slider-nav.bprh-next { left: 24px; } /* هر نقطه دکمه‌ای ۲۴×۲۴ است (حداقل اندازه‌ی هدف لمسی -- پیج‌اسپید خطا می‌گرفت) و نقطه‌ی دیدنی همان ۸ پیکسل قبلی است، با ::before در وسطش. */ .bprh-dots { position: absolute; bottom: 6px; left: 0; right: 0; display: flex; justify-content: center; z-index: 2; } .bprh-dot { position: relative; width: 24px; height: 24px; padding: 0; border: 0; background: transparent; cursor: pointer; } .bprh-dot::before { content: ""; position: absolute; top: 50%; left: 50%; width: 8px; height: 8px; border-radius: 8px; background: rgba(255,255,255,.55); transform: translate(-50%, -50%); transition: width .2s; } .bprh-dot.on::before { width: 24px; background: #fff; } /* ---------------------------------------------------------------- کادر و عنوان */ .bprh-box { background: #fff; border: 1px solid var(--bprh-line); border-radius: var(--bprh-radius); margin: 0 0 var(--bprh-gap); padding: 16px 0 12px; } .bprh-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 16px 12px; } .bprh-title { margin: 0; font-size: 15px; font-weight: bold; line-height: 1.7; position: relative; padding-right: 12px; color: var(--bprh-text); } .bprh-title::before { content: ""; position: absolute; right: 0; top: 18%; bottom: 18%; width: 4px; border-radius: 4px; background: var(--bprh-brand); } .bprh-more { display: inline-flex; align-items: center; gap: 2px; color: var(--bprh-brand) !important; font-size: 12.5px; white-space: nowrap; } .bprh-more svg { width: 16px; height: 16px; } /* ---------------------------------------------------------------- ریل */ .bprh-rail-wrap { position: relative; } .bprh-rail { display: flex; overflow-x: auto; scroll-snap-type: x proximity; padding: 0 8px; scrollbar-width: none; -ms-overflow-style: none; } .bprh-rail::-webkit-scrollbar { display: none; } .bprh-rail-nav.bprh-prev { right: 6px; } .bprh-rail-nav.bprh-next { left: 6px; } /* ---------------------------------------------------------------- کارت کالا */ /* کارت‌ها کادر جدا ندارند؛ با یک خط عمودی نازک از هم جدا می‌شوند -- همان ریتم یکدستِ فهرست‌های فروشگاهی. */ .bprh-card { flex: 0 0 var(--bprh-card-w); width: var(--bprh-card-w); scroll-snap-align: start; display: flex; flex-direction: column; padding: 6px 8px 4px; position: relative; border-left: 1px solid var(--bprh-line); } .bprh-rail > .bprh-card:last-child { border-left: 0; } .bprh-card-img { position: relative; display: block; aspect-ratio: 1 / 1; margin-bottom: 8px; } .bprh-card-img img { width: 100%; height: 100%; object-fit: contain; display: block; } .bprh-card:hover .bprh-card-name { color: var(--bprh-brand-dark); } .bprh-badge { position: absolute; bottom: 0; left: 0; background: #d32f45; color: #fff; font-size: 11px; font-weight: bold; border-radius: 10px; padding: 0 7px; line-height: 1.9; } .bprh-card-name { font-size: 11.5px; line-height: 1.8; height: 3.6em; overflow: hidden; color: #3f4064; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; direction: ltr; text-align: right; margin-bottom: 4px; transition: color .15s; } .bprh-card-price { margin-top: auto; display: flex; flex-direction: column; align-items: flex-end; min-height: 40px; justify-content: flex-end; } .bprh-old { color: var(--bprh-muted); font-size: 11px; } .bprh-now { font-size: 13px; font-weight: bold; color: var(--bprh-text); } .bprh-now small { font-size: 10px; font-weight: normal; color: var(--bprh-muted); } .bprh-stock { font-size: 11.5px; } .bprh-card-more { justify-content: center; align-items: center; gap: 10px; color: var(--bprh-brand) !important; font-size: 12.5px; } .bprh-more-circle { width: 44px; height: 44px; border-radius: 50%; border: 1px solid currentColor; display: flex; align-items: center; justify-content: center; } /* ---------------------------------------------------------------- پیشنهاد شگفت‌انگیز */ /* نه قرمز: رنگ ملایم سایت پشت کارت‌ها، کارت‌ها سفید و شناور روی آن. دو طرف پررنگ‌تر و وسط کم‌رنگ‌تر، ولی فقط ۲۰٪: وسط همان رنگ لبه است با ۸۰٪ غلظت (مدیر سایت، ۱۴۰۵/۰۷/۰۴ -- قبلا از پررنگ به تقریبا سفید می‌رسید). */ .bprh-amazing { border: 0; background: linear-gradient(90deg, #d9f5f3 0%, #e1f7f5 50%, #d9f5f3 100%); padding: 16px 0 14px; } .bprh-amazing .bprh-title { color: var(--bprh-brand-dark); font-size: 16px; } .bprh-amazing { --bprh-am-gap: 8px; } .bprh-amazing .bprh-rail { gap: var(--bprh-am-gap); padding: 2px 12px 6px; } .bprh-amazing .bprh-card { background: #fff; border: 0; border-radius: 12px; box-shadow: 0 1px 4px rgba(0, 90, 85, .08); } .bprh-amazing .bprh-card:first-child { border-radius: 12px; } /* ---------------------------------------------------------------- دسته‌بندی‌ها */ .bprh-cats { padding-bottom: 16px; } .bprh-cats-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px 8px; padding: 0 12px; } .bprh-cat { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; } .bprh-cat-img { width: 72px; height: 72px; border-radius: 50%; background: #f1f2f4; display: flex; align-items: center; justify-content: center; overflow: hidden; flex: 0 0 auto; } .bprh-cat-img img { width: 82%; height: 82%; object-fit: contain; } .bprh-cat:hover .bprh-cat-img { box-shadow: 0 0 0 2px var(--bprh-brand); } /* ارتفاع ثابت دو خط: عنوان یک‌خطی و دوخطی ردیف را ناهم‌سطح نمی‌کنند. */ .bprh-cat-title { font-size: 11.5px; line-height: 1.7; height: 3.4em; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; color: #3f4064; } /* ---------------------------------------------------------------- بنرها و تاپ‌اسپانسر */ .bprh-banners, .bprh-tiles { display: grid; grid-template-columns: 1fr; gap: var(--bprh-gap); margin: 0 0 var(--bprh-gap); } .bprh-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } /* موبایل: ردیف سه‌تایی کشیدنی است (سه تصویر در عرض گوشی خیلی ریز می‌شد)؛ دوتایی و چهارتایی دو ستونه. */ @media (max-width: 575px) { .bprh-tiles.bprh-cols-3 { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-left: -12px; margin-right: -12px; padding: 0 12px; } .bprh-tiles.bprh-cols-3::-webkit-scrollbar { display: none; } /* بنر دوتایی عریض است (۱۶:۷)؛ دو ستون روی گوشی خیلی کوتاهش می‌کرد */ .bprh-tiles.bprh-cols-2 { grid-template-columns: 1fr; } .bprh-tiles.bprh-cols-3 > .bprh-tile { flex: 0 0 78%; scroll-snap-align: center; } } .bprh-banner { display: block; border-radius: var(--bprh-radius); overflow: hidden; line-height: 0; background: #f3f3f3; transition: transform .2s, box-shadow .2s; } .bprh-banner img { width: 100%; height: auto; display: block; } .bprh-banner:hover { box-shadow: 0 6px 18px rgba(0,0,0,.1); } /* ---------------------------------------------------------------- مقالات و ویدئوها */ .bprh-post { flex: 0 0 220px; width: 220px; scroll-snap-align: start; display: flex; flex-direction: column; gap: 8px; padding: 4px 8px; } .bprh-post-img { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; background: #f1f2f4; } .bprh-post-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s; } .bprh-post:hover .bprh-post-img img { transform: scale(1.04); } .bprh-post-title { font-size: 12.5px; line-height: 1.8; height: 3.6em; overflow: hidden; color: #3f4064; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .bprh-post:hover .bprh-post-title { color: var(--bprh-brand-dark); } .bprh-post-meta { font-size: 11px; color: var(--bprh-muted); } .bprh-play { position: absolute; left: 10px; bottom: 10px; width: 38px; height: 38px; border-radius: 50%; background: rgba(0,0,0,.55); color: #fff; display: flex; align-items: center; justify-content: center; } /* ---------------------------------------------------------------- ماژول قدیمی */ .bprh-legacy { margin: 0 0 var(--bprh-gap); } .bprh-legacy > .mod { float: none; width: auto; } .bprh-legacy .bprh-head { padding: 0 4px 12px; } /* ---------------------------------------------------------------- نوار بالای فوتر */ /* bpr-home.js این بخش را به قبل از