/* ==========================================================================
VENDORHA — لایهٔ ارتقای بصری
--------------------------------------------------------------------------
این فایل روی theme.css و pages.css می‌نشیند و ظاهر را مدرن می‌کند
بدون اینکه ساختار یا کارکردی را عوض کند.
قاعده: فقط ویژگی‌های بصری (سایه، گردی، حرکت، گرادیان) بازنویسی
می‌شوند — چیدمان و اندازه دست‌نخورده می‌ماند تا چیزی نشکند.
========================================================================== */
/* کالای غیرقابل خرید (از contracts.css؛ کارت کالا در همهٔ صفحه‌ها) */
.pbtn-off {
display: flex; align-items: center; justify-content: center;
width: 100%; padding: var(--sp-3);
border: 1px dashed var(--line-strong); border-radius: var(--r-md);
background: var(--surface-sunken); color: var(--slate);
font-size: var(--fs-sm); font-weight: 600; cursor: not-allowed;
}
/* ==========================================================================
۱. سربرگ شیشه‌ای
--------------------------------------------------------------------------
هنگام اسکرول، سربرگ شفاف می‌شود و محتوا از پشتش می‌گذرد.
========================================================================== */
.header {
background: var(--glass-bg-strong);
border-bottom: 1px solid var(--line);
transition: box-shadow var(--dur-base) var(--ease-out),
background var(--dur-base) var(--ease-out);
}
@supports (backdrop-filter: blur(1px)) {
.header {
background: var(--glass-bg);
-webkit-backdrop-filter: blur(var(--glass-blur)) saturate(170%);
backdrop-filter: blur(var(--glass-blur)) saturate(170%);
}
}
/* وقتی صفحه اسکرول شده، سایه ظاهر می‌شود */
.header.is-stuck {
box-shadow: var(--sh-md);
border-bottom-color: transparent;
}
/* ==========================================================================
۲. هیرو با اورورا
========================================================================== */
.hero {
border-radius: var(--r-2xl);
overflow: hidden;
/* بدون سایه: اسلایدر خودش رنگ پررنگ دارد و سایه لبه‌اش را
مبهم می‌کرد. */
box-shadow: none;
}
.slide-inner {
position: relative;
isolation: isolate;
}
/* لکه‌های نورانی پشت متن هیرو */
.slide-inner::before {
content: "";
position: absolute;
inset: -30%;
z-index: -1;
background:
radial-gradient(42% 52% at 22% 28%, rgba(255,255,255,.22) 0%,
transparent 68%),
radial-gradient(38% 48% at 78% 72%, rgba(255,255,255,.14) 0%,
transparent 68%);
animation: aurora-drift 18s ease-in-out infinite alternate;
will-change: transform;
pointer-events: none;
}
.slide-inner h1, .slide-inner .slide-title {
text-shadow: 0 2px 12px rgba(0,0,0,.18);
letter-spacing: -.01em;
}
.slide-inner .btn-primary {
box-shadow: 0 8px 24px rgba(0,0,0,.18);
}
/* نقطه‌های اسلاید */
.dots button {
transition: width var(--dur-base) var(--ease-out),
background var(--dur-base) var(--ease-out);
}
/* ==========================================================================
۳. کارت کالا
--------------------------------------------------------------------------
بلندشدن نرم هنگام هاور با سایهٔ عمیق‌تر — حس لمس‌پذیری می‌دهد.
========================================================================== */
.pcard {
border-radius: var(--r-lg);
border: 1px solid var(--line);
background: var(--surface);
transition: transform var(--dur-base) var(--ease-out),
box-shadow var(--dur-base) var(--ease-out),
border-color var(--dur-base) var(--ease-out);
will-change: transform;
}
.pcard:hover {
transform: translateY(-4px);
box-shadow: var(--sh-lg);
border-color: var(--green-100);
}
/* تصویر کالا کمی بزرگ می‌شود — بدون جابه‌جایی چیدمان */
.pcard .pthumb,
.pcard figure {
overflow: hidden;
}
.pcard img {
transition: transform var(--dur-slow) var(--ease-out);
}
.pcard:hover img { transform: scale(1.05); }
/* دکمهٔ خرید */
.pbtn-buy {
border-radius: var(--r-md);
transition: all var(--dur-base) var(--ease-out);
}
.pcard:hover .pbtn-buy {
box-shadow: var(--sh-brand);
}
/* نشان تخفیف با گرادیان */
.badge,
.pcard .off {
border-radius: var(--r-full);
font-weight: 800;
letter-spacing: -.01em;
}
/* ==========================================================================
۴. کارت دسته‌بندی
========================================================================== */
.cat {
border-radius: var(--r-lg);
border: 1px solid var(--line);
background: var(--surface);
transition: transform var(--dur-base) var(--ease-out),
box-shadow var(--dur-base) var(--ease-out),
border-color var(--dur-base) var(--ease-out);
}
.cat:hover {
transform: translateY(-3px);
border-color: var(--green);
box-shadow: var(--sh-md);
}
.cat .icon,
.cat span:first-child {
transition: transform var(--dur-base) var(--ease-spring);
}
.cat:hover .icon,
.cat:hover span:first-child { transform: scale(1.1); }
/* ==========================================================================
۵. کارت فروشگاه
========================================================================== */
.vcard,
.vendor-card {
border-radius: var(--r-lg);
transition: transform var(--dur-base) var(--ease-out),
box-shadow var(--dur-base) var(--ease-out);
}
.vcard:hover,
.vendor-card:hover {
transform: translateY(-3px);
box-shadow: var(--sh-lg);
}
/* ==========================================================================
۶. دکمه‌های عمومی
--------------------------------------------------------------------------
بازنویسی نرم دکمه‌های theme.css برای هماهنگی با کامپوننت‌های تازه.
========================================================================== */
.btn {
border-radius: var(--r-md);
transition: background var(--dur-base) var(--ease-out),
border-color var(--dur-base) var(--ease-out),
color var(--dur-base) var(--ease-out),
transform var(--dur-fast) var(--ease-out),
box-shadow var(--dur-base) var(--ease-out);
}
.btn-primary { box-shadow: var(--sh-sm); }
.btn-primary:hover {
box-shadow: var(--sh-brand);
transform: translateY(-1px);
}
.btn:active { transform: translateY(1px) scale(.99); }
/* ==========================================================================
۷. نوار پیشنهاد
========================================================================== */
.offer-strip {
border-radius: var(--r-xl);
overflow: hidden;
position: relative;
isolation: isolate;
}
.offer-strip::before {
content: "";
position: absolute;
inset: -50%;
z-index: -1;
background: radial-gradient(45% 60% at 25% 40%,
rgba(255,255,255,.2) 0%, transparent 70%);
animation: aurora-drift 20s ease-in-out infinite alternate;
pointer-events: none;
}
/* ==========================================================================
۸. فوتر
========================================================================== */
.footer {
position: relative;
border-top: 1px solid var(--line);
}
/* خط گرادیانی نازک بالای فوتر */
.footer::before {
content: "";
position: absolute;
inset-inline: 0;
top: -1px;
height: 2px;
background: var(--grad-brand);
opacity: .5;
}
/* ==========================================================================
۹. جست‌وجو
========================================================================== */
.search input,
.search-box input {
border-radius: var(--r-full);
transition: box-shadow var(--dur-base) var(--ease-out),
border-color var(--dur-base) var(--ease-out);
}
.search input:focus,
.search-box input:focus {
box-shadow: 0 0 0 3px var(--green-100);
}
/* ==========================================================================
۱۰. جدول‌ها
========================================================================== */
table.data,
.table {
border-radius: var(--r-md);
overflow: hidden;
border: 1px solid var(--line);
}
table.data th,
.table th {
background: var(--bg-subtle);
font-weight: 700;
font-size: var(--fs-sm);
color: var(--ink-soft);
}
table.data tbody tr,
.table tbody tr {
transition: background var(--dur-fast) var(--ease-out);
}
table.data tbody tr:hover,
.table tbody tr:hover { background: var(--bg-subtle); }
/* ==========================================================================
۱۱. مودال
========================================================================== */
.modal,
dialog {
border-radius: var(--r-xl);
box-shadow: var(--sh-xl);
border: 1px solid var(--line);
animation: scale-in var(--dur-base) var(--ease-spring) both;
}
.modal-backdrop,
dialog::backdrop {
background: rgba(10, 16, 14, .55);
-webkit-backdrop-filter: blur(4px);
backdrop-filter: blur(4px);
}
/* ==========================================================================
۱۲. نوار پایین موبایل
========================================================================== */
.mobile-nav {
background: var(--glass-bg-strong);
border-top: 1px solid var(--line);
box-shadow: 0 -4px 20px rgba(16,22,20,.06);
}
@supports (backdrop-filter: blur(1px)) {
.mobile-nav {
background: var(--glass-bg);
-webkit-backdrop-filter: blur(var(--glass-blur)) saturate(170%);
backdrop-filter: blur(var(--glass-blur)) saturate(170%);
}
}
.mobile-nav a {
transition: color var(--dur-fast) var(--ease-out),
transform var(--dur-fast) var(--ease-out);
}
.mobile-nav a:active { transform: scale(.92); }
/* ==========================================================================
۱۳. ورود تدریجی عناصر
--------------------------------------------------------------------------
بخش‌های صفحه با تأخیر کوتاه پشت هم ظاهر می‌شوند. با
prefers-reduced-motion خودکار خاموش می‌شود (در tokens.css).
========================================================================== */
.reveal {
opacity: 0;
transform: translate3d(0, 18px, 0);
transition: opacity var(--dur-slow) var(--ease-out),
transform var(--dur-slow) var(--ease-out);
}
.reveal.shown {
opacity: 1;
transform: none;
}
/* ==========================================================================
۱۴. اسکرول‌بار
========================================================================== */
html { color-scheme: light; }
[data-theme="dark"] { color-scheme: dark; }
* {
scrollbar-width: thin;
scrollbar-color: var(--scroll-thumb) var(--scroll-track);
}
*::-webkit-scrollbar {
width: 10px;
height: 10px;
background: var(--scroll-track);
}
*::-webkit-scrollbar-track { background: var(--scroll-track); }
*::-webkit-scrollbar-thumb {
background: var(--scroll-thumb);
border-radius: var(--r-full);
border: 2px solid var(--scroll-track);
background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover { background: var(--scroll-thumb-hover); }
*::-webkit-scrollbar-corner { background: var(--scroll-track); }
/* ==========================================================================
۱۵. انتخاب متن
========================================================================== */
::selection {
background: var(--green-100);
color: var(--green-text);
}
/* ==========================================================================
۱۶. تصویر — جلوگیری از پرش چیدمان
========================================================================== */
img {
max-width: 100%;
height: auto;
}
/* ==========================================================================
مورد ۶ — نقشه از قاعدهٔ سراسری تصویر مستثناست
--------------------------------------------------------------------------
⚠️ Leaflet ابعاد نشانگر و کاشی‌ها را با صفت `width`/`height`
روی خودِ `![]()
` می‌گذارد.
دو قاعدهٔ سراسری در پروژه هست:
theme.css → img { max-width: 100%; display: block }
enhance.css → img { max-width: 100%; height: auto }
`height: auto` نسبت تصویر را از ابعاد تعیین‌شده جدا می‌کند و
`max-width` کاشی‌های پهن‌تر از ظرف را می‌برد. نتیجه در موبایل
که عرض کم است: پین له می‌شد و به یک لکهٔ کوچک تبدیل.
⚠️ `!important` لازم است چون قاعدهٔ سراسری با ویژگی برابر
(0,0,1) در همین فایل و پس از این می‌تواند دوباره اعمال شود؛
بعلاوه بعضی افزونه‌های نقشه استایل درون‌خطی می‌گذارند.
========================================================================== */
/* ==========================================================================
مورد ۶ — نقشه از قاعدهٔ سراسری تصویر مستثناست
--------------------------------------------------------------------------
⚠️ فقط و فقط `max-width` خنثی می‌شود.
Leaflet ابعاد نشانگر و کاشی‌ها را با **استایل درون‌خطی**
می‌گذارد (`img.style.width`, `img.style.height`). استایل
درون‌خطی از هر قاعدهٔ CSS بدون `!important` قوی‌تر است —
پس `height: auto` سراسری هرگز مشکلی نداشت.
تنها صفت مشکل‌ساز `max-width: 100%` بود که در ظرف باریک
موبایل، نشانگر و کاشی را کوچک می‌کرد.
⚠️ به `height`, `width` و به‌ویژه `margin` دست نمی‌زنیم.
تلاش قبلی من اشتباه بود و نشانگر را غول‌پیکر کرد:
• `margin: 0` — Leaflet نشانگر را با margin منفی روی
نقطه می‌نشاند؛ صفر کردنش جای پین را خراب می‌کند.
• `height: revert` — به شیوه‌نامهٔ کاربر برمی‌گردد، نه
به استایل درون‌خطی. ابعاد را کاملاً از دست می‌دهد.
========================================================================== */
.leaflet-container img,
.leaflet-pane img,
.leaflet-tile,
.leaflet-marker-icon,
.leaflet-marker-shadow {
max-width: none;
}
/* ==========================================================================
==========================================================================
بخش دوم — پنل کاربری و مدیریت
==========================================================================
========================================================================== */
/* ==========================================================================
۱۷. هیروی پنل
--------------------------------------------------------------------------
گرادیان برند با لکه‌های نورانی — همان زبان بصری صفحهٔ اصلی.
========================================================================== */
.pf-hero,
.panel-hero,
.adm-hero,
.vz-hero {
position: relative;
isolation: isolate;
overflow: hidden;
background: var(--grad-brand);
border-radius: 0 0 var(--r-2xl) var(--r-2xl);
}
.pf-hero::before,
.panel-hero::before,
.adm-hero::before,
.vz-hero::before {
content: "";
position: absolute;
inset: -40%;
z-index: -1;
background:
radial-gradient(40% 50% at 20% 30%, rgba(255,255,255,.18) 0%,
transparent 70%),
radial-gradient(45% 55% at 80% 25%, rgba(255,255,255,.12) 0%,
transparent 70%);
animation: aurora-drift 20s ease-in-out infinite alternate;
will-change: transform;
pointer-events: none;
}
.pf-avatar {
box-shadow: 0 6px 20px rgba(0,0,0,.2);
border: 2px solid rgba(255,255,255,.28);
transition: transform var(--dur-base) var(--ease-spring);
}
.pf-avatar:hover { transform: scale(1.06) rotate(-3deg); }
.pf-role {
background: rgba(255,255,255,.18);
border-radius: var(--r-full);
padding: 3px 12px;
font-size: var(--fs-xs);
font-weight: 700;
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
}
/* ==========================================================================
۱۸. منوی کناری پنل
========================================================================== */
.profile-side,
.profile-nav {
border-radius: var(--r-lg);
}
.profile-nav a {
border-radius: var(--r-md);
position: relative;
transition: background var(--dur-fast) var(--ease-out),
color var(--dur-fast) var(--ease-out),
padding-inline-start var(--dur-base) var(--ease-out);
}
.profile-nav a:hover {
background: var(--bg-subtle);
padding-inline-start: calc(var(--sp-4) + 4px);
}
/* آیتم فعال: نوار رنگی کنارش — در RTL و LTR سمت درست می‌نشیند */
.profile-nav a.on,
.profile-nav a[aria-current="page"] {
background: var(--green-100);
color: var(--green-text);
font-weight: 700;
}
.profile-nav a.on::before,
.profile-nav a[aria-current="page"]::before {
content: "";
position: absolute;
inset-block: 20%;
inset-inline-start: 0;
width: 3px;
border-radius: var(--r-full);
background: var(--green);
}
/* ==========================================================================
۱۹. کارت‌های آماری پنل
========================================================================== */
.pf-stat,
.quota-card,
.stat-card {
position: relative;
border-radius: var(--r-lg);
border: 1px solid var(--line);
background: var(--surface);
overflow: hidden;
transition: transform var(--dur-base) var(--ease-out),
box-shadow var(--dur-base) var(--ease-out);
}
.pf-stat:hover,
.quota-card:hover,
.stat-card:hover {
transform: translateY(-2px);
box-shadow: var(--sh-md);
}
/* نوار رنگی کنار کارت آماری */
.pf-stat::before,
.quota-card::before {
content: "";
position: absolute;
inset-block: 0;
inset-inline-start: 0;
width: 3px;
background: var(--grad-brand);
}
.pf-stat-amber::before { background: linear-gradient(180deg,#F59E0B,#B45309); }
/* ==========================================================================
۲۰. کارت‌های میان‌بُر مدیریت
========================================================================== */
.adm-card {
border-radius: var(--r-lg);
border: 1px solid var(--line);
background: var(--surface);
transition: transform var(--dur-base) var(--ease-out),
box-shadow var(--dur-base) var(--ease-out),
border-color var(--dur-base) var(--ease-out);
}
.adm-card:hover {
transform: translateY(-3px);
box-shadow: var(--sh-lg);
border-color: var(--green-100);
}
/* آیکن کارت مدیریت.
نکته: چرخش باعث می‌شد آیکن از کادر بیرون بزند و در کارت‌های کناری
برش بخورد. حالا فقط بزرگ می‌شود و مبدأ تبدیل روی مرکز خودش قفل
است تا جابه‌جا نشود. */
.adm-ic {
display: inline-block;
transform-origin: center;
transition: transform var(--dur-base) var(--ease-out);
will-change: transform;
}
.adm-card:hover .adm-ic { transform: scale(1.1); }
/* کارت باید محتوایش را نگه دارد، نه اینکه بگذارد بیرون بزند */
.adm-card { overflow: hidden; }
.adm-badge {
background: #B91C1C;
color: #fff;
border-radius: var(--r-full);
font-weight: 800;
animation: pulse-badge 2.4s ease-in-out infinite;
}
/* نشان در انتظار آرام نبض می‌زند تا توجه بگیرد */
@keyframes pulse-badge {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.08); }
}
/* ==========================================================================
۲۱. تب‌های پنل
========================================================================== */
/* تب‌های پنل.
نکته: کلاس `pb-tab` در pagebuilder.css تعریف شده بود که فقط در
صفحهٔ صفحه‌ساز بارگذاری می‌شود. در بقیهٔ صفحات (مثل مدیریت مالی)
تب‌ها بی‌استایل می‌ماندند و مثل متن خام دیده می‌شدند. حالا تعریف
کاملشان اینجاست تا همه‌جا کار کند. */
.panel-tabs,
.pb-tabs {
display: flex;
gap: var(--sp-2);
flex-wrap: wrap;
overflow-x: auto;
margin-bottom: var(--sp-4);
padding-bottom: var(--sp-1);
scrollbar-width: none;
}
.pb-tabs::-webkit-scrollbar { display: none; }
.panel-tabs a,
.pb-tab {
display: inline-flex;
align-items: center;
gap: var(--sp-1);
padding: var(--sp-2) var(--sp-4);
border-radius: var(--r-full);
border: 1px solid var(--line);
background: var(--surface);
color: var(--ink-soft);
font-size: var(--fs-sm);
font-weight: 600;
white-space: nowrap;
transition: all var(--dur-base) var(--ease-out);
}
.pb-tab.on,
.panel-tabs a.on {
background: var(--green-btn);
border-color: var(--green-btn);
color: var(--on-green);
}
.pb-tab small { opacity: .8; }
.panel-tabs a:hover,
.pb-tab:hover { transform: translateY(-1px); }
.panel-tabs a.on,
.pb-tab.on { box-shadow: var(--sh-sm); }
/* ==========================================================================
۲۲. فرم‌های پنل
========================================================================== */
.form-card {
border-radius: var(--r-lg);
border: 1px solid var(--line);
background: var(--surface);
box-shadow: var(--sh-xs);
}
.pform-h {
display: flex;
align-items: center;
gap: var(--sp-2);
font-weight: 800;
color: var(--ink);
padding-bottom: var(--sp-2);
border-bottom: 1px solid var(--line);
margin-bottom: var(--sp-4);
}
.pform-hint {
font-size: var(--fs-sm);
color: var(--slate);
line-height: var(--lh-normal);
padding: var(--sp-3);
border-radius: var(--r-sm);
background: var(--bg-subtle);
border-inline-start: 3px solid var(--line-strong);
}
/* ==========================================================================
۲۳. فهرست‌ها
========================================================================== */
.og-card,
.oa-card,
.mo-card,
.md-card,
.wa-card,
.sc-card,
.fin-row,
.wc-row,
.dd-row {
border-radius: var(--r-md);
transition: transform var(--dur-fast) var(--ease-out),
box-shadow var(--dur-base) var(--ease-out),
border-color var(--dur-base) var(--ease-out);
}
.og-card:hover,
.oa-card:hover,
.fin-row:hover,
.wc-row:hover,
.dd-row:hover {
transform: translateX(-2px);
box-shadow: var(--sh-sm);
border-color: var(--line-strong);
}
/* در LTR جهت جابه‌جایی برعکس می‌شود */
[dir="ltr"] .og-card:hover,
[dir="ltr"] .oa-card:hover,
[dir="ltr"] .fin-row:hover { transform: translateX(2px); }
/* ==========================================================================
۲۴. حالت خالی پنل
========================================================================== */
.pf-empty,
.fin-empty {
border-radius: var(--r-lg);
border: 1.5px dashed var(--line-strong);
background: var(--bg-subtle);
color: var(--slate);
padding: var(--sp-12) var(--sp-6);
text-align: center;
font-size: var(--fs-sm);
}
/* ==========================================================================
۲۵. کلید انتخاب (سوییچ)
========================================================================== */
.switch {
position: relative;
display: inline-block;
width: 46px;
height: 26px;
flex: none;
}
.switch input {
opacity: 0;
width: 0;
height: 0;
}
.switch-track {
position: absolute;
inset: 0;
background: var(--line-strong);
border-radius: var(--r-full);
cursor: pointer;
transition: background var(--dur-base) var(--ease-out);
}
.switch-track::before {
content: "";
position: absolute;
width: 20px;
height: 20px;
inset-block-start: 3px;
inset-inline-start: 3px;
background: #fff;
border-radius: 50%;
box-shadow: var(--sh-sm);
transition: transform var(--dur-base) var(--ease-spring);
}
.switch input:checked + .switch-track { background: var(--green-btn); }
.switch input:checked + .switch-track::before {
transform: translateX(20px);
}
[dir="rtl"] .switch input:checked + .switch-track::before {
transform: translateX(-20px);
}
.switch input:focus-visible + .switch-track {
outline: 2px solid var(--green);
outline-offset: 2px;
}
/* ==========================================================================
۲۶. نوار پیشرفت
========================================================================== */
.progress {
height: 8px;
border-radius: var(--r-full);
background: var(--bg-subtle);
overflow: hidden;
}
.progress-bar {
height: 100%;
border-radius: var(--r-full);
background: var(--grad-brand);
transition: width var(--dur-slow) var(--ease-out);
position: relative;
overflow: hidden;
}
/* درخشش متحرک روی نوار — حس پیشرفت زنده می‌دهد */
.progress-bar::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(90deg, transparent,
rgba(255,255,255,.3), transparent);
animation: progress-shine 2s ease-in-out infinite;
}
@keyframes progress-shine {
from { transform: translateX(-100%); }
to { transform: translateX(100%); }
}
.progress-warn .progress-bar { background: linear-gradient(90deg,#F59E0B,#B45309); }
.progress-danger .progress-bar { background: linear-gradient(90deg,#EF4444,#B91C1C); }
/* ==========================================================================
۲۷. جدول‌های پنل
========================================================================== */
.fin-table,
.panel-table {
border-radius: var(--r-md);
overflow: hidden;
border: 1px solid var(--line);
}
/* ==========================================================================
۲۸. دکمهٔ شناور
--------------------------------------------------------------------------
برای عمل اصلی صفحه در موبایل — همیشه در دسترس.
========================================================================== */
.fab {
position: fixed;
inset-block-end: calc(72px + var(--safe-bottom));
inset-inline-end: var(--sp-4);
z-index: var(--z-sticky);
width: 56px;
height: 56px;
border-radius: var(--r-full);
display: grid;
place-items: center;
background: var(--green-btn);
color: var(--on-green);
box-shadow: var(--sh-brand), var(--sh-lg);
border: 0;
cursor: pointer;
transition: transform var(--dur-base) var(--ease-spring),
box-shadow var(--dur-base) var(--ease-out);
}
.fab:hover { transform: scale(1.08); }
.fab:active { transform: scale(.95); }
@media (min-width: 900px) {
.fab { inset-block-end: var(--sp-6); }
}
/* ==========================================================================
==========================================================================
بخش سوم — بخش‌های چیدنی صفحهٔ اصلی
--------------------------------------------------------------------------
این بخش‌ها از ادمین ساخته و مرتب می‌شوند. هر ظاهر (style) یک کلاس
دارد که روی همان محتوا اعمال می‌شود.
==========================================================================
========================================================================== */
.hsec {
padding: var(--sp-16) 0;
position: relative;
}
@media (max-width: 640px) {
.hsec { padding: var(--sp-10) 0; }
.hsec-desk { display: none; }
}
/* ---------- ظاهرها ---------- */
.hsec-soft { background: var(--bg-subtle); }
.hsec-brand {
background: var(--grad-brand);
color: #fff;
}
.hsec-brand .hsec-title,
.hsec-brand .hsec-sub,
.hsec-brand h3 { color: #fff; }
.hsec-brand .hsec-eyebrow { color: rgba(255,255,255,.85); }
.hsec-dark {
background: #101614;
color: #E8EFEB;
}
.hsec-dark .hsec-title, .hsec-dark h3 { color: #fff; }
.hsec-dark .hsec-sub { color: #A3B3AB; }
.hsec-aurora {
position: relative;
isolation: isolate;
background: var(--aurora-base);
overflow: hidden;
}
.hsec-aurora::before {
content: "";
position: absolute;
inset: -35%;
z-index: -1;
background:
radial-gradient(40% 50% at 22% 30%, var(--aurora-1) 0%, transparent 70%),
radial-gradient(45% 55% at 78% 24%, var(--aurora-2) 0%, transparent 70%),
radial-gradient(48% 45% at 50% 82%, var(--aurora-3) 0%, transparent 70%);
animation: aurora-drift var(--dur-aurora) ease-in-out infinite alternate;
pointer-events: none;
}
.hsec-glass .card,
.hsec-glass .hfeat,
.hsec-glass .htest {
background: var(--glass-bg-strong);
border: 1px solid var(--glass-border);
box-shadow: var(--glass-shadow);
}
@supports (backdrop-filter: blur(1px)) {
.hsec-glass .card,
.hsec-glass .hfeat,
.hsec-glass .htest {
background: var(--glass-bg);
-webkit-backdrop-filter: blur(var(--glass-blur)) saturate(160%);
backdrop-filter: blur(var(--glass-blur)) saturate(160%);
}
}
/* ---------- سربرگ بخش ---------- */
.hsec-head {
text-align: center;
max-width: 640px;
margin: 0 auto var(--sp-10);
}
.hsec-eyebrow {
display: inline-block;
font-size: var(--fs-sm);
font-weight: 700;
color: var(--green-text);
margin-bottom: var(--sp-2);
padding: var(--sp-1) var(--sp-4);
border-radius: var(--r-full);
background: var(--green-100);
}
.hsec-title {
font-size: clamp(1.5rem, 3.2vw, 2.2rem);
font-weight: 900;
line-height: var(--lh-tight);
letter-spacing: -.01em;
}
.hsec-sub {
font-size: var(--fs-base);
color: var(--slate);
line-height: var(--lh-normal);
margin-top: var(--sp-3);
}
.hsec-cta {
display: flex;
justify-content: center;
margin-top: var(--sp-10);
}
/* ==========================================================================
نوار آمار
========================================================================== */
.hsec-stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: var(--sp-6);
text-align: center;
}
.hstat {
padding: var(--sp-5);
border-radius: var(--r-lg);
background: var(--surface);
border: 1px solid var(--line);
transition: transform var(--dur-base) var(--ease-out),
box-shadow var(--dur-base) var(--ease-out);
}
.hstat:hover {
transform: translateY(-3px);
box-shadow: var(--sh-md);
}
.hsec-brand .hstat,
.hsec-dark .hstat {
background: rgba(255,255,255,.1);
border-color: rgba(255,255,255,.16);
}
.hstat-ic { font-size: 1.6rem; display: block; margin-bottom: var(--sp-2); }
.hstat-num {
font-size: var(--fs-3xl);
font-weight: 900;
line-height: 1.1;
color: var(--green-text);
}
.hsec-brand .hstat-num, .hsec-dark .hstat-num { color: #fff; }
.hstat-suf {
font-size: var(--fs-lg);
font-weight: 800;
color: var(--green-text);
}
.hsec-brand .hstat-suf, .hsec-dark .hstat-suf { color: #fff; }
.hstat-label {
display: block;
font-size: var(--fs-sm);
color: var(--slate);
margin-top: var(--sp-2);
}
.hsec-brand .hstat-label { color: rgba(255,255,255,.85); }
.hsec-dark .hstat-label { color: #A3B3AB; }
/* ==========================================================================
شبکهٔ ویژگی‌ها
========================================================================== */
.hsec-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: var(--sp-5);
}
.hfeat {
padding: var(--sp-6);
text-align: center;
}
.hfeat-ic {
font-size: 2.2rem;
display: inline-grid;
place-items: center;
width: 64px;
height: 64px;
border-radius: var(--r-lg);
background: var(--green-100);
margin-bottom: var(--sp-4);
transition: transform var(--dur-base) var(--ease-spring);
}
.hfeat:hover .hfeat-ic { transform: scale(1.1); }
.hfeat-img {
width: 64px;
height: 64px;
object-fit: contain;
margin-bottom: var(--sp-4);
}
.hfeat h3 {
font-size: var(--fs-md);
font-weight: 800;
margin-bottom: var(--sp-2);
}
.hfeat p {
font-size: var(--fs-sm);
color: var(--slate);
line-height: var(--lh-normal);
}
.hfeat-link {
display: inline-flex;
align-items: center;
gap: var(--sp-1);
margin-top: var(--sp-4);
font-size: var(--fs-sm);
font-weight: 700;
color: var(--green-text);
}
.hfeat-link span {
transition: transform var(--dur-base) var(--ease-out);
}
.hfeat-link:hover span { transform: translateX(-4px); }
[dir="ltr"] .hfeat-link span { transform: scaleX(-1); }
[dir="ltr"] .hfeat-link:hover span { transform: scaleX(-1) translateX(-4px); }
/* ==========================================================================
مراحل
========================================================================== */
.hsteps {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: var(--sp-6);
list-style: none;
counter-reset: step;
}
.hstep {
position: relative;
text-align: center;
padding: var(--sp-4);
}
.hstep-n {
display: inline-grid;
place-items: center;
width: 52px;
height: 52px;
border-radius: var(--r-full);
background: var(--grad-brand);
color: #fff;
font-size: var(--fs-lg);
font-weight: 900;
box-shadow: var(--sh-brand);
margin-bottom: var(--sp-4);
}
/* خط اتصال بین مراحل — فقط در دسکتاپ */
@media (min-width: 900px) {
.hstep:not(:last-child)::after {
content: "";
position: absolute;
top: 26px;
inset-inline-end: -50%;
width: 100%;
height: 2px;
background: linear-gradient(90deg, var(--green-100), transparent);
z-index: -1;
}
}
.hstep h3 { font-size: var(--fs-md); font-weight: 800; }
.hstep p {
font-size: var(--fs-sm);
color: var(--slate);
line-height: var(--lh-normal);
margin-top: var(--sp-2);
}
/* ==========================================================================
فراخوان اقدام
========================================================================== */
.hcta {
display: grid;
grid-template-columns: 1fr;
gap: var(--sp-8);
align-items: center;
padding: var(--sp-10);
border-radius: var(--r-2xl);
background: var(--grad-brand);
color: #fff;
position: relative;
isolation: isolate;
overflow: hidden;
box-shadow: var(--sh-lg);
}
.hcta::before {
content: "";
position: absolute;
inset: -40%;
z-index: -1;
background: radial-gradient(45% 55% at 25% 35%,
rgba(255,255,255,.2) 0%, transparent 70%);
animation: aurora-drift 18s ease-in-out infinite alternate;
}
@media (min-width: 800px) {
.hcta { grid-template-columns: 1fr 1fr; }
}
.hcta h2 {
font-size: clamp(1.4rem, 3vw, 2rem);
font-weight: 900;
line-height: var(--lh-tight);
color: #fff;
}
.hcta p {
font-size: var(--fs-base);
line-height: var(--lh-normal);
color: rgba(255,255,255,.9);
margin: var(--sp-3) 0 var(--sp-6);
}
.hcta .btn-primary {
background: #fff;
color: var(--green-on-white);
}
.hcta .btn-primary:hover { background: rgba(255,255,255,.9); }
.hcta-img {
width: 100%;
border-radius: var(--r-xl);
box-shadow: var(--sh-lg);
}
/* ==========================================================================
نظر مشتریان
========================================================================== */
.htest {
padding: var(--sp-6);
position: relative;
}
.htest blockquote {
font-size: var(--fs-base);
line-height: var(--lh-loose);
color: var(--ink-soft);
margin-bottom: var(--sp-5);
position: relative;
padding-top: var(--sp-5);
}
/* گیومهٔ تزئینی */
.htest blockquote::before {
content: "\201D";
position: absolute;
top: -8px;
inset-inline-start: 0;
font-size: 3rem;
line-height: 1;
color: var(--green-100);
font-family: Georgia, serif;
}
.htest figcaption {
display: flex;
align-items: center;
gap: var(--sp-3);
font-size: var(--fs-sm);
font-weight: 700;
}
.htest figcaption img,
.htest-ava {
width: 40px;
height: 40px;
border-radius: var(--r-full);
object-fit: cover;
display: grid;
place-items: center;
background: var(--green-100);
font-size: 1.2rem;
}
/* ==========================================================================
پرسش‌های پرتکرار
========================================================================== */
.hfaq {
max-width: 760px;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: var(--sp-3);
}
.hfaq-item {
border: 1px solid var(--line);
border-radius: var(--r-md);
background: var(--surface);
overflow: hidden;
transition: border-color var(--dur-base) var(--ease-out),
box-shadow var(--dur-base) var(--ease-out);
}
.hfaq-item[open] {
border-color: var(--green);
box-shadow: var(--sh-sm);
}
.hfaq-item summary {
padding: var(--sp-4) var(--sp-5);
cursor: pointer;
font-weight: 700;
font-size: var(--fs-base);
list-style: none;
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--sp-3);
}
.hfaq-item summary::-webkit-details-marker { display: none; }
/* نشانگر باز/بسته */
.hfaq-item summary::after {
content: "+";
font-size: 1.3rem;
font-weight: 400;
color: var(--green);
transition: transform var(--dur-base) var(--ease-spring);
flex: none;
}
.hfaq-item[open] summary::after { transform: rotate(45deg); }
.hfaq-body {
padding: 0 var(--sp-5) var(--sp-5);
font-size: var(--fs-sm);
color: var(--slate);
line-height: var(--lh-loose);
}
/* ==========================================================================
لوگوها
========================================================================== */
.hlogos {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: var(--sp-8);
}
.hlogo {
display: grid;
place-items: center;
min-width: 110px;
height: 56px;
opacity: .6;
filter: grayscale(1);
transition: opacity var(--dur-base) var(--ease-out),
filter var(--dur-base) var(--ease-out),
transform var(--dur-base) var(--ease-out);
}
.hlogo:hover {
opacity: 1;
filter: none;
transform: scale(1.06);
}
.hlogo img { max-height: 44px; max-width: 130px; object-fit: contain; }
.hlogo span { font-weight: 800; color: var(--slate); }
/* ==========================================================================
شمارش معکوس
========================================================================== */
.hcount {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--sp-6);
text-align: center;
padding: var(--sp-10);
border-radius: var(--r-2xl);
background: var(--grad-brand);
color: #fff;
box-shadow: var(--sh-lg);
}
.hcount h2 { font-size: clamp(1.3rem,2.6vw,1.9rem); font-weight: 900; }
.hcount p { color: rgba(255,255,255,.88); margin-top: var(--sp-2); }
.hcount .hsec-eyebrow { background: rgba(255,255,255,.18); color: #fff; }
.hcount-clock {
display: flex;
gap: var(--sp-3);
direction: ltr;
}
.hcount-cell {
min-width: 68px;
padding: var(--sp-3);
border-radius: var(--r-md);
background: rgba(255,255,255,.16);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
}
.hcount-cell b {
display: block;
font-size: var(--fs-2xl);
font-weight: 900;
line-height: 1.1;
font-variant-numeric: tabular-nums;
}
.hcount-cell small {
font-size: var(--fs-xs);
opacity: .82;
}
.hcount .btn-primary { background: #fff; color: var(--green-on-white); }
/* ==========================================================================
متن آزاد و گالری
========================================================================== */
.hrich {
max-width: 760px;
margin: 0 auto;
font-size: var(--fs-base);
line-height: var(--lh-loose);
color: var(--ink-soft);
}
.hrich h3 { font-size: var(--fs-lg); font-weight: 800; margin: var(--sp-5) 0 var(--sp-2); }
.hrich p { margin-bottom: var(--sp-4); }
.hrich ul, .hrich ol { padding-inline-start: var(--sp-6); margin-bottom: var(--sp-4); }
.hrich li { margin-bottom: var(--sp-2); }
.hgal {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: var(--sp-3);
}
.hgal-item {
position: relative;
border-radius: var(--r-md);
overflow: hidden;
aspect-ratio: 4/3;
display: block;
}
.hgal-item img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform var(--dur-slow) var(--ease-out);
}
.hgal-item:hover img { transform: scale(1.06); }
.hgal-item span {
position: absolute;
inset-inline: 0;
bottom: 0;
padding: var(--sp-4) var(--sp-3) var(--sp-3);
background: linear-gradient(to top, rgba(0,0,0,.72), transparent);
color: #fff;
font-size: var(--fs-sm);
font-weight: 600;
}
/* بخش ۲۹ (منوی کناری) به بخش ۳۴ منتقل شد — تعریف نهایی آنجاست. */
/* ==========================================================================
==========================================================================
بخش چهارم — اصلاحات
==========================================================================
========================================================================== */
/* ==========================================================================
۳۰. اسلایدشو — حذف فضای خالی زیر محتوا
--------------------------------------------------------------------------
باگ: ارتفاع ثابت (clamp تا ۳۰۰px) باعث می‌شد وقتی متن اسلاید کوتاه
است، کادر رنگی زیرش خالی بماند و مثل «باکس اضافه» دیده شود.
رفع: ارتفاع از محتوا می‌آید، با حداقل معقول. اسلایدها روی هم
می‌نشینند، پس بلندترینشان ارتفاع را تعیین می‌کند.
========================================================================== */
.pshow-track {
height: auto;
min-height: clamp(150px, 20vw, 220px);
display: grid;
}
/* همهٔ اسلایدها در یک خانهٔ گرید — بلندترین ارتفاع را می‌سازد */
.pshow-slide {
position: relative;
grid-area: 1 / 1;
inset: auto;
min-height: inherit;
padding-block: clamp(20px, 3vw, 34px);
}
/* اسلایدهای غیرفعال جا نگیرند ولی برای انتقال نرم بمانند */
.pshow-slide:not(.on) {
visibility: hidden;
pointer-events: none;
}
.pshow-slide.on { visibility: visible; }
/* وقتی فقط یک اسلاید هست، نقطه‌ها هم لازم نیستند */
.pshow-static .pshow-dots { display: none; }
/* ==========================================================================
۳۱. منوی کناری — آیکن نباید برش بخورد
--------------------------------------------------------------------------
باگ: `justify-content: space-between` آیکن را به لبهٔ کادر می‌چسباند
و با padding کم، بخشی‌اش بیرون می‌ماند.
رفع: چیدمان به «آیکن، متن، سپس فضای خالی» تغییر می‌کند تا آیکن
همیشه کنار متن و داخل کادر بماند.
========================================================================== */
.profile-nav a,
.profile-soon {
justify-content: flex-start;
gap: var(--sp-2);
padding-inline: var(--sp-4);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* نشان یا عدد انتهایی به لبهٔ مخالف می‌رود */
.profile-nav a > .badge,
.profile-nav a > .dot-badge,
.profile-nav a > small:last-child,
.profile-soon > small:last-child {
margin-inline-start: auto;
flex: none;
}
/* منو نباید زیر هیرو برود.
باگ: `margin-top: -34px` در pages.css منو را بالا می‌کشید تا روی
هیرو بیفتد، ولی آیتم اول پشت آن پنهان می‌شد. حالا منو کمی پایین‌تر
می‌نشیند و اولین آیتمش کامل دیده می‌شود. */
.profile-side .profile-nav {
margin-top: var(--sp-3);
}
/* نکته: در این قالب‌ها آیکن و متن **داخل یک span** هستند
(`🔸 نمای کلی`)، نه دو عنصر جدا. پس نباید عرض ثابت
به آن داد — کل متن جمع می‌شد و ناپدید می‌گشت.
کافی است span فضای لازم را بگیرد و سرریز نکند. */
.profile-nav a > span,
.profile-soon > span {
flex: 1 1 auto;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* منوی مدیریت هم همین رفتار را دارد */
.adm-nav a {
justify-content: flex-start;
gap: var(--sp-2);
overflow: hidden;
}
.adm-nav a > span {
flex: 1 1 auto;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* ==========================================================================
۳۲. جلوهٔ صفحه — باید دیده شود
--------------------------------------------------------------------------
باگ: لایه با z-index منفی پشت پس‌زمینهٔ مات body می‌رفت و اصلاً
دیده نمی‌شد.
رفع: وقتی body میزبان جلوه است، پس‌زمینه‌اش شفاف می‌شود و رنگ
اصلی روی یک لایهٔ زیرین می‌نشیند.
========================================================================== */
body.vfx-host {
background-color: transparent;
}
/* لایهٔ رنگ پایه — زیر جلوه ولی روی صفحهٔ سفید مرورگر */
body.vfx-host::before {
content: "";
position: fixed;
inset: 0;
z-index: -2;
background: var(--bg);
pointer-events: none;
}
body.vfx-host > .vfx-layer {
z-index: -1;
}
/* بخش‌های صفحه که پس‌زمینهٔ خودشان را دارند، جلوه را می‌پوشانند.
شفافشان می‌کنیم تا جلوه از پشتشان دیده شود. */
body.vfx-host .hsec-soft,
body.vfx-host main > section:not([class*="hsec-"]) {
background-color: transparent;
}
/* ==========================================================================
۳۳. هاور روی پس‌زمینهٔ تیره
--------------------------------------------------------------------------
باگ: نوار بالا و فوتر پس‌زمینهٔ سبز تیره دارند، ولی هاورشان
`--green-text` می‌گرفت که آن هم تیره است — متن ناپدید می‌شد.
رفع: روی پس‌زمینهٔ تیره، هاور باید روشن‌تر شود نه تیره‌تر.
========================================================================== */
.topbar-links a:hover,
.topbar a:hover {
color: #fff;
opacity: 1;
}
.footer ul a:hover,
.footer a:hover {
color: var(--green-300);
opacity: 1;
}
/* در تم تیره، فوتر پس‌زمینهٔ روشن‌تری نسبت به بدنه دارد ولی همچنان
تیره است — پس همان قاعده برقرار می‌ماند. */
[data-theme="dark"] .footer a:hover { color: var(--green-300); }
/* نوار پیشنهاد و هر بخش دیگری با پس‌زمینهٔ برند */
.offer-strip a:hover,
.hsec-brand a:hover,
.hsec-dark a:hover,
.pf-hero a:hover,
.panel-hero a:hover,
.adm-hero a:hover {
color: #fff;
opacity: 1;
}
/* اسلاید هیرو */
.slide-inner a:not(.btn):hover,
.pshow-slide a:not(.btn):hover { color: #fff; }
/* ==========================================================================
۳۴. منوی کناری مدیریت — اسکرول مستقل
--------------------------------------------------------------------------
خواسته: منو با صفحه بالا و پایین نرود و اسکرول خودش را داشته باشد،
ولی آیتم اول هرگز زیر هیرو یا سربرگ پنهان نشود.
کلید کار: `scroll-padding-block-start` تضمین می‌کند وقتی منو اسکرول
می‌شود، بالای فهرست فضای کافی بماند.
========================================================================== */
@media (min-width: 900px) {
/*
⚠️ این تنها تعریف اسکرول منوی کناری است.
پیش‌تر دو بلوک جدا همین را تعریف می‌کردند با مقادیر
متفاوت — یکی `--header-h` را ۷۲ فرض می‌کرد و دیگری ۶۴،
یکی `sp-6` از پایین کم می‌کرد و دیگری `sp-8`. بلوک دوم
برنده می‌شد و هیچ‌کس نمی‌دانست کدام عدد واقعاً اعمال
می‌شود.
*/
.profile-side {
position: sticky;
top: calc(var(--header-h, 72px) + var(--sp-4));
align-self: start;
/*
⚠️ `dvh` نه `vh`.
در موبایل و بعضی مرورگرهای رومیزی، نوار آدرس در `vh`
حساب نمی‌شود و منو بلندتر از فضای واقعی می‌شد — یعنی
آخرین آیتم‌ها زیر لبهٔ پنجره می‌ماندند و با اسکرول خود
منو هم دیده نمی‌شدند.
*/
max-height: calc(100dvh - var(--header-h, 72px) - var(--sp-6));
overflow-y: auto;
/*
⚠️ `overscroll-behavior: contain` عمداً برداشته شد.
با آن، وقتی اسکرول منو به انتها می‌رسید، چرخ ماوس
**هیچ کاری نمی‌کرد** — کاربر باید نشانگر را از روی منو
برمی‌داشت و صفحه را جدا اسکرول می‌کرد.
بدون آن، اسکرول به‌طور طبیعی به صفحه زنجیر می‌شود و
حرکت پیوسته می‌ماند.
*/
/* فضای امن بالا و پایین تا آیتم‌های لبه بریده نشوند */
padding-block: var(--sp-2);
padding-inline-end: var(--sp-2);
scroll-padding-block: var(--sp-3);
}
/* منو دیگر زیر هیرو کشیده نمی‌شود */
.profile-side .profile-nav {
margin-top: 0;
}
/*
⚠️ فضای تنفس در انتهای فهرست.
بدون آن، آخرین آیتم دقیقاً به لبه می‌چسبد و به‌نظر
می‌رسد فهرست ادامه دارد.
*/
.profile-side > :last-child {
padding-bottom: var(--sp-4);
}
/* حالت is-tall دیگر لازم نیست — همه‌جا اسکرول مستقل داریم */
.profile-side.is-tall {
position: sticky;
max-height: calc(100dvh - var(--header-h, 72px) - var(--sp-6));
overflow-y: auto;
}
.profile-side { scrollbar-width: thin; }
.profile-side::-webkit-scrollbar { width: 6px; }
.profile-side::-webkit-scrollbar-track { background: transparent; }
.profile-side::-webkit-scrollbar-thumb {
background: var(--scroll-thumb);
border-radius: var(--r-full);
border: 0;
}
.profile-side::-webkit-scrollbar-thumb:hover {
background: var(--scroll-thumb-hover);
}
/* آیتم فعال هنگام اسکرول خودکار زیر لبه پنهان نشود */
.profile-nav a.on,
.profile-nav a[aria-current="page"] {
scroll-margin-block: var(--sp-6);
}
}
/* ==========================================================================
۳۵. نشان نوع تراکنش مالی
--------------------------------------------------------------------------
باگ: `fin-kind` با `::before` آیکن می‌گرفت ولی محتوایش با متن
جای‌گزین می‌شد و رشته‌های عجیب («3/4-a») نمایان می‌گشت.
رفع: آیکن با کلاس مشخص و محتوای ثابت می‌آید.
========================================================================== */
.fin-kind {
display: inline-flex;
align-items: center;
gap: var(--sp-1);
padding: 2px 10px;
border-radius: var(--r-full);
font-size: var(--fs-xs);
font-weight: 700;
white-space: nowrap;
line-height: 1.7;
}
/* هر نوع، نشان رنگی خودش را دارد — بدون تکیه بر ::before */
.fin-k-supplier { background: var(--green-100); color: var(--green-text); }
.fin-k-visitor { background: var(--info-bg); color: var(--info-text); }
.fin-k-platform { background: var(--bg-subtle); color: var(--ink-soft); }
.fin-k-tax { background: var(--warn-bg); color: var(--warn-text); }
.fin-k-fee { background: var(--warn-bg); color: var(--warn-text); }
.fin-k-refund { background: var(--danger-bg); color: var(--danger-text); }
/* محتوای تزئینی که ممکن است رشتهٔ ناخواسته تولید کند، حذف می‌شود */
.fin-kind::before,
.fin-kind::after { content: none; }
/* ==========================================================================
۳۶. نوار جستجوی صفحات فهرست
--------------------------------------------------------------------------
عنوان و مسیر راهنما حذف شدند، پس نوار باید جمع‌وجورتر شود.
========================================================================== */
/* ==========================================================================
نوار جستجوی صفحات فهرست
--------------------------------------------------------------------------
کادر سفید تمام‌عرض بی‌هویت بود. حالا فقط خودِ فیلد دیده می‌شود،
شناور روی زمینهٔ صفحه.
========================================================================== */
.page-band-slim {
padding-block: var(--sp-6) var(--sp-5);
background: transparent;
border: 0;
box-shadow: none;
}
.page-band-slim .page-search {
max-width: 560px;
margin-inline: auto;
position: relative;
display: flex;
align-items: center;
height: 50px;
padding-inline: var(--sp-5);
border-radius: var(--r-full);
background: var(--surface);
border: 1.5px solid var(--line);
box-shadow: var(--sh-sm);
transition: border-color var(--dur-base) var(--ease-out),
box-shadow var(--dur-base) var(--ease-out);
}
.page-band-slim .page-search:focus-within {
border-color: var(--green);
box-shadow: 0 0 0 4px var(--green-100), var(--sh-md);
}
.page-band-slim .page-search input {
flex: 1;
min-width: 0;
height: 100%;
border: 0;
background: transparent;
color: var(--ink);
font: inherit;
font-size: var(--fs-base);
padding-inline: var(--sp-2);
}
.page-band-slim .page-search input:focus { outline: none; }
.page-band-slim .page-search input::placeholder {
color: var(--slate-light);
}
.page-search-ic {
flex: none;
display: grid;
place-items: center;
width: 22px;
height: 22px;
color: var(--slate);
}
.page-search-ic svg { width: 18px; height: 18px; }
.page-search-x {
flex: none;
width: 30px;
height: 30px;
border-radius: var(--r-full);
display: grid;
place-items: center;
background: var(--bg-subtle);
border: 0;
color: var(--slate);
cursor: pointer;
font-size: .8rem;
transition: background var(--dur-fast) var(--ease-out),
color var(--dur-fast) var(--ease-out);
}
.page-search-x:hover {
background: var(--line);
color: var(--ink);
}
@media (max-width: 640px) {
.page-band-slim { padding-block: var(--sp-4); }
.page-band-slim .page-search {
height: 46px;
margin-inline: var(--sp-4);
}
}
/* ==========================================================================
۳۷. فاصله‌گذاری یکدست
--------------------------------------------------------------------------
جاهایی که متن و کنترل‌ها به هم چسبیده بودند.
========================================================================== */
/* ردیف‌های فهرست: فاصلهٔ کافی بین متن و دکمه */
.sc-row,
.fin-row,
.og-card,
.wc-row,
.dd-row {
gap: var(--sp-4);
padding: var(--sp-4) var(--sp-5);
}
.sc-main,
.fin-main {
min-width: 0;
display: flex;
flex-direction: column;
gap: var(--sp-1);
}
.sc-meta,
.fin-meta {
gap: var(--sp-3);
row-gap: var(--sp-1);
}
/* کارت‌های آماری */
.quota-card,
.pf-stat {
padding: var(--sp-5);
}
.quota-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--sp-3);
}
.quota-head b {
font-size: var(--fs-xl);
font-weight: 900;
}
/* عنوان بخش‌ها */
.pf-sec-head {
gap: var(--sp-4);
margin-bottom: var(--sp-5);
flex-wrap: wrap;
}
.pf-sub {
margin-top: var(--sp-8);
margin-bottom: var(--sp-4);
font-size: var(--fs-md);
font-weight: 800;
}
/* فرم‌های پنل */
.form-card {
padding: var(--sp-5);
margin-bottom: var(--sp-5);
}
.form-card .field + .field,
.form-card .form-grid + .form-grid,
.form-card .form-grid + .field,
.form-card .field + .form-grid {
margin-top: var(--sp-4);
}
/*
استثنای مهم: فیلدهای داخل `.form-grid`.
`.form-grid` یک گرید است و فاصله‌اش را `gap` می‌دهد. ولی فیلدهای
داخلش همسایهٔ **مجاور** یکدیگرند، پس قاعدهٔ بالا به ستون دوم هر ردیف
هم `margin-top` می‌داد و آن را نسبت به ستون اول پایین می‌انداخت.
همان ناترازی‌ای که در «نام قالب / نوع کد» و «عرض / ارتفاع» دیده
می‌شد — و چون قاعده descendant بود، در تمام فرم‌های پنل و پروفایل
تکرار می‌شد.
حاشیه را صفر می‌کنیم؛ فاصله‌گذاری کار `gap` است.
*/
.form-card .form-grid > .field + .field,
.form-card .form-grid > .field + .form-grid,
.form-card .form-grid > .form-grid + .field {
margin-top: 0;
}
.acc-actions {
display: flex;
gap: var(--sp-3);
flex-wrap: wrap;
margin-top: var(--sp-5);
padding-top: var(--sp-4);
border-top: 1px solid var(--line);
}
/* فهرست‌ها */
.og-list {
display: flex;
flex-direction: column;
gap: var(--sp-3);
}
/* راهنمای زیر فیلدها */
.pform-hint {
margin-bottom: var(--sp-4);
}
/* جدول‌های پنل */
.fin-table td,
.fin-table th,
.panel-table td,
.panel-table th {
padding: var(--sp-3) var(--sp-4);
}
/* چیپ‌ها و برچسب‌ها کنار متن */
.chip + .chip,
.fin-kind + .fin-kind { margin-inline-start: var(--sp-2); }
/* دکمه‌های کنار هم */
.wr-head-acts,
.sc-acts,
.wt-acts { gap: var(--sp-2); }
/* ==========================================================================
۳۸. کادر جستجوی موبایل
--------------------------------------------------------------------------
کارت شناور با یک ردیف: دکمهٔ بستن، فیلد جستجو، دکمهٔ ذره‌بین.
همه هم‌ارتفاع و در یک خط — بدون شکستن به سطر بعد.
========================================================================== */
.search-modal-overlay {
background: rgba(10, 16, 14, .55);
-webkit-backdrop-filter: blur(8px) saturate(120%);
backdrop-filter: blur(8px) saturate(120%);
animation: fade-in var(--dur-base) var(--ease-out);
}
.search-modal-box {
top: max(var(--sp-3), env(safe-area-inset-top, 0px));
inset-inline: var(--sp-3);
padding: var(--sp-3);
border-radius: var(--r-xl);
gap: var(--sp-2);
align-items: center;
/* هرگز نشکند: هر سه عنصر در یک ردیف می‌مانند */
flex-wrap: nowrap;
background: var(--surface);
border: 1px solid var(--line);
box-shadow: var(--sh-xl);
animation: search-drop var(--dur-slow) var(--ease-spring) both;
}
@keyframes search-drop {
from { opacity: 0; transform: translateY(-20px) scale(.97); }
to { opacity: 1; transform: none; }
}
/* ---------- فیلد جستجو ----------
⚠️ طبق طرح: سه عنصر **جدا** در یک ردیف.
[ کادر متن ] [ ذره‌بین سبز ] [ ضربدر قرمز ]
نسخهٔ پیشین فرم را یک کادر یکپارچه می‌کرد و ذره‌بین را
**داخل** آن می‌گذاشت. با `display: contents` فرم از چیدمان
حذف می‌شود تا کادر و دکمه هر کدام عضو مستقل ردیف باشند و
ضربدر بتواند هم‌تراز کنارشان بنشیند.
-------------------------------------------------------- */
.search-modal-form { display: contents; }
.search-modal-form input {
flex: 1 1 auto;
min-width: 0;
height: 50px;
box-sizing: border-box;
padding-inline: var(--sp-4);
border-radius: var(--r-lg);
border: 2px solid var(--green);
background: var(--surface);
color: var(--ink);
font: inherit;
font-size: var(--fs-base);
transition: box-shadow var(--dur-base) var(--ease-out);
}
.search-modal-form input:focus {
outline: none;
box-shadow: 0 0 0 3px var(--green-100);
}
.search-modal-form input::placeholder {
color: var(--slate-light);
overflow: hidden;
text-overflow: ellipsis;
}
/* ⚠️ ضربدر داخلی مرورگر با دکمهٔ بستن ما تداخل دارد */
.search-modal-form input::-webkit-search-cancel-button {
display: none;
}
/*
دو دکمهٔ مربع هم‌اندازه.
⚠️ ۵۰ پیکسل — هم‌ارتفاع کادر متن تا ردیف متوازن بماند و
هدف لمس بالاتر از حداقل استاندارد باشد.
*/
.search-modal-form button[type="submit"],
.search-modal-close {
flex: none;
width: 50px;
height: 50px;
padding: 0;
border: 0;
border-radius: var(--r-lg);
display: grid;
place-items: center;
cursor: pointer;
transition: transform var(--dur-fast) var(--ease-out),
filter var(--dur-fast) var(--ease-out);
}
.search-modal-form button[type="submit"]:active,
.search-modal-close:active { transform: scale(.94); }
.search-modal-form button[type="submit"] {
background: var(--green-btn);
color: var(--on-green);
}
.search-modal-form button[type="submit"] .icon {
width: 20px; height: 20px;
}
/* ---------- دکمهٔ بستن ---------- */
/*
⚠️ قرمز، طبق طرح.
توکن‌های `danger` به‌جای قرمز ثابت — قرمز خالص روی
پس‌زمینهٔ تم تیره تضاد کافی ندارد.
*/
.search-modal-close {
background: var(--danger-bg);
color: var(--danger-text);
font-size: 1.2rem;
font-weight: 700;
line-height: 1;
}
.search-modal-close:hover { filter: brightness(.94); }
/* در صفحهٔ خیلی باریک، فیلد اولویت دارد */
@media (max-width: 360px) {
.search-modal-box { padding: var(--sp-2); gap: var(--sp-1); }
/* ⚠️ هر سه با هم کوچک شوند تا ردیف هم‌ارتفاع بماند */
.search-modal-form input { height: 44px; }
.search-modal-form button[type="submit"],
.search-modal-close { width: 44px; height: 44px; }
}
/* ==========================================================================
۳۹. صفحهٔ کالا در موبایل
--------------------------------------------------------------------------
باگ: `pd-buybox` را چسبان کردم در حالی که قالب از قبل نوار جداگانهٔ
`pd-mobile-bar` داشت — کارت خرید دوبار دیده می‌شد و روی نوار
ناوبری می‌افتاد.
رفع: در موبایل فقط نوار پایین چسبان است؛ کارت اصلی در جریان عادی
صفحه می‌ماند.
========================================================================== */
@media (max-width: 799px) {
/* کارت خرید در جریان عادی — نه چسبان */
.pd-buybox {
position: static;
margin-top: var(--sp-5);
border-radius: var(--r-lg);
box-shadow: var(--sh-sm);
}
/* ---------- نوار خرید پایین ----------
ترتیب درست: نوار ناوبری پایین‌ترین، نوار خرید بالایش. */
.pd-mobile-bar {
/* دقیقاً بالای نوار ناوبری.
`!important` لازم است چون pages.css همین ویژگی را با
`bottom: 0` تعریف کرده و ترتیب بارگذاری تضمین‌شده نیست. */
position: fixed !important;
/* `top: auto` لازم است: اگر top مقدار داشته باشد بر bottom
اولویت می‌گیرد و نوار وسط صفحه می‌ماند. */
top: auto !important;
bottom: var(--mobile-nav-h, 60px) !important;
z-index: 45;
gap: var(--sp-3);
/* padding پایین صفر: ناحیهٔ امن را نوار ناوبری زیرش پوشش
می‌دهد، وگرنه فاصلهٔ اضافی می‌افتد. */
padding: var(--sp-3) var(--sp-4) !important;
border-top: 1px solid var(--line);
box-shadow: 0 -6px 20px rgba(16, 22, 20, .1);
/* پس‌زمینهٔ مات: با شفافیت، متن صفحه از پشتش دیده می‌شد و
خواندن قیمت را سخت می‌کرد. */
background: var(--surface);
}
@supports (backdrop-filter: blur(1px)) {
.pd-mobile-bar {
background: var(--glass-bg-strong);
-webkit-backdrop-filter: blur(var(--glass-blur-strong)) saturate(180%);
backdrop-filter: blur(var(--glass-blur-strong)) saturate(180%);
}
}
/* قیمت و دکمه: قیمت جا می‌گیرد، دکمه بقیه را پر می‌کند.
پیش‌تر `white-space: nowrap` روی قیمت باعث می‌شد از لبه بزند. */
.pd-mobile-bar .price {
flex: 0 1 auto;
min-width: 0;
font-size: var(--fs-base);
font-weight: 900;
color: var(--green-text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
direction: ltr;
text-align: start;
}
.pd-mobile-bar .btn {
flex: 1 1 auto;
min-width: 0;
min-height: 46px;
padding-inline: var(--sp-3);
border-radius: var(--r-md);
font-size: var(--fs-sm);
white-space: nowrap;
overflow: hidden;
}
/* در صفحهٔ باریک، متن دکمه کوتاه‌تر می‌شود */
@media (max-width: 360px) {
.pd-mobile-bar { padding-inline: var(--sp-3); gap: var(--sp-2); }
.pd-mobile-bar .price { font-size: var(--fs-sm); }
}
/* نوار ناوبری سر جای خودش می‌ماند — پیش‌تر بالا کشیده می‌شد */
body:has(.pd-mobile-bar) .mobile-nav { bottom: 0; }
/* فضای امن پایین صفحه: ارتفاع دو نوار روی هم.
نوار خرید حدود ۷۱ پیکسل است؛ عدد دقیق‌تر باعث می‌شود محتوا
زیر نوارها نماند و فاصلهٔ اضافی هم نیفتد. */
body:has(.pd-mobile-bar)::after {
height: calc(var(--mobile-nav-h, 60px) + 78px + var(--safe-bottom));
}
/* ---------- چیدمان صفحه ---------- */
.pd-layout,
.pd-wrap {
gap: var(--sp-5);
}
.pd-info { padding-inline: 0; }
.pd-title {
font-size: var(--fs-lg);
line-height: var(--lh-tight);
margin-block: var(--sp-3);
}
/* گالری تمام‌عرض با گوشه‌های گرد */
.pd-gallery { margin-inline: calc(var(--sp-4) * -1); }
.pd-main {
border-radius: 0;
aspect-ratio: 1;
}
.pd-thumbs {
padding-inline: var(--sp-4);
gap: var(--sp-2);
overflow-x: auto;
scrollbar-width: none;
}
.pd-thumbs::-webkit-scrollbar { display: none; }
.pd-thumb {
flex: none;
width: 56px;
height: 56px;
border-radius: var(--r-sm);
}
/* ---------- ابزارها ---------- */
.pd-tools {
display: flex;
gap: var(--sp-2);
justify-content: center;
flex-wrap: wrap;
margin-block: var(--sp-4);
}
.pd-tool,
.pd-tools .fav {
width: 44px;
height: 44px;
border-radius: var(--r-full);
}
/* ---------- بخش‌های اطلاعاتی ---------- */
.pd-return,
.pd-safe,
.pd-tiers,
.pd-desc {
padding: var(--sp-4);
border-radius: var(--r-md);
margin-bottom: var(--sp-3);
}
.pd-sale-meta,
.pd-vendor-row {
flex-wrap: wrap;
gap: var(--sp-2);
}
/* عنوان بخش‌ها */
.pd-sec-title {
font-size: var(--fs-md);
margin-block: var(--sp-5) var(--sp-3);
}
}
/* ==========================================================================
۴۰. مسیر راهنمای خالی
--------------------------------------------------------------------------
با حذف لینک «خانه»، صفحاتی که مسیر دیگری ندارند نوار خالی نشان
می‌دادند. `:empty` آن را جمع می‌کند.
========================================================================== */
.breadcrumb:empty {
display: none;
}
/*
جدا از قاعدهٔ بالا — و این عمدی است.
`:has()` بخشنده نیست: اگر مرورگر پشتیبانی نکند، **کل فهرست سلکتور**
دور ریخته می‌شود، نه فقط همان یک سلکتور. با هم‌فهرست‌بودن، قاعدهٔ
سالمِ `:empty` هم قربانی می‌شد.
*/
.breadcrumb:has(> :only-child:empty) {
display: none;
}
.breadcrumb {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--sp-2);
font-size: var(--fs-sm);
color: var(--slate);
}
.breadcrumb:not(:has(*)) { display: none; }
/* ==========================================================================
۴۱. کارت ورود و ثبت‌نام
--------------------------------------------------------------------------
کمی شفاف تا جلوهٔ پس‌زمینه از پشتش دیده شود، ولی نه آن‌قدر که
خواندن فرم سخت شود.
========================================================================== */
.auth-card {
background: var(--glass-bg-strong);
border: 1px solid var(--glass-border);
border-radius: var(--r-xl);
box-shadow: var(--sh-lg);
}
@supports (backdrop-filter: blur(1px)) {
.auth-card {
/* شفافیت ۸۲٪: متن فرم همچنان کنتراست کافی دارد */
background: color-mix(in srgb, var(--surface) 82%, transparent);
-webkit-backdrop-filter: blur(var(--glass-blur)) saturate(150%);
backdrop-filter: blur(var(--glass-blur)) saturate(150%);
}
}
/* مرورگرهایی که color-mix ندارند، به مقدار ثابت برمی‌گردند */
@supports not (background: color-mix(in srgb, red 50%, transparent)) {
.auth-card { background: var(--glass-bg-strong); }
}
/* فیلدهای داخل کارت شفاف، خودشان مات بمانند تا خوانا باشند */
.auth-card input,
.auth-card select,
.auth-card textarea {
background: var(--surface);
}
/* ==========================================================================
۴۲. فاصلهٔ نوار جستجو از اسلایدر
--------------------------------------------------------------------------
وقتی صفحه اسلایدر دارد، نوار جستجو به آن می‌چسبید. `:has` فقط در
همان حالت فاصله می‌دهد تا صفحات بدون اسلایدر جمع‌وجور بمانند.
========================================================================== */
/* اسلایدر باید از هر چیزی که زیرش می‌آید فاصله بگیرد — نه فقط
نوار جستجو. margin روی خود اسلایدر مطمئن‌تر از padding روی
عنصر بعدی است، چون همه‌جا کار می‌کند. */
.pshow,
.hero {
margin-block-end: var(--sp-8);
}
@media (max-width: 640px) {
.pshow,
.hero { margin-block-end: var(--sp-5); }
}
/* پشتیبانی گسترده‌تر: هر بخشی که پیش از نوار جستجو باشد */
.page-band-slim {
margin-block-start: 0;
}
body:has(.pshow) .page-band-slim,
body:has(.hero) .page-band-slim {
padding-block-start: var(--sp-8);
}
/* این یکی هیچ سلکتور سالمی همراهش نیست، پس مشکلی ندارد */
@media (max-width: 640px) {
/* سلکتورهای همسایه، مستقل از پشتیبانی `:has()` */
.pshow + .page-band-slim,
.hero + .page-band-slim {
padding-block-start: var(--sp-5);
}
/* و نسخهٔ `:has()` جدا — تا اگر افتاد، بالایی سالم بماند */
body:has(.pshow) .page-band-slim,
body:has(.hero) .page-band-slim {
padding-block-start: var(--sp-5);
}
}
/* ==========================================================================
۴۱. کارت ورود شفاف
--------------------------------------------------------------------------
وقتی صفحهٔ ورود جلوهٔ پس‌زمینه دارد، کارت مات آن را کامل می‌پوشاند.
شیشه‌ای‌کردنش اجازه می‌دهد جلوه از پشتش دیده شود.
========================================================================== */
.auth-card {
background: var(--glass-bg-strong);
border: 1px solid var(--glass-border);
box-shadow: var(--sh-lg);
}
@supports (backdrop-filter: blur(1px)) {
.auth-card {
background: var(--glass-bg);
-webkit-backdrop-filter: blur(var(--glass-blur-strong)) saturate(170%);
backdrop-filter: blur(var(--glass-blur-strong)) saturate(170%);
}
}
/* فیلدهای داخل کارت شیشه‌ای باید مات بمانند تا متن خوانا باشد */
.auth-card input,
.auth-card select,
.auth-card textarea {
background: var(--surface);
}
/* ==========================================================================
۴۲. فاصلهٔ نوار جستجو از اسلایدر
--------------------------------------------------------------------------
در صفحاتی که اسلایدشو دارند، نوار جستجو به آن می‌چسبید.
========================================================================== */
/* اسلایدر باید از هر چیزی که زیرش می‌آید فاصله بگیرد — نه فقط
نوار جستجو. margin روی خود اسلایدر مطمئن‌تر از padding روی
عنصر بعدی است، چون همه‌جا کار می‌کند. */
.pshow,
.hero {
margin-block-end: var(--sp-8);
}
@media (max-width: 640px) {
.pshow,
.hero { margin-block-end: var(--sp-5); }
}
/* اگر اسلایدر نیست، فاصلهٔ کمتر کافی است */
.page-band-slim {
padding-block: var(--sp-5) var(--sp-4);
}
/* ==========================================================================
۴۱. کارت ورود شیشه‌ای
--------------------------------------------------------------------------
وقتی جلوهٔ پس‌زمینه فعال است، کارت مات آن را کاملاً می‌پوشاند.
شفافیت ملایم اجازه می‌دهد جلوه از پشتش دیده شود.
========================================================================== */
.auth-card {
background: var(--glass-bg-strong);
border: 1px solid var(--glass-border);
border-radius: var(--r-xl);
padding: var(--sp-6);
box-shadow: var(--sh-lg);
}
@supports (backdrop-filter: blur(1px)) {
.auth-card {
background: var(--glass-bg);
-webkit-backdrop-filter: blur(var(--glass-blur-strong)) saturate(160%);
backdrop-filter: blur(var(--glass-blur-strong)) saturate(160%);
}
}
/* فیلدهای داخل کارت باید کدرتر بمانند تا خوانا باشند */
.auth-card input,
.auth-card select,
.auth-card textarea {
background: var(--surface);
}
/* ==========================================================================
۴۲. فاصلهٔ نوار جستجو از اسلایدر
--------------------------------------------------------------------------
وقتی صفحه اسلایدر دارد، نوار جستجو بی‌فاصله زیرش می‌چسبید.
========================================================================== */
/* اسلایدر باید از هر چیزی که زیرش می‌آید فاصله بگیرد — نه فقط
نوار جستجو. margin روی خود اسلایدر مطمئن‌تر از padding روی
عنصر بعدی است، چون همه‌جا کار می‌کند. */
.pshow,
.hero {
margin-block-end: var(--sp-8);
}
@media (max-width: 640px) {
.pshow,
.hero { margin-block-end: var(--sp-5); }
}
/* اگر اسلایدر نباشد، فاصلهٔ عادی کافی است */
.page-band-slim { padding-block: var(--sp-5) var(--sp-4); }
/* ==========================================================================
۴۳. هم‌ارتفاعی فیلدهای فرم
--------------------------------------------------------------------------
باگ: بعضی فیلدها ۴۵ و بعضی ۵۱ پیکسل بودند، چون padding و
line-height از منابع مختلف می‌آمد. نتیجه: ردیف‌های کنار هم
ناهم‌تراز دیده می‌شدند.
رفع: ارتفاع صریح و یکسان برای همهٔ ورودی‌های تک‌خطی.
========================================================================== */
/* `.df-time` استثناست — ارتفاعش را ظرفِ خودش (.df-wrap) تعیین می‌کند */
.field input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not(.df-time),
.field select,
.input,
.form-grid input:not([type="checkbox"]):not([type="radio"]):not(.df-time),
.form-grid select {
height: 48px;
min-height: 48px;
padding-block: 0;
line-height: normal;
box-sizing: border-box;
}
/* فیلد چندخطی ارتفاع خودش را دارد */
.field textarea {
min-height: 110px;
padding-block: var(--sp-3);
line-height: var(--lh-normal);
}
/* ردیف‌های کنار هم: بالای فیلدها هم‌تراز بماند حتی اگر برچسب دو
خطی باشد */
.form-grid {
align-items: start;
}
.field {
display: flex;
flex-direction: column;
gap: var(--sp-2);
min-width: 0;
}
/* برچسب دوخطی نباید ردیف را جابه‌جا کند */
.field > span,
.field > label {
min-height: 1.4em;
display: block;
}
/* راهنمای زیر فیلد فضای ثابت نگیرد */
.field small {
margin-top: var(--sp-1);
}
/* گروه فیلدها با انتخابگر تاریخ */
.field .datetime,
.field .input-group {
display: flex;
align-items: center;
gap: var(--sp-2);
}
/* ==========================================================================
۴۴. کنترل‌های سربرگ
--------------------------------------------------------------------------
انتخاب ارز و فیلد جستجو ارتفاع ۲۳ تا ۲۶ پیکسل داشتند — زیر حد
راحت لمس (۳۶ پیکسل) و در موبایل سخت قابل زدن.
========================================================================== */
.currency-form select,
.topbar select,
.lang-pick select {
height: 36px;
min-height: 36px;
padding-inline: var(--sp-3) var(--sp-6);
border-radius: var(--r-sm);
font-size: var(--fs-sm);
}
.search input,
.search-box input,
form.search input[type="search"],
form.search input[type="text"] {
height: 44px;
min-height: 44px;
padding-inline: var(--sp-4);
box-sizing: border-box;
}
/* دکمهٔ جستجو هم‌ارتفاع فیلد */
.search button,
.search .btn {
height: 44px;
min-height: 44px;
}
@media (max-width: 640px) {
.search input,
.search button { height: 42px; min-height: 42px; }
}
/* ==========================================================================
۴۵. حداقل ارتفاع همهٔ کنترل‌ها
--------------------------------------------------------------------------
هر عنصر تعاملی باید دست‌کم ۳۶ پیکسل باشد تا با انگشت قابل زدن
بماند. این قاعدهٔ فراگیر جلوی جا افتادن موارد تازه را می‌گیرد.
========================================================================== */
select:not([multiple]):not([size]),
input[type="search"],
input[type="text"]:not(.inline-edit),
input[type="number"],
input[type="tel"],
input[type="email"],
input[type="password"],
input[type="url"],
input[type="date"],
input[type="time"] {
min-height: 38px;
box-sizing: border-box;
}
/* استثنا: فیلدهای داخل جدول که باید جمع‌وجور بمانند */
table td input,
table td select,
.compact input,
.compact select {
min-height: 32px;
}
/* موبایل: منو افقی و قابل کشیدن، نه ستون بلند */
@media (max-width: 899px) {
.profile-nav {
display: flex;
gap: var(--sp-2);
overflow-x: auto;
overscroll-behavior-x: contain;
scroll-snap-type: x proximity;
padding-bottom: var(--sp-2);
scrollbar-width: none;
}
.profile-nav::-webkit-scrollbar { display: none; }
.profile-nav a {
flex: none;
scroll-snap-align: start;
white-space: nowrap;
padding-inline: var(--sp-4);
}
/* نوار کنار آیتم فعال در حالت افقی معنا ندارد */
.profile-nav a.on::before,
.profile-nav a[aria-current="page"]::before { display: none; }
.profile-nav a:hover { padding-inline-start: var(--sp-4); }
}
/* ==========================================================================
۴۷. نوار فیلتر صفحات مدیریت
--------------------------------------------------------------------------
باگ: دکمه‌های «اعمال» و «پاک‌کردن» ارتفاع ۷۳ پیکسل می‌گرفتند در
حالی که فیلدها ۴۸ بودند — چون `.fin-form-actions` تراز عمودی
نداشت و `align-items: normal` دکمه را تا ارتفاع ستون می‌کشید.
به‌علاوه عرضشان با متن تغییر می‌کرد و ناهماهنگ دیده می‌شدند.
========================================================================== */
.fin-form-actions {
display: flex;
align-items: flex-end; /* هم‌تراز با کف فیلدها */
gap: var(--sp-2);
/* برچسب ندارد، پس باید هم‌ارتفاع بقیه شروع شود */
align-self: end;
flex-wrap: wrap;
}
.fin-form-actions .btn,
.fin-form-actions button,
.fin-form-actions a.btn {
height: 48px;
min-height: 48px;
padding-inline: var(--sp-5);
/* عرض کمینه تا دکمه‌های کوتاه هم جا داشته باشند */
min-width: 88px;
display: inline-flex;
align-items: center;
justify-content: center;
white-space: nowrap;
font-size: var(--fs-sm);
border-radius: var(--r-md);
box-sizing: border-box;
}
/* فیلدهای همین فرم هم دقیقاً ۴۸ باشند */
.fin-form input:not([type="checkbox"]):not([type="radio"]),
.fin-form select {
height: 48px;
min-height: 48px;
box-sizing: border-box;
}
@media (max-width: 640px) {
.fin-form-actions {
/* در موبایل تمام‌عرض تا راحت زده شوند */
width: 100%;
}
.fin-form-actions .btn,
.fin-form-actions button,
.fin-form-actions a.btn {
flex: 1;
height: 46px;
min-height: 46px;
}
}
/* ==========================================================================
۴۸. چیدمان جدول‌های گزارشی
--------------------------------------------------------------------------
باگ: ستون‌ها با محتوای متفاوت عرض‌های ناهماهنگ می‌گرفتند و در
راست‌چین، عدد و متن روی هم می‌افتادند.
`table-layout: fixed` عرض ستون‌ها را از سربرگ می‌گیرد، پس محتوای
بلند دیگر بقیه را جابه‌جا نمی‌کند.
========================================================================== */
.rep-table {
table-layout: auto;
width: 100%;
border-collapse: collapse;
}
/* هر سلول محتوایش را در خودش نگه دارد */
.rep-table th,
.rep-table td {
vertical-align: middle;
text-align: start;
overflow-wrap: anywhere;
}
/* ستون عددی: راست‌چین منطقی و بدون شکست */
/* باگ: قاعدهٔ عمومی `.num` در components.css مقدار
`display: inline-block` می‌دهد. روی `` این یعنی سلول از حالت
`table-cell` خارج می‌شود — ارتفاعش نصف بقیه می‌ماند و عدد بالای
سلول می‌افتد.
اینجا صریحاً به حالت سلول برمی‌گردانیم. */
.rep-table td.num,
.rep-table th.num {
display: table-cell;
text-align: start;
font-variant-numeric: tabular-nums;
white-space: nowrap;
vertical-align: middle;
}
/* ستون ابزار: دکمه‌ها کنار هم بمانند.
`width: 1%` ستون را چنان تنگ می‌کرد که دکمه‌ها عمودی می‌چیدند. */
.rep-table td:has(.vrow-tools) {
white-space: nowrap;
width: 120px;
}
.rep-table .vrow-tools {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
gap: var(--sp-1);
justify-content: flex-start;
}
/* ستون عددی عرض کافی بگیرد.
نکته: `th:has(+ th)` روی همهٔ سربرگ‌ها می‌افتاد و عرض ستون‌ها را
به هم می‌ریخت — فقط خودِ سلول عددی هدف است. */
.rep-table td.num { min-width: 80px; }
/* نام و شماره زیر هم، بدون شکستن سطر */
.rep-table td small.muted {
display: block;
margin-top: 2px;
font-size: .72rem;
color: var(--slate);
unicode-bidi: plaintext;
}
/* پاورقی جمع */
.rep-table tfoot td {
border-top: 2px solid var(--line-strong);
background: var(--bg-subtle);
font-weight: 700;
}
/* موبایل: جدول افقی قابل کشیدن با حداقل عرض */
@media (max-width: 768px) {
.rep-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.rep-table { min-width: 620px; }
}
/* ==========================================================================
۴۹. هم‌ترازی جدول‌های گزارشی
--------------------------------------------------------------------------
باگ: سربرگ‌ها راست‌چین بودند ولی محتوای سلول عددی چپ می‌افتاد —
عدد زیر عنوانش دیده نمی‌شد.
ریشه: قاعدهٔ عمومی `.num` در components.css مقدار
`direction: ltr` می‌دهد تا عدد در صفحهٔ راست‌چین درست خوانده شود.
روی ` | ` این باعث می‌شود کل محتوا به لبهٔ مخالف بچسبد.
راه‌حل: ستون‌های عددی **وسط‌چین** می‌شوند. هم مشکل جهت حل می‌شود
و هم جدول خواناتر است، چون چشم ستون به ستون پایین می‌رود.
========================================================================== */
.rep-table th.num,
.rep-table td.num,
.rep-table th:not(:first-child),
.rep-table td:not(:first-child) {
text-align: center;
}
/* ستون اول (نام) راست‌چین می‌ماند — متن است، نه عدد */
.rep-table th:first-child,
.rep-table td:first-child {
text-align: start;
}
/* عدد داخل سلول وسط‌چین باید جهت خودش را داشته باشد ولی جای
خودش را ترک نکند */
.rep-table td.num {
direction: ltr;
unicode-bidi: isolate;
}
/* شمارهٔ زیر نام — چپ‌به‌راست ولی هم‌راستا با نام بالایش.
`unicode-bidi: plaintext` جهت را از خودِ متن می‌گیرد و آن را به
لبهٔ مخالف پرت نمی‌کند. */
.rep-table td:first-child small {
display: block;
margin-top: 2px;
unicode-bidi: plaintext;
text-align: start;
font-size: .72rem;
color: var(--slate);
line-height: 1.5;
}
/* پاورقی جمع — هم‌راستا با ستون‌های بالا */
.rep-table tfoot td { text-align: center; }
.rep-table tfoot td:first-child { text-align: start; }
/* سربرگ کمی متمایزتر تا مرز ستون‌ها دیده شود */
.rep-table thead th {
position: relative;
font-weight: 800;
letter-spacing: -.01em;
}
.rep-table thead th + th::before {
content: "";
position: absolute;
inset-block: 25%;
inset-inline-end: 0;
width: 1px;
background: var(--line);
}
/* سطرها با فاصلهٔ نفس‌گیرتر */
.rep-table td { padding-block: 13px; }
/* ستون ابزار وسط‌چین نشود — دکمه‌ها باید از لبه شروع شوند */
.rep-table td:has(.vrow-tools) { text-align: start; }
/* ==========================================================================
اصلاحات ظاهری (فهرست ایرادهای ۱۴۰۵/۰۷)
========================================================================== */
/* #1 — عنوانِ بخشی که پس از یک گروه فیلد می‌آید (مثل «اطلاعات هویتی» در
ویرایش پروفایل) فاصلهٔ بالا لازم دارد؛ `:first-of-type` آن را صفر می‌کرد. */
.form-grid + .pform-h,
.form-grid ~ .pform-h { margin-top: 26px; }
/* #8 — هاور روی گزینهٔ انتخاب‌شدهٔ مدل، رنگ متن را هم‌رنگ زمینه می‌کرد. */
.vp-opt.is-on:hover:not(:disabled) {
color: #fff;
border-color: transparent;
}
/* #14 — ستون نام کالا در جزئیات سفارش تأمین‌کننده حرف‌به‌حرف می‌شکست. */
.od-grid > .od-panel:first-child { grid-column: 1 / -1; }
.od-panel .rep-table td:first-child { min-width: 180px; overflow-wrap: normal; }
/* #7 — پیشوند «از» برای کالای چندمدلی روی کارت */
.pprice .pfrom { font-size: .72em; font-weight: 600; opacity: .75; }
/* #45 — متن دکمهٔ بازهٔ فعال در گزارش‌ها هم‌رنگ زمینهٔ سبز بود
(قاعدهٔ رنگ لینک‌های پنل بر `.rep-chip.on` غلبه می‌کرد). */
.rep-range .rep-chip.on,
.rep-range .rep-chip.on:hover { color: var(--on-green, #fff) !important; }
/* #51 — در دسکتاپ تب آخر اعلان‌ها بیرون از کادر بریده می‌شد؛ جا هست،
پس تب‌ها به سطر بعد می‌روند. موبایل همان اسکرول افقی می‌ماند. */
@media (min-width: 641px) {
.nt-tabs { flex-wrap: wrap; overflow-x: visible; }
}
/* #55 — برچسب تخفیف تصویر/قیمت وقتی مدل انتخابی تخفیف ندارد */
.pd-main .off[hidden],
.pd-buy-price [hidden] { display: none !important; }
/* #73 — واحد قیمت کارت‌های ویترین (پیشنهادهای شگفت‌انگیز) */
.hs-price .hs-unit { font-size: .72em; font-weight: 600; opacity: .75; }
/* #60 — واحد پول در کاشی‌های «امور مالی من» */
.fin-unit { font-size: .7em; font-weight: 600; opacity: .7; margin-inline-start: 2px; }
/* #66 — نشانی داخل پیام گفتگو در متن راست‌به‌چپ «/http://…» دیده می‌شد */
.msg-body a[href^="http"],
.msg-body a[href^="www"] { direction: ltr; unicode-bidi: isolate; }
/* #69 — نوار سبز خالیِ جمع سفارش دستی پیش از ورود قیمت */
.mo-total:empty { display: none; }
/* #75 — کادر جست‌وجوی نقشهٔ آدرس‌ها باریک بود و placeholder بریده می‌شد:
`.geo-box` دو تعریف دارد و تعریف دوم `display:flex` (ردیفی) است. */
.geo-box > .geo-search,
.geo-box > .geo-results,
.geo-box > .geo-map,
.geo-box > .geo-controls { flex: 1 1 100%; }
/* #76 — در ویرایش پست فید، برچسب «توضیحات (کپشن)» به تصویر رسانهٔ فعلی چسبیده بود */
.field:has(> .edit-media-list) { margin-bottom: 18px; }
.field:has(> .edit-media-list) + .post-create-form { margin-top: 6px; }
/* ==========================================================================
اصلاحات ظاهری — دور دوم (۱۴۰۵/۰۷/۱۴)
========================================================================== */
/* لایهٔ موج دکمه هرگز نباید کلیک یا نشانگر را بگیرد — حتی اگر قاعده‌ای
`position` دکمه را عوض کند و لایه از کادر دکمه بیرون بزند. */
.btn::before { pointer-events: none; }
/* ---------- ۱) ویرایش پروفایل: تمام‌عرض و بخش‌بندی‌شده ---------- */
form.form-card.pfe-form {
max-width: none; width: 100%;
padding: 0; background: none; border: 0; box-shadow: none;
display: grid; gap: 16px;
}
.pfe-sec {
/* theme.css به هر `section` پدینگ عمودی ۶۴ پیکسلی صفحه می‌دهد */
padding: 0;
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--r-lg, 16px);
box-shadow: var(--sh-xs);
overflow: hidden;
}
.pfe-h {
display: flex; align-items: center; gap: 12px;
padding: 14px 20px;
background: var(--bg-subtle);
border-bottom: 1px solid var(--line);
}
.pfe-h-ico {
display: grid; place-items: center; flex: none;
width: 38px; height: 38px; border-radius: 11px;
background: var(--surface); border: 1px solid var(--line);
font-size: 1.1rem;
}
.pfe-h b { display: block; font-size: .95rem; font-weight: 800; color: var(--ink); }
.pfe-h small { display: block; margin-top: 2px; font-size: .76rem; color: var(--slate); }
.pfe-body { padding: 20px; display: grid; gap: 18px; }
/* فاصله‌ها فقط با `gap` — حاشیه‌های پراکندهٔ قاعده‌های عمومی صفر شوند */
.pfe-form .pfe-body > *,
.pfe-form .pfe-grid > .field { margin: 0 !important; }
.pfe-grid {
display: grid; gap: 16px 18px;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.pfe-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pfe-grid > .field-full { grid-column: 1 / -1; }
.pfe-form .field { gap: 8px; }
.pfe-form .field > span { font-size: .82rem; font-weight: 700; color: var(--ink-soft, var(--ink)); }
.pfe-form .field input,
.pfe-form .field select { width: 100%; min-height: 46px; }
.pfe-form .field input[readonly] { opacity: .75; cursor: default; }
/* عکس: پیش‌نمایش کنار کادر بارگذاری */
.pfe-avatar {
display: flex; align-items: center; gap: 22px; flex-wrap: wrap;
padding-bottom: 18px; border-bottom: 1px dashed var(--line);
}
.pfe-avatar .avatar-preview { width: 96px; height: 96px; font-size: 2.2rem; }
.pfe-avatar-up { flex: 1 1 260px; min-width: 0; }
/* حقیقی / حقوقی */
.pfe-kind label { min-height: 48px; }
.pfe-form .pf-verify { margin: 0; }
.pfe-foot {
display: flex; justify-content: flex-end; gap: 10px;
padding: 14px 20px;
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--r-lg, 16px);
position: sticky; bottom: 12px; z-index: 5;
box-shadow: var(--sh-sm);
}
.pfe-foot .btn { margin: 0; min-width: 170px; justify-content: center; }
@media (max-width: 900px) {
.pfe-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
.pfe-grid, .pfe-grid-3 { grid-template-columns: 1fr; }
.pfe-body { padding: 16px 14px; }
.pfe-h { padding: 12px 14px; }
.pfe-avatar { gap: 14px; }
.pfe-foot { padding: 12px 14px; }
.pfe-foot .btn { width: 100%; }
}
/* ---------- ۲) پیش‌فاکتورهای مشتری: دکمه در سمت پایانی ----------
سمت «پایانی» یعنی چپ در راست‌به‌چپ و راست در چپ‌به‌راست؛ با
`margin-inline-start: auto` هر دو جهت خودکار درست می‌شود. */
.pfx-card > .btn {
display: flex; width: fit-content;
margin-inline-start: auto;
}
[dir="ltr"] .pfx-go { display: inline-block; transform: scaleX(-1); }
/* ---------- ۳) کارت کالا: دکمهٔ خرید در سمت پایانی ---------- */
.pcard .pactions { justify-content: flex-end; }
.pcard .pactions > form { display: flex; justify-content: flex-end; }
.pcard .pactions .pbtn-buy { flex: 0 0 auto; }
/* ==========================================================================
نمادها و مجوزهای فوتر (اینماد، ساماندهی، …) — از تنظیمات سایت
========================================================================== */
.trust-marks { flex-wrap: wrap; gap: 10px; }
.trust-badge {
display: flex; align-items: center; justify-content: center;
width: 84px; height: 96px; padding: 6px;
border-radius: 12px;
/* لوگوی نمادها برای زمینهٔ سفید طراحی شده‌اند — روی فوتر تیره هم */
background: #fff;
border: 1px solid rgba(255, 255, 255, .14);
box-shadow: 0 4px 14px rgba(0, 0, 0, .18);
transition: transform .18s ease, box-shadow .18s ease;
}
a.trust-badge:hover { box-shadow: 0 0 0 2px var(--green-btn, #00A859), 0 8px 20px rgba(0, 0, 0, .24); }
a.trust-badge:focus-visible { outline: 2px solid var(--green-text, #16C173); outline-offset: 3px; }
.trust-badge img {
max-width: 100%; max-height: 100%;
object-fit: contain; display: block;
}
@media (max-width: 600px) {
.trust-badge { width: 76px; height: 86px; }
}
|