/* ========================================================= آوینورا — سیستم طراحی (Design System) جهت‌ناپذیر (RTL/LTR agnostic) — فقط logical properties رنگ‌ها: مقادیر دقیق داده‌شده توسط ناظر (نه استخراج تخمینی) ========================================================= */ :root { /* --- تایپوگرافی --- */ --font-base: 'Vazirmatn', 'Tahoma', sans-serif; /* --- مقیاس فاصله‌گذاری (spacing scale, 4px base) --- */ --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.5rem; /* 24px */ --space-6: 2rem; /* 32px */ --space-7: 3rem; /* 48px */ --space-8: 4.5rem; /* 72px */ --space-9: 7rem; /* 112px — فاصله‌ی زیاد بخش نقاشی */ /* --- شعاع گوشه --- */ --radius-sm: 4px; --radius-md: 10px; --radius-lg: 20px; --radius-full: 999px; /* --- سایه --- */ --shadow-sm: 0 1px 3px rgba(20, 10, 15, 0.08); --shadow-md: 0 6px 20px rgba(20, 10, 15, 0.12); /* --- انتقال --- */ --transition-fast: 150ms ease; --transition-base: 250ms ease; /* ========================================================= پالت برند — مقادیر دقیق طبق دستور (بدون تغییر یا گرد کردن) ========================================================= */ --gold-deep: #8a6a3f; --gold-light: #c9a876; --burgundy-deep: #600030; --burgundy-bright: #a01040; --pink-accent: #d06080; --cream-bg: #f7efec; --pink-bg: #fde2d9; --accent-coral: #eaa998; --accent-mint: #b4cec5; --accent-lavender: #c3acc5; --charcoal: #1c1a18; /* --- خنثی‌ها (برای متن/حاشیه، مستقل از تم) --- */ --ink-900: #201820; --ink-700: #4A3D42; --ink-500: #7A6B70; --ink-300: #C9BCC0; --ink-100: #F3EEEE; --surface: #FFFFFF; --border-color: #E4D8D5; --danger: #C23B3B; --success: #3E8E5A; } /* ========================================================= ریست پایه — جهت‌ناپذیر ========================================================= */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; font-family: var(--font-base); color: var(--ink-900); background: var(--cream-bg); line-height: 1.6; -webkit-font-smoothing: antialiased; } /* dir از روی تنظیم می‌شود؛ هیچ استایلی اینجا وابسته به rtl/ltr نیست */ img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } /* فوکوس قابل مشاهده — الزام کیفیت پایه */ :focus-visible { outline: 2px solid var(--burgundy-bright); outline-offset: 2px; } /* حرکت کاهش‌یافته */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; } } /* ========================================================= تایپوگرافی ========================================================= */ h1, h2, h3, h4, h5, h6 { margin-block: 0 var(--space-3); font-weight: 700; line-height: 1.25; text-align: start; } h1 { font-size: clamp(2rem, 1.5rem + 2vw, 3.25rem); } h2 { font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.4rem); } h3 { font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.8rem); } h4 { font-size: 1.25rem; } h5 { font-size: 1.05rem; } h6 { font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.04em; } p { margin-block: 0 var(--space-3); text-align: start; } .text-body { font-size: 1rem; } .text-small { font-size: 0.85rem; color: var(--ink-500); } /* ========================================================= تم سطح‌ سکشن — data-theme="gallery" | "handmade" (یک سیستم رنگ، دو override؛ نه دو فایل جدا) ========================================================= */ [data-theme="gallery"] { --theme-bg: var(--charcoal); --theme-surface: #2b2723; --theme-ink: #F3EEEE; --theme-ink-muted: #C9BCC0; --theme-accent: var(--gold-light); --theme-accent-deep: var(--gold-deep); --theme-border: rgba(201, 168, 118, 0.25); background: var(--theme-bg); color: var(--theme-ink); padding-block: var(--space-9); } [data-theme="handmade"] { --theme-bg: var(--pink-bg); --theme-surface: var(--surface); --theme-ink: var(--ink-900); --theme-ink-muted: var(--ink-500); --theme-accent: var(--burgundy-bright); --theme-accent-deep: var(--burgundy-deep); --theme-border: rgba(160, 16, 64, 0.18); background: var(--theme-bg); color: var(--theme-ink); padding-block: var(--space-7); } /* ========================================================= دکمه‌ها — primary / secondary / ghost حالت‌ها: hover / focus / disabled ========================================================= */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); padding-block: var(--space-3); padding-inline: var(--space-5); border-radius: var(--radius-full); border: 1px solid transparent; font-family: var(--font-base); font-size: 0.95rem; font-weight: 600; cursor: pointer; transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast); } .btn:active { transform: translateY(1px); } .btn:disabled, .btn[aria-disabled="true"] { cursor: not-allowed; opacity: 0.5; transform: none; } /* پیش‌فرض بیرون از تم (روی زمینه‌ی cream عمومی) */ .btn-primary { background: var(--burgundy-bright); color: #fff; } .btn-primary:hover:not(:disabled) { background: var(--burgundy-deep); } .btn-primary:focus-visible { outline-color: var(--burgundy-deep); } .btn-secondary { background: transparent; border-color: var(--burgundy-bright); color: var(--burgundy-bright); } .btn-secondary:hover:not(:disabled) { background: var(--burgundy-bright); color: #fff; } .btn-ghost { background: transparent; color: var(--ink-700); } .btn-ghost:hover:not(:disabled) { background: var(--ink-100); } /* داخل تم gallery، دکمه‌ها رنگ طلایی می‌گیرند */ [data-theme="gallery"] .btn-primary { background: var(--theme-accent); color: var(--charcoal); } [data-theme="gallery"] .btn-primary:hover:not(:disabled) { background: var(--theme-accent-deep); color: #fff; } [data-theme="gallery"] .btn-secondary { border-color: var(--theme-accent); color: var(--theme-accent); } [data-theme="gallery"] .btn-secondary:hover:not(:disabled) { background: var(--theme-accent); color: var(--charcoal); } [data-theme="gallery"] .btn-ghost { color: var(--theme-ink-muted); } [data-theme="gallery"] .btn-ghost:hover:not(:disabled) { background: rgba(255,255,255,0.06); color: var(--theme-ink); } /* داخل تم handmade، دکمه‌ها رنگ زرشکی می‌گیرند (پیش‌فرض .btn-primary همین است) */ [data-theme="handmade"] .btn-ghost:hover:not(:disabled) { background: rgba(160, 16, 64, 0.08); } /* ========================================================= کارت محصول — تصویر + عنوان + قیمت + دکمه دو نسخه‌ی بصری از طریق data-theme روی والد کنترل می‌شود ========================================================= */ .product-card { display: flex; flex-direction: column; background: var(--theme-surface, var(--surface)); border: 1px solid var(--theme-border, var(--border-color)); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); transition: box-shadow var(--transition-base), transform var(--transition-base); } .product-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); } .product-card__media { aspect-ratio: 1 / 1; overflow: hidden; background: var(--ink-100); } .product-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--transition-base); } .product-card:hover .product-card__media img { transform: scale(1.04); } .product-card__body { padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); } .product-card__title { font-size: 1.05rem; font-weight: 600; color: var(--theme-ink, var(--ink-900)); text-align: start; } .product-card__price { font-size: 1rem; font-weight: 700; color: var(--theme-accent, var(--burgundy-bright)); text-align: start; } .product-card__footer { margin-block-start: var(--space-2); } /* ========================================================= نوار ناوبری — لوگو + منو + آیکون سبد ========================================================= */ .navbar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); padding-block: var(--space-3); padding-inline: var(--space-6); background: var(--surface); border-block-end: 1px solid var(--border-color); } .navbar__brand { display: flex; align-items: center; gap: var(--space-2); } .navbar__brand img { block-size: 40px; inline-size: auto; } .navbar__menu { display: flex; align-items: center; gap: var(--space-5); list-style: none; margin: 0; padding: 0; } .navbar__menu a { font-size: 0.95rem; font-weight: 500; color: var(--ink-700); transition: color var(--transition-fast); } .navbar__menu a:hover { color: var(--burgundy-bright); } .navbar__cart { position: relative; display: inline-flex; padding: var(--space-2); border-radius: var(--radius-full); transition: background var(--transition-fast); } .navbar__cart:hover { background: var(--ink-100); } .navbar__cart-count { position: absolute; inset-block-start: -2px; inset-inline-end: -2px; min-inline-size: 18px; block-size: 18px; border-radius: var(--radius-full); background: var(--burgundy-bright); color: #fff; font-size: 0.7rem; display: flex; align-items: center; justify-content: center; padding-inline: 4px; } /* گروه سمت راست navbar (لینک حساب کاربری + سبد خرید) — فاز ۷ */ .navbar__actions { display: flex; align-items: center; gap: var(--space-3); } .navbar__account { display: inline-flex; align-items: center; gap: var(--space-2); padding-block: var(--space-2); padding-inline: var(--space-3); border-radius: var(--radius-full); font-size: 0.9rem; font-weight: 500; color: var(--ink-700); transition: background var(--transition-fast), color var(--transition-fast); max-inline-size: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .navbar__account:hover { background: var(--ink-100); color: var(--burgundy-bright); } /* ========================================================= فیلد فرم — ورودی + لیبل + پیام خطا ========================================================= */ .field { display: flex; flex-direction: column; gap: var(--space-2); margin-block-end: var(--space-4); } .field__label { font-size: 0.9rem; font-weight: 600; color: var(--ink-700); text-align: start; } .field__input { font-family: var(--font-base); font-size: 1rem; padding-block: var(--space-3); padding-inline: var(--space-4); border: 1px solid var(--border-color); border-radius: var(--radius-md); background: var(--surface); color: var(--ink-900); text-align: start; transition: border-color var(--transition-fast), box-shadow var(--transition-fast); } .field__input::placeholder { color: var(--ink-300); } .field__input:focus { border-color: var(--burgundy-bright); box-shadow: 0 0 0 3px rgba(160, 16, 64, 0.12); outline: none; } .field--error .field__input { border-color: var(--danger); } .field--error .field__input:focus { box-shadow: 0 0 0 3px rgba(194, 59, 59, 0.12); } .field__error { font-size: 0.82rem; color: var(--danger); text-align: start; } /* ========================================================= بج / برچسب — «تمام‌شده»، «جدید»، «تخفیف» ========================================================= */ .badge { display: inline-flex; align-items: center; padding-block: var(--space-1); padding-inline: var(--space-3); border-radius: var(--radius-full); font-size: 0.75rem; font-weight: 600; line-height: 1; } .badge--new { background: var(--accent-mint); color: #1E4A3E; } .badge--sale { background: var(--accent-coral); color: #5C1F16; } .badge--soldout { background: var(--ink-300); color: var(--ink-700); } .badge--draft { background: var(--ink-300); color: var(--ink-700); } .badge--published { background: var(--accent-mint); color: #1E4A3E; } .badge--gold { background: var(--gold-light); color: var(--charcoal); } .badge--lavender{ background: var(--accent-lavender); color: #3A2B45; } .badge--pink { background: var(--pink-accent); color: #4a0022; } /* فاز ۱۰: بج وضعیت سفارش — پنج مقدار طبق CHECK جدول orders */ .badge--pending { background: var(--ink-300); color: var(--ink-700); } .badge--paid { background: var(--accent-mint); color: #1E4A3E; } .badge--shipped { background: var(--accent-lavender); color: #3A2B45; } .badge--delivered { background: var(--gold-light); color: var(--charcoal); } .badge--cancelled { background: var(--accent-coral); color: #5C1F16; } /* ========================================================= فاز ۱۰: لیست سفارش‌ها (پنل ادمین + «سفارش‌های من») و فاکتور ========================================================= */ .order-row { display: grid; grid-template-columns: 1fr auto auto auto; align-items: center; gap: var(--space-4); padding: var(--space-4); border: 1px solid var(--border-color); border-radius: var(--radius-md); background: var(--surface); } .order-row__id { font-size: 0.85rem; color: var(--ink-500); font-family: monospace; } .order-row__recipient { font-weight: 600; margin: 0; } .order-row__date { font-size: 0.85rem; color: var(--ink-500); } .order-row__total { font-weight: 700; white-space: nowrap; } @media (max-width: 640px) { .order-row { grid-template-columns: 1fr; justify-items: start; } } .order-status-select { padding-block: var(--space-2); padding-inline: var(--space-3); border-radius: var(--radius-sm); border: 1px solid var(--border-color); font-family: var(--font-base); font-size: 0.85rem; background: var(--surface); color: var(--ink-900); } .order-detail { border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: var(--space-4); background: var(--cream-bg); } .order-items-table { width: 100%; border-collapse: collapse; } .order-items-table th, .order-items-table td { text-align: start; padding-block: var(--space-2); padding-inline: var(--space-2); border-block-end: 1px solid var(--border-color); font-size: 0.9rem; } .order-items-table th { color: var(--ink-500); font-weight: 600; font-size: 0.8rem; } .order-items-table tfoot td { border-block-end: none; font-weight: 700; padding-block-start: var(--space-3); } .invoice-page { background: var(--surface); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: var(--space-6); max-width: 720px; margin-inline: auto; } .invoice-header { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-4); margin-block-end: var(--space-6); flex-wrap: wrap; } .invoice-header img { block-size: 44px; inline-size: auto; } .invoice-meta { color: var(--ink-700); font-size: 0.9rem; } .invoice-meta p { margin: 2px 0; } .invoice-address { margin-block-end: var(--space-5); color: var(--ink-700); } .invoice-actions { margin-block-start: var(--space-5); } @media print { .navbar, .invoice-actions, .footer { display: none !important; } body { background: var(--surface); } .invoice-page { border: none; padding: 0; max-width: 100%; } } /* ========================================================= ابزارهای چیدمان کوچک (فقط منطقی، بدون left/right) ========================================================= */ .container { inline-size: min(100% - var(--space-6), 1200px); margin-inline: auto; } .stack { display: flex; flex-direction: column; gap: var(--space-4); } .row { display: flex; align-items: center; gap: var(--space-4); } .grid-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--space-5); } /* ========================================================= — فاز ۲ — افزوده‌های حداقلی صفحه اصلی: فقط چیزی که در سیستم فاز ۱ موجود نبود (هیرو و فوتر). کارت/دکمه/بج/ناوبری/گرید همان کامپوننت‌های فاز ۱ هستند، بدون بازتعریف. ========================================================= */ /* هیرو: از .container + .stack موجود استفاده می‌شود؛ این فقط عرض متن توضیح را محدود می‌کند تا در صفحه‌های عریض کشیده نشود */ .hero__lead { max-inline-size: 640px; } /* فوتر ساده */ .footer { padding-block: var(--space-6); border-block-start: 1px solid var(--border-color); } .footer__links { display: flex; align-items: center; gap: var(--space-5); list-style: none; margin: 0; padding: 0; } .footer__links a { font-size: 0.85rem; color: var(--ink-500); transition: color var(--transition-fast); } .footer__links a:hover { color: var(--burgundy-bright); } @media (max-width: 640px) { .footer .row { flex-direction: column; align-items: flex-start; gap: var(--space-4); } } /* ========================================================= */ /* — فاز ۳ — کاتالوگ محصول: نوار جستجو، چیپ‌های دسته‌بندی */ /* ========================================================= */ .catalog__toolbar { display: flex; flex-direction: column; gap: var(--space-3); } .catalog__search { inline-size: 100%; max-inline-size: 480px; padding-block: var(--space-3); padding-inline: var(--space-4); border: 1px solid var(--border-color); border-radius: var(--radius-md); font-family: var(--font-base); font-size: 0.95rem; color: var(--ink-900); background: var(--surface); transition: border-color var(--transition-fast); } .catalog__search:focus { outline: none; border-color: var(--burgundy-bright); } .catalog__chips { display: flex; flex-wrap: wrap; gap: var(--space-2); } .chip { padding-block: var(--space-2); padding-inline: var(--space-4); border: 1px solid var(--border-color); border-radius: var(--radius-full); background: var(--surface); color: var(--ink-700); font-family: var(--font-base); font-size: 0.85rem; cursor: pointer; transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast); } .chip:hover { border-color: var(--burgundy-bright); } .chip--active { background: var(--burgundy-bright); border-color: var(--burgundy-bright); color: var(--surface); } .catalog__empty { color: var(--ink-500); padding-block: var(--space-6); } /* ========================================================= */ /* — فاز ۴ — صفحه محصول: breadcrumb، گالری، اطلاعات، toast */ /* ========================================================= */ .breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); font-size: 0.85rem; color: var(--ink-500); } .breadcrumb a { color: var(--ink-500); transition: color var(--transition-fast); } .breadcrumb a:hover { color: var(--burgundy-bright); } .breadcrumb__current { color: var(--ink-900); font-weight: 600; } .breadcrumb__sep { color: var(--ink-300); } .product-layout { display: grid; grid-template-columns: 1fr; gap: var(--space-6); } @media (min-width: 800px) { .product-layout { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: start; } } .product-gallery__main { aspect-ratio: 1 / 1; border-radius: var(--radius-lg); overflow: hidden; background: var(--ink-100); border: 1px solid var(--border-color); } .product-gallery__main img, .product-gallery__main video { width: 100%; height: 100%; object-fit: cover; } .product-gallery__thumbs { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-block-start: var(--space-3); } .product-gallery__thumb { inline-size: 72px; block-size: 72px; border-radius: var(--radius-md); overflow: hidden; border: 2px solid transparent; background: var(--ink-100); cursor: pointer; padding: 0; transition: border-color var(--transition-fast); } .product-gallery__thumb img, .product-gallery__thumb video { width: 100%; height: 100%; object-fit: cover; pointer-events: none; } .product-gallery__thumb--active, .product-gallery__thumb:hover { border-color: var(--burgundy-bright); } .product-info__title { margin-block-end: var(--space-2); } .product-info__price { font-size: 1.4rem; font-weight: 700; color: var(--burgundy-bright); } .product-info__description { color: var(--ink-700); } .product-info__variants { display: flex; flex-direction: column; gap: var(--space-2); } .product-info__variant-label { font-size: 0.9rem; font-weight: 600; color: var(--ink-700); } .product-info__variant-list { display: flex; flex-wrap: wrap; gap: var(--space-2); } .product-info__actions { margin-block-start: var(--space-2); } .toast { position: fixed; inset-block-end: var(--space-6); inset-inline: 0; margin-inline: auto; inline-size: fit-content; max-inline-size: min(90vw, 420px); padding-block: var(--space-3); padding-inline: var(--space-5); border-radius: var(--radius-full); background: var(--charcoal); color: #fff; font-size: 0.9rem; box-shadow: var(--shadow-md); opacity: 0; transform: translateY(8px); transition: opacity var(--transition-base), transform var(--transition-base); pointer-events: none; z-index: 100; } .toast--visible { opacity: 1; transform: translateY(0); } .product__not-found { color: var(--ink-500); padding-block: var(--space-6); } /* ========================================================= فاز ۵ — صفحه سبد خرید ========================================================= */ .cart-empty { align-items: flex-start; padding-block: var(--space-6); } .cart-lines { gap: var(--space-3); } .cart-line { display: grid; grid-template-columns: 72px 1fr auto auto auto; align-items: center; gap: var(--space-4); padding: var(--space-3); border: 1px solid var(--border-color); border-radius: var(--radius-md); background: var(--surface); } .cart-line--unavailable { grid-template-columns: 1fr auto; background: var(--ink-100); } .cart-line__media { inline-size: 72px; block-size: 72px; border-radius: var(--radius-sm); overflow: hidden; flex-shrink: 0; } .cart-line__media img { width: 100%; height: 100%; object-fit: cover; display: block; } .cart-line__body { display: flex; flex-direction: column; gap: 2px; min-inline-size: 0; } .cart-line__title { font-size: 1rem; font-weight: 600; margin: 0; } .cart-line__variant { font-size: 0.85rem; color: var(--ink-500); } .cart-line__price { font-size: 0.9rem; color: var(--ink-700); } .cart-line__note { font-size: 0.8rem; color: var(--burgundy-bright); margin: 0; } .cart-line__qty { display: flex; align-items: center; gap: var(--space-2); } .cart-line__qty-btn { inline-size: 28px; block-size: 28px; border-radius: var(--radius-full); border: 1px solid var(--border-color); background: var(--surface); font-size: 1rem; line-height: 1; cursor: pointer; transition: background var(--transition-fast); } .cart-line__qty-btn:hover { background: var(--ink-100); } .cart-line__qty-value { min-inline-size: 1.5em; text-align: center; font-weight: 600; } .cart-line__subtotal { font-weight: 700; color: var(--burgundy-bright); white-space: nowrap; } .cart-line__remove { background: none; border: none; color: var(--ink-500); cursor: pointer; font-size: 1rem; padding: var(--space-2); border-radius: var(--radius-full); transition: background var(--transition-fast), color var(--transition-fast); } .cart-line__remove:hover { background: var(--ink-100); color: var(--burgundy-bright); } .cart-summary { display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-2); padding-block-start: var(--space-4); border-block-start: 1px solid var(--border-color); } .cart-summary__total { display: flex; align-items: center; gap: var(--space-3); font-size: 1.1rem; font-weight: 700; } .cart-summary__amount { color: var(--burgundy-bright); font-size: 1.3rem; } .cart-summary__words { font-size: 0.85rem; color: var(--ink-500); margin: 0; } .cart-summary__checkout { margin-block-start: var(--space-2); } @media (max-width: 640px) { .cart-line { grid-template-columns: 56px 1fr; grid-template-areas: "media body" "qty qty" "subtotal remove"; } .cart-line__media { grid-area: media; inline-size: 56px; block-size: 56px; } .cart-line__body { grid-area: body; } .cart-line__qty { grid-area: qty; justify-content: flex-start; } .cart-line__subtotal { grid-area: subtotal; } .cart-line__remove { grid-area: remove; justify-self: end; } } /* ========================================================= فاز ۶ — چک‌اوت و تأیید سفارش ========================================================= */ /* پیام ماندگار (برخلاف toast محو‌شونده) — برای خطای موجودی و مشابه */ .alert { border-radius: var(--radius-md); padding-block: var(--space-4); padding-inline: var(--space-5); font-size: 0.92rem; line-height: 1.6; } .alert--error { background: rgba(194, 59, 59, 0.08); border: 1px solid var(--danger); color: var(--danger); } .alert--success { background: rgba(62, 142, 90, 0.08); border: 1px solid var(--success); color: var(--success); } .checkout-layout { display: grid; /* فاز ۱۱ب: ترتیب DOM عوض شد (خلاصه‌ی سفارش حالا اول می‌آید تا در موبایل هم زودتر دیده شود)، پس ستون اول اینجا هم خلاصه است — عمداً باریک‌تر (1fr) نگه داشته شده تا فرم (ستون دوم، 1.4fr) غالب بماند؛ فقط ترتیب ستون‌ها با فرم قبلی برعکس شده، نه چیدمان کلی */ grid-template-columns: 1fr 1.4fr; gap: var(--space-6); align-items: start; } @media (max-width: 800px) { .checkout-layout { grid-template-columns: 1fr; } } .checkout-section { background: var(--surface); border: 1px solid var(--border-color); border-radius: var(--radius-lg); padding: var(--space-5); } .checkout-section__title { font-size: 1.05rem; font-weight: 700; margin-block-end: var(--space-4); } .checkout-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); } @media (max-width: 480px) { .checkout-form__row { grid-template-columns: 1fr; } } .checkout-summary__line { display: flex; justify-content: space-between; gap: var(--space-3); padding-block: var(--space-2); border-block-end: 1px solid var(--border-color); font-size: 0.9rem; } .checkout-summary__line:last-of-type { border-block-end: none; } .checkout-summary__total { display: flex; justify-content: space-between; font-weight: 700; font-size: 1.1rem; padding-block-start: var(--space-4); margin-block-start: var(--space-2); border-block-start: 1px solid var(--border-color); } /* کارت‌های انتخاب روش پرداخت */ .payment-methods { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3); } @media (max-width: 480px) { .payment-methods { grid-template-columns: 1fr; } } .payment-method { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding-block: var(--space-3); padding-inline: var(--space-4); background: var(--surface); font-family: var(--font-base); font-size: 0.95rem; font-weight: 600; color: var(--ink-900); cursor: pointer; text-align: start; transition: border-color var(--transition-fast), box-shadow var(--transition-fast); } .payment-method:hover:not(:disabled) { border-color: var(--burgundy-bright); } .payment-method--active { border-color: var(--burgundy-bright); box-shadow: 0 0 0 3px rgba(160, 16, 64, 0.12); } .payment-method:disabled, .payment-method[aria-disabled="true"] { cursor: not-allowed; color: var(--ink-300); background: var(--ink-100); } /* صفحه‌ی تأیید سفارش */ .order-confirmation { max-inline-size: 480px; margin-inline: auto; text-align: center; padding-block: var(--space-8); } /* — فاز ۸ب — */ /* ========================================================= پنل ادمین — نوار بالای صفحه، لیست محصولات، فرم محصول، مودال ========================================================= */ /* نوار ادمین: ناوبری فروشگاه نیست — فقط لوگو/عنوان + خروج */ .admin-topbar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); padding-block: var(--space-3); padding-inline: var(--space-6); background: var(--surface); border-block-end: 1px solid var(--border-color); } .admin-topbar__brand { display: flex; align-items: center; gap: var(--space-3); } .admin-topbar__brand img { block-size: 36px; inline-size: auto; } .admin-topbar__title { font-weight: 700; font-size: 1.05rem; } .admin-page-header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; } /* لیست محصولات */ .admin-list { gap: var(--space-3); } .admin-row { display: grid; grid-template-columns: 56px 1fr auto auto auto; align-items: center; gap: var(--space-4); padding: var(--space-3); border: 1px solid var(--border-color); border-radius: var(--radius-md); background: var(--surface); } .admin-row__media { inline-size: 56px; block-size: 56px; border-radius: var(--radius-sm); overflow: hidden; flex-shrink: 0; background: var(--ink-100); } .admin-row__media img { width: 100%; height: 100%; object-fit: cover; display: block; } .admin-row__body { display: flex; flex-direction: column; gap: 2px; min-inline-size: 0; } .admin-row__title { font-size: 1rem; font-weight: 600; margin: 0; } .admin-row__price { font-size: 0.9rem; color: var(--ink-700); } .admin-row__stock { font-size: 0.85rem; font-weight: 600; white-space: nowrap; } .admin-row__stock--zero { color: var(--danger); } .admin-row__stock--low { color: var(--gold-deep); } .admin-empty { align-items: flex-start; padding-block: var(--space-6); } @media (max-width: 640px) { .admin-row { grid-template-columns: 44px 1fr; grid-template-areas: "media body" "stock stock" "edit delete"; row-gap: var(--space-2); } .admin-row__media { grid-area: media; inline-size: 44px; block-size: 44px; } .admin-row__body { grid-area: body; } .admin-row__stock { grid-area: stock; } } /* فرم واحد ساخت/ویرایش محصول — از checkout-section برای گروه‌بندی استفاده می‌شود */ .variant-row { display: grid; grid-template-columns: 2fr 1fr 1fr auto; gap: var(--space-3); align-items: end; } @media (max-width: 640px) { .variant-row { grid-template-columns: 1fr 1fr; } } .variant-row .field { margin-block-end: 0; } .variant-row__remove { background: none; border: 1px solid var(--border-color); color: var(--ink-500); cursor: pointer; border-radius: var(--radius-md); padding-block: var(--space-3); padding-inline: var(--space-3); transition: background var(--transition-fast), color var(--transition-fast); } .variant-row__remove:hover { background: var(--ink-100); color: var(--danger); } .media-grid { display: flex; flex-wrap: wrap; gap: var(--space-3); } .media-thumb { position: relative; inline-size: 96px; block-size: 96px; border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--border-color); background: var(--ink-100); flex-shrink: 0; } .media-thumb img, .media-thumb video { width: 100%; height: 100%; object-fit: cover; display: block; } .media-thumb--uploading { opacity: 0.55; } .media-thumb--failed { border-color: var(--danger); } .media-thumb__status { position: absolute; inset-inline: 0; inset-block-end: 0; padding-block: 2px; padding-inline: var(--space-2); font-size: 0.68rem; text-align: center; color: #fff; background: rgba(28, 26, 24, 0.65); } .media-thumb__remove { position: absolute; inset-block-start: 2px; inset-inline-end: 2px; inline-size: 22px; block-size: 22px; border-radius: var(--radius-full); border: none; background: rgba(28, 26, 24, 0.65); color: #fff; font-size: 0.85rem; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; } .media-thumb__remove:hover { background: var(--danger); } .media-upload__input { margin-block-end: var(--space-2); } /* مودال پایه (تأیید حذف و مشابه) — فقط logical properties، هم‌الگو با toast/badge */ .modal-overlay { position: fixed; inset: 0; background: rgba(28, 26, 24, 0.45); display: flex; align-items: center; justify-content: center; padding: var(--space-5); z-index: 200; } .modal { background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); padding: var(--space-5); inline-size: min(100%, 420px); } .modal__title { font-size: 1.05rem; font-weight: 700; margin-block-end: var(--space-3); } .modal__body { color: var(--ink-700); margin-block-end: var(--space-5); } .modal__actions { display: flex; justify-content: flex-end; gap: var(--space-3); } .order-confirmation__icon { font-size: 2.5rem; } .order-confirmation__title { font-size: 1.3rem; font-weight: 700; margin-block: var(--space-3); } .order-confirmation__order-id { color: var(--ink-500); font-size: 0.9rem; margin-block-end: var(--space-5); } /* ========================================================= — فاز ۱۱ب — فوتر استاندارد (لینک حقوقی + تماس + جای‌گیر نماد اعتماد)، نشانگر پیشرفت چک‌اوت، برجسته‌سازی خلاصه‌ی سفارش، نشان اعتماد کنار دکمه‌ی پرداخت، و صفحات حقوقی استاتیک. ========================================================= */ /* ردیف دوم فوتر: اطلاعات تماس + جای‌گیر نماد اعتماد، جدا از ردیف برند/لینک‌ها */ .footer__meta { margin-block-start: var(--space-3); padding-block-start: var(--space-3); border-block-start: 1px solid var(--border-color); } .footer__contact { color: var(--ink-500); } /* جای‌گیر نماد اعتماد enamad.ir — فعلاً خالی، فقط فضای رزرو‌شده تا بعد از تأیید enamad.ir جایگزین اسکریپت واقعی شود (بدون CLS محسوس) */ .enamad-badge-placeholder { min-inline-size: 60px; min-block-size: 60px; } /* نشانگر پیشرفت چک‌اوت — سه مرحله، غیرقابل‌کلیک (فقط نمایشی) */ .checkout-steps { display: flex; align-items: center; gap: var(--space-2); list-style: none; margin: 0 0 var(--space-2) 0; padding: 0; flex-wrap: wrap; } .checkout-steps__item { display: flex; align-items: center; gap: var(--space-2); font-size: 0.85rem; font-weight: 600; color: var(--ink-300); } .checkout-steps__item:not(:last-child)::after { content: ""; inline-size: 28px; block-size: 1px; background: var(--border-color); margin-inline: var(--space-2); } .checkout-steps__index { display: inline-flex; align-items: center; justify-content: center; inline-size: 22px; block-size: 22px; border-radius: var(--radius-full); background: var(--ink-100); color: var(--ink-500); font-size: 0.75rem; flex-shrink: 0; } .checkout-steps__item--done { color: var(--ink-500); } .checkout-steps__item--done .checkout-steps__index { background: var(--success); color: #fff; } .checkout-steps__item--active { color: var(--burgundy-bright); } .checkout-steps__item--active .checkout-steps__index { background: var(--burgundy-bright); color: #fff; } .checkout-steps__item--upcoming { color: var(--ink-300); } /* خلاصه‌ی سفارش برجسته‌تر — کارت summary یک لبه‌ی رنگی اضافه می‌گیرد تا از سایر کارت‌های checkout-section متمایز باشد */ .checkout-section--summary { border-color: var(--burgundy-bright); box-shadow: var(--shadow-sm); } /* نشان اعتماد کنار دکمه‌ی پرداخت */ .checkout-trust { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; color: var(--ink-500); } .checkout-trust__lock { font-size: 1rem; } /* صفحات حقوقی استاتیک (terms/privacy/returns) — عرض متن محدود برای خوانایی */ .legal-content { max-inline-size: 760px; } .legal-content h2 { margin-block-start: var(--space-6); } .legal-content h2:first-of-type { margin-block-start: 0; } /* جعبه‌ی هشدار خنثی (نه خطا، نه موفقیت) — برای یادداشت‌های آگاهی‌بخش مثل «این متن پیش‌نویس است»، هم‌الگو با .alert موجود */ .alert--notice { background: var(--ink-100); border: 1px solid var(--ink-300); color: var(--ink-700); }