/* ============================================================ درکاپی — Shop homepage redesign Design system + page styles. RTL, Peyda, no external deps. ============================================================ */ /* ---------- Fonts (reuse existing Peyda files) ---------- */ @font-face { font-family: 'Peyda'; src: url('/theme/font/PeydaWeb-Light/PeydaWeb-Light-1.woff') format('woff'); font-weight: 300; font-style: normal; font-display: block; } @font-face { font-family: 'Peyda'; src: url('/theme/font/Peyda-Medium/peyda_medium.woff2') format('woff2'), url('/theme/font/Peyda-Medium/peyda_medium.woff') format('woff'); font-weight: 400 500; font-style: normal; font-display: block; } @font-face { font-family: 'Peyda'; src: url('/theme/font/PeydaWeb-Bold/PeydaWeb-Bold-1.woff2') format('woff2'), url('/theme/font/PeydaWeb-Bold/PeydaWeb-Bold-1.woff') format('woff'); font-weight: 600 800; font-style: normal; font-display: block; } /* ---------- Design tokens ---------- */ :root { /* Color */ --bg: #F6F7F8; --surface: #FFFFFF; --primary: #F4720B; --primary-hover: #DD6303; --primary-tint: #FFF3E8; --secondary: #2E5252; /* brand dark green — emphasis only */ --secondary-deep: #24403F; --secondary-tint: #EAF1F1; --text-strong: #111827; --text: #374151; --text-muted: #6B7280; --border: #E7EAEC; --success: #16A34A; --success-tint: #E8F7EE; --warning: #F59E0B; --error: #DC2626; --star: #F5A623; /* Scrollbar thumb (neutral, matches the theme's surface contrast). */ --scroll-thumb: rgba(17, 24, 39, .22); --scroll-thumb-hover: rgba(17, 24, 39, .38); /* Semantic tokens — the theme-swappable layer. Light values equal the literals they replaced, so the light theme is byte-for-byte unchanged; [data-theme="green"] below overrides them. */ --on-primary: #fff; /* text/icon on primary/accent/dark bands */ --surface-2: #F1F3F4; /* faint raised surface (skeleton shimmer) */ --surface-glass: rgba(255, 255, 255, .92); /* sticky header / floating btns */ --gradient-top: #FFFFFF; /* top of light section gradients (hero, page-head) */ --overlay: rgba(17, 24, 39, .55); /* modal scrim */ --error-tint: #FDECEC; /* destructive hover background */ --input-bg: var(--surface); /* text input background */ --ink: #111827; /* always-dark chrome (store btn, phone, tooltip) */ --on-ink: #FFFFFF; /* light detail carved out of --ink (QR holes) */ /* Spacing scale: 4 8 12 16 20 24 32 40 48 64 80 96 */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px; --s-20: 80px; --s-24: 96px; /* Type scale */ --fs-12: 0.75rem; --fs-14: 0.875rem; --fs-16: 1rem; --fs-18: 1.125rem; --fs-20: 1.25rem; --fs-24: 1.5rem; --fs-32: 2rem; --fs-40: 2.5rem; /* گام‌های میانی — در چند جا استفاده شده بودند ولی تعریف نشده بودند و بی‌صدا به فونتِ ارث‌رسیده می‌افتادند. */ --fs-13: 0.8125rem; --fs-15: 0.9375rem; /* Radius */ --r-8: 8px; --r-12: 12px; --r-16: 16px; --r-24: 24px; --r-full: 999px; /* Shadows */ --shadow-sm: 0 1px 2px rgba(17, 24, 39, .05), 0 1px 4px rgba(17, 24, 39, .04); --shadow-md: 0 4px 12px rgba(17, 24, 39, .07), 0 2px 4px rgba(17, 24, 39, .04); --shadow-lg: 0 16px 40px rgba(17, 24, 39, .12), 0 4px 12px rgba(17, 24, 39, .06); /* Motion */ --ease: cubic-bezier(.4, 0, .2, 1); --t-fast: 200ms var(--ease); --t-med: 300ms var(--ease); --header-h: 76px; } /* ============================================================ Green theme — admin-selectable second skin. data-theme sits on (server-rendered in the layout, so no FOUC) and lives on :root so it wins over prefers-color-scheme. Brand palette: --primary = #ffa600 (orange accent — CTAs, cart count, sale badges) --secondary = #193d3d (dark green — header/footer/dark bands/text) light green = #a7d396 (secondary buttons, chips, soft tints) white = main page + cards + inputs The interface is white-dominant (~55% white, ~30% light-green, ~12% dark-green, ~3% orange). Orange is reserved for buy-flow CTAs and attention-grabbing fills only. Every orange fill carries dark-green text (white-on-#ffa600 fails WCAG AA). Scoped component overrides for the green theme are appended at the bottom of this file. ============================================================ */ :root[data-theme="green"] { --bg: #ffffff; --surface: #ffffff; --surface-2: #eef6e8; --surface-glass: rgba(25, 61, 61, .94); /* dark-green header glass */ --gradient-top: #ffffff; --primary: #ffa600; /* orange accent */ --primary-hover: #e59400; --primary-tint: #eef6e8; /* light-green soft tint */ --secondary: #193d3d; /* dark green — chrome / dark bands / text */ --secondary-deep: #102626; --secondary-tint: #eef6e8; /* light-green tint for product media etc. */ --text-strong: #16302f; /* dark green-charcoal — headings, prices */ --text: #3a4a48; /* body text (AA on white) */ --text-muted: #5e716c; /* muted gray-green (AA on white) */ --border: #d8e6d2; /* soft green-gray hairline */ --success: #4ea36a; --success-tint: rgba(78, 163, 106, .14); --error: #d24a3f; --error-tint: rgba(210, 74, 63, .12); --overlay: rgba(8, 20, 20, .55); --input-bg: #ffffff; /* Scrollbar: dark-green thumb on white surface. */ --scroll-thumb: rgba(25, 61, 61, .26); --scroll-thumb-hover: rgba(25, 61, 61, .42); /* --ink / --on-ink stay dark-on-light: they are the always-dark chrome. */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, .18), 0 1px 4px rgba(0, 0, 0, .14); --shadow-md: 0 4px 12px rgba(0, 0, 0, .22), 0 2px 4px rgba(0, 0, 0, .16); --shadow-lg: 0 16px 40px rgba(0, 0, 0, .32), 0 4px 12px rgba(0, 0, 0, .2); } /* ---------- Reset / base ---------- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { scroll-behavior: smooth; } /* ---------- Scrollbars (theme-aware) ---------- Firefox reads scrollbar-color from the tokens directly (set below per theme). WebKit/Chromium get a slim neutral thumb that also re-reads the token layer, so each theme (light / green / green-dark) gets a scrollbar that matches its surface + accent without any extra markup. Inner scroll areas that hide their scrollbar (rail / account-nav) are left untouched. */ * { scrollbar-width: thin; scrollbar-color: var(--scroll-thumb) transparent; } *::-webkit-scrollbar { width: 10px; height: 10px; } *::-webkit-scrollbar-track { background: transparent; } *::-webkit-scrollbar-thumb { background: var(--scroll-thumb); border-radius: var(--r-full); border: 2px solid transparent; background-clip: content-box; } *::-webkit-scrollbar-thumb:hover { background: var(--scroll-thumb-hover); background-clip: content-box; } *::-webkit-scrollbar-corner { background: transparent; } body { font-family: 'Peyda', Tahoma, Arial, sans-serif; font-size: var(--fs-16); line-height: 1.7; color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; overflow-x: hidden; } /* hidden must beat component display rules (.btn, .qty-stepper, .modal, …) */ [hidden] { display: none !important; } img, svg { display: block; max-width: 100%; } img { height: auto; } button, input, select, textarea { font: inherit; color: inherit; } button { cursor: pointer; background: none; border: 0; } a { color: inherit; text-decoration: none; } ul[role="list"] { list-style: none; padding: 0; } h1, h2, h3, h4 { color: var(--text-strong); line-height: 1.4; font-weight: 700; } :focus-visible { outline: 3px solid color-mix(in srgb, var(--primary) 60%, white); outline-offset: 2px; border-radius: var(--r-8); } .skip-link { position: absolute; inset-inline-start: var(--s-4); top: -100px; z-index: 200; background: var(--secondary); color: var(--on-primary); padding: var(--s-3) var(--s-5); border-radius: var(--r-12); transition: top var(--t-fast); } .skip-link:focus { top: var(--s-4); } .container { max-width: 1200px; margin-inline: auto; padding-inline: var(--s-8); } .icon { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; } .icon-sm { width: 16px; height: 16px; } .icon-star { fill: var(--star); stroke: var(--star); } .icon-verified { stroke: var(--success); } .link { color: var(--secondary); font-weight: 600; } .link:hover { color: var(--primary); } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); padding: var(--s-3) var(--s-5); border-radius: var(--r-12); border: 1.5px solid transparent; font-size: var(--fs-14); font-weight: 600; line-height: 1.4; white-space: nowrap; transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast); } .btn:active { transform: scale(.97); } .btn-lg { padding: var(--s-4) var(--s-8); font-size: var(--fs-16); border-radius: var(--r-16); } .btn-block { width: 100%; } .btn-primary { background: var(--primary); color: var(--on-primary); box-shadow: 0 4px 14px rgba(244, 114, 11, .3); } .btn-primary:hover { background: var(--primary-hover); box-shadow: 0 6px 18px rgba(244, 114, 11, .38); } .btn-secondary { background: var(--surface); color: var(--secondary); border-color: var(--secondary); } .btn-secondary:hover { background: var(--secondary-tint); } .btn-outline { background: var(--surface); color: var(--text-strong); border-color: var(--border); } .btn-outline:hover { border-color: var(--primary); color: var(--primary); } .btn-ghost { background: rgba(255, 255, 255, .12); color: var(--on-primary); } .btn-ghost:hover { background: rgba(255, 255, 255, .22); } .btn-text { background: none; color: var(--primary); padding-inline: var(--s-2); } .btn-text:hover { color: var(--primary-hover); } .btn-text:disabled { color: var(--text-muted); cursor: default; } .btn-danger { background: var(--error); color: var(--on-primary); } .btn-danger:hover { background: #B91C1C; } /* ---------- Badges / tags ---------- */ .badge { display: inline-flex; align-items: center; gap: var(--s-2); padding: var(--s-1) var(--s-3); border-radius: var(--r-full); font-size: var(--fs-14); font-weight: 600; line-height: 1.6; } .badge-sm { font-size: var(--fs-12); padding-block: 2px; } .badge-success { background: var(--success-tint); color: var(--success); } .badge-off { background: var(--error); color: var(--on-primary); font-size: var(--fs-12); } .badge-warm { background: rgba(255, 255, 255, .14); color: #FFD9B8; } .badge-muted { background: var(--bg); color: var(--text-muted); border: 1px solid var(--border); } .pulse-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--success); animation: pulse 1.6s infinite; } @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(22, 163, 74, .45); } 70% { box-shadow: 0 0 0 7px rgba(22, 163, 74, 0); } 100% { box-shadow: 0 0 0 0 rgba(22, 163, 74, 0); } } /* ---------- Inputs ---------- */ .input { width: 100%; padding: var(--s-3) var(--s-4); border: 1.5px solid var(--border); border-radius: var(--r-12); background: var(--surface); color: var(--text-strong); transition: border-color var(--t-fast), box-shadow var(--t-fast); } .input::placeholder { color: var(--text-muted); } .input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 4px var(--primary-tint); } textarea.input { resize: vertical; min-height: 110px; } .input.is-invalid { border-color: var(--error); } .input.is-invalid:focus { box-shadow: 0 0 0 4px rgba(220, 38, 38, .12); } .field { display: flex; flex-direction: column; gap: var(--s-2); } .field-label { font-size: var(--fs-14); font-weight: 600; color: var(--text-strong); } .field-error { font-size: var(--fs-12); font-weight: 600; color: var(--error); } .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); } .select-wrap { position: relative; display: block; } .select { appearance: none; padding-inline-end: var(--s-10); } .select-wrap > .icon { position: absolute; inset-inline-end: var(--s-4); top: 50%; translate: 0 -50%; pointer-events: none; color: var(--text-muted); } /* ---------- Card ---------- */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-16); box-shadow: var(--shadow-sm); } /* ---------- Sections ---------- */ .section { padding-block: var(--s-12); } .section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-4); margin-bottom: var(--s-8); } .section-head-center { flex-direction: column; align-items: center; text-align: center; } .section-title { font-size: var(--fs-32); line-height: 1.3; } .section-sub { color: var(--text-muted); margin-top: var(--s-1); } .section-tight { padding-block: var(--s-6); } .visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* ---------- Page head (inner pages: archive, …) ---------- */ .page-head { background: linear-gradient(180deg, var(--gradient-top) 0%, var(--bg) 100%); border-bottom: 1px solid var(--border); padding-block: var(--s-8); } .page-title { font-size: var(--fs-32); } .page-head-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); margin-top: var(--s-4); flex-wrap: wrap; } .breadcrumb { display: flex; align-items: center; gap: var(--s-2); font-size: var(--fs-14); color: var(--text-muted); } .breadcrumb a { transition: color var(--t-fast); } .breadcrumb a:hover { color: var(--primary); } .breadcrumb [aria-current] { color: var(--text-strong); font-weight: 600; } /* ---------- Menu toolbar (archive) ---------- */ .menu-toolbar { display: flex; align-items: center; gap: var(--s-6); padding: var(--s-3) var(--s-5); margin-bottom: var(--s-6); flex-wrap: wrap; } .menu-toolbar-count { font-size: var(--fs-14); font-weight: 700; background: var(--secondary-tint); color: var(--secondary); border-radius: var(--r-full); padding: var(--s-1) var(--s-4); } .menu-toolbar-off { display: inline-flex; align-items: center; gap: var(--s-2); font-size: var(--fs-14); font-weight: 600; color: var(--text); cursor: pointer; user-select: none; } /* چک‌باکسِ «فقط تخفیف‌دارها» استایلِ سراسریِ کنترل‌ها را می‌گیرد. */ .menu-toolbar-off .badge-off { font-size: var(--fs-12); padding-block: 0; } .menu-toolbar-sort { display: inline-flex; align-items: center; gap: var(--s-3); margin-inline-start: auto; } .menu-toolbar-sort .field-label { white-space: nowrap; } /* دراپ‌داونِ سفارشیِ مرتب‌سازی (سلکتِ خام حذف شد) */ .sort-wrap { position: relative; } .sort-btn { display: inline-flex; align-items: center; gap: var(--s-2); padding: var(--s-2) var(--s-4); border: 1.5px solid var(--border); border-radius: 999px; background: var(--surface); font-size: var(--fs-14); font-weight: 600; color: var(--text-strong); cursor: pointer; white-space: nowrap; transition: border-color var(--t-fast), background var(--t-fast); } .sort-btn:hover { border-color: var(--primary); } .sort-btn .sort-chevron { transition: transform var(--t-fast); color: var(--text-muted); } .sort-wrap.is-open .sort-chevron { transform: rotate(180deg); } .popover-sort { inset-inline-end: 0; inset-inline-start: auto; min-width: 220px; padding: var(--s-2); display: flex; flex-direction: column; gap: 2px; } .sort-option { display: flex; align-items: center; gap: var(--s-2); width: 100%; padding: var(--s-2) var(--s-3); border-radius: var(--r-8); font-size: var(--fs-14); color: var(--text); text-align: start; cursor: pointer; transition: background var(--t-fast), color var(--t-fast); } .sort-option:hover { background: var(--bg); color: var(--text-strong); } .sort-option .icon { visibility: hidden; color: var(--primary); flex: none; } .sort-option.is-active { color: var(--primary); font-weight: 700; background: var(--primary-tint); } .sort-option.is-active .icon { visibility: visible; } /* Scroll-reveal (JS adds .is-visible; no-JS stays visible) */ .reveal { opacity: 1; transform: none; } .js .reveal { opacity: 0; transform: translateY(24px); transition: opacity .5s var(--ease), transform .5s var(--ease); } .js .reveal.is-visible { opacity: 1; transform: none; } /* ============================================================ Header ============================================================ */ .site-header { position: sticky; top: 0; z-index: 100; background: var(--surface-glass); backdrop-filter: blur(12px); border-bottom: 1px solid transparent; transition: border-color var(--t-fast), box-shadow var(--t-fast); } .site-header.is-scrolled { border-color: var(--border); box-shadow: var(--shadow-sm); } .header-inner { display: flex; align-items: center; gap: var(--s-5); height: var(--header-h); } .header-logo { display: inline-flex; align-items: center; gap: var(--s-3); flex: none; } .header-logo img { width: 44px; height: 44px; border-radius: var(--r-12); object-fit: cover; } .header-logo-text { font-size: var(--fs-20); font-weight: 800; color: var(--text-strong); } .header-search { position: relative; flex: 1 1 60%; display: flex; align-items: center; gap: var(--s-3); background: var(--bg); border: 1.5px solid var(--border); border-radius: var(--r-16); padding: var(--s-2) var(--s-2) var(--s-2) var(--s-2); padding-inline-start: var(--s-4); color: var(--text-muted); transition: border-color var(--t-fast), box-shadow var(--t-fast), background var(--t-fast); } .header-search:focus-within { border-color: var(--primary); background: var(--surface); box-shadow: 0 0 0 4px var(--primary-tint); } .header-search-input { flex: 1; min-width: 0; border: 0; background: none; padding-block: var(--s-2); color: var(--text-strong); } .header-search-input:focus { outline: none; } .header-search-input::-webkit-search-cancel-button { display: none; } .header-search-btn { padding-block: var(--s-2); border-radius: var(--r-12); } /* Dropdown زنده‌ی پیشنهادهای جستجو، وابسته به .header-search. */ .search-suggest { position: absolute; top: calc(100% + var(--s-2)); inset-inline: 0; z-index: 60; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-16); box-shadow: var(--shadow-lg); padding: var(--s-2); max-height: min(70vh, 460px); overflow-y: auto; } .search-suggest-item { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-2) var(--s-3); border-radius: var(--r-12); color: var(--text-strong); text-decoration: none; cursor: pointer; transition: background var(--t-fast); } .search-suggest-item:hover, .search-suggest-item.is-active { background: var(--primary-tint); } .search-suggest-item.is-out { opacity: .6; } .search-suggest-thumb { width: 44px; height: 44px; border-radius: var(--r-8); object-fit: cover; background: var(--bg); flex: none; } .search-suggest-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .search-suggest-name { font-size: var(--fs-14); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .search-suggest-meta { font-size: var(--fs-12); color: var(--text-muted); } .search-suggest-meta strong { color: var(--text-strong); font-weight: 700; } .header-actions { display: flex; align-items: center; gap: var(--s-3); flex: none; } .location-picker { display: inline-flex; align-items: center; gap: var(--s-2); padding: var(--s-2) var(--s-3); border-radius: var(--r-12); color: var(--text-muted); transition: background var(--t-fast); } .location-picker:hover { background: var(--bg); } .location-picker-text { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.4; } .location-picker-label { font-size: var(--fs-12); color: var(--text-muted); } .location-picker-value { font-size: var(--fs-14); font-weight: 600; color: var(--text-strong); max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cart-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: var(--r-12); border: 1.5px solid var(--border); background: var(--surface); color: var(--text-strong); transition: border-color var(--t-fast), color var(--t-fast); } .cart-btn:hover { border-color: var(--primary); color: var(--primary); } .cart-badge { position: absolute; top: -7px; inset-inline-end: -7px; min-width: 21px; height: 21px; padding-inline: 5px; display: inline-flex; align-items: center; justify-content: center; background: var(--primary); color: var(--on-primary); font-size: var(--fs-12); font-weight: 700; border-radius: var(--r-full); border: 2px solid var(--surface); transition: transform var(--t-fast); } .cart-badge.bump { animation: bump .3s var(--ease); } @keyframes bump { 50% { transform: scale(1.35); } } /* ---------- Header popovers (address picker / mini-cart) ---------- */ .pop-wrap { position: relative; } .popover { position: absolute; top: calc(100% + 10px); inset-inline-end: 0; width: min(320px, calc(100vw - 24px)); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-16); box-shadow: var(--shadow-lg); padding: var(--s-5); z-index: 120; } .popover-title { font-size: var(--fs-16); margin-bottom: var(--s-4); } /* caret pointing at the toggle */ .popover::before { content: ''; position: absolute; top: -6px; inset-inline-end: var(--s-6); width: 12px; height: 12px; background: var(--surface); border-top: 1px solid var(--border); border-inline-start: 1px solid var(--border); transform: rotate(315deg); } /* Click-driven popover (address): animates in when JS removes [hidden] */ .popover-address { width: min(340px, calc(100vw - 24px)); animation: pop-in .2s var(--ease); } @keyframes pop-in { from { opacity: 0; transform: translateY(8px); } } /* Hover-driven popover (mini-cart): kept in flow, revealed on hover/focus */ .pop-hover .popover { opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity var(--t-fast), transform var(--t-fast), visibility var(--t-fast); } .pop-hover:hover .popover, .pop-hover:focus-within .popover { opacity: 1; visibility: visible; transform: none; } /* invisible bridge so the pointer can travel into the popover */ .pop-hover::after { content: ''; position: absolute; inset-inline: 0; top: 100%; height: 12px; } /* Address picker */ .address-list { display: flex; flex-direction: column; gap: var(--s-2); max-height: 240px; overflow-y: auto; } .address-item { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3); border: 1.5px solid var(--border); border-radius: var(--r-12); cursor: pointer; transition: border-color var(--t-fast), background var(--t-fast); } .address-item:hover { border-color: var(--primary); } .address-item:has(input:checked) { border-color: var(--primary); background: var(--primary-tint); } .address-item-text { display: flex; flex-direction: column; line-height: 1.5; min-width: 0; } .address-item-text strong { font-size: var(--fs-14); color: var(--text-strong); } .address-item-text small { font-size: var(--fs-12); color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Branch picker: open/closed state + loading row */ .branch-loading { padding: var(--s-3); font-size: var(--fs-12); color: var(--text-muted); text-align: center; } .address-item-text small.branch-open { color: var(--success); } .address-item-text small.branch-closed { color: var(--text-muted); } /* دکمه‌ی «افزودن آدرس جدید» در پاپ‌اورِ هدر — مودالِ مشترک را باز می‌کند. */ .address-add-btn { margin-top: var(--s-4); padding-block: var(--s-2); font-size: var(--fs-13); } /* فرمِ مودالِ آدرس */ .address-form { display: flex; flex-direction: column; gap: var(--s-4); margin-top: var(--s-5); } /* آدرس‌ها در تسویه: کارت‌های انتخابی (هم‌خانواده‌ی option-card) */ .checkout-address-list { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); } .checkout-address-card { align-items: flex-start; } .checkout-address-text { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .checkout-address-zone { font-size: var(--fs-12); color: var(--secondary); font-weight: 600; } .checkout-address-empty { padding: var(--s-5); border: 1.5px dashed var(--border); border-radius: var(--r-12); color: var(--text-muted); font-size: var(--fs-13); text-align: center; } /* صفحه‌ی «آدرس‌های من» در پنل */ .address-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); } .address-card { padding: var(--s-5); display: flex; flex-direction: column; gap: var(--s-2); } .address-card.is-default { border: 1.5px solid var(--primary); } .address-card-head { display: flex; align-items: center; gap: var(--s-2); } .address-card-icon { color: var(--primary); line-height: 0; } .address-card-title { font-size: var(--fs-15); color: var(--text-strong); margin-inline-end: auto; } .address-card-text { font-size: var(--fs-13); color: var(--text); line-height: 1.8; } .address-card-zone { font-size: var(--fs-12); color: var(--text-muted); } .address-card-phone { font-size: var(--fs-12); color: var(--text-muted); text-align: end; } .address-card-actions { display: flex; gap: var(--s-2); margin-top: auto; padding-top: var(--s-3); border-top: 1px dashed var(--border); } .address-card-delete { color: var(--error); margin-inline-start: auto; } @media (max-width: 768px) { .checkout-address-list, .address-grid { grid-template-columns: 1fr; } } /* Mini-cart */ .popover-cart { width: min(300px, calc(100vw - 24px)); } /* بازخوردِ افزودنِ سریع روی دکمه‌های آیکون‌دار */ .addon-add.is-added { background: var(--success, #16a34a); border-color: var(--success, #16a34a); } /* منوی کاربرِ واردشده در هدر */ .user-btn { max-width: 200px; } .user-btn-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .popover-user { width: min(240px, calc(100vw - 24px)); } .popover-user .popover-title { margin-bottom: var(--s-1); } .popover-sub { font-size: var(--fs-12); color: var(--text-muted); margin-bottom: var(--s-4); } .user-menu { display: flex; flex-direction: column; gap: var(--s-1); margin-bottom: var(--s-4); } .user-menu a { display: block; padding: var(--s-2) var(--s-3); border-radius: var(--r-12); font-size: var(--fs-14); color: var(--text); } .user-menu a:hover { background: var(--surface-2); color: var(--text-strong); } /* میان‌بر پنل مدیریت — فقط برای کاربران دارای نقشِ پنل رندر می‌شود، پس برجسته‌تر از بقیه‌ی آیتم‌های منو دیده می‌شود. */ .user-menu a.user-menu-admin { display: flex; align-items: center; gap: var(--s-2); background: var(--primary-tint); color: var(--primary); font-weight: 700; } .user-menu a.user-menu-admin:hover { background: var(--primary); color: #fff; } .user-menu-admin .icon { flex: none; } .cart-pop-empty { font-size: var(--fs-14); color: var(--text-muted); text-align: center; padding-block: var(--s-4); } .cart-pop-items { display: flex; flex-direction: column; gap: var(--s-3); max-height: 220px; overflow-y: auto; } .cart-pop-item { display: flex; align-items: center; gap: var(--s-2); font-size: var(--fs-14); } .cart-pop-qty { color: var(--primary); font-weight: 700; flex: none; } .cart-pop-name { color: var(--text-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } /* افزودنی‌ها / اقلامِ کمبو زیرِ اسم در مینی‌سبدِ هدر — ریز و کم‌رنگ. */ .cart-pop-extras { display: block; font-size: 0.72rem; font-weight: 400; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; } .cart-pop-price { margin-inline-start: auto; font-weight: 600; color: var(--text); flex: none; } .cart-pop-total { display: flex; align-items: center; justify-content: space-between; margin-top: var(--s-4); padding-top: var(--s-3); border-top: 1px dashed var(--border); font-size: var(--fs-14); color: var(--text-muted); } .cart-pop-total strong { color: var(--text-strong); font-size: var(--fs-16); } .cart-pop-actions { display: flex; flex-direction: column; gap: var(--s-1); margin-top: var(--s-4); } /* دکمه‌ی جست‌وجوی موبایل — روی دسکتاپ پنهان است (فرمِ کامل در هدر هست). */ .header-search-toggle { display: none; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: var(--r-12); background: var(--surface-glass); color: var(--text-strong); box-shadow: var(--shadow-sm); } .header-search-toggle[aria-expanded="true"] { background: var(--primary); color: var(--on-primary); } .header-search-mobile { display: none; padding-block: 0 var(--s-3); } .header-search-mobile form { position: relative; display: flex; align-items: center; gap: var(--s-3); background: var(--bg); border: 1.5px solid var(--border); border-radius: var(--r-16); padding: var(--s-2) var(--s-4); color: var(--text-muted); } /* ============================================================ Hero ============================================================ */ .hero { background: linear-gradient(180deg, var(--gradient-top) 0%, var(--bg) 100%); border-bottom: 1px solid var(--border); overflow: hidden; } .hero-inner { display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: var(--s-12); padding-block: var(--s-16); } .hero-copy { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-5); } .hero-title { font-size: var(--fs-40); font-weight: 800; line-height: 1.35; } .hero-title em { font-style: normal; color: var(--primary); } .hero-sub { font-size: var(--fs-18); color: var(--text-muted); max-width: 46ch; } .hero-ctas { display: flex; gap: var(--s-4); flex-wrap: wrap; } .hero-trust { display: flex; align-items: center; gap: var(--s-5); margin-top: var(--s-2); flex-wrap: wrap; } .hero-trust li { display: flex; align-items: center; gap: var(--s-2); } .hero-trust strong { color: var(--text-strong); font-size: var(--fs-18); } .hero-trust span { color: var(--text-muted); font-size: var(--fs-14); } .hero-trust-sep { width: 1px; height: 24px; background: var(--border); } .hero-media { position: relative; justify-self: center; } .hero-media img { width: min(100%, 480px); aspect-ratio: 1; object-fit: contain; filter: drop-shadow(0 28px 40px rgba(17, 24, 39, .18)); animation: hero-in .7s var(--ease) both; } @keyframes hero-in { from { opacity: 0; transform: scale(.94) translateY(16px); } } .hero-media-glow { position: absolute; inset: 8%; border-radius: 50%; background: radial-gradient(circle, var(--primary-tint) 0%, transparent 68%); z-index: -1; } .hero-float { position: absolute; display: flex; flex-direction: column; gap: 2px; background: var(--surface); border-radius: var(--r-16); box-shadow: var(--shadow-lg); padding: var(--s-3) var(--s-4); font-size: var(--fs-12); color: var(--text-muted); animation: float 5s ease-in-out infinite; } .hero-float-strong { font-size: var(--fs-14); font-weight: 700; color: var(--text-strong); } .hero-float-off { top: 10%; inset-inline-start: -4%; } .hero-float-off .hero-float-strong { color: var(--error); } .hero-float-time { bottom: 12%; inset-inline-end: -4%; animation-delay: 2.5s; } .hero-float-time .icon { color: var(--primary); margin-bottom: 2px; } @keyframes float { 50% { transform: translateY(-10px); } } /* ============================================================ Stats strip ============================================================ */ .stats { margin-top: calc(-1 * var(--s-8)); position: relative; z-index: 2; } .stats-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--s-4); padding: var(--s-6) var(--s-8); box-shadow: var(--shadow-md); } .stat { text-align: center; } .stat dt { font-size: var(--fs-14); color: var(--text-muted); } .stat dd { font-size: var(--fs-24); font-weight: 800; color: var(--secondary); margin: 0; } /* ============================================================ Categories ============================================================ */ .category-rail { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--s-5); } .category-chip { display: flex; flex-direction: column; align-items: center; gap: var(--s-3); width: 100%; padding: var(--s-3); border-radius: var(--r-16); transition: transform var(--t-fast); } .category-chip:hover { transform: translateY(-4px); } .category-chip-circle { display: flex; align-items: center; justify-content: center; width: 84px; height: 84px; border-radius: 50%; background: var(--surface); border: 1.5px solid var(--border); box-shadow: var(--shadow-sm); transition: border-color var(--t-fast), box-shadow var(--t-fast), background var(--t-fast); } .category-chip-circle img { width: 44px; height: 44px; object-fit: contain; } .category-chip-circle .icon { width: 34px; height: 34px; color: var(--text-muted); } .category-chip:hover .category-chip-circle { border-color: var(--primary); box-shadow: var(--shadow-md); } .category-chip-name { font-size: var(--fs-14); font-weight: 600; color: var(--text); } .category-chip.is-active .category-chip-circle { background: var(--primary-tint); border-color: var(--primary); box-shadow: 0 6px 16px rgba(244, 114, 11, .22); } .category-chip.is-active .category-chip-name { color: var(--primary); font-weight: 700; } .category-chip.is-active .category-chip-circle .icon { color: var(--primary); } /* ============================================================ Product cards ============================================================ */ .product-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-6); /* همه‌ی کارت‌های یک ردیف هم‌ارتفاع می‌شوند تا با کم‌وزیادشدنِ توضیحات یا نبودِ امتیاز، کارت بزرگ و کوچک نشود. */ grid-auto-rows: 1fr; } .product-card { display: flex; flex-direction: column; overflow: hidden; height: 100%; transition: transform var(--t-med), box-shadow var(--t-med); /* کلیک روی هر جای کارت پاپ‌آپ محصول را باز می‌کند (product-modal.js). کل کارت کلیک‌پذیر شده، پس هایلایتِ آبیِ لمسیِ مرورگر باید خاموش شود وگرنه با هر تپ یک هاله روی کل کارت می‌افتد. */ cursor: pointer; -webkit-tap-highlight-color: transparent; } .product-card * { -webkit-tap-highlight-color: transparent; } [data-product-open], [data-quick-add], .qty-btn, .add-btn, .fav-btn { -webkit-tap-highlight-color: transparent; } /* انیمیشنِ هاور (بالاپریدن کارت و زومِ عکس) به خواستِ کاربر حذف شد. */ .product-card.is-hidden { display: none; } /* تصویرِ محصول همیشه مربع؛ عکس‌های با نسبت‌های مختلف با object-fit برش می‌خورند تا شبکه یکدست بماند. */ /* تصویرِ محصول همیشه مربع. تصویر از جریانِ چیدمان خارج است (absolute) تا ارتفاعِ ذاتیِ فایل هیچ اثری روی ارتفاعِ کارت نگذارد — وگرنه یک عکسِ بلند کلِ ردیف را بزرگ می‌کرد. */ .product-media { position: relative; aspect-ratio: 1 / 1; width: 100%; flex: 0 0 auto; overflow: hidden; background: var(--secondary-tint); } .product-media > a { position: absolute; inset: 0; display: block; } .product-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-med); } /* نشان‌های روی عکس (تخفیف/ناموجود) ستونی در گوشه‌ی بالا-راست می‌نشینند؛ گوشه‌ی مقابل جای دکمه‌ی علاقه‌مندی است تا هم‌پوشانی پیش نیاید. */ .product-badges { position: absolute; inset-block-start: var(--s-3); inset-inline-start: var(--s-3); z-index: 1; display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-1); } .fav-btn { position: absolute; top: var(--s-3); inset-inline-end: var(--s-3); display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; background: var(--surface-glass); color: var(--text-muted); box-shadow: var(--shadow-sm); transition: color var(--t-fast), transform var(--t-fast); } .fav-btn:hover { transform: scale(1.1); color: var(--error); } /* لایک‌شده: کلِ دکمه قرمزِ توپر با آیکونِ سفید — روی موبایل که hover نیست باید در یک نگاه معلوم باشد. */ .fav-btn.is-active { background: var(--error); color: var(--on-primary); box-shadow: 0 2px 10px rgba(220, 38, 38, .45); } .fav-btn.is-active .icon { fill: var(--on-primary); stroke: var(--on-primary); } .product-body { display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-5); flex: 1; } .product-meta { display: flex; align-items: center; justify-content: space-between; font-size: var(--fs-12); color: var(--text-muted); } .product-rating { display: inline-flex; align-items: center; gap: var(--s-1); font-weight: 700; color: var(--text-strong); } .product-time { display: inline-flex; align-items: center; gap: var(--s-1); } /* عنوان تا دو خط؛ ارتفاعِ ثابت تا نامِ کوتاه و بلند ردیف را جابه‌جا نکند. */ .product-name { font-size: var(--fs-18); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.6em; } /* نامِ محصول دکمه است نه لینک (پاپ‌آپ باز می‌کند) ولی ظاهرش باید مثل متنِ عنوان بماند. */ .product-name-btn { all: unset; cursor: pointer; font: inherit; color: inherit; text-align: inherit; } .product-name-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 4px; } .product-desc { font-size: var(--fs-14); color: var(--text-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.9em; } .product-footer { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); margin-top: auto; padding-top: var(--s-3); border-top: 1px dashed var(--border); } .product-price { display: flex; flex-direction: column; line-height: 1.5; } .price-old { font-size: var(--fs-12); color: var(--text-muted); } .price-now { font-size: var(--fs-16); font-weight: 800; color: var(--text-strong); } .price-now small { font-size: var(--fs-12); font-weight: 500; color: var(--text-muted); } .add-btn { width: 44px; height: 44px; padding: 0; border-radius: var(--r-12); } .qty-stepper { display: flex; align-items: center; gap: var(--s-2); background: var(--primary-tint); border-radius: var(--r-12); padding: var(--s-1); } .qty-btn { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: var(--r-8); background: var(--surface); color: var(--primary); box-shadow: var(--shadow-sm); transition: background var(--t-fast), color var(--t-fast); } .qty-btn:hover { background: var(--primary); color: var(--on-primary); } .qty-value { min-width: 22px; text-align: center; font-weight: 700; color: var(--text-strong); } .empty-state { margin-top: var(--s-6); padding: var(--s-12); display: flex; flex-direction: column; align-items: center; gap: var(--s-4); text-align: center; color: var(--text-muted); } /* ============================================================ Product detail page ============================================================ */ .product-detail { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-8); align-items: start; } .product-detail-media { position: relative; padding: var(--s-4); display: flex; align-items: center; justify-content: center; } .product-detail-media img { width: 100%; height: auto; border-radius: var(--r-16); } .product-detail-media .badge-off { position: absolute; inset-inline-start: var(--s-5); inset-block-start: var(--s-5); } .product-detail-body { display: flex; flex-direction: column; gap: var(--s-4); } .product-detail-meta { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; color: var(--text-muted); font-size: var(--fs-14); } .product-detail-desc { color: var(--text); line-height: 1.9; } .product-detail-price { display: flex; align-items: baseline; gap: var(--s-3); } .product-detail-price .price-now { font-size: var(--fs-24); } .product-detail-actions { margin-top: var(--s-2); } .product-oos-note { color: var(--text-muted); font-size: var(--fs-14); } .product-addons { display: flex; flex-direction: column; gap: var(--s-4); } .product-addon-group { border: 1px solid var(--border); padding: var(--s-4); } .product-addon-group legend { font-weight: 600; color: var(--text-strong); padding-inline: var(--s-2); } .product-addon-group legend small { font-weight: 400; color: var(--text-muted); font-size: var(--fs-12); } .product-addon { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-2) 0; cursor: pointer; } .product-addon-name { flex: 1; min-width: 0; } .product-addon-price { color: var(--text-muted); font-size: var(--fs-14); white-space: nowrap; } .product-combo { padding: var(--s-4); } .product-combo-title { font-size: var(--fs-16); color: var(--text-strong); margin-bottom: var(--s-2); } .product-combo ul { display: flex; flex-direction: column; gap: var(--s-1); color: var(--text-muted); } @media (max-width: 900px) { .product-detail { grid-template-columns: 1fr; } } /* Unavailable products stay visible but clearly inert. */ .product-card.is-unavailable .product-media img { opacity: .5; filter: grayscale(1); } .product-oos { white-space: nowrap; } /* ============================================================ Pagination + menu toolbar search ============================================================ */ .pagination-wrap { margin-top: var(--s-8); display: flex; justify-content: center; } .pagination { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; } .pagination-item a, .pagination-item span { display: inline-flex; align-items: center; justify-content: center; min-width: 2.5rem; height: 2.5rem; padding-inline: var(--s-2); border: 1px solid var(--border); border-radius: var(--r-12); background: var(--surface); color: var(--text); font-size: var(--fs-14); transition: border-color var(--t-fast), background var(--t-fast); } .pagination-item a:hover { border-color: var(--primary); color: var(--primary); } .pagination-item.is-active span { background: var(--primary); border-color: var(--primary); color: var(--on-primary); font-weight: 600; } .pagination-item.is-disabled span { opacity: .45; } .menu-toolbar-search { flex: 1; min-width: 12rem; position: relative; } /* ضربدرِ خامِ مرورگر برای input[type=search] حذف؛ دکمه‌ی سفارشیِ خودمان می‌آید. */ .menu-toolbar-search input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; } .menu-toolbar-search input[type="search"] { padding-inline-end: 42px; } .search-clear { position: absolute; inset-inline-end: var(--s-2); top: 50%; transform: translateY(-50%); display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; color: var(--text-muted); cursor: pointer; transition: background var(--t-fast), color var(--t-fast); } .search-clear:hover { background: var(--bg); color: var(--text-strong); } /* ============================================================ Offers band (brand green emphasis) ============================================================ */ .offers-panel { background: linear-gradient(135deg, var(--secondary) 0%, var(--secondary-deep) 100%); border-radius: var(--r-24); padding: var(--s-10); color: var(--on-primary); } .offers-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-4); margin-bottom: var(--s-8); } .offers-head .section-title { color: var(--on-primary); margin-top: var(--s-2); } .offers-head .section-sub { color: rgba(255, 255, 255, .72); } .offer-rail { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--s-4); } .offer-card { position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--s-2); background: var(--surface); border-radius: var(--r-16); padding: var(--s-5) var(--s-4); text-align: center; transition: transform var(--t-med), box-shadow var(--t-med); } .offer-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); } .offer-off { position: absolute; top: var(--s-3); inset-inline-start: var(--s-3); } .offer-card img { width: 88px; height: 88px; border-radius: 50%; object-fit: cover; } .offer-name { font-size: var(--fs-14); min-height: 2.8em; display: flex; align-items: center; } .offer-price { display: flex; flex-direction: column; line-height: 1.5; } .offer-btn { width: 100%; padding-block: var(--s-2); } /* همان قرارداد کارت محصول: قلمِ ناموجود خاکستری و بدونِ دکمه‌ی سفارش. */ .offer-card.is-unavailable img { opacity: .5; filter: grayscale(1); } .offer-card.is-unavailable:hover { transform: none; box-shadow: var(--shadow-sm); } /* ============================================================ App download ============================================================ */ .app-panel { display: grid; grid-template-columns: 1.2fr .8fr; align-items: center; gap: var(--s-10); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-24); padding: var(--s-12); overflow: hidden; } .app-features { display: flex; flex-direction: column; gap: var(--s-3); margin-block: var(--s-6); } .app-features li { display: flex; align-items: center; gap: var(--s-3); font-weight: 500; color: var(--text-strong); } .app-features .icon { color: var(--success); } .app-actions { display: flex; align-items: center; gap: var(--s-4); flex-wrap: wrap; } .store-btn { display: inline-flex; align-items: center; gap: var(--s-3); background: var(--ink); color: var(--on-primary); border-radius: var(--r-12); padding: var(--s-2) var(--s-5); transition: transform var(--t-fast), background var(--t-fast); } .store-btn:hover { transform: translateY(-2px); background: #000; } .store-btn span { display: flex; flex-direction: column; line-height: 1.5; } .store-btn small { font-size: var(--fs-12); opacity: .75; } .app-qr { display: flex; flex-direction: column; align-items: center; gap: var(--s-1); font-size: var(--fs-12); color: var(--text-muted); } .app-qr svg { width: 68px; height: 68px; fill: var(--ink); } .app-qr .qr-hole { fill: var(--on-ink); } .app-mockup { display: flex; justify-content: center; } .phone { position: relative; width: 250px; border-radius: 38px; background: var(--ink); padding: 10px; box-shadow: var(--shadow-lg); transform: rotate(-6deg); transition: transform var(--t-med); } .app-panel:hover .phone { transform: rotate(-3deg) translateY(-6px); } .phone-notch { position: absolute; top: 18px; left: 50%; translate: -50% 0; width: 84px; height: 16px; background: var(--ink); border-radius: var(--r-full); z-index: 2; } .phone-screen { background: var(--bg); border-radius: 30px; overflow: hidden; display: flex; flex-direction: column; } .phone-topbar { padding: var(--s-6) var(--s-4) var(--s-2); font-weight: 800; color: var(--secondary); text-align: center; } .phone-screen img { width: 100%; aspect-ratio: 1; object-fit: cover; } .phone-card { display: flex; flex-direction: column; gap: var(--s-1); background: var(--surface); margin: var(--s-3); border-radius: var(--r-12); padding: var(--s-3); font-size: var(--fs-12); box-shadow: var(--shadow-sm); } .phone-card strong { font-size: var(--fs-14); color: var(--text-strong); } .phone-cta { margin-top: var(--s-1); background: var(--primary); color: var(--on-primary); border-radius: var(--r-8); text-align: center; padding: var(--s-1); font-weight: 700; } /* ============================================================ Benefits ============================================================ */ .benefit-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-6); } .benefit-card { display: flex; flex-direction: column; align-items: center; gap: var(--s-3); padding: var(--s-8) var(--s-6); text-align: center; transition: transform var(--t-med), box-shadow var(--t-med); } .benefit-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); } .benefit-icon { display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: var(--r-16); background: var(--primary-tint); color: var(--primary); } .benefit-icon .icon { width: 30px; height: 30px; } .benefit-title { font-size: var(--fs-18); } .benefit-desc { font-size: var(--fs-14); color: var(--text-muted); } /* ============================================================ Testimonials ============================================================ */ .review-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-6); } .review-card { padding: var(--s-6); display: flex; flex-direction: column; gap: var(--s-4); } .review-head { display: flex; align-items: center; gap: var(--s-3); } .avatar { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; background: var(--secondary-tint); color: var(--secondary); font-weight: 800; font-size: var(--fs-18); flex: none; } .review-id { display: flex; flex-direction: column; line-height: 1.5; margin-inline-end: auto; } .review-name { display: inline-flex; align-items: center; gap: var(--s-1); font-weight: 700; color: var(--text-strong); } .review-date { font-size: var(--fs-12); color: var(--text-muted); } .review-stars { display: inline-flex; gap: 2px; color: #F5A623; } .review-quote { font-size: var(--fs-14); color: var(--text); } /* خلاصه‌ی امتیاز کنارِ عنوانِ بخشِ نظرها */ .reviews-summary { display: inline-flex; align-items: center; gap: var(--s-2); } .reviews-avg { font-size: var(--fs-20); font-weight: 800; color: var(--text-strong); } .reviews-count { font-size: var(--fs-13); color: var(--text-muted); } .reviews-empty { color: var(--text-muted); padding: var(--s-4) 0; } .product-rating { color: #F5A623; } .product-rating small { color: var(--text-muted); font-weight: 400; } /* فرمِ ثبتِ نظر */ .review-form { display: flex; flex-direction: column; gap: var(--s-3); margin-bottom: var(--s-6); } .review-form-title { font-size: var(--fs-16); font-weight: 700; } .review-rating-input { display: inline-flex; gap: var(--s-1); } .review-star-label { cursor: pointer; color: var(--border); line-height: 0; transition: color .12s ease; } .review-star-label.is-filled { color: #F5A623; } .review-star-label .icon { width: 28px; height: 28px; } /* بلوکِ ثبتِ نظر در پنلِ مشتری (زیرِ هر قلمِ سفارش) */ .order-item-review { margin-top: var(--s-2); } .order-item-review > summary { display: inline-block; cursor: pointer; list-style: none; } .order-item-review > summary::-webkit-details-marker { display: none; } .order-item-review[open] > summary { margin-bottom: var(--s-2); } .btn-sm { padding: var(--s-1) var(--s-3); font-size: var(--fs-13); } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ============================================================ چک‌باکس و رادیوی سفارشی — سراسری. با :where() نوشته شده تا specificity صفر باشد و override های کامپوننتی (مثل .option-card input که ورودی را مخفی می‌کند و کارت خودش ظاهرِ انتخاب است، یا .sr-only ستاره‌های امتیاز) بدون جنگ برنده بمانند. تمِ سبز رنگِ تیک را جداگانه به --secondary می‌برد. ============================================================ */ :where(input[type="checkbox"], input[type="radio"]) { appearance: none; -webkit-appearance: none; flex: none; width: 20px; height: 20px; margin: 0; cursor: pointer; display: inline-grid; place-content: center; border: 1.5px solid var(--border); background: var(--surface); transition: border-color var(--t-fast), background var(--t-fast); } :where(input[type="checkbox"]) { border-radius: 6px; } :where(input[type="radio"]) { border-radius: 50%; } :where(input[type="checkbox"], input[type="radio"]):hover { border-color: var(--primary); } /* نشانه‌ی داخل: تیک برای چک‌باکس، دایره برای رادیو. */ :where(input[type="checkbox"], input[type="radio"])::before { content: ""; transform: scale(0); transition: transform .15s var(--ease); } :where(input[type="checkbox"])::before { width: 11px; height: 11px; background: var(--on-primary); clip-path: polygon(14% 46%, 0 66%, 38% 100%, 100% 18%, 82% 2%, 36% 68%); } :where(input[type="radio"])::before { width: 10px; height: 10px; border-radius: 50%; background: var(--primary); } :where(input[type="checkbox"]):checked { background: var(--primary); border-color: var(--primary); } :where(input[type="radio"]):checked { border-color: var(--primary); } :where(input[type="checkbox"], input[type="radio"]):checked::before { transform: scale(1); } :where(input[type="checkbox"], input[type="radio"]):focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; } :where(input[type="checkbox"], input[type="radio"]):disabled { opacity: .45; cursor: not-allowed; } /* گزینه‌های کیف‌پول/اعتبار در تسویه */ .checkout-wallet { display: flex; flex-direction: column; gap: var(--s-2); margin-top: var(--s-4); } .checkbox-row { display: flex; align-items: center; gap: var(--s-2); font-size: var(--fs-14); cursor: pointer; } /* ============================================================ اعلانِ شناور (toast) ============================================================ */ .toast-host { position: fixed; z-index: 120; top: calc(var(--header-h) + var(--s-4)); inset-inline-end: var(--s-6); display: flex; flex-direction: column; gap: var(--s-2); pointer-events: none; } .toast { display: flex; align-items: center; gap: var(--s-2); max-width: min(360px, calc(100vw - 32px)); padding: var(--s-3) var(--s-5); border-radius: var(--r-12); background: var(--surface); color: var(--text-strong); font-size: var(--fs-14); font-weight: 600; box-shadow: var(--shadow-lg); border-inline-start: 4px solid var(--success); /* ورود از سمتِ راست (RTL) با محوشدن */ opacity: 0; transform: translateX(-16px); transition: opacity .25s ease, transform .25s ease; } .toast.is-in { opacity: 1; transform: translateX(0); } .toast-success { border-inline-start-color: var(--success); } .toast-error { border-inline-start-color: var(--error); } .toast-info { border-inline-start-color: var(--primary); } @media (max-width: 640px) { .toast-host { inset-inline: var(--s-4); inset-inline-end: var(--s-4); top: calc(var(--header-h) + var(--s-2)); } .toast { max-width: none; } } @media (prefers-reduced-motion: reduce) { .toast { transition: opacity .2s ease; transform: none; } .toast.is-in { transform: none; } } /* ============================================================ پاپ‌آپِ محصول ============================================================ */ /* دوکلاسه (.modal-card.product-modal-card) تا از قاعده‌ی عمومیِ .modal-card { width: min(420px, …) } — که پایین‌تر در فایل تعریف شده و با specificity برابر برنده می‌شد — قوی‌تر باشد. چینش به خواستِ کاربر «از بالا به پایین» است: عکس، بعد محتوا، بعد نوارِ افزودن — در همه‌ی سایزها؛ موبایل فقط تمام‌صفحه می‌شود. */ .modal.product-modal { padding: var(--s-6); } .modal-card.product-modal-card { width: min(520px, 100%); max-height: min(90vh, 860px); padding: 0; overflow: hidden; display: flex; flex-direction: column; } /* دکمه‌ی بستن روی عکس می‌افتد؛ بدونِ پس‌زمینه دیده نمی‌شود. */ .product-modal .modal-close { z-index: 2; background: var(--surface-glass); color: var(--text-strong); box-shadow: 0 2px 10px rgba(0, 0, 0, .18); } .product-modal-loading { padding: var(--s-6); color: var(--text-muted); } .product-modal-skel-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-6); align-items: stretch; } .product-modal-skel-media { aspect-ratio: 1 / 1; width: 100%; border-radius: var(--r-16); } .product-modal-skel-info { display: flex; flex-direction: column; padding-block: var(--s-3); } .product-modal-skel-btn { width: 60%; height: 44px; margin-top: auto; border-radius: var(--r-12); } @media (max-width: 720px) { .product-modal-skel-grid { grid-template-columns: 1fr; } } .product-modal-body { flex: 1; display: grid; grid-template-columns: 1fr; grid-template-rows: auto 1fr auto; grid-template-areas: "media" "info" "foot"; overflow: hidden; min-height: 0; } .product-modal-media { grid-area: media; position: relative; aspect-ratio: 16 / 9; background: var(--secondary-tint); overflow: hidden; } .product-modal-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .product-modal-media .badge-off { position: absolute; top: var(--s-4); inset-inline-start: var(--s-4); } .product-modal-info { grid-area: info; padding: var(--s-5) var(--s-6) var(--s-4); overflow-y: auto; min-height: 0; display: flex; flex-direction: column; gap: var(--s-4); } .product-modal-title { font-size: var(--fs-20); } .product-modal-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); font-size: var(--fs-12); color: var(--text-muted); } .product-modal-desc { font-size: var(--fs-14); color: var(--text); line-height: 2; } .product-modal-block { border-top: 1px dashed var(--border); padding-top: var(--s-3); } .product-modal-block-title { font-size: var(--fs-14); font-weight: 700; margin-bottom: var(--s-2); } .product-modal-block-title small, .product-modal-block-hint { font-weight: 400; color: var(--text-muted); font-size: var(--fs-12); } /* ارزشِ غذایی: گریدِ کارت‌های کوچک. */ .nutrition-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: var(--s-2); } .nutrition-item { display: flex; flex-direction: column; align-items: center; gap: var(--s-1); padding: var(--s-3); border-radius: var(--r-12); background: var(--surface-2); text-align: center; } .nutrition-value { font-size: var(--fs-16); font-weight: 800; color: var(--text-strong); } .nutrition-label { font-size: var(--fs-12); color: var(--text-muted); } /* آلرژن‌ها: چیپ‌های هشدار. */ .allergen-list { display: flex; flex-wrap: wrap; gap: var(--s-2); } .allergen-chip { display: inline-flex; align-items: center; gap: var(--s-1); padding: var(--s-1) var(--s-3); border-radius: 999px; background: var(--error-tint); color: var(--error); border: 1px solid color-mix(in srgb, var(--error) 30%, transparent); font-size: var(--fs-12); font-weight: 600; } /* «اغلب با هم خرید می‌شود» — ریلِ افقیِ کارت‌های کوچک. */ .frequently-rail { display: flex; gap: var(--s-3); overflow-x: auto; padding-bottom: var(--s-2); } .frequently-card { flex: 0 0 120px; } .frequently-btn { display: flex; flex-direction: column; align-items: center; gap: var(--s-1); width: 100%; padding: var(--s-2); background: none; border: 0; cursor: pointer; border-radius: var(--r-12); transition: background var(--t-fast); } .frequently-btn:hover { background: var(--surface-2); } .frequently-btn img { width: 56px; height: 56px; border-radius: var(--r-12); object-fit: cover; } .frequently-name { font-size: var(--fs-12); color: var(--text); text-align: center; line-height: 1.4; } .frequently-price { font-size: var(--fs-12); font-weight: 700; color: var(--primary); } /* ریلِ «دیده‌شده‌ها» در خانه (از localStorage). */ .recently-rail { display: flex; gap: var(--s-3); overflow-x: auto; padding-bottom: var(--s-2); } .recently-card { flex: 0 0 160px; display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-3); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-12); text-decoration: none; color: var(--text-strong); transition: border-color var(--t-fast), box-shadow var(--t-fast); } .recently-card:hover { border-color: var(--primary); box-shadow: var(--shadow-sm); } .recently-card img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: var(--r-8); background: var(--bg); } .recently-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .recently-name { font-size: var(--fs-13); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .recently-price { font-size: var(--fs-12); font-weight: 700; color: var(--primary); } /* هیستوگرامِ توزیعِ امتیازها (۵ ← ۱). */ .rating-histogram { display: flex; flex-direction: column; gap: var(--s-1); margin-bottom: var(--s-3); } .rating-histogram-row { display: flex; align-items: center; gap: var(--s-2); } .rating-histogram-star { font-size: var(--fs-12); font-weight: 700; color: var(--text-muted); width: var(--s-4); text-align: end; } .rating-histogram-star-icon { color: var(--star); width: 14px; height: 14px; flex: none; } .rating-histogram-bar { flex: 1; height: 8px; border-radius: 999px; background: var(--surface-2); overflow: hidden; } .rating-histogram-fill { display: block; height: 100%; border-radius: 999px; background: var(--star); transition: width var(--t-med) var(--ease); } .rating-histogram-count { font-size: var(--fs-12); color: var(--text-muted); width: var(--s-6); } /* نظرها داخل پاپ‌آپ (صفحه‌ی مجزای محصول حذف شده است) */ .product-modal-reviews { display: flex; flex-direction: column; gap: var(--s-3); } .product-modal-review { display: flex; flex-direction: column; gap: var(--s-1); padding: var(--s-3); background: var(--surface-2); border-radius: var(--r-12); } .product-modal-review .review-head { justify-content: space-between; } .product-modal-review .review-quote { font-size: var(--fs-13); } /* ترکیبات */ .ingredient-list { display: flex; flex-wrap: wrap; gap: var(--s-2); } .ingredient { display: inline-flex; align-items: center; gap: var(--s-2); padding: var(--s-1) var(--s-3); border-radius: 999px; background: var(--bg); border: 1px solid var(--border); font-size: var(--fs-12); } .ingredient-qty { color: var(--text-muted); } /* اقلامِ کمبو */ .combo-list { display: flex; flex-direction: column; gap: var(--s-2); } .combo-item { display: flex; align-items: center; gap: var(--s-2); padding: var(--s-2) var(--s-3); border-radius: var(--r-8); background: var(--bg); font-size: var(--fs-13); } .combo-item-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--primary); flex: none; } .combo-item-name { flex: 1; } .combo-item-qty { color: var(--text-muted); font-weight: 700; } /* عضوی که تمام شده و کلِ کمبو را ناموجود کرده. */ .combo-item.is-unavailable .combo-item-dot { background: var(--error); } .combo-item.is-unavailable .combo-item-name { color: var(--text-muted); text-decoration: line-through; } .combo-item.is-unavailable .combo-item-qty { color: var(--error); } /* افزودنی‌ها */ .addon-group { border: 0; padding: 0; margin-bottom: var(--s-4); } .addon-group-title { font-size: var(--fs-13); font-weight: 700; margin-bottom: var(--s-2); } .addon-group-title small { font-weight: 400; color: var(--text-muted); } /* برچسبِ گروهِ اجباری — تا انتخاب نشود دکمه‌ی افزودن غیرفعال است. */ .addon-required { display: inline-block; margin-inline-start: var(--s-2); padding: 1px var(--s-2); border-radius: 999px; background: var(--error-tint); color: var(--error); font-size: var(--fs-12); font-weight: 700; } .addon-option { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-2) var(--s-3); border: 1.5px solid var(--border); border-radius: var(--r-12); margin-bottom: var(--s-2); cursor: pointer; font-size: var(--fs-13); transition: border-color var(--t-fast), background var(--t-fast); } .addon-option:hover { border-color: var(--primary); } .addon-option:has(input:checked) { border-color: var(--primary); background: var(--primary-tint); } .addon-option:has(input:disabled) { opacity: .5; cursor: not-allowed; } .addon-option-name { flex: 1; } .addon-option-price { color: var(--text-muted); font-weight: 700; } /* افزودنیِ ناموجود: قفل است ولی پنهان نمی‌شود تا دلیلش معلوم باشد. */ .addon-option.is-unavailable:hover { border-color: var(--border); } .addon-option.is-unavailable .addon-option-price { color: var(--error); } .product-modal-foot { grid-area: foot; display: flex; align-items: center; gap: var(--s-4); padding: var(--s-4) var(--s-6); border-top: 1px solid var(--border); background: var(--surface); } .product-modal-price { display: flex; flex-direction: column; line-height: 1.5; } .product-modal-price .price-now { font-size: var(--fs-20); font-weight: 800; } .product-modal-qty { margin-inline-start: auto; } .product-modal-add { flex: 1 1 auto; margin-inline-start: auto; max-width: 300px; } .product-modal-add:disabled { opacity: .55; cursor: not-allowed; } /* موبایل: تمام‌صفحه (dvh تا نوارِ آدرسِ مرورگر ارتفاع را نشکند)؛ عکس بالا، محتوا اسکرول‌شونده، نوارِ افزودن پایینِ صفحه با رعایتِ safe-area. */ @media (max-width: 720px) { .modal.product-modal { padding: 0; } .modal-card.product-modal-card { width: 100%; height: 100vh; height: 100dvh; max-height: none; border-radius: 0; } .product-modal-body { grid-template-columns: 1fr; grid-template-rows: auto 1fr auto; grid-template-areas: "media" "info" "foot"; } .product-modal-media { aspect-ratio: 4 / 3; } .product-modal-info { padding: var(--s-5); gap: var(--s-3); } .product-modal-title { font-size: var(--fs-20); } .product-modal-foot { flex-wrap: wrap; gap: var(--s-3); padding: var(--s-3) var(--s-4) calc(var(--s-3) + env(safe-area-inset-bottom)); } .product-modal-qty { margin-inline-start: auto; } .product-modal-add { flex: 1 1 100%; order: 3; min-width: 0; max-width: none; margin-inline-start: 0; } } /* خطِ ترکیبات زیرِ نامِ محصول در کارت */ .product-recipe { font-size: var(--fs-12); color: var(--text-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* ============================================================ کیف پول و اعتبار ============================================================ */ /* از این پس خلاصه‌ی کیف‌پول در کاشی‌های .dash-tile نمایش داده می‌شود، نه در یک نوارِ گرادیانیِ اختصاصی. این کلاس‌ها فقط برای سازگاریِ برگشت‌پذیر نگه داشته شده‌اند. */ .wallet-hero-label { font-size: var(--fs-13); color: var(--text-muted); } .wallet-hero-amount { font-size: var(--fs-32); font-weight: 800; line-height: 1.4; color: var(--text-strong); } .wallet-hero-note { font-size: var(--fs-12); color: var(--text-muted); } /* کاشی خلاصه با رنگِ ثانویه (اعتبار) */ .dash-tile-icon--secondary { background: var(--secondary-tint, var(--bg)); color: var(--secondary); } .wallet-bucket-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-3); } .wallet-bucket { display: flex; flex-direction: column; align-items: center; gap: var(--s-1); padding: var(--s-3); border-radius: var(--r-12); background: rgba(255, 255, 255, .16); text-align: center; } .wallet-bucket-icon .icon { width: 20px; height: 20px; } .wallet-bucket dt { font-size: var(--fs-12); opacity: .9; } .wallet-bucket dd { font-size: var(--fs-14); font-weight: 700; } .quick-amounts { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-bottom: var(--s-4); } .quick-amount { padding: var(--s-2) var(--s-4); border: 1.5px solid var(--border); border-radius: var(--r-12); background: var(--surface); color: var(--text-strong); font-weight: 700; font-size: var(--fs-14); transition: border-color var(--t-fast), background var(--t-fast); } .quick-amount small { font-weight: 400; color: var(--text-muted); } .quick-amount:hover { border-color: var(--primary); } .quick-amount.is-selected { border-color: var(--primary); background: var(--primary-tint); } .topup-form { display: flex; flex-direction: column; gap: var(--s-4); } .settle-box { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--s-4); margin-top: var(--s-4); padding: var(--s-4); border-radius: var(--r-12); background: var(--error-tint); } .wallet-log { display: flex; flex-direction: column; } .wallet-log-row { display: flex; align-items: center; gap: var(--s-3); padding-block: var(--s-3); border-bottom: 1px dashed var(--border); } .wallet-log-row:last-child { border-bottom: 0; } /* آیکونِ دایره‌ایِ ورودی/خروجیِ تراکنش */ .wallet-log-icon { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 999px; flex: none; } .wallet-log-icon.is-positive { background: var(--success-tint); color: var(--success); } .wallet-log-icon.is-negative { background: var(--error-tint); color: var(--error); } .wallet-log-icon .icon { width: 18px; height: 18px; } .wallet-log-main { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; } .wallet-log-main small { font-size: var(--fs-12); color: var(--text-muted); } /* ستونِ سمتِ چپ: مبلغِ امضادار + موجودیِ پس از تراکنش */ .wallet-log-tail { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; text-align: end; flex: none; } .wallet-log-amount { font-weight: 700; white-space: nowrap; } .wallet-log-amount.is-positive { color: var(--success); } .wallet-log-amount.is-negative { color: var(--error); } .wallet-log-balance { font-size: var(--fs-12); color: var(--text-muted); white-space: nowrap; } .is-negative { color: var(--error); } /* حالتِ خالی استاندارد داخل کارت (اعتبار بدون حساب / گردشِ خالی) */ .card-empty { margin-top: var(--s-2); padding: var(--s-6); } .card-empty .icon { width: 36px; height: 36px; } @media (max-width: 640px) { .wallet-bucket-grid { grid-template-columns: 1fr; } .wallet-log-icon { width: 32px; height: 32px; } .wallet-log-balance { display: none; } /* روی موبایل ستونِ سوم فشرده می‌شود */ .settle-box { flex-direction: column; align-items: stretch; } .settle-box .btn { width: 100%; } } /* فیلدِ باریک + دکمه در یک ردیف (مثلِ جنسیت و «ذخیره تغییرات») */ .field-inline-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--s-4); } .field-inline-row .btn { flex: 0 0 auto; } .field-narrow { flex: 0 1 220px; min-width: 160px; } @media (max-width: 480px) { .field-inline-row { align-items: stretch; } .field-narrow { flex: 1 1 100%; } .field-inline-row .btn { width: 100%; } } /* روشِ پرداخت وقتی کیف‌پول/اعتبار کلِ مبلغ را پوشش داده */ .option-grid.is-disabled { opacity: .45; pointer-events: none; } .payment-covered { margin-top: var(--s-3); padding: var(--s-3) var(--s-4); border-radius: var(--r-12); background: var(--success-tint); color: var(--success); font-size: var(--fs-13); font-weight: 600; } /* کارتِ افقیِ روشِ پرداخت: آیکنِ سمتِ راست، متنِ سمتِ چپ (RTL). */ .option-card-pay { flex-direction: row; align-items: center; gap: var(--s-3); } .option-card-pay .option-card-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; } /* اسکلتونِ کارتِ روشِ پرداخت در حالتِ بارگذاری. */ .skeleton-pay { display: flex; flex-direction: row; align-items: center; gap: var(--s-3); padding: var(--s-4); border: 1.5px solid var(--border); border-radius: var(--r-12); } .skeleton-pay-icon { width: 42px; height: 42px; border-radius: var(--r-12); flex: none; } /* ردِ اعتماد زیرِ دکمهٔ ثبتِ سفارش در تسویه */ .checkout-trust { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-4); margin-top: var(--s-4); padding-top: var(--s-4); border-top: 1px dashed var(--border); } .checkout-trust-item { display: inline-flex; align-items: center; gap: var(--s-2); color: var(--text-muted); font-size: var(--fs-12); font-weight: 600; } .checkout-trust-item .icon { color: var(--success); } /* ردیفِ کیف‌پول/اعتبار با موجودیِ زنده */ .balance-row { justify-content: flex-start; } .balance-label { flex: 1; } .balance-amount { font-weight: 700; color: var(--text-strong); white-space: nowrap; } .balance-amount.is-empty { font-weight: 400; color: var(--text-muted); } .balance-row.is-disabled { opacity: .6; cursor: not-allowed; } .balance-applied { font-size: var(--fs-12); color: var(--success); margin-inline-start: var(--s-6); } /* ============================================================ صفحات استاتیک (درباره/حریم خصوصی) + سوالات متداول ============================================================ */ /* بدنه‌ی متنِ بلند: تایپوگرافیِ پایه بدون وابستگی به کلاس‌. */ .static-content { max-width: 760px; margin-inline: auto; line-height: 2; font-size: var(--fs-15); color: var(--text); } .static-content > * + * { margin-top: var(--s-4); } .static-content h2 { font-size: var(--fs-20); color: var(--text-strong); margin-top: var(--s-8); } .static-content h3 { font-size: var(--fs-16); color: var(--text-strong); margin-top: var(--s-6); } .static-content a { color: var(--primary); } .static-content ul, .static-content ol { padding-inline-start: var(--s-6); } /* آکاردئونِ سوالات متداول با
بومی. */ .faq-list { display: flex; flex-direction: column; gap: var(--s-3); } .faq-item { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-12); overflow: hidden; } .faq-item[open] { border-color: var(--primary); } .faq-q { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding: var(--s-4) var(--s-5); cursor: pointer; font-weight: 600; color: var(--text-strong); list-style: none; font-size: var(--fs-15); } .faq-q::-webkit-details-marker { display: none; } .faq-icon { transition: transform var(--t-fast) var(--ease); color: var(--primary); flex-shrink: 0; } .faq-item[open] .faq-icon { transform: rotate(180deg); } .faq-a { padding: 0 var(--s-5) var(--s-5); color: var(--text-muted); line-height: 2; font-size: var(--fs-14); } .faq-contact-card { margin-top: var(--s-8); text-align: center; display: flex; flex-direction: column; align-items: center; gap: var(--s-4); } .faq-contact-card p { color: var(--text-muted); margin: 0; } /* صفحهٔ پیشنهادها: گریدِ ریل به‌جای ردیفِ افقیِ خانه. */ .offer-rail-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--s-5); } /* ============================================================ بلاگ ============================================================ */ .blog-cats { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-bottom: var(--s-6); } .blog-grid { display: grid; grid-template-columns: 1fr; gap: var(--s-5); } .blog-card { display: flex; flex-direction: column; overflow: hidden; } .blog-card-media img { width: 100%; height: 200px; object-fit: cover; display: block; } .blog-card-body { display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-5); flex: 1; } .blog-card-title { font-size: var(--fs-18); } .blog-card-excerpt { font-size: var(--fs-14); color: var(--text-muted); } .blog-card-meta { display: flex; gap: var(--s-3); font-size: var(--fs-12); color: var(--text-muted); margin-top: auto; } .blog-post { max-width: 820px; margin-inline: auto; } .blog-post-cover { width: 100%; height: auto; border-radius: var(--r-16); margin-bottom: var(--s-6); } .blog-post-meta { display: flex; flex-wrap: wrap; gap: var(--s-4); font-size: var(--fs-13); color: var(--text-muted); } .blog-post-lead { font-size: var(--fs-16); color: var(--text-muted); margin-bottom: var(--s-5); } .blog-post-body { font-size: var(--fs-16); line-height: 2; color: var(--text); } .blog-post-body h2 { font-size: var(--fs-20); margin: var(--s-6) 0 var(--s-3); } .blog-post-body h3 { font-size: var(--fs-18); margin: var(--s-5) 0 var(--s-2); } .blog-post-body p { margin-bottom: var(--s-4); } .blog-post-body ul, .blog-post-body ol { margin: 0 var(--s-5) var(--s-4) 0; list-style: revert; } .blog-post-body img { max-width: 100%; height: auto; border-radius: var(--r-12); } @media (min-width: 640px) { .blog-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .blog-grid { grid-template-columns: repeat(3, 1fr); } } /* ============================================================ Branches ============================================================ */ .branch-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: var(--s-6); } .branch-card { padding: var(--s-8); display: flex; flex-direction: column; gap: var(--s-5); } .branch-head { display: flex; align-items: center; gap: var(--s-4); } .branch-icon { display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: var(--r-16); background: var(--secondary-tint); color: var(--secondary); } .branch-name { font-size: var(--fs-20); } .branch-info { display: flex; flex-direction: column; gap: var(--s-3); } .branch-info li { display: flex; align-items: center; gap: var(--s-3); } .branch-info .icon { color: var(--text-muted); } .branch-actions { display: flex; align-items: center; gap: var(--s-4); flex-wrap: wrap; } .branch-cta { padding: var(--s-8); display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: var(--s-4); background: var(--primary-tint); border-color: transparent; } .branch-cta-title { font-size: var(--fs-20); } .branch-cta .btn { background: var(--surface); } /* ============================================================ Contact ============================================================ */ .contact-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: var(--s-6); align-items: start; } .contact-info, .contact-form { padding: var(--s-8); } .contact-form { display: flex; flex-direction: column; gap: var(--s-5); } .contact-list { display: flex; flex-direction: column; gap: var(--s-5); margin-top: var(--s-6); } .contact-list li { display: flex; align-items: center; gap: var(--s-4); } .contact-list .icon { color: var(--primary); } .contact-list span { display: flex; flex-direction: column; line-height: 1.6; color: var(--text-strong); font-weight: 600; } .contact-list small { font-size: var(--fs-12); color: var(--text-muted); font-weight: 400; } .contact-submit { align-self: flex-start; } .form-success { color: var(--success); font-weight: 600; font-size: var(--fs-14); } /* ============================================================ Footer ============================================================ */ .site-footer { margin-top: var(--s-12); background: var(--secondary-deep); color: rgba(255, 255, 255, .78); } .footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.3fr; gap: var(--s-10); padding-block: var(--s-16); } .footer-about p { font-size: var(--fs-14); margin-block: var(--s-4); } .footer-logo .header-logo-text { color: var(--on-primary); } .footer-social { display: flex; gap: var(--s-3); } .footer-social a { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--r-12); background: rgba(255, 255, 255, .1); color: var(--on-primary); transition: background var(--t-fast), transform var(--t-fast); } .footer-social a:hover { background: var(--primary); transform: translateY(-3px); } .footer-col h3 { color: var(--on-primary); font-size: var(--fs-16); margin-bottom: var(--s-4); } .footer-col ul { display: flex; flex-direction: column; gap: var(--s-3); } .footer-col a { font-size: var(--fs-14); transition: color var(--t-fast); } .footer-col a:hover { color: var(--primary); } .footer-newsletter p { font-size: var(--fs-14); margin-bottom: var(--s-4); } .newsletter-form { display: flex; gap: var(--s-2); } .newsletter-form .input { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .18); color: var(--on-primary); } .newsletter-form .input::placeholder { color: rgba(255, 255, 255, .5); } .newsletter-form .input:focus { border-color: var(--primary); box-shadow: none; } .footer-bar { border-top: 1px solid rgba(255, 255, 255, .1); } .footer-bar-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); padding-block: var(--s-5); font-size: var(--fs-12); flex-wrap: wrap; } /* ============================================================ Mobile bottom nav + floating cart ============================================================ */ .bottom-nav { position: fixed; inset-inline: 0; bottom: 0; z-index: 110; display: none; grid-template-columns: repeat(5, 1fr); background: var(--surface); border-top: 1px solid var(--border); box-shadow: 0 -6px 20px rgba(17, 24, 39, .08); padding-bottom: env(safe-area-inset-bottom); } .bottom-nav-item { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: var(--s-2) 0 var(--s-3); font-size: var(--fs-12); color: var(--text-muted); min-height: 56px; justify-content: center; } .bottom-nav-item.is-active { color: var(--primary); font-weight: 700; } .bottom-nav-cart .cart-badge { top: 2px; inset-inline-end: calc(50% - 22px); } .floating-cart { position: fixed; bottom: calc(72px + env(safe-area-inset-bottom)); inset-inline: var(--s-4); z-index: 105; display: flex; align-items: center; justify-content: center; gap: var(--s-3); background: var(--primary); color: var(--on-primary); font-weight: 700; border-radius: var(--r-16); padding: var(--s-4); box-shadow: var(--shadow-lg); animation: slide-up .3s var(--ease); } @keyframes slide-up { from { opacity: 0; transform: translateY(16px); } } .floating-cart-count { display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 26px; background: rgba(255, 255, 255, .25); border-radius: var(--r-full); font-size: var(--fs-14); } @media (min-width: 768px) { .floating-cart { inset-inline: auto var(--s-8); bottom: var(--s-8); } } /* ============================================================ دکمه‌های شناورِ بازگشت به بالا و واتس‌اپ (سمتِ مخالفِ پیلِ سبد) ============================================================ */ .floating-buttons { position: fixed; inset-inline-start: var(--s-4); bottom: calc(var(--s-8) + env(safe-area-inset-bottom)); z-index: 105; display: flex; flex-direction: column; gap: var(--s-2); } .floating-btn { width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--r-full); border: none; cursor: pointer; box-shadow: var(--shadow-lg); transition: transform var(--t-fast), opacity var(--t-fast); color: #fff; } .floating-btn:hover { transform: translateY(-2px); } .floating-btn .icon { width: 22px; height: 22px; } .floating-top { background: var(--surface); color: var(--text-strong); border: 1px solid var(--border); } .floating-top[hidden] { display: none; } .floating-whatsapp { background: #25D366; } /* موبایل: دکمه‌ها بالاتر می‌نشینند تا روی نوارِ پایین نیایند. */ @media (max-width: 767px) { .floating-buttons { bottom: calc(72px + var(--s-3) + env(safe-area-inset-bottom)); } } /* ============================================================ Modal (login) ============================================================ */ .modal { position: fixed; inset: 0; z-index: 150; display: flex; align-items: center; justify-content: center; padding: var(--s-4); } .modal[hidden] { display: none; } .modal-backdrop { position: absolute; inset: 0; background: var(--overlay); backdrop-filter: blur(4px); animation: fade-in .25s var(--ease); } @keyframes fade-in { from { opacity: 0; } } .modal-card { position: relative; width: min(420px, 100%); background: var(--surface); border-radius: var(--r-24); padding: var(--s-10) var(--s-8) var(--s-8); box-shadow: var(--shadow-lg); animation: modal-in .3s var(--ease); } @keyframes modal-in { from { opacity: 0; transform: translateY(24px) scale(.97); } } .modal-close { position: absolute; top: var(--s-4); inset-inline-start: var(--s-4); display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; color: var(--text-muted); transition: background var(--t-fast), color var(--t-fast); } .modal-close:hover { background: var(--bg); color: var(--text-strong); } .modal-title { font-size: var(--fs-24); } .modal-sub { color: var(--text-muted); font-size: var(--fs-14); margin-block: var(--s-2) var(--s-6); } .login-step { display: flex; flex-direction: column; gap: var(--s-4); } .otp-input { text-align: center; letter-spacing: .5em; font-size: var(--fs-20); font-weight: 700; } .otp-meta { display: flex; align-items: center; justify-content: space-between; font-size: var(--fs-14); color: var(--text-muted); } .login-success { align-items: center; text-align: center; padding-block: var(--s-6); } .login-success .modal-sub { margin-bottom: 0; } .login-success-icon { display: flex; align-items: center; justify-content: center; width: 72px; height: 72px; border-radius: 50%; background: var(--success-tint); color: var(--success); animation: success-pop .4s var(--ease); } .login-success-icon .icon { width: 36px; height: 36px; stroke-width: 2.2; } @keyframes success-pop { from { transform: scale(.5); opacity: 0; } } /* Mobile drawer behaviour for the login modal */ @media (max-width: 640px) { .modal { align-items: flex-end; padding: 0; } .modal-card { width: 100%; border-radius: var(--r-24) var(--r-24) 0 0; animation: drawer-in .3s var(--ease); padding-bottom: calc(var(--s-8) + env(safe-area-inset-bottom)); } @keyframes drawer-in { from { transform: translateY(100%); } } } /* ============================================================ Cart page ============================================================ */ .steps { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; } .step { display: flex; align-items: center; gap: var(--s-2); font-size: var(--fs-14); font-weight: 600; color: var(--text-muted); } .step + .step::before { content: ''; width: 28px; height: 1.5px; background: var(--border); margin-inline-end: var(--s-2); } .step-num { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: var(--surface); border: 1.5px solid var(--border); font-size: var(--fs-12); flex: none; } .step.is-active { color: var(--text-strong); } .step.is-active .step-num { background: var(--primary); border-color: var(--primary); color: var(--on-primary); box-shadow: 0 4px 10px rgba(244, 114, 11, .3); } .cart-layout { display: grid; grid-template-columns: 1fr 360px; gap: var(--s-6); align-items: start; } .cart-main { display: flex; flex-direction: column; gap: var(--s-6); min-width: 0; } .cart-card { padding: var(--s-6); } .cart-card-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); margin-bottom: var(--s-4); } .cart-card-title { display: inline-flex; align-items: center; gap: var(--s-3); font-size: var(--fs-18); } .cart-rows { display: flex; flex-direction: column; } .cart-row { display: flex; align-items: center; gap: var(--s-4); padding-block: var(--s-4); border-bottom: 1px dashed var(--border); animation: fade-slide .25s var(--ease); } @keyframes fade-slide { from { opacity: 0; transform: translateY(8px); } } .cart-row:last-child { border-bottom: 0; padding-bottom: 0; } .cart-row:first-child { padding-top: 0; } .cart-row-img { width: 96px; height: 96px; border-radius: var(--r-12); object-fit: cover; background: var(--secondary-tint); flex: none; } .cart-row-info { display: flex; flex-direction: column; gap: var(--s-1); min-width: 0; } .cart-row-name { font-size: var(--fs-16); } .cart-row-desc { font-size: var(--fs-12); color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 40ch; } .cart-row-unit { font-size: var(--fs-12); color: var(--text-muted); } .cart-row-actions { display: flex; align-items: center; gap: var(--s-5); margin-inline-start: auto; flex: none; } .cart-row-total { font-weight: 800; color: var(--text-strong); min-width: 90px; } .cart-row-total small { font-size: var(--fs-12); font-weight: 500; color: var(--text-muted); } .cart-row-remove { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: var(--r-8); color: var(--text-muted); transition: color var(--t-fast), background var(--t-fast); } .cart-row-remove:hover { color: var(--error); background: var(--error-tint); } /* Add-on suggestions */ .addon-rail { display: flex; gap: var(--s-4); overflow-x: auto; padding-bottom: var(--s-2); scroll-snap-type: x proximity; scrollbar-width: thin; } .addon-card { display: flex; flex-direction: column; align-items: center; gap: var(--s-2); flex: 0 0 128px; scroll-snap-align: start; border: 1.5px solid var(--border); border-radius: var(--r-12); padding: var(--s-4) var(--s-3); text-align: center; transition: border-color var(--t-fast), box-shadow var(--t-fast); } .addon-card:hover { border-color: var(--primary); box-shadow: var(--shadow-sm); } .addon-card img { width: 64px; height: 64px; object-fit: contain; } .addon-name { font-size: var(--fs-12); font-weight: 600; color: var(--text-strong); min-height: 2.6em; display: flex; align-items: center; } .addon-price { font-size: var(--fs-12); color: var(--text-muted); } .addon-add { width: 34px; height: 34px; padding: 0; border-radius: var(--r-8); } /* Order summary */ .cart-aside { position: sticky; top: calc(var(--header-h) + var(--s-4)); } .cart-summary { padding: var(--s-6); display: flex; flex-direction: column; gap: var(--s-4); } /* نوارِ پیشرفتِ ارسالِ رایگان — بالایِ کدِ تخفیف. */ .free-delivery-text { font-size: var(--fs-13); font-weight: 600; color: var(--text-strong); margin-bottom: var(--s-2); } .progress { width: 100%; height: 8px; background: var(--bg); border-radius: var(--r-full); overflow: hidden; } .progress-fill { height: 100%; background: var(--primary); border-radius: inherit; transition: width var(--t-med); } .coupon-form { display: flex; gap: var(--s-2); } .coupon-form .input { padding-block: var(--s-2); font-size: var(--fs-14); } .coupon-form .btn { padding-block: var(--s-2); flex: none; } .summary-lines { display: flex; flex-direction: column; gap: var(--s-3); margin: 0; } .summary-line { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); font-size: var(--fs-14); color: var(--text-muted); } .summary-line dd { margin: 0; color: var(--text-strong); font-weight: 600; } .summary-muted { color: var(--text-muted) !important; font-weight: 400 !important; font-size: var(--fs-12); } .summary-line-discount dd { color: var(--success); } .summary-total { padding-top: var(--s-3); border-top: 1px dashed var(--border); font-weight: 700; color: var(--text-strong); } .summary-total dd { font-size: var(--fs-20); font-weight: 800; } .summary-total small { font-size: var(--fs-12); font-weight: 500; color: var(--text-muted); } .summary-note { display: flex; align-items: center; justify-content: center; gap: var(--s-2); font-size: var(--fs-12); color: var(--text-muted); } .cart-empty-state { margin-block: var(--s-8); } .empty-icon { display: flex; align-items: center; justify-content: center; width: 84px; height: 84px; border-radius: 50%; background: var(--primary-tint); color: var(--primary); } .empty-icon .icon { width: 40px; height: 40px; } .cart-empty-state h2 { font-size: var(--fs-24); } /* ============================================================ Checkout page ============================================================ */ .step.is-done { color: var(--success); } .step.is-done .step-num { background: var(--success); border-color: var(--success); color: var(--on-primary); } .step.is-done .step-num .icon { width: 14px; height: 14px; } .req { color: var(--error); } .field-optional { font-weight: 400; color: var(--text-muted); } .option-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-3); } .option-grid-2 { grid-template-columns: repeat(2, 1fr); } .option-card { position: relative; display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-4); border: 1.5px solid var(--border); border-radius: var(--r-12); cursor: pointer; transition: border-color var(--t-fast), background var(--t-fast), box-shadow var(--t-fast); } .option-card:hover { border-color: var(--primary); } .option-card:has(input:checked) { border-color: var(--primary); background: var(--primary-tint); box-shadow: var(--shadow-sm); } .option-card:has(input:focus-visible) { outline: 2px solid var(--primary); outline-offset: 2px; } .option-card input { position: absolute; opacity: 0; pointer-events: none; } .option-icon { display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: var(--r-12); background: var(--bg); color: var(--primary); flex: none; } .option-card:has(input:checked) .option-icon { background: var(--surface); } .option-title { font-size: var(--fs-14); font-weight: 700; color: var(--text-strong); } .option-desc { font-size: var(--fs-12); color: var(--text-muted); line-height: 1.7; } .table-field, .checkout-note { margin-top: var(--s-4); } .summary-items { display: flex; flex-direction: column; gap: var(--s-3); padding-bottom: var(--s-4); border-bottom: 1px dashed var(--border); } .summary-item { display: flex; align-items: center; gap: var(--s-3); font-size: var(--fs-14); } .summary-item img { width: 48px; height: 48px; border-radius: var(--r-8); object-fit: cover; background: var(--secondary-tint); flex: none; } .summary-item-name { color: var(--text-strong); font-weight: 600; min-width: 0; } .summary-item-name small { color: var(--text-muted); font-weight: 500; } .summary-item-price { margin-inline-start: auto; font-weight: 700; color: var(--text-strong); flex: none; } .checkout-form-error { text-align: center; } /* ============================================================ Account area (my-account / orders / wishlist) ============================================================ */ .account-layout { display: grid; grid-template-columns: 300px 1fr; gap: var(--s-6); align-items: start; } /* min-width: 0 حیاتی است: آیتمِ گرید به‌طورِ پیش‌فرض min-width: auto دارد و ریلِ افقیِ منو (که از عرضِ صفحه بلندتر است) ستون را به اندازه‌ی خودش باز می‌کرد و کلِ صفحه را در موبایل می‌کشید؛ با این محدودیت، ریل به‌جای کش‌آوردنِ صفحه داخلِ خودش اسکرول می‌شود. */ .account-aside { position: sticky; top: calc(var(--header-h) + var(--s-4)); min-width: 0; max-width: 100%; } .account-nav-card { min-width: 0; } .account-main { display: flex; flex-direction: column; gap: var(--s-6); min-width: 0; } .account-nav-card { padding: var(--s-5); } .account-user { display: flex; align-items: center; gap: var(--s-3); padding-bottom: var(--s-4); border-bottom: 1px dashed var(--border); } .account-avatar { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 50%; background: var(--primary-tint); color: var(--primary); font-size: var(--fs-20); font-weight: 800; flex: none; } .account-user-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .account-user-text strong { font-size: var(--fs-16); color: var(--text-strong); } .account-user-text small { font-size: var(--fs-12); color: var(--text-muted); } .account-nav { display: flex; flex-direction: column; gap: var(--s-1); margin-top: var(--s-4); } .account-nav-link { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3); border-radius: var(--r-12); font-size: var(--fs-14); font-weight: 600; color: var(--text); transition: background var(--t-fast), color var(--t-fast); } .account-nav-link:hover { background: var(--bg); color: var(--text-strong); } .account-nav-link.is-active { background: var(--primary-tint); color: var(--primary); } .account-nav-logout { color: var(--error); } .account-nav-logout:hover { background: var(--error-tint); color: var(--error); } .field-hint { display: flex; align-items: center; gap: var(--s-1); font-size: var(--fs-12); color: var(--text-muted); } [data-profile-form] .field-row { margin-bottom: var(--s-4); } .account-form-foot { display: flex; align-items: center; gap: var(--s-4); margin-top: var(--s-2); } /* Wallet */ .wallet-sub { margin-bottom: var(--s-5); } .wallet-balance { display: flex; align-items: center; gap: var(--s-4); flex-wrap: wrap; padding: var(--s-5); border-radius: var(--r-12); background: linear-gradient(135deg, var(--secondary) 0%, var(--secondary-deep) 100%); color: var(--on-primary); } .wallet-balance-icon { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: var(--r-12); background: rgba(255, 255, 255, .14); flex: none; } .wallet-balance-text { display: flex; flex-direction: column; gap: 2px; } .wallet-balance-text small { font-size: var(--fs-12); color: rgba(255, 255, 255, .75); } .wallet-balance-text strong { font-size: var(--fs-24); font-weight: 800; } .wallet-balance-text strong span { font-size: var(--fs-12); font-weight: 500; color: rgba(255, 255, 255, .75); } .wallet-charge { display: flex; gap: var(--s-2); margin-inline-start: auto; } .wallet-charge .input { width: 190px; padding-block: var(--s-2); font-size: var(--fs-14); border-color: transparent; } .wallet-charge .btn { padding-block: var(--s-2); flex: none; } .wallet-success { margin-top: var(--s-3); } .wallet-history-title { font-size: var(--fs-16); margin: var(--s-6) 0 var(--s-3); } .wallet-empty { display: flex; flex-direction: column; align-items: center; gap: var(--s-3); padding-block: var(--s-8); border: 1.5px dashed var(--border); border-radius: var(--r-12); font-size: var(--fs-14); color: var(--text-muted); } .wallet-empty .icon { width: 32px; height: 32px; } /* ============================================================ Orders page ============================================================ */ .orders-group-title { display: flex; align-items: center; gap: var(--s-2); font-size: var(--fs-18); margin-bottom: var(--s-4); } /* فهرستِ سفارش‌ها (صفحه‌ی سفارش‌ها + «آخرین سفارش‌ها»ی داشبورد). */ .order-list { display: flex; flex-direction: column; gap: var(--s-4); } .order-row-badges { display: flex; gap: var(--s-2); flex-wrap: wrap; } .orders-group + .orders-group { margin-top: var(--s-8); } .orders-group .order-card + .order-card { margin-top: var(--s-4); } /* بنرِ «در حال آماده‌سازی» بالای جزئیاتِ سفارشِ فعال */ .order-eta-banner { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-4) var(--s-5); margin-bottom: var(--s-5); font-weight: 700; color: var(--text-strong); } .order-eta-banner .order-eta { margin-inline-start: auto; } /* تایم‌لاینِ چندمرحله‌ایِ زنده (polling). */ .order-timeline-card { margin-bottom: var(--s-5); } .order-timeline { /* RTL: مرحلهٔ اول در بالا. با line عمودیِ چسبیده به نقاط. */ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-3); } .order-timeline-step { position: relative; display: flex; align-items: flex-start; gap: var(--s-3); padding-inline-start: var(--s-2); } /* خطِ عمودی بینِ نقاط — تا مرحلهٔ بعدی. */ .order-timeline-step:not(:last-child)::before { content: ""; position: absolute; inset-inline-start: 11px; top: 24px; bottom: calc(-1 * var(--s-3)); width: 2px; background: var(--border); } .order-timeline-dot { width: 22px; height: 22px; border-radius: var(--r-full); background: var(--bg); border: 2px solid var(--border); flex: none; margin-top: 2px; position: relative; z-index: 1; } .order-timeline-body { display: flex; flex-direction: column; gap: 2px; padding-top: 2px; } .order-timeline-name { font-size: var(--fs-14); font-weight: 700; color: var(--text-muted); } .order-timeline-at { font-size: var(--fs-12); color: var(--text-muted); opacity: .85; } /* انجام‌شده: نقطهٔ توپُرِ سبز و تیک درونِ آن. */ .order-timeline-step.is-done .order-timeline-dot { background: var(--primary); border-color: var(--primary); } .order-timeline-step.is-done .order-timeline-dot::after { content: ""; position: absolute; inset-inline-start: 6px; top: 3px; width: 5px; height: 9px; border: solid var(--on-primary); border-width: 0 2px 2px 0; transform: rotate(45deg); } .order-timeline-step.is-done .order-timeline-name { color: var(--text-strong); } /* جاری: نقطهٔ با هالهٔ پالس، رنگِ اصلی. */ .order-timeline-step.is-current .order-timeline-dot { background: var(--primary); border-color: var(--primary); box-shadow: 0 0 0 6px var(--primary-tint); } .order-timeline-step.is-current .order-timeline-name { color: var(--primary); } /* لغو. */ .order-timeline-step.is-canceled .order-timeline-dot { background: var(--danger, #dc2626); border-color: var(--danger, #dc2626); } .order-timeline-step.is-canceled::before { display: none; } .order-timeline-step.is-canceled .order-timeline-name { color: var(--danger, #dc2626); } /* حالتِ بارگذاریِ اولیه. */ .order-timeline-loading { display: flex; gap: var(--s-3); padding-block: var(--s-2); } /* صفحه‌ی جزئیاتِ سفارش */ .order-detail { display: grid; grid-template-columns: 1fr 340px; gap: var(--s-6); align-items: start; } .order-detail-main { padding: var(--s-6); } .order-detail-side { display: flex; flex-direction: column; gap: var(--s-4); min-width: 0; } .order-summary { padding: var(--s-5); } .order-items { display: flex; flex-direction: column; margin-top: var(--s-4); } .order-item { display: flex; align-items: flex-start; gap: var(--s-4); padding-block: var(--s-4); } .order-item + .order-item { border-top: 1px dashed var(--border); } .order-item-img { width: 56px; height: 56px; border-radius: var(--r-12); object-fit: cover; background: var(--secondary-tint); flex: none; } .order-item-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--s-1); } .order-item-name { font-weight: 700; color: var(--text-strong); } .order-item-name small { color: var(--text-muted); font-weight: 500; } .order-item-children { font-size: var(--fs-12); color: var(--text-muted); } .order-item-total { flex: none; font-weight: 700; color: var(--text-strong); display: flex; flex-direction: column; align-items: flex-end; line-height: 1.6; } .order-item-total small { font-size: var(--fs-12); font-weight: 500; color: var(--text-muted); } .order-item-total .price-old { font-size: var(--fs-12); } .order-note { margin-top: var(--s-4); padding: var(--s-4); background: var(--bg); border-radius: var(--r-12); font-size: var(--fs-13); color: var(--text); } /* خلاصه‌های کنارِ جزئیاتِ سفارش */ .summary-list { display: flex; flex-direction: column; gap: var(--s-2); margin-top: var(--s-3); } .summary-list > div { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); } .summary-list dt { font-size: var(--fs-13); color: var(--text-muted); flex: none; } .summary-list dd { font-size: var(--fs-14); font-weight: 700; color: var(--text-strong); text-align: end; } .summary-list dd.is-negative { color: var(--success); } .summary-list .summary-total { margin-top: var(--s-2); padding-top: var(--s-3); border-top: 1px solid var(--border); } .summary-list .summary-total dd { font-size: var(--fs-16); } /* زیرنویسِ افزودنی/اقلامِ کمبو در ردیف‌های فاکتور */ .summary-item-children { display: block; font-size: var(--fs-12); color: var(--text-muted); font-weight: 400; } .summary-item-price .price-old { display: block; font-size: var(--fs-12); text-align: end; } /* کاشی‌های خلاصه‌ی داشبورد */ .dash-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--s-4); } .dash-tile { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-5); min-width: 0; } .dash-tile-icon { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--r-12); background: var(--primary-tint); color: var(--primary); flex: none; } .dash-tile-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .dash-tile-body small { font-size: var(--fs-12); color: var(--text-muted); } .dash-tile-body strong { font-size: var(--fs-18); color: var(--text-strong); } .dash-tile-body strong small { font-size: var(--fs-12); font-weight: 500; } .dash-tile-cta { margin-inline-start: auto; padding: var(--s-1) var(--s-3); border: 1.5px solid var(--border); border-radius: 999px; font-size: var(--fs-12); font-weight: 700; color: var(--primary); flex: none; } /* کارتِ میان‌برِ پنل مدیریت در پنلِ مشتری — بالای «اطلاعات حساب». فقط برای کاربرانِ دارای نقشِ پنل رندر می‌شود. */ .admin-shortcut { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-5); border-color: var(--primary); background: var(--primary-tint); min-width: 0; } .admin-shortcut:hover { box-shadow: var(--shadow-md); } .admin-shortcut-icon { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--r-12); background: var(--primary); color: #fff; flex: none; } .admin-shortcut-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .admin-shortcut-body strong { font-size: var(--fs-16); color: var(--text-strong); } .admin-shortcut-body small { font-size: var(--fs-12); color: var(--text-muted); } .admin-shortcut-cta { display: inline-flex; align-items: center; gap: var(--s-1); margin-inline-start: auto; padding: var(--s-2) var(--s-4); border-radius: var(--r-full); background: var(--primary); color: #fff; font-size: var(--fs-14); font-weight: 700; flex: none; } @media (max-width: 640px) { .admin-shortcut { flex-wrap: wrap; } .admin-shortcut-cta { margin-inline-start: 0; width: 100%; justify-content: center; } } /* خلاصه‌ی کیف‌پول/اعتبار در داشبورد */ .wallet-total { font-size: var(--fs-18); font-weight: 800; color: var(--secondary); } .wallet-buckets { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--s-3); } .wallet-buckets div { display: flex; flex-direction: column; gap: var(--s-1); padding: var(--s-4); background: var(--bg); border-radius: var(--r-12); } .wallet-buckets dt { font-size: var(--fs-12); color: var(--text-muted); } .wallet-buckets dd { font-size: var(--fs-16); font-weight: 800; color: var(--text-strong); } .order-card { padding: var(--s-6); } .order-card-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); flex-wrap: wrap; margin-bottom: var(--s-5); } .order-eta { display: flex; align-items: center; gap: var(--s-2); font-size: var(--fs-14); color: var(--text-muted); } .order-eta [data-countdown] { font-weight: 800; color: var(--text-strong); font-variant-numeric: tabular-nums; } .order-facts { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--s-4); margin: 0 0 var(--s-5); padding: var(--s-4); background: var(--bg); border-radius: var(--r-12); } .order-fact dt { font-size: var(--fs-12); color: var(--text-muted); margin-bottom: 2px; } .order-fact dd { margin: 0; font-size: var(--fs-14); font-weight: 700; color: var(--text-strong); } .order-card-foot { display: flex; align-items: center; gap: var(--s-4); } .order-thumbs { display: flex; } .order-thumbs img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; border: 2px solid var(--surface); background: var(--secondary-tint); } .order-thumbs img + img { margin-inline-start: -12px; } .order-total { margin-inline-start: auto; font-size: var(--fs-18); font-weight: 800; color: var(--text-strong); } .order-total small { font-size: var(--fs-12); font-weight: 500; color: var(--text-muted); } [data-order-toggle] .icon { transition: transform var(--t-fast); } [data-order-toggle].is-open .icon { transform: rotate(180deg); } .order-invoice { margin-top: var(--s-5); padding-top: var(--s-5); border-top: 1px dashed var(--border); } .order-invoice-lines { display: flex; flex-direction: column; gap: var(--s-3); } /* ردیف‌های میانیِ فاکتور (تخفیف/مالیات/کرایه) */ .order-invoice-line { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); margin-top: var(--s-2); font-size: var(--fs-13); color: var(--text-muted); } .order-invoice-line .is-negative { color: var(--success); font-weight: 700; } .order-invoice-total { display: flex; align-items: center; justify-content: space-between; margin-top: var(--s-4); padding: var(--s-3) var(--s-4); background: var(--primary-tint); border-radius: var(--r-12); font-size: var(--fs-14); font-weight: 700; color: var(--text-strong); } .order-invoice-total small { font-size: var(--fs-12); font-weight: 500; color: var(--text-muted); } .orders-empty { display: flex; flex-direction: column; align-items: center; gap: var(--s-3); padding: var(--s-8); color: var(--text-muted); font-size: var(--fs-14); text-align: center; } .orders-empty .icon { width: 36px; height: 36px; } /* ============================================================ Wishlist page ============================================================ */ .wishlist-head { margin-bottom: 0; } .wishlist-head-actions { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; } .account-main .product-grid { grid-template-columns: repeat(3, 1fr); } /* ============================================================ Thank-you page ============================================================ */ .thankyou-card { max-width: 680px; margin-inline: auto; padding: var(--s-10) var(--s-8); display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--s-4); } .thankyou-icon { display: inline-flex; align-items: center; justify-content: center; width: 84px; height: 84px; border-radius: 50%; background: var(--success-tint); color: var(--success); } .thankyou-icon .icon { width: 44px; height: 44px; } .thankyou-icon.is-failed { background: var(--error-tint); color: var(--error); } /* فاکتورِ داخل صفحه‌ی تشکر: متنِ کارت وسط‌چین است ولی ردیف‌های اقلام نه. */ .thankyou-lines { text-align: start; margin-top: var(--s-5); width: 100%; } .thankyou-total { width: 100%; } .thankyou-title { font-size: var(--fs-24); } .thankyou-sub { color: var(--text-muted); } .thankyou-facts { grid-template-columns: repeat(3, 1fr); width: 100%; text-align: start; margin-bottom: 0; } .thankyou-eta { display: flex; flex-direction: column; align-items: center; gap: var(--s-2); width: 100%; padding: var(--s-5); border-radius: var(--r-12); background: linear-gradient(135deg, var(--secondary) 0%, var(--secondary-deep) 100%); color: var(--on-primary); } .thankyou-eta-label { display: flex; align-items: center; gap: var(--s-2); font-size: var(--fs-14); color: rgba(255, 255, 255, .8); } .thankyou-eta-timer { font-size: var(--fs-32); font-weight: 800; font-variant-numeric: tabular-nums; } .thankyou-actions { display: flex; justify-content: center; gap: var(--s-3); flex-wrap: wrap; margin-top: var(--s-2); } /* ---------- Tooltip ---------- */ [data-tooltip] { position: relative; } [data-tooltip]::after { content: attr(data-tooltip); position: absolute; bottom: calc(100% + 8px); right: 50%; translate: 50% 0; background: var(--ink); color: var(--on-primary); font-size: var(--fs-12); padding: var(--s-1) var(--s-3); border-radius: var(--r-8); white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity var(--t-fast); } [data-tooltip]:hover::after, [data-tooltip]:focus-visible::after { opacity: 1; } /* ---------- Skeleton ---------- */ .skeleton { background: linear-gradient(90deg, var(--border) 25%, var(--surface-2) 50%, var(--border) 75%); background-size: 200% 100%; animation: shimmer 1.4s infinite; border-radius: var(--r-8); } @keyframes shimmer { to { background-position: -200% 0; } } /* ============================================================ Responsive ============================================================ */ @media (max-width: 1024px) { .container { padding-inline: var(--s-6); } .section-title { font-size: var(--fs-24); } .hero-title { font-size: var(--fs-32); } .location-picker { display: none; } .product-grid { grid-template-columns: repeat(3, 1fr); } .offer-rail { grid-template-columns: repeat(3, 1fr); row-gap: var(--s-5); } .category-rail { grid-template-columns: repeat(4, 1fr); } .benefit-grid { grid-template-columns: repeat(2, 1fr); } .review-grid { grid-template-columns: repeat(2, 1fr); } .stats-grid { grid-template-columns: repeat(3, 1fr); row-gap: var(--s-5); } .app-panel { grid-template-columns: 1fr; padding: var(--s-8); } .app-mockup { order: -1; } .phone { width: 210px; } .footer-grid { grid-template-columns: 1fr 1fr; } .cart-layout { grid-template-columns: 1fr; } .cart-aside { position: static; } .account-layout { grid-template-columns: 1fr; } .account-aside { position: static; } .order-facts { grid-template-columns: repeat(3, 1fr); } /* از همین‌جا که چیدمانِ پنل تک‌ستونه می‌شود، منوی کنار هم باید ریلِ چیپِ افقی شود — قبلاً فقط ≤768 بود و در بازه‌ی ۷۶۹–۱۰۲۴ یک سایدبارِ عمودیِ تمام‌عرض همه‌چیز را کش می‌آورد. */ .account-nav { flex-direction: row; overflow-x: auto; padding-bottom: var(--s-1); scrollbar-width: none; gap: var(--s-2); margin-top: var(--s-3); scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; } .account-nav::-webkit-scrollbar { display: none; } .account-nav-link { flex: none; white-space: nowrap; border: 1.5px solid var(--border); border-radius: 999px; padding: var(--s-2) var(--s-4); font-size: var(--fs-13); scroll-snap-align: start; } .account-nav-link .icon { width: 18px; height: 18px; } .account-nav-link.is-active { border-color: var(--primary); } .account-nav-logout { border-color: var(--error-tint); } .account-nav-card { padding: var(--s-4); } .account-user { padding-bottom: var(--s-3); } .account-avatar { width: 40px; height: 40px; font-size: var(--fs-16); } .order-detail { grid-template-columns: 1fr; } } @media (max-width: 768px) { :root { --header-h: 64px; } body { padding-bottom: 72px; } /* room for bottom nav */ .header-search, .header-actions .btn-outline { display: none; } .header-actions { margin-inline-start: auto; } /* جست‌وجو روی موبایل یک دکمه است؛ نوار فقط با کلیک باز می‌شود. */ .header-search-toggle { display: inline-flex; } .header-search-mobile { display: none; } .header-search-mobile.is-open { display: block; } .header-logo img { width: 38px; height: 38px; } .section { padding-block: var(--s-8); } .section-head { margin-bottom: var(--s-6); } .hero-inner { grid-template-columns: 1fr; gap: var(--s-8); padding-block: var(--s-8); text-align: center; } .hero-copy { align-items: center; } .hero-title { font-size: var(--fs-24); } .hero-sub { font-size: var(--fs-16); } .hero-trust { justify-content: center; gap: var(--s-3); } .hero-media { max-width: 320px; } .hero-float-off { inset-inline-start: 0; } .hero-float-time { inset-inline-end: 0; } .stats { margin-top: 0; } .stats-grid { grid-template-columns: repeat(2, 1fr); padding: var(--s-5); } .stat dd { font-size: var(--fs-18); } .stat:last-child { grid-column: span 2; } /* Horizontal scroll rails on mobile. .product-grid عمداً اینجا نیست: کارت‌های محصول در صفحه‌ی نخست، علاقه‌مندی‌ها و منو باید **دقیقاً یک اندازه** باشند (شبکه‌ی دوستونیِ منو). قبلاً صفحه‌ی نخست ریلِ افقی با کارتِ ۲۶۰px بود و منو دوستونی، برای همین دو اندازه دیده می‌شد. */ .category-rail, .offer-rail, .review-grid { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: var(--s-4); padding-bottom: var(--s-3); margin-inline: calc(-1 * var(--s-6)); padding-inline: var(--s-6); scrollbar-width: none; } .category-rail::-webkit-scrollbar, .offer-rail::-webkit-scrollbar, .review-grid::-webkit-scrollbar { display: none; } .category-rail li { flex: none; scroll-snap-align: start; } .category-chip { width: 88px; padding: var(--s-1); } .category-chip-circle { width: 68px; height: 68px; } .category-chip-circle img { width: 36px; height: 36px; } .offer-card { flex: 0 0 180px; scroll-snap-align: start; } .review-card { flex: 0 0 300px; scroll-snap-align: start; } /* یک اندازه‌ی واحد برای همه‌ی فهرست‌های محصول (منو، صفحه‌ی نخست، علاقه‌مندی‌ها، مرتبط‌ها). grid-wrap دیگر لازم نیست ولی بی‌اثر است. */ /* .account-main .product-grid (علاقه‌مندی‌ها) اختصاصیت بالاتری دارد و بدونِ ذکرِ صریح، سه‌ستونی می‌ماند. */ .product-grid, .product-grid.grid-wrap, .account-main .product-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-4); overflow: visible; margin-inline: 0; padding-inline: 0; } .product-card { flex: none; } .product-body { padding: var(--s-3); } .product-name { font-size: var(--fs-16); } .product-desc { font-size: var(--fs-12); } .add-btn { width: 40px; height: 40px; } .product-footer { flex-wrap: wrap; } .page-head { padding-block: var(--s-5); } .page-title { font-size: var(--fs-24); } .menu-toolbar { gap: var(--s-4); padding: var(--s-3) var(--s-4); } .menu-toolbar-sort { margin-inline-start: 0; width: 100%; } .menu-toolbar-sort .sort-btn { width: 100%; justify-content: space-between; } /* Cart on mobile */ .step .step-label { display: none; } .step.is-active .step-label { display: inline; } .step + .step::before { width: 16px; } .cart-card { padding: var(--s-4); } .cart-row { flex-wrap: wrap; } .cart-row-img { width: 72px; height: 72px; } .cart-row-actions { width: 100%; margin-inline-start: 0; justify-content: space-between; gap: var(--s-3); } .cart-row-total { min-width: 0; } .cart-row-desc { max-width: none; white-space: normal; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; } /* Checkout on mobile: option tiles become horizontal rows */ .option-grid, .option-grid-2 { grid-template-columns: 1fr; } .option-card { flex-direction: row; align-items: center; column-gap: var(--s-4); flex-wrap: wrap; padding: var(--s-3) var(--s-4); } .option-card .option-desc { flex-basis: 100%; margin-inline-start: calc(42px + var(--s-4)); margin-top: calc(-1 * var(--s-1)); } /* چیپ‌ریلِ منوی پنل در بلاکِ ≤1024 است (همان‌جا که layout تک‌ستونه می‌شود). */ .wallet-charge { width: 100%; margin-inline-start: 0; } .wallet-charge .input { flex: 1; width: auto; } .order-facts { grid-template-columns: repeat(2, 1fr); } .order-card-foot { flex-wrap: wrap; } .order-row-meta { grid-template-columns: 1fr 1fr; } .order-row-actions .btn { width: 100%; } .thankyou-card { padding: var(--s-8) var(--s-5); } .thankyou-facts { grid-template-columns: 1fr 1fr; } .offers-panel { padding: var(--s-6); border-radius: var(--r-16); } .offers-head { flex-direction: column; align-items: flex-start; margin-bottom: var(--s-5); } .offer-rail { margin-inline: calc(-1 * var(--s-6)); padding-inline: var(--s-6); } .benefit-grid { grid-template-columns: 1fr 1fr; gap: var(--s-4); } .benefit-card { padding: var(--s-5) var(--s-4); } .branch-grid, .contact-grid { grid-template-columns: 1fr; } .contact-info, .contact-form, .branch-card, .branch-cta { padding: var(--s-6); } .field-row { grid-template-columns: 1fr; } .contact-submit { align-self: stretch; } .footer-grid { grid-template-columns: 1fr; gap: var(--s-8); padding-block: var(--s-10); } .footer-bar-inner { justify-content: center; text-align: center; } .site-footer { margin-bottom: 0; } .bottom-nav { display: grid; } } @media (max-width: 400px) { .product-card { flex-basis: 230px; } .hero-ctas .btn-lg { padding-inline: var(--s-5); } } /* ---------- Reduced motion ---------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } .js .reveal { opacity: 1; transform: none; } } /* ============================================================ Green-theme scoped component overrides. Everything below is prefixed :root[data-theme="green"] so the light theme is byte-for-byte unaffected. These rules only reassign colors that the token layer can't express on its own: • Generic .btn-primary becomes dark green (#193d3d). Buy-flow CTAs stay orange — they are identified by their stable data-* hooks. • Orange (#ffa600) is reserved for fills only. White-on-#ffa600 fails WCAG AA (~1.9:1), so every orange fill carries dark-green text, and every place that used --primary as TEXT/ICON on white is repointed to --secondary so small text stays readable (~9:1 on white). • The header is a dark-green band via --surface-glass, so its direct text children flip light; white header pills keep their own treatment. ============================================================ */ :root[data-theme="green"] { /* ---- A. Header dark band: light text on dark-green glass ---- */ .site-header { color: rgba(255, 255, 255, .92); } .site-header .header-logo-text, .site-header .location-picker, .site-header .location-picker-label, .site-header .location-picker-value { color: rgba(255, 255, 255, .92); } .site-header .location-picker:hover { background: rgba(255, 255, 255, .12); } /* White header pills (.header-search, .cart-btn, .btn-outline) keep their own dark-on-white treatment via .btn-outline / their rules. */ /* ---- B. Button role split ---- */ /* Generic primary → dark green. Buy-flow CTAs (data-* hooks) stay orange. */ .btn-primary:not([data-add]):not([data-quick-add]):not([data-addon-add]):not([data-checkout-btn]):not([data-place-order]) { background: var(--secondary); color: var(--on-primary); box-shadow: 0 4px 14px rgba(25, 61, 61, .22); } .btn-primary:not([data-add]):not([data-quick-add]):not([data-addon-add]):not([data-checkout-btn]):not([data-place-order]):hover { background: #2a5757; box-shadow: 0 6px 18px rgba(25, 61, 61, .3); } /* Orange CTAs: dark-green text for WCAG AA (~6.3:1). */ .btn-primary[data-add], .btn-primary[data-quick-add], .btn-primary[data-addon-add], .btn-primary[data-checkout-btn], .btn-primary[data-place-order] { color: var(--secondary); } /* ---- C. Secondary buttons → light green ---- */ .btn-secondary { background: #a7d396; color: var(--secondary); border-color: #a7d396; } .btn-secondary:hover { background: #94c584; border-color: #94c584; } /* ---- D. WCAG: dark text/icon on every orange fill ---- */ .cart-badge { color: var(--secondary); } /* keep white ring for separation */ .floating-cart { color: var(--secondary); } .step.is-active .step-num { color: var(--secondary); } .phone-cta { color: var(--secondary); } .qty-btn:hover { color: var(--secondary); } /* ---- E. Orange-as-text/icon on white → repoint to dark green ---- (orange #ffa600 on white ≈ 1.9:1 fails AA; dark green ≈ 9:1 passes) */ .btn-text, .btn-text:hover, .btn-outline:hover, .link:hover, .breadcrumb a:hover, .cart-btn:hover, .cart-pop-qty, .hero-title em, .hero-float-time .icon, .category-chip:hover .category-chip-circle { color: var(--secondary); } .btn-outline:hover, .cart-btn:hover, .category-chip:hover .category-chip-circle, .address-item:hover, .addon-card:hover, .option-card:hover, .option-card:has(input:checked) { border-color: var(--secondary); } .qty-btn, .empty-icon, .option-icon, .branch-icon, .benefit-icon, .account-avatar, .branch-cta, .app-features .icon, .contact-list .icon { color: var(--secondary); } .footer-col a:hover { color: var(--primary); } /* orange on dark footer = fine */ /* ---- F. Sale/discount badge → orange (was red --error) ---- */ .badge-off { background: var(--primary); color: var(--secondary); } /* ---- G. Active category chip → light green (was orange) ---- */ .category-chip.is-active .category-chip-circle { background: #a7d396; border-color: #a7d396; box-shadow: 0 6px 16px rgba(167, 211, 150, .4); } .category-chip.is-active .category-chip-name, .category-chip.is-active .category-chip-circle .icon { color: var(--secondary); } /* ---- H. Active pagination → dark green (was orange) ---- */ .pagination-item a:hover { border-color: var(--secondary); color: var(--secondary); } .pagination-item.is-active span { background: var(--secondary); border-color: var(--secondary); color: var(--on-primary); } /* ---- I. Active bottom-nav item → dark green (was orange) ---- */ .bottom-nav-item.is-active { color: var(--secondary); } /* ---- J. Favorite button on cards → white glass (not dark header glass) ---- */ .fav-btn { background: rgba(255, 255, 255, .92); color: var(--text-muted); } /* ---- K. Focus ring → dark green (primary focus; orange reserved) ---- */ .input:focus, .header-search:focus-within { border-color: var(--secondary); box-shadow: 0 0 0 4px rgba(25, 61, 61, .12); } .input.is-invalid:focus { box-shadow: 0 0 0 4px var(--error-tint); } /* ---- L. Controls → dark green (checkbox/radio custom style) ---- */ input[type="checkbox"]:hover, input[type="radio"]:hover { border-color: var(--secondary); } input[type="checkbox"]:checked { background: var(--secondary); border-color: var(--secondary); } input[type="radio"]:checked { border-color: var(--secondary); } input[type="radio"]::before { background: var(--secondary); } /* ---- M. Misc orange-on-white glows → dark-green ---- */ .step.is-active .step-num { box-shadow: 0 4px 10px rgba(25, 61, 61, .22); } } /* ============================================================ Green-dark theme — immersive dark-green skin. Like [data-theme="green"] but with a full dark-green page and dark-green cards/surfaces instead of white. Orange (#ffa600) stays the accent for buy-flow CTAs / badges / cart-count; light green (#a7d396) tints the chips. Component overrides below reuse the same role rules as the green theme (button split, WCAG orange-on-dark) plus dark-surface-specific tweaks. ============================================================ */ :root[data-theme="green-dark"] { --bg: #193d3d; --surface: #1f4a4a; --surface-2: #245050; --surface-glass: rgba(16, 38, 38, .94); --gradient-top: #1f4a4a; --primary: #ffa600; /* orange accent */ --primary-hover: #e59400; --primary-tint: rgba(255, 166, 0, .16); --secondary: #a7d396; /* light green — used as the "accent text" */ --secondary-deep: #102626; --secondary-tint: #245050; --text-strong: #f1f7f3; /* near-white headings / prices */ --text: #cdd8d2; /* body text (AA on dark surface) */ --text-muted: #93a8a0; /* muted (AA on dark surface) */ --border: #2f5e5e; /* subtle green hairline on dark */ --success: #5ec47f; --success-tint: rgba(94, 196, 127, .16); --error: #f08a7e; --error-tint: rgba(240, 138, 126, .16); --overlay: rgba(0, 0, 0, .6); --input-bg: #245050; /* Scrollbar: light-green thumb on the dark-green surface. */ --scroll-thumb: rgba(167, 211, 150, .38); --scroll-thumb-hover: rgba(167, 211, 150, .58); /* --ink / --on-ink stay dark-on-light: always-dark chrome. */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, .35), 0 1px 4px rgba(0, 0, 0, .28); --shadow-md: 0 4px 12px rgba(0, 0, 0, .42), 0 2px 4px rgba(0, 0, 0, .3); --shadow-lg: 0 16px 40px rgba(0, 0, 0, .5), 0 4px 12px rgba(0, 0, 0, .32); /* ---- Header dark band: light text ---- */ .site-header { color: rgba(255, 255, 255, .92); } .site-header .header-logo-text, .site-header .location-picker, .site-header .location-picker-label, .site-header .location-picker-value { color: rgba(255, 255, 255, .92); } .site-header .location-picker:hover { background: rgba(255, 255, 255, .12); } /* ---- Button role split (same hooks as green theme) ---- */ /* Generic primary → dark, slightly deeper than surface. */ .btn-primary:not([data-add]):not([data-quick-add]):not([data-addon-add]):not([data-checkout-btn]):not([data-place-order]) { background: var(--secondary-deep); color: var(--on-primary); box-shadow: 0 4px 14px rgba(0, 0, 0, .3); } .btn-primary:not([data-add]):not([data-quick-add]):not([data-addon-add]):not([data-checkout-btn]):not([data-place-order]):hover { background: #0a1c1c; box-shadow: 0 6px 18px rgba(0, 0, 0, .38); } /* Orange CTAs: dark text on orange (AA on #ffa600). */ .btn-primary[data-add], .btn-primary[data-quick-add], .btn-primary[data-addon-add], .btn-primary[data-checkout-btn], .btn-primary[data-place-order] { color: #193d3d; } /* ---- Secondary buttons → light green ---- */ .btn-secondary { background: var(--secondary); color: var(--secondary-deep); border-color: var(--secondary); } .btn-secondary:hover { background: #94c584; border-color: #94c584; } /* ---- Outline / text / link buttons readable on dark ---- */ .btn-outline { background: var(--surface); color: var(--text-strong); border-color: var(--border); } .btn-outline:hover { border-color: var(--secondary); color: var(--secondary); } .btn-text, .btn-text:hover, .link:hover, .breadcrumb a:hover { color: var(--secondary); } /* ---- WCAG: dark text/icon on orange fills; light icons elsewhere ---- */ .cart-badge { color: #193d3d; } .floating-cart { color: #193d3d; } .step.is-active .step-num { color: #193d3d; box-shadow: 0 4px 10px rgba(255, 166, 0, .3); } .phone-cta { color: #193d3d; } .qty-btn { background: var(--surface-2); color: var(--secondary); } .qty-btn:hover { background: var(--primary); color: #193d3d; } .cart-pop-qty { color: var(--primary); } /* ---- Dark-surface pills & icons ---- */ .cart-btn { background: var(--surface-2); border-color: var(--border); color: var(--text-strong); } .cart-btn:hover { border-color: var(--secondary); color: var(--secondary); } .header-search { background: var(--surface-2); border-color: var(--border); color: var(--text-muted); } .header-search-input { color: var(--text-strong); } .fav-btn { background: rgba(255, 255, 255, .08); color: var(--text-muted); } /* ---- Active category chip → light green (matches dark surface) ---- */ .category-chip:hover .category-chip-circle { border-color: var(--secondary); } .category-chip.is-active .category-chip-circle { background: var(--secondary); border-color: var(--secondary); box-shadow: 0 6px 16px rgba(167, 211, 150, .3); } .category-chip.is-active .category-chip-name, .category-chip.is-active .category-chip-circle .icon { color: var(--secondary-deep); } /* ---- Sale/discount badge → orange ---- */ .badge-off { background: var(--primary); color: #193d3d; } .badge-muted { background: var(--surface-2); color: var(--text-muted); border-color: var(--border); } /* ---- Pagination → light green accent on dark ---- */ .pagination-item a:hover { border-color: var(--secondary); color: var(--secondary); } .pagination-item.is-active span { background: var(--secondary); border-color: var(--secondary); color: var(--secondary-deep); } /* ---- Bottom nav: dark surface, light-green active ---- */ .bottom-nav { background: var(--surface); border-top-color: var(--border); } .bottom-nav-item { color: var(--text-muted); } .bottom-nav-item.is-active { color: var(--secondary); } /* ---- Footer: deepest dark green; orange hover ---- */ .footer-col a:hover { color: var(--primary); } /* ---- Focus ring → light green on dark ---- */ .input:focus, .header-search:focus-within { border-color: var(--secondary); box-shadow: 0 0 0 4px rgba(167, 211, 150, .18); } .input.is-invalid:focus { box-shadow: 0 0 0 4px var(--error-tint); } /* ---- Controls → light green (checkbox/radio custom style) ---- */ input[type="checkbox"]:hover, input[type="radio"]:hover { border-color: var(--secondary); } input[type="checkbox"]:checked { background: var(--secondary); border-color: var(--secondary); } input[type="radio"]:checked { border-color: var(--secondary); } input[type="radio"]::before { background: var(--secondary); } /* ---- Borders on interactive cards → light green on hover ---- */ .address-item:hover, .addon-card:hover, .option-card:hover, .option-card:has(input:checked) { border-color: var(--secondary); } }