/* ووموو — قواعد پایه */ /* توکن‌ها در tokens.css. این فایل بعد از آن بارگذاری می‌شود. */ /* هیچ مقدار رنگ، فاصله یا شعاعی مستقیم نوشته نمی‌شود — فقط var(--...) */ *{box-sizing:border-box} html,body{direction:rtl} /* هیچ عنصری نباید صفحه را به پهلو بکشد. یک نوار سرریز روی موبایل فقط «کمی بریدگی» نیست: کل سند به پهلو می‌رود و عناصرِ ثابتِ هدر — از جمله دکمه‌ی منو — از کادر بیرون می‌افتند و دیگر قابل لمس نیستند. clip نه hidden: hidden روی body یک زمینه‌ی اسکرول تازه می‌سازد و position:sticky داخلش از کار می‌افتد. */ body{overflow-x:clip} body{ background:var(--page); color:var(--ink); font-family:var(--fa); font-weight:400; font-size:var(--fs-body); line-height:1.7; } /* تیترها — هر سه وزن ۵۰۰ */ h1,h2,h3{font-weight:500} h1{font-size:var(--fs-title);line-height:1.1;letter-spacing:-.01em} h2{font-size:var(--fs-card);line-height:1.15;letter-spacing:-.01em} h3{font-size:var(--fs-body)} /* تیتر غول — صفحه اصلی */ .giant{font-size:var(--fs-giant);font-weight:500;line-height:1.22;letter-spacing:-.01em} /* برچسب فنی — کد سیستم، ابعاد، شماره صفحه، برچسب گزینه‌ها */ .mono{ font-family:var(--fa); font-size:var(--fs-micro); text-transform:uppercase; letter-spacing:.2em; color:var(--muted); direction:ltr; unicode-bidi:isolate; /* ————— جعبه به اندازه‌ی متن، نه به اندازه‌ی ستون. بدون این دو خط، برچسب وقتی فرزندِ فلکسِ ستونی می‌شد (یعنی تقریباً همه‌جا: فوتر، کارت محصول، سرصفحه‌ها) کشیده می‌شد و تمام عرض را می‌گرفت؛ بعد direction:ltr متن را به لبه‌ی چپ می‌چسباند در حالی که بقیه‌ی ستون راست‌چین بود. در فوتر این یعنی ۲۲۰ پیکسل فاصله بین عنوانِ ستون و لینک‌های خودش. حالا جعبه جمع می‌شود و در جهت سند (راست) می‌نشیند. */ width:fit-content; align-self:flex-start; } /* برچسب فنی — شماره بخش، برچسب صفحه، میکروکاپی. همان .mono با نمایش درون‌خطی؛ در همه صفحات لازم است، نه فقط صفحه اصلی. */ .label{ font-family:var(--fa); font-size:var(--fs-micro); text-transform:uppercase; letter-spacing:.2em; color:var(--muted); direction:ltr; unicode-bidi:isolate; display:inline-block; /* دلیلش بالا، در .mono، نوشته شده */ width:fit-content; align-self:flex-start; } /* ————————————————————————————— برچسبِ تماماً فارسی فاصله‌ی حرفیِ ۰٫۲em و حروف‌بزرگ برای کدِ لاتین («VM-DIEGO»، «SCROLL») درست‌اند و باید بمانند. روی فارسی هیچ‌کدام کار نمی‌کنند: uppercase بی‌اثر است و tracking ریتم خط پیوسته را باز می‌کند و کلمه را شل نشان می‌دهد. این‌ها جاهایی‌اند که متنِ برچسب همیشه فارسیِ خالی است. برچسب‌های ترکیبی («001 — یک سیستم») عمداً اینجا نیستند: آن‌ها به direction:ltr نیاز دارند تا عدد اولِ خط بماند. */ .foot-col > .label, .foot-trust > .label, .page-head > .label, .list-head > .label, .gcard > .label, .vomovo-form .label, .empty-note + .label{ direction:rtl; letter-spacing:0; text-transform:none; } a{color:inherit;text-decoration:none} /* پیوند پرش — همه صفحات */ .skip{position:absolute;right:-9999px;top:var(--s4);z-index:99; background:var(--ink);color:var(--page);padding:var(--s3) var(--s5);border-radius:var(--r-full)} .skip:focus{right:var(--s4)} /* منوی بالا — روی همه صفحات ثابت است، بدون پس‌زمینه. اینجا حالت پیش‌فرض (رنگ ثابت). صفحه اصلی در home.css با mix-blend-mode جلوه‌ی خاص خودش را اضافه می‌کند، چون پشت هدر آن‌جا مدام عوض می‌شود (ویدیو، رنگ‌های مختلف)؛ صفحات ایستا فقط یک زمینه ثابت دارند و به آن ترفند نیازی ندارند. */ /* سه ستون: برند (شروع) — منو (وسط) — ابزارها (پایان). گرید جهت سند را رعایت می‌کند، پس در rtl ستون اول خودش راست می‌نشیند و لازم نیست چیزی دستی برعکس شود. */ .site-head{position:fixed;inset:0 0 auto 0;z-index:60; display:grid;grid-template-columns:1fr auto 1fr;align-items:center; padding:var(--s5) clamp(var(--s4),3.2vw,var(--s7))} .brand{justify-self:start;display:flex;align-items:center;gap:var(--s3); font-family:var(--fa);font-weight:500;font-size:var(--fs-micro); letter-spacing:.42em;direction:ltr;color:var(--ink)} .brand-mono{display:block;width:var(--s5);height:calc(var(--s5) * .74); background:currentColor; -webkit-mask:var(--mark) center/contain no-repeat; mask:var(--mark) center/contain no-repeat} .site-nav-center{justify-self:center} .nav-list{display:flex;gap:var(--s6);list-style:none;margin:0;padding:0} .nav-list a{font-size:var(--fs-micro);color:var(--muted);transition:color var(--t-fast) var(--e)} .nav-list a:hover{color:var(--ink)} .site-tools{justify-self:end;display:flex;align-items:center;gap:var(--s3)} .tswitch{display:flex;border:var(--hair) solid var(--gline);border-radius:var(--r-full);overflow:hidden} .tswitch button{background:none;border:0;cursor:pointer; font-family:var(--fa);font-size:var(--fs-micro);letter-spacing:.2em;direction:ltr; color:var(--muted);padding:var(--s2) var(--s3);transition:color var(--t-fast) var(--e)} .tswitch button.on{color:var(--ink)} /* آیکن‌های جستجو، سبد، حساب — از زبان فرم برند (دایره و قوس)، نه آیکن آماده. box-sizing:content-box محل لمس را بزرگ می‌کند بدون اینکه بصری ضخیم‌تر به نظر برسد. */ .tool-btn{display:flex;align-items:center;justify-content:center; width:var(--s5);height:var(--s5);padding:var(--s2);box-sizing:content-box; background:none;border:0;cursor:pointer;color:var(--muted); transition:color var(--t-fast) var(--e)} .tool-btn:hover{color:var(--ink)} /* شمارنده سبد — نقطه‌ی ریز روی آیکن، با رنگ تأکیدی. خالی که باشد اصلاً دیده نمی‌شود. */ .cart-btn{position:relative} .cart-count{position:absolute;top:0;inset-inline-end:0;z-index:2; display:grid;place-items:center;min-width:16px;height:16px;padding:0 4px; border-radius:var(--r-full); background:var(--signal);color:var(--on-signal); font-family:var(--fa);font-size:10px;line-height:1; direction:ltr;unicode-bidi:isolate;font-variant-numeric:tabular-nums; pointer-events:none} .cart-count.is-empty{display:none} .tool-btn svg{width:100%;height:100%;fill:none;stroke:currentColor; stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round} .nav-burger{display:none;flex-direction:column;justify-content:center;gap:5px; width:var(--s6);height:var(--s6);background:none;border:0;cursor:pointer; padding:var(--s2);box-sizing:content-box} .nav-burger span{display:block;width:100%;height:1.5px;background:currentColor; transition:transform var(--t-fast) var(--e),opacity var(--t-fast) var(--e)} .nav-burger[aria-expanded="true"] span:first-child{transform:translateY(3.25px) rotate(45deg)} .nav-burger[aria-expanded="true"] span:last-child{transform:translateY(-3.25px) rotate(-45deg)} /* پنل جستجو — کشویی زیر هدر، با کلیک روی آیکن ذره‌بین */ .search-panel{position:fixed;inset:0 0 auto 0;z-index:59; padding:calc(var(--s9) + var(--s2)) clamp(var(--s4),3.2vw,var(--s7)) var(--s4); background:var(--glass-solid);border-bottom:var(--hair) solid var(--gline)} .search-panel[hidden]{display:none} .search-panel form{display:flex;gap:var(--s3);max-width:480px;margin-inline:auto} .search-panel input{flex:1;min-width:0;font-family:var(--fa);font-size:var(--fs-body-s);color:var(--ink); background:none;border:var(--hair) solid var(--gline);border-radius:var(--r-full); padding:var(--s2) var(--s4)} .search-panel input:focus{border-color:var(--ink)} .search-panel button{display:flex;align-items:center;justify-content:center;flex-shrink:0; width:var(--s6);height:var(--s6);border-radius:50%;border:var(--hair) solid var(--gline); background:none;color:var(--ink);cursor:pointer} .search-panel button svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.4} /* ————————————————————————————— زیرمنو «محصولات» دسته‌هایش را زیر خودش باز می‌کند. پنل شیشه‌ای است — شیشه برای کنترل و اطلاعات مجاز است — با همان شعاع ۱۸ زبانِ فرم. بدون جاوااسکریپت: هاور برای موس، focus-within برای کیبورد. اگر هیچ‌کدام کار نکرد، خودِ «محصولات» به فهرست کامل می‌رود، پس هیچ دسته‌ای از دسترس خارج نمی‌شود. */ .nav-list > li{position:relative} .sub-menu{ position:absolute;z-index:60; top:100%;inset-inline-start:0; min-width:12rem; margin:0;padding:var(--s3) 0; list-style:none; background:var(--glass-solid); border:var(--hair) solid var(--gline); border-radius:var(--r-card); box-shadow:0 26px 70px -34px var(--shadow); opacity:0;visibility:hidden; transform:translateY(var(--s2)); transition:opacity var(--t-fast) var(--e), visibility var(--t-fast) var(--e), transform var(--t-fast) var(--e)} .nav-list > li:hover > .sub-menu, .nav-list > li:focus-within > .sub-menu{ opacity:1;visibility:visible;transform:translateY(0)} .sub-menu a{ display:block; padding:var(--s2) var(--s5); font-size:var(--fs-body-s); white-space:nowrap} @media (max-width:820px){ .nav-burger{display:flex;color:var(--ink)} .is-home .nav-burger{color:var(--mod-white)} /* پیش‌فرض: بسته. با کلیک روی همبرگر پنل کشویی زیر هدر باز می‌شود */ .nav-list{position:fixed;inset:0 0 auto 0;z-index:55; flex-direction:column;gap:0; background:var(--glass-solid);border-bottom:var(--hair) solid var(--gline); padding:calc(var(--s9) + var(--s4)) clamp(var(--s4),3.2vw,var(--s7)) var(--s5); transform:translateY(-100%);opacity:0;visibility:hidden; transition:transform var(--t-mid) var(--e),opacity var(--t-mid) var(--e),visibility var(--t-mid) var(--e)} .nav-list.open{transform:translateY(0);opacity:1;visibility:visible} .nav-list > li{border-top:var(--hair) solid var(--gline)} .nav-list > li:first-child{border-top:0} .nav-list a{display:block;padding:var(--s4) 0;font-size:var(--fs-body-s);color:var(--ink)} /* روی موبایل پنل کشویی معنی ندارد — زیرمنو باز و تورفته، داخل همان فهرست همبرگر می‌نشیند. */ .sub-menu{ position:static; opacity:1;visibility:visible;transform:none; min-width:0;padding:0 0 var(--s3); background:none;border:0;border-radius:0;box-shadow:none} .sub-menu li{border-top:0} .sub-menu a{ padding:var(--s2) 0; padding-inline-start:var(--s4); color:var(--muted);font-size:var(--fs-body-s)} /* روی موبایل جای منوی وسط را ابزارها می‌گیرند؛ همبرگر خودش نشان‌دهنده منوست، پس ستون وسط خالی می‌ماند. display:contents نه none: خودِ