/* ========================================================================== Design tokens — پالت مشکی / طلایی / سفید / خاکستری ========================================================================== */ :root{ --bg: #0a0a0b; --bg-soft: #111113; --surface: #16161a; --surface-2: #1d1d21; --line: rgba(201,162,75,.16); --line-strong: rgba(201,162,75,.34); --gold: #c9a24b; --gold-bright: #eccd7c; --gold-dim: #8a6f2f; --white: #f6f5f2; --gray-100: #cfcdc7; --gray-300: #9b9a97; --gray-500: #6a6a6d; --shadow-gold: 0 20px 60px -20px rgba(201,162,75,.35); --radius: 14px; --radius-lg: 22px; --ff: 'Vazirmatn', Tahoma, sans-serif; } *{margin:0;padding:0;box-sizing:border-box;} html{scroll-behavior:smooth;} body{ font-family:var(--ff); background:var(--bg); color:var(--white); line-height:1.75; overflow-x:hidden; } a{text-decoration:none;color:inherit;} ul{list-style:none;} img,svg{display:block;max-width:100%;} button{font-family:inherit;cursor:pointer;} input,select,textarea{font-family:inherit;} /* ---------- گام ۹: کراس‌بروزر/کراس‌دیوایس ---------- حذف فلاش خاکستری هنگام تپ روی لینک/دکمه در کروم اندروید و سامسونگ اینترنت، و غیرفعال‌کردن تاخیر ۳۰۰ میلی‌ثانیه‌ای تشخیص دابل‌تپ روی مرورگرهای قدیمی‌تر موبایل (تاثیری روی زوم با دو انگشت ندارد چون فقط روی عناصر تعاملی اعمال شده، نه کل صفحه). */ a,button,.cat-tab,.banner-nav,.banner-dot,.model-card,input[type="submit"]{ -webkit-tap-highlight-color:transparent; touch-action:manipulation; } /* ظاهر یکدست select در همه مرورگرها (Safari/Firefox پیکان پیش‌فرض متفاوتی دارند) */ select{ -webkit-appearance:none; -moz-appearance:none; appearance:none; background-image:url("data:image/svg+xml;utf8,"); background-repeat:no-repeat; background-position:left 14px center; background-size:16px; padding-left:38px; } /* بعضی مرورگرها (سافاری/آیفون، Edge قدیمی) با وجود appearance:none باز هم فلش پیش‌فرض خودشان را پشتِ آیکون بالا رندر می‌کنند؛ این قانون همان فلشِ داخلیِ مرورگر را به‌طور کامل حذف می‌کند تا فقط همان یک فلش سفارشی دیده شود. */ select::-ms-expand{display:none;} .container{max-width:1180px;margin:0 auto;padding:0 24px;} .eyebrow{ display:inline-flex;align-items:center;gap:8px; font-size:.78rem;font-weight:700;letter-spacing:.03em; color:var(--gold-bright); border:1px solid var(--line-strong); padding:6px 16px;border-radius:999px; background:rgba(201,162,75,.06); } .eyebrow::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--gold);box-shadow:0 0 12px var(--gold);} /* focus visibility */ a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{ outline:2px solid var(--gold-bright); outline-offset:3px; border-radius:6px; } @media (prefers-reduced-motion: reduce){ *{animation-duration:.001ms !important; transition-duration:.001ms !important;} } /* ========================================================================== Header ========================================================================== */ header{ position:fixed; top:0; right:0; left:0; z-index:1000; padding:16px 0; background:rgba(10,10,11,.72); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-bottom:1px solid var(--line); transition:background .3s ease, padding .3s ease; } header .inner{display:flex;align-items:center;justify-content:space-between;gap:20px;} .logo-container{display:flex;align-items:center;gap:10px;font-size:1.25rem;font-weight:800;color:var(--white);text-decoration:none;} .logo-icon{width:auto;height:38px;flex:none;object-fit:contain;} .logo-container b{color:var(--gold-bright);font-weight:900;} /* لوگو در دارک‌مود همان نسخه طلایی، در لایت‌مود نسخه آبی */ .logo-icon-light{display:none;} html[data-theme="light"] .logo-icon-dark{display:none;} html[data-theme="light"] .logo-icon-light{display:block;} nav.desktop-nav{display:flex;} .nav-links{display:flex;gap:34px;} .nav-links a{ font-size:.92rem;font-weight:600;color:var(--gray-100); position:relative; padding:6px 0; } .nav-links a::after{ content:'';position:absolute;right:0;bottom:0;width:0;height:1.5px;background:var(--gold); transition:width .25s ease; } .nav-links a:hover{color:var(--white);} .nav-links a:hover::after{width:100%;} .header-actions{display:flex;align-items:center;gap:14px;} .login-btn{ display:flex;align-items:center;gap:8px; background:linear-gradient(135deg,var(--gold-bright),var(--gold)); color:#161207; font-weight:800; font-size:.88rem; padding:11px 22px;border-radius:999px; box-shadow:0 8px 22px -6px rgba(201,162,75,.55); transition:transform .25s ease, box-shadow .25s ease; } .login-btn:hover{transform:translateY(-2px);box-shadow:0 12px 28px -6px rgba(201,162,75,.7);} .login-btn svg{width:16px;height:16px;fill:#161207;} /* گام ۴ — آواتار کوچک به‌جای آیکون عمومی در دکمه‌ی «پنل کاربری»/«پنل مدیریت» هدر */ .login-btn-with-avatar{padding-right:8px;} .login-btn-with-avatar .pm-avatar-circle{width:26px;height:26px;border-color:rgba(22,18,7,.25);} .login-btn-with-avatar .pm-avatar-default{fill:#161207;} html[data-theme="light"] .login-btn-with-avatar .pm-avatar-circle{border-color:rgba(255,255,255,.5);} html[data-theme="light"] .login-btn-with-avatar .pm-avatar-default{fill:#ffffff;} @media (max-width:900px){.login-btn-with-avatar .pm-avatar-circle{width:22px;height:22px;}} .menu-toggle{ display:none; flex-direction:column; gap:5px; background:none; border:none; padding:6px; } .menu-toggle span{width:24px;height:2px;background:var(--white);border-radius:2px;transition:.25s;} .mobile-nav{ position:fixed; inset:0; top:64px; z-index:999; background:rgba(8,8,9,.98); backdrop-filter:blur(10px); display:flex; flex-direction:column; padding:28px 24px; gap:6px; transform:translateY(-12px); opacity:0; visibility:hidden; transition:opacity .25s ease, transform .25s ease, visibility .25s; } .mobile-nav.open{opacity:1; transform:translateY(0); visibility:visible;} .mobile-nav a{ padding:16px 6px; font-size:1.05rem; font-weight:700; color:var(--white); border-bottom:1px solid var(--line); } .mobile-nav a:last-child{border-bottom:none;} /* ---- ریسپانسیو واقعی هدر: زیر این عرض، منوی دسکتاپ جمع و همبرگر ظاهر می‌شود ---- نکته مهم: این کوئری بر اساس عرض واقعی صفحه (نه جهت‌گیری گوشی) کار می‌کند، بنابراین چه گوشی عمودی باشد چه افقی، اگر عرض کم باشد هدر به‌درستی جمع می‌شود. */ @media (max-width:900px){ header{padding:12px 0;} header .inner{gap:10px;} nav.desktop-nav{display:none;} .menu-toggle{display:flex;} .login-btn{padding:10px 14px;} .login-btn span{display:none;} .login-btn svg{width:18px;height:18px;} } @media (max-width:400px){ .container{padding:0 14px;} .logo-container{font-size:1.05rem;} .logo-icon{height:30px;} } /* ========================================================================== Hero ========================================================================== */ /* — hero-stack: پوسته‌ی مشترک دو بخشِ هیرو (کارتخوان + معرفی برند). قبلاً هر کدام از این دو بخش پس‌زمینه‌ی خودش را جدا می‌کشید (گرادیانت + نقطه‌چین)، در نتیجه دقیقاً سرِ مرز بین‌شان یک لبه‌ی محسوس/مستطیلی دیده می‌شد (انگار وارد یک جعبه‌ی جدید می‌شوی). حالا پس‌زمینه فقط یک‌بار روی کل پوسته کشیده می‌شود و هر دو بخش از همان یک پس‌زمینه‌ی پیوسته عبور می‌کنند — بدون هیچ لبه/جهش ناگهانی هنگام اسکرول از بخش اول به دوم. */ .hero-stack{ position:relative; overflow:hidden; background: radial-gradient(ellipse 1100px 700px at 85% 0%, rgba(201,162,75,.14), transparent 55%), var(--bg); } .hero-stack::before{ content:'';position:absolute;inset:0;opacity:.35;pointer-events:none; background-image:radial-gradient(rgba(255,255,255,.045) 1px, transparent 1px); background-size:26px 26px; mask-image:linear-gradient(to bottom, black, black 75%, transparent 100%); } .hero{ min-height:100vh; display:flex; align-items:center; padding:150px 0 90px; position:relative; } .hero-particles{position:absolute;inset:0;z-index:1;pointer-events:none;display:block;} @media (prefers-reduced-motion: reduce){.hero-particles{display:none;}} /* — بخش اول هیرو: فقط کارتخوان + تیتر بزرگ، وسط‌چین و تمام‌صفحه — */ .hero-intro-inner{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:30px; position:relative; z-index:2; text-align:center; width:100%; min-height:calc(100vh - 240px); } /* — بخش دوم هیرو: معرفی کوتاه + دکمه‌ها + آمار، وسط‌چین و تمام‌صفحه — */ .hero-main-inner{ display:flex; align-items:center; justify-content:center; width:100%; position:relative; z-index:2; min-height:calc(100vh - 240px); } .hero-main .hero-copy{max-width:760px; text-align:center;} .hero-main .hero-copy p{margin-inline:auto;} .hero-main .cta-group{justify-content:center;} .hero-main .hero-stats{justify-content:center;} /* — دعوت به اسکرول: پایین بخش اول، کاربر را به بخش معرفی هدایت می‌کند — */ .hero-scroll-cue{ position:absolute; bottom:22px; left:50%; transform:translateX(-50%); z-index:3; display:flex; flex-direction:column; align-items:center; gap:6px; color:rgba(246,245,242,.55); font-size:.72rem; font-weight:700; letter-spacing:.02em; animation:scrollCueBounce 2.2s ease-in-out infinite; transition:color .2s ease; } .hero-scroll-cue svg{width:20px; height:20px; fill:currentColor;} .hero-scroll-cue:hover{color:var(--gold-bright);} @keyframes scrollCueBounce{0%,100%{transform:translate(-50%,0);}50%{transform:translate(-50%,8px);}} @media (prefers-reduced-motion: reduce){.hero-scroll-cue{animation:none;}} /* — اسکرول قسمت‌به‌قسمت در بخش بالای صفحه‌ی اصلی — نسخه‌ی قبلی این افکت با CSS خالص (scroll-snap-type: mandatory) پیاده شده بود، اما چون فقط بخشی از سکشن‌ها (کارتخوان/معرفی/بنر) نقطه‌ی اسنپ بودند و بقیه‌ی صفحه (محصولات، فرم نمایندگی، سوالات متداول...) نبودند، مرورگر دقیقاً سرِ همان آخرین نقطه (بنرها) قفل می‌کرد و اصلاً اجازه‌ی ادامه‌ی اسکرول به پایین یا برگشت به بالا را نمی‌داد. برای همین این افکت الان با جاوااسکریپت پیاده شده (فایل section-snap.js) که کنترل کامل روی این‌که کِی قفل باشد و کِی اسکرول را کاملاً آزاد کند در اختیار ماست — و همان‌جا هم دقیقاً مشخص شده که این قفل فقط تا انتهای بخش بنرها فعال است و از آن به بعد (محصولات به پایین) اسکرول صد‌درصد عادی و آزاد است. */ /* پارتیکل تعاملی پس‌زمینه بخش محصولات (هم‌شکل با هیرو) + انیمیشن ظاهرشدن کارت‌ها */ #products{position:relative; overflow:hidden;} #products .container{position:relative; z-index:1;} .products-particles{position:absolute; inset:0; z-index:0; pointer-events:none;} @media (prefers-reduced-motion: reduce){.products-particles{display:none;}} .product-card.reveal{opacity:0; transform:translateY(26px); transition:opacity .7s ease, transform .7s ease;} .product-card.reveal.visible{opacity:1; transform:translateY(0);} @media (prefers-reduced-motion: reduce){ .product-card.reveal{opacity:1; transform:none; transition:none;} } .hero-copy h1{ font-size:clamp(2.1rem,4vw,3.35rem); font-weight:900; line-height:1.28; margin-bottom:22px; letter-spacing:-.01em; } .hero-copy h1 em{ font-style:normal; color:var(--gold-bright); background:linear-gradient(180deg, var(--gold-bright), var(--gold)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; } .hero-copy p{ font-size:1.08rem; color:var(--gray-100); max-width:540px; margin-bottom:36px; font-weight:400; } .cta-group{display:flex;gap:16px;flex-wrap:wrap;} .btn{ padding:15px 30px;border-radius:12px;font-size:.95rem;font-weight:800;border:none; transition:transform .25s ease, box-shadow .25s ease, background .25s ease; display:inline-flex; align-items:center; gap:8px; } .btn-primary{ background:linear-gradient(135deg,var(--gold-bright),var(--gold)); color:#161207; box-shadow:var(--shadow-gold); } .btn-primary:hover{transform:translateY(-3px);} .btn-outline{ background:transparent;border:1.5px solid var(--line-strong);color:var(--white); } .btn-outline:hover{border-color:var(--gold-bright); background:rgba(201,162,75,.08);} .hero-stats{display:flex;gap:34px;margin-top:48px;flex-wrap:wrap;} .hero-stats div b{display:block;font-size:1.7rem;font-weight:900;color:var(--gold-bright);} .hero-stats div span{font-size:.8rem;color:var(--gray-300);} /* — signature visual: کارتخوان سه‌بعدی واقع‌گرا با پرینتر رسید، صفحه‌نمایش، کیبورد و پایه — ساختار: دو «جعبه‌ی سه‌بعدی واقعی» (پرینتر + بدنه) با وجه جلو/کنار/زیر که با preserve-3d دور یک محور مشترک می‌چرخند؛ زاویه‌ی استراحت همیشه سه‌رخ است و هیچ‌وقت کاملاً روبه‌رو نمی‌ایستد. */ .pos-stage{ position:relative; height:610px; display:flex; align-items:flex-end; justify-content:center; perspective:1500px; cursor:pointer; padding-bottom:34px; } /* — تیتر بزرگ و سه‌بعدیِ در حال تایپ، بالای کارتخوان — تنها محتوای بخش اول صفحه (همراه با خودِ کارتخوان)، پس باید به‌تنهایی توجه کاربر را جلب کند. افکت «سه‌بعدی» با چند لایه‌ی text-shadow هم‌جهت (اکسترود طلایی/سفید + سایه‌ی عمقی) ساخته می‌شود؛ یک انیمیشن شناوری ملایم هم به آن حس فضایی/سه‌بعدی می‌دهد. کرسر بعد از متن، هم‌زمان با تایپ زنده‌ی جاوااسکریپت چشمک می‌زند. */ .pos-instruction{ position:relative; z-index:3; pointer-events:none; max-width:760px; padding:0 16px; text-align:center; font-size:clamp(1.7rem, 4.4vw, 3.1rem); font-weight:900; letter-spacing:.005em; line-height:1.25; color:#fff; animation:instructionFloat 4.6s ease-in-out infinite, instructionGlow 2s ease-in-out infinite; transition:color .25s ease; } .pos-instruction::after{ content:''; display:inline-block; width:3px; height:.85em; margin-inline-start:5px; vertical-align:-3px; background:currentColor; animation:promptCursor .9s step-end infinite; } .pos-instruction.is-ready{color:#69e69f;} .pos-instruction.is-sending{color:rgba(236,205,124,.95);} @keyframes instructionFloat{ 0%,100%{transform:translateY(0);} 50%{transform:translateY(-10px);} } @keyframes instructionGlow{ 0%,100%{ text-shadow: 0 1px 0 rgba(255,255,255,.55), 0 2px 0 rgba(230,222,205,.42), 0 3px 0 rgba(201,162,75,.4), 0 4px 1px rgba(201,162,75,.32), 0 8px 18px rgba(0,0,0,.55), 0 0 30px rgba(201,162,75,.28); opacity:.95; } 50%{ text-shadow: 0 1px 0 rgba(255,255,255,.68), 0 2px 0 rgba(230,222,205,.52), 0 3px 0 rgba(201,162,75,.5), 0 4px 1px rgba(201,162,75,.4), 0 10px 24px rgba(0,0,0,.62), 0 0 46px rgba(201,162,75,.44); opacity:1; } } @media (prefers-reduced-motion: reduce){.pos-instruction{animation:none;}} .pos-arc{ position:absolute; top:8%; width:440px; height:440px; border-radius:50%; border:2px solid transparent; border-top-color:rgba(201,162,75,.5); border-inline-end-color:rgba(201,162,75,.22); transform:rotate(-35deg); animation:arcSpin 22s linear infinite; pointer-events:none; } .pos-glow{ position:absolute; width:420px; height:420px; border-radius:50%; background:radial-gradient(circle, rgba(201,162,75,.24), transparent 72%); filter:blur(6px); animation:posGlowPulse 4s ease-in-out infinite; pointer-events:none; } .pos-waves{position:absolute; width:300px; height:460px; pointer-events:none; bottom:130px; z-index:0;} .pos-waves span{ position:absolute; top:36px; left:calc(50% + 74px); width:26px; height:26px; border:1.5px solid var(--gold-bright); border-radius:50%; opacity:0; animation:waveExpand 3.2s ease-out infinite; } .pos-waves span:nth-child(2){animation-delay:.6s;} .pos-waves span:nth-child(3){animation-delay:1.2s;} .pos-pedestal{ position:absolute; bottom:0; width:280px; height:26px; border-radius:50%; background:radial-gradient(ellipse at center, rgba(201,162,75,.35), rgba(201,162,75,.08) 55%, transparent 75%); box-shadow:0 0 0 1px rgba(201,162,75,.18); z-index:0; } /* گروه صلب: پرینتر + بدنه با هم می‌چرخند و شناور می‌شوند، همیشه از زاویه‌ی سه‌رخ */ .pos-device{ position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; transform-style:preserve-3d; transform:rotateX(-6deg) rotateY(-26deg); animation:floatDevice 6.5s ease-in-out infinite; } @keyframes floatDevice{ 0%,100%{transform:rotateX(-6deg) rotateY(-26deg) translateY(0);} 50%{transform:rotateX(-6deg) rotateY(-26deg) translateY(-12px);} } .pos-box{position:relative; transform-style:preserve-3d;} .pos-face{position:absolute; top:50%; left:50%;} /* — جعبه‌ی پرینتر (بالای دستگاه) — */ .pos-box--printer{width:150px; height:34px; margin-bottom:-2px;} .pos-box--printer .pos-face--front{ width:150px; height:34px; margin:-17px 0 0 -75px; background:linear-gradient(160deg,#2b2620 0%, #1a170f 60%, #100e0a 100%); border:1px solid rgba(201,162,75,.32); border-bottom:none; border-radius:16px 16px 0 0; transform:translateZ(13px); box-shadow:0 1px 0 rgba(201,162,75,.35) inset; } .pos-box--printer .pos-face--front::before{ content:''; position:absolute; top:0; left:12px; right:12px; height:3px; border-radius:2px; background:linear-gradient(90deg, transparent, var(--gold-bright), transparent); opacity:.7; } .pos-box--printer .pos-face--side{width:26px; height:34px; margin:-17px 0 0 -13px; border-bottom:none;} .pos-box--printer .pos-face--right{ transform:rotateY(90deg) translateZ(75px); border-radius:0 10px 0 0; background:linear-gradient(90deg,#1c1811,#0a0906); border:1px solid rgba(201,162,75,.26); border-inline-start:1px solid rgba(236,205,124,.32); } .pos-box--printer .pos-face--left{ transform:rotateY(-90deg) translateZ(75px); border-radius:10px 0 0 0; background:linear-gradient(270deg,#171410,#0a0906); border:1px solid rgba(201,162,75,.18); } .pos-box--printer .pos-face--top{ width:150px; height:26px; margin:-13px 0 0 -75px; background:linear-gradient(200deg,#3a3226,#1c170f); border-radius:16px 16px 0 0; transform:rotateX(90deg) translateZ(17px); } .pos-paper{ position:absolute; top:-40px; left:50%; width:104px; height:48px; z-index:5; background:linear-gradient(180deg,#f5f5f0,#e8e8e2); border-radius:2px; transform:translateX(-50%) rotate(-3deg) translateZ(38px); box-shadow:0 8px 16px -6px rgba(0,0,0,.5); padding:7px 9px; display:flex; flex-direction:column; gap:4px; animation:paperFeed 5s ease-in-out infinite; transform-origin:bottom center; } .pos-paper i{display:block; height:2px; border-radius:1px; background:rgba(20,20,20,.18);} .pos-paper i:nth-child(1){width:90%;} .pos-paper i:nth-child(2){width:65%;} .pos-paper i:nth-child(3){width:78%;} .pos-paper i:nth-child(4){width:50%; background:rgba(201,162,75,.5);} /* — جعبه‌ی بدنه (صفحه‌نمایش + کیبورد روی یک وجه، مثل دستگاه واقعی) — */ /* ارتفاع ۵۰ پیکسل بیشتر از قبل، دقیقاً به‌اندازه‌ی ردیف جدید دکمه‌ی «۰» + فاصله‌ی بین ردیف‌ها، تا محتوای داخل صفحه از قاب سه‌بعدی بیرون نزند. */ .pos-box--body{width:228px; height:462px;} .pos-box--body .pos-face--front{ width:228px; height:462px; margin:-231px 0 0 -114px; background:linear-gradient(160deg,#232019 0%, #17150f 55%, #0e0d0a 100%); border:1px solid var(--line-strong); border-radius:24px; transform:translateZ(24px); box-shadow:0 45px 90px -30px rgba(0,0,0,.8), 0 0 0 1px rgba(201,162,75,.08) inset, 0 1px 0 rgba(255,255,255,.04) inset; padding:16px 15px 18px; display:flex; flex-direction:column; gap:10px; } .pos-box--body .pos-face--side{width:48px; height:462px; margin:-231px 0 0 -24px; border-radius:24px;} .pos-box--body .pos-face--right{ transform:rotateY(90deg) translateZ(114px); background:linear-gradient(90deg,#221d13 0%,#141008 30%,#050403 100%); border:1px solid rgba(201,162,75,.28); border-inline-start:1px solid rgba(236,205,124,.4); } .pos-box--body .pos-face--left{ transform:rotateY(-90deg) translateZ(114px); background:linear-gradient(270deg,#171310,#050403); border:1px solid rgba(201,162,75,.14); } .pos-box--body .pos-face--bottom{ width:228px; height:48px; margin:-24px 0 0 -114px; background:linear-gradient(200deg,#100e0a,#040302); border-radius:24px; transform:rotateX(-90deg) translateZ(231px); } /* دکمه‌های کوچک اسکرول روی لبه‌ی کناری (سمت قابل‌مشاهده) */ .pos-side-btn{ position:absolute; left:50%; margin-left:-4px; width:8px; height:24px; border-radius:4px; background:linear-gradient(180deg,#3a3220,#161206); border:1px solid rgba(201,162,75,.35); box-shadow:0 1px 0 rgba(255,255,255,.06) inset; } .pos-side-btn.up{top:150px;} .pos-side-btn.down{top:182px;} .pos-screen{ position:relative; border-radius:16px; height:150px; padding:12px 12px 10px; background:radial-gradient(120% 100% at 50% 0%, #0f1a12 0%, #060907 70%); border:1px solid rgba(201,162,75,.22); box-shadow:0 0 0 1px rgba(0,0,0,.45) inset, 0 0 20px rgba(201,162,75,.08) inset; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; overflow:hidden; } .pos-screen-top{position:absolute; top:9px; left:12px; right:12px; display:flex; justify-content:space-between;} .pos-screen-top span{font-size:.48rem; letter-spacing:.02em; color:rgba(236,205,124,.32); font-weight:700;} .pos-screen-logo{width:56px; height:auto; filter:drop-shadow(0 2px 6px rgba(0,0,0,.6)); animation:screenFade 3.4s ease-in-out infinite;} .pos-screen-brand{font-size:.56rem; letter-spacing:.14em; color:var(--gold-bright); font-weight:800; margin-top:2px; animation:screenFade 3.4s ease-in-out infinite .1s;} .pos-screen-check{ position:absolute; left:12px; bottom:10px; width:22px; height:22px; border-radius:50%; display:flex; align-items:center; justify-content:center; opacity:0; background:rgba(76,201,133,.15); animation:checkPulse 3.4s ease-in-out infinite; } .pos-screen-check svg{width:13px; height:13px; fill:#4cc985;} /* در حالتی که کاربر در حال وارد کردن شماره است، چک‌مارک تزئینی خاموش می‌ماند تا با نشانگر «آماده» (چشمک روی صفحه) اشتباه گرفته نشود. */ .pos-screen:not(.state-idle) .pos-screen-check{display:none;} /* — پیام راهنما («شماره تلفن خود را وارد کنید») با افکت تایپ زنده — */ .pos-screen-prompt{ display:block; margin-top:8px; font-size:.66rem; font-weight:700; line-height:1.5; text-align:center; color:rgba(236,205,124,.78); min-height:2.2em; max-width:150px; position:relative; } .pos-screen-prompt::after{ content:''; display:inline-block; width:2px; height:.9em; margin-inline-start:2px; vertical-align:-2px; background:rgba(236,205,124,.85); animation:promptCursor .9s step-end infinite; } .pos-screen.state-submitting .pos-screen-prompt{color:rgba(89,214,143,.9);} .pos-screen.state-submitting .pos-screen-prompt::after{background:rgba(89,214,143,.9);} /* — شماره‌ی در حال ورود، بزرگ و همیشه چپ‌چین (LTR) مثل صفحه‌ی واقعی کارتخوان — نکته: ارقام فارسی (۰۱۲...) از نظر یونیکد جهت ضعیف دارند، پس صرفاً dir="ltr" روی خودِ المان کافی نیست و داخل صفحه‌ی RTL دوباره وسط/راست‌چین به‌نظر می‌رسد. برای رفع کامل: جهت با direction:ltr + unicode-bidi:isolate-override به‌صورت قطعی ثابت می‌شود (نه plaintext که به محتوا وابسته است)، عرض به کل صفحه‌نمایش کشیده می‌شود (align-self:stretch) و متن چپ‌چین می‌شود تا شماره از سمت چپ صفحه شروع شود و مثل دستگاه واقعی POS به سمت راست رشد کند. */ .pos-screen-number{ display:none; margin-top:8px; font-size:1rem; font-weight:800; letter-spacing:.09em; color:var(--gold-bright); width:100%; align-self:stretch; box-sizing:border-box; direction:ltr; unicode-bidi:isolate-override; text-align:left; } .pos-screen-number::after{ content:''; display:inline-block; width:2px; height:.85em; margin-left:3px; vertical-align:-1px; background:var(--gold-bright); animation:promptCursor .9s step-end infinite; } .pos-screen.state-ready .pos-screen-number{color:#69e69f; animation:screenFade 1.1s ease-in-out infinite;} .pos-screen.state-entering .pos-screen-prompt, .pos-screen.state-ready .pos-screen-prompt{display:none;} .pos-screen.state-entering .pos-screen-number, .pos-screen.state-ready .pos-screen-number{display:block;} .pos-screen.state-submitting .pos-screen-number{display:none;} .pos-screen.state-submitting .pos-screen-prompt{display:block;} @keyframes promptCursor{0%,100%{opacity:1;}50%{opacity:0;}} /* دکمه‌ی سبز فقط وقتی ۱۱ رقم کامل شده «آماده» و برجسته می‌شود؛ قبل از آن هم قابل‌کلیک است اما با یک لرزش کوچک یادآوری می‌کند که شماره کامل نیست. */ .pos-key--ok.is-active{ box-shadow:0 0 0 3px rgba(89,214,143,.35), 0 8px 18px -6px rgba(47,158,99,.6); animation:okPulse 1.1s ease-in-out infinite; } @keyframes okPulse{0%,100%{transform:translateY(0) scale(1);}50%{transform:translateY(-2px) scale(1.05);}} .pos-key--ok.is-shaking{animation:okShake .35s ease-in-out;} @keyframes okShake{ 0%,100%{transform:translateX(0);} 25%{transform:translateX(-3px);} 75%{transform:translateX(3px);} } .pos-hidden-form{display:none;} .pos-nav-row{display:flex; gap:7px;} .pos-nav-row .pos-key{flex:1; height:26px; font-size:.78rem; border-radius:7px;} .pos-num-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:7px; direction:ltr;} .pos-num-grid .pos-key{height:40px; font-size:.9rem; border-radius:10px; flex-direction:column; gap:0;} .pos-num-grid .pos-key sub{font-size:.38rem; letter-spacing:.04em; color:rgba(207,205,199,.5); font-weight:600;} /* — دکمه‌ی صفر: روی خیلی از کارتخوان‌های واقعی نیست، اما چون خیلی از کاربران نمی‌دانند صفر خودکار اضافه می‌شود، این‌جا صریح و با یک برچسب راهنما («شروع شماره») نشان داده می‌شود؛ زدنش دقیقاً همان اثر خودکار را دارد. */ .pos-zero-row{display:flex; justify-content:center;} .pos-key--zero{width:calc((100% - 14px)/3); height:40px; font-size:.9rem; border-radius:10px; flex-direction:column; gap:0;} .pos-zero-row .pos-key sub{font-size:.36rem; letter-spacing:.03em; color:rgba(207,205,199,.5); font-weight:600;} .pos-fn-row{display:flex; gap:7px;} .pos-fn-row .pos-key{flex:1; height:36px; border-radius:9px;} .pos-fn-row .pos-key svg{width:15px; height:15px; fill:currentColor;} .pos-key{ display:flex; align-items:center; justify-content:center; color:var(--gray-100); background:linear-gradient(160deg, rgba(255,255,255,.06), rgba(255,255,255,0) 60%), #1c1a15; border:1px solid rgba(201,162,75,.14); box-shadow:0 2px 0 rgba(0,0,0,.35), 0 1px 0 rgba(255,255,255,.03) inset; position:relative; overflow:hidden; transition:transform .16s ease, color .16s ease, background .16s ease, box-shadow .16s ease; } .pos-key::after{ content:''; position:absolute; inset:0; border-radius:inherit; opacity:0; background:radial-gradient(circle, rgba(236,205,124,.5), transparent 70%); transition:opacity .25s ease; } .pos-key:hover{ color:#161207; transform:translateY(-2px) scale(1.06); background:linear-gradient(135deg,var(--gold-bright),var(--gold)); box-shadow:0 8px 18px -6px rgba(201,162,75,.55); } .pos-key:hover::after{opacity:1; animation:keyRipple .5s ease-out;} .pos-key.is-lit{ color:#161207; background:linear-gradient(135deg,var(--gold-bright),var(--gold)); box-shadow:0 8px 18px -6px rgba(201,162,75,.5); } .pos-key--cancel{color:#2b0906; background:linear-gradient(160deg,#f16a5c,#c8382a);} .pos-key--cancel:hover{color:#2b0906; background:linear-gradient(135deg,#ff8a7c,#d8483a); box-shadow:0 8px 18px -6px rgba(200,56,42,.55);} .pos-key--menu{color:#2b1d06; background:linear-gradient(160deg,#f0b93f,#c98a1f); font-weight:900;} .pos-key--menu:hover{color:#2b1d06; background:linear-gradient(135deg,#ffce5f,#d99a2f); box-shadow:0 8px 18px -6px rgba(201,138,31,.55);} .pos-key--ok{color:#06210f; background:linear-gradient(160deg,#59d68f,#2f9e63);} .pos-key--ok:hover{color:#06210f; background:linear-gradient(135deg,#69e69f,#3fae73); box-shadow:0 8px 18px -6px rgba(47,158,99,.55);} /* هاور تعاملی روی کل دستگاه: صفحه چشمک می‌زند، امواج تندتر و هاله پررنگ‌تر می‌شود */ .pos-stage.hovering .pos-box--body .pos-face--front{box-shadow:0 55px 100px -25px rgba(201,162,75,.6), 0 0 0 1px rgba(201,162,75,.3) inset;} .pos-stage.hovering .pos-glow{animation-duration:1.6s;} .pos-stage.hovering .pos-waves span{animation-duration:1.4s;} .pos-stage.hovering .pos-screen-check{animation:none; opacity:1;} @keyframes posGlowPulse{0%,100%{opacity:.55; transform:scale(1);}50%{opacity:.9; transform:scale(1.12);}} @keyframes waveExpand{ 0%{opacity:.65; transform:scale(.5);} 100%{opacity:0; transform:scale(1.9);} } @keyframes screenFade{0%,100%{opacity:.6;}50%{opacity:1;}} @keyframes checkPulse{0%,18%{opacity:0; transform:scale(.7);}28%,55%{opacity:1; transform:scale(1);}70%,100%{opacity:0; transform:scale(.7);}} @keyframes keyRipple{0%{opacity:.9;}100%{opacity:0;}} @keyframes paperFeed{0%,100%{transform:translateX(-50%) rotate(-3deg) translateZ(38px) translateY(0);}50%{transform:translateX(-50%) rotate(-3deg) translateZ(38px) translateY(-5px);}} @keyframes arcSpin{to{transform:rotate(325deg);}} @media (max-width:960px){ .hero-copy p{margin-inline:auto;} .cta-group{justify-content:center;} .hero-stats{justify-content:center;} .pos-stage{height:560px;margin-top:20px; perspective:1200px;} .pos-box--printer{width:126px;} .pos-box--printer .pos-face--front,.pos-box--printer .pos-face--top{width:126px; margin-inline-start:-63px;} /* عرض/ارتفاع بدنه بزرگ‌تر از قبل (برای دکمه‌های قابل‌لمس‌تر) و مهم‌تر از آن، ارتفاع طوری حساب شده که صفحه‌نمایش + کیبورد داخلش واقعاً جا شود — قبلاً حدود ۵۰ پیکسل کم می‌آورد و همین باعث می‌شد شماره‌ی درحال‌تایپ و دکمه‌های پایینی از قاب کارتخوان بیرون بزنند/جابه‌جا دیده شوند. */ .pos-box--body{width:224px; height:464px;} .pos-box--body .pos-face--front{width:224px; height:464px; margin:-232px 0 0 -112px;} .pos-box--body .pos-face--side{height:464px; margin-block-start:-232px;} .pos-box--body .pos-face--right{transform:rotateY(90deg) translateZ(112px);} .pos-box--body .pos-face--left{transform:rotateY(-90deg) translateZ(112px);} .pos-box--body .pos-face--bottom{width:224px; margin-inline-start:-112px; transform:rotateX(-90deg) translateZ(232px);} .pos-screen{height:118px;} /* دکمه‌های بزرگ‌تر روی گوشی — راحت‌تر با انگشت لمس می‌شوند. */ .pos-num-grid .pos-key{height:46px;} .pos-key--zero{height:46px;} .pos-fn-row .pos-key{height:42px;} .pos-glow{width:340px;height:340px;} .pos-waves{width:250px;height:380px;} .pos-arc{width:360px;height:360px;} .hero{padding:110px 0 50px;} .hero-intro-inner{gap:20px; min-height:calc(100vh - 160px);} .hero-main-inner{min-height:calc(100vh - 160px);} } @media (max-width:520px){ .pos-instruction{font-size:1.5rem;} } @media (max-width:360px){ /* روی گوشی‌های خیلی کوچک (عرض ≤۳۶۰px)، دستگاه کمی جمع‌تر می‌شود تا از لبه‌های صفحه بیرون نزند، ولی همچنان با همان بودجه‌ی ارتفاعِ درست. */ .pos-box--body{width:200px; height:424px;} .pos-box--body .pos-face--front{width:200px; height:424px; margin:-212px 0 0 -100px;} .pos-box--body .pos-face--side{height:424px; margin-block-start:-212px;} .pos-box--body .pos-face--right{transform:rotateY(90deg) translateZ(100px);} .pos-box--body .pos-face--left{transform:rotateY(-90deg) translateZ(100px);} .pos-box--body .pos-face--bottom{width:200px; margin-inline-start:-100px; transform:rotateX(-90deg) translateZ(212px);} .pos-screen{height:110px;} .pos-num-grid .pos-key{height:40px;} .pos-key--zero{height:40px;} .pos-fn-row .pos-key{height:36px;} .pos-stage{height:540px;} } /* ========================================================================== Section shell ========================================================================== */ .section{padding:110px 0;} .section-header{text-align:center; max-width:640px; margin:0 auto 56px;} .section-header .eyebrow{margin-bottom:16px;} .section-header h2{font-size:clamp(1.7rem,3vw,2.3rem); font-weight:900; margin-bottom:14px;} .section-header p{color:var(--gray-300); font-size:1rem;} .divider{width:52px;height:3px;background:linear-gradient(90deg,var(--gold),var(--gold-bright));border-radius:3px;margin:18px auto 0;} /* ========================================================================== Products ========================================================================== */ .products-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:26px;} /* دو باکس دسته‌بندی فروشگاه در صفحه اصلی (کارتخوان + کشلس): چون فقط ۲ آیتم دارند، به‌جای گرید ۳ ستونه (که آن‌ها را به سمت راست می‌چسباند و یک ستون خالی سمت چپ می‌گذارد)، تمام عرض کانتینر را دو‌ستونه پر می‌کنند — دقیقاً هم‌عرض با باکس «طراحی سایت» زیرشان. */ .products-grid-shop{grid-template-columns:repeat(2,1fr);} @media (max-width:900px){.products-grid-shop{grid-template-columns:1fr;}} .product-card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); padding:34px 28px; transition:transform .3s ease, border-color .3s ease, box-shadow .3s ease; position:relative; overflow:hidden; } .product-card::before{ content:''; position:absolute; inset:0; opacity:0; transition:opacity .3s ease; background:radial-gradient(circle at 30% 0%, rgba(201,162,75,.14), transparent 60%); } .product-card:hover{transform:translateY(-8px); border-color:var(--line-strong); box-shadow:var(--shadow-gold);} .product-card:hover::before{opacity:1;} .icon-box{ width:56px;height:56px;border-radius:14px; margin-bottom:22px; display:flex;align-items:center;justify-content:center; background:rgba(201,162,75,.1); border:1px solid var(--line-strong); } .icon-box svg{width:26px;height:26px;fill:var(--gold-bright);} .product-card h3{font-size:1.12rem;font-weight:800;margin-bottom:10px;} .product-card p{color:var(--gray-300);font-size:.92rem;} .product-tag{ display:inline-block;margin-top:18px;font-size:.75rem;font-weight:700;color:var(--gold-bright); border-top:1px solid var(--line); padding-top:14px; width:100%; } @media (max-width:900px){.products-grid{grid-template-columns:1fr;}} .product-card{ display:block; text-decoration:none; color:inherit; cursor:pointer; } .product-card .expand-hint{ display:flex; align-items:center; gap:6px; margin-top:14px; font-size:.78rem; font-weight:700; color:var(--gold-bright); } .product-card .expand-hint svg{width:14px;height:14px; fill:var(--gold-bright); transition:transform .25s ease;} .product-card:hover .expand-hint svg{transform:translateX(-3px);} /* نکته: استایل صفحه اختصاصی /products (تب‌های دسته، گرید مدل‌ها و ...) از این پس در فایل جدای public/css/products.css نگه‌داری می‌شود تا style.css سبک و مخصوص صفحه اصلی بماند. */ /* ========================================================================== Partnership ========================================================================== */ .partnership{background:linear-gradient(180deg, var(--bg) 0%, var(--bg-soft) 100%); border-top:1px solid var(--line); border-bottom:1px solid var(--line);} .partnership-container{display:grid; grid-template-columns:1.1fr .9fr; gap:56px; align-items:start;} .partnership-text h2{font-size:clamp(1.7rem,3vw,2.2rem);font-weight:900;margin-bottom:18px;} .partnership-text > p{color:var(--gray-300); margin-bottom:16px; font-size:.98rem;} .benefits-list{margin-top:26px; display:flex; flex-direction:column; gap:14px;} .benefits-list li{display:flex; align-items:flex-start; gap:12px; font-size:.95rem; color:var(--white);} .check-icon{width:22px;height:22px;flex:none;fill:var(--gold-bright); margin-top:1px;} .partnership-container.form-open{grid-template-columns:1fr;} .partnership-container.form-open .partnership-text{display:none;} /* --- کارت CTA جمع‌شده --- */ .agency-cta{ background:var(--surface); border:1px solid var(--line-strong); border-radius:var(--radius-lg); padding:40px 32px; text-align:center; box-shadow:0 30px 60px -30px rgba(0,0,0,.6); transition:transform .25s ease, box-shadow .25s ease; } .agency-cta:hover{transform:translateY(-4px); box-shadow:var(--shadow-gold);} .agency-cta-icon{ width:64px;height:64px;margin:0 auto 18px;border-radius:16px; background:rgba(201,162,75,.12); border:1px solid var(--line-strong); display:flex;align-items:center;justify-content:center; } .agency-cta-icon svg{width:30px;height:30px;fill:var(--gold-bright);} .agency-cta h3{font-size:1.15rem;font-weight:800;margin-bottom:10px;} .agency-cta p{color:var(--gray-300); font-size:.9rem; margin-bottom:24px;} .agency-cta-btn{ padding:14px 30px;border-radius:10px;border:none;font-weight:800;font-size:.95rem; background:linear-gradient(135deg,var(--gold-bright),var(--gold)); color:#161207; box-shadow:var(--shadow-gold); transition:transform .2s ease; } .agency-cta-btn:hover{transform:translateY(-2px);} /* --- پنل بازشونده فرم کامل --- */ .agency-panel{ max-height:0; overflow:hidden; opacity:0; border-radius:var(--radius-lg); border:1px solid var(--line-strong); background:var(--surface); box-shadow:0 30px 60px -30px rgba(0,0,0,.6); transition:max-height .55s cubic-bezier(.4,0,.2,1), opacity .4s ease; } .agency-panel.open{opacity:1;} .agency-panel-inner{padding:36px;} .agency-panel-header{ display:flex; align-items:center; justify-content:space-between; margin-bottom:6px; padding-bottom:20px; border-bottom:1px solid var(--line); } .agency-panel-header h3{font-size:1.2rem;font-weight:800;} .agency-close{ width:38px;height:38px;border-radius:50%;border:1px solid var(--line-strong); background:transparent; color:var(--gray-100); font-size:1rem; transition:.2s; } .agency-close:hover{background:rgba(201,162,75,.1); color:var(--gold-bright);} .form-section-title{ font-size:.95rem; font-weight:800; color:var(--gold-bright); margin:28px 0 16px; padding-top:20px; border-top:1px solid var(--line); } .form-section-title:first-of-type{margin-top:22px; padding-top:0; border-top:none;} .form-section-sub{font-size:.8rem;color:var(--gray-300); margin-top:-10px; margin-bottom:16px;} .field-grid{display:grid; grid-template-columns:1fr 1fr; gap:18px 20px; align-items:start;} .field-grid .full{grid-column:1 / -1;} @media (max-width:640px){.field-grid{grid-template-columns:1fr;}} .form-group{margin-bottom:0;} .form-group label{display:block;font-size:.85rem;font-weight:700;margin-bottom:8px;color:var(--gray-100);} .form-group .req{color:var(--gold-bright);} .form-group input,.form-group select,.form-group textarea{ width:100%;padding:12px 14px;border-radius:10px;border:1px solid var(--line); /* نکته مهم: عمداً background-color (نه خاصیت خلاصه‌شده‌ی background) نوشته شده. خاصیت background شورت‌هند، تمام زیرخاصیت‌های background-image/repeat/position/size را هم به مقدار پیش‌فرض ریست می‌کند؛ همین اشتباه باعث می‌شد فلش سفارشی select (که در قانون select{...} بالاتر تعریف شده) پاک شده و مرورگر به‌جایش فلش پیش‌فرض خودش را به‌صورت افقی-تکرارشونده (background-repeat:repeat پیش‌فرض) رسم کند — دقیقاً همان چند فلش پشت‌سرهم که در select ها دیده می‌شد. */ background-color:var(--surface-2); color:var(--white); font-size:16px; line-height:1.3; transition:border-color .2s ease, background-color .2s ease; font-family:inherit; } /* input و select در یک ردیف گرید باید دقیقاً هم‌ارتفاع باشند تا لبه‌ی راست/چپشان با ردیف بالا/پایین (مثلاً باکس تمام‌عرض «بودجه تقریبی») کاملاً موازی دیده شود. بدون این خط، بعضی مرورگرها (خصوصاً سافاری/آیفون) به select یک padding عمودی داخلیِ کمی متفاوت از input می‌دهند و همین چند پیکسل اختلاف کافی است که چیدمان نامرتب به‌نظر برسد. */ .form-group input:not([type="checkbox"]):not([type="radio"]),.form-group select{height:46px;} .form-group textarea{resize:vertical; min-height:88px;} .form-group input::placeholder,.form-group textarea::placeholder{color:var(--gray-500);} .form-group input:focus,.form-group select:focus,.form-group textarea:focus{border-color:var(--gold); background-color:#20201f;} .form-group.error input,.form-group.error select,.form-group.error textarea{border-color:#d9534f;} .error-msg{display:none; color:#e08b88; font-size:.78rem; margin-top:6px;} .form-group.error .error-msg{display:block;} /* فیلد تاریخ تولد شمسی */ .date-field{position:relative;} .date-field input{cursor:pointer;} .jalali-calendar{ position:absolute; top:calc(100% + 8px); right:0; width:320px; max-width:calc(100vw - 48px); z-index:50; background:linear-gradient(180deg, var(--surface-2), var(--surface)); border:1px solid var(--line-strong); border-radius:16px; box-shadow:0 24px 55px -16px rgba(0,0,0,.75), 0 0 0 1px rgba(201,162,75,.05) inset; padding:16px; opacity:0; visibility:hidden; transform:translateY(-6px) scale(.98); transition:opacity .2s ease, transform .2s ease, visibility .2s; } .jalali-calendar.open{opacity:1; visibility:visible; transform:translateY(0) scale(1);} .jc-head{display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:14px;} .jc-nav{ flex:none; width:32px;height:32px;border-radius:9px;border:1px solid var(--line); background:transparent; color:var(--gray-100); transition:.2s; font-size:.9rem; display:flex; align-items:center; justify-content:center; } .jc-nav:hover:not(:disabled){background:rgba(201,162,75,.12); color:var(--gold-bright); border-color:var(--line-strong);} .jc-nav:disabled{opacity:.3; cursor:not-allowed;} /* دکمه‌های «ماه» و «سال» در سربرگ: هر دو کلیک‌پذیرند تا کاربر بلافاصله بفهمد می‌تواند مستقیماً به انتخاب ماه یا سال بپرد، نه اینکه فقط یک برچسب ثابت باشد. طراحی به‌شکل دو دکمه‌ی کوچک کنار هم با افکت هاور طلایی است. */ .jc-title-group{display:flex; align-items:center; gap:6px;} .jc-title-part{ font-size:.88rem; font-weight:800; color:var(--white); background:rgba(201,162,75,.07); border:1px solid var(--line); border-radius:8px; padding:6px 10px; transition:.2s; } .jc-title-part:hover,.jc-title-part.active{background:rgba(201,162,75,.18); border-color:var(--gold); color:var(--gold-bright);} /* حداقل ارتفاع برای بدنه‌ی تقویم (زیر سربرگ) تا سوییچ بین سطح روز/ماه/سال باعث پرش/تکان‌خوردن ناگهانی ظاهر تقویم نشود (چون تعداد ردیف‌های هرکدام فرق دارد) */ .jc-weekdays,.jc-days,.jc-months,.jc-years-wrap{min-height:216px;} .jc-weekdays,.jc-days{display:grid; grid-template-columns:repeat(7,1fr); gap:4px; text-align:center;} .jc-weekdays{min-height:0;} /* رفع باگ اصلی تقویم: چون jc-weekdays/jc-days/jc-months با display:grid به‌صورت «عادی» (normal، نه !important) تعریف شده بودند، این قانونِ نویسنده همیشه روی قانونِ مرورگر برای ویژگی hidden (که او هم normal است) اولویت دارد — صرف‌نظر از specificity، چون در کشمکشِ CSS، origin قبل از specificity تصمیم می‌گیرد. نتیجه: وقتی جاوااسکریپت hidden=true می‌گذاشت (مثلاً برای رفتن به سطح ماه یا سال)، این سه بخش هرگز واقعاً مخفی نمی‌شدند و هم‌زمان روی/زیر هم نمایش داده می‌شدند؛ دقیقاً همان چیزی که در عکس دیده می‌شود (ردیف هفته‌روزها و ناحیه‌ی روزها هنگام انتخاب ماه هنوز روی صفحه‌اند) و همان دلیلِ غیرقابل‌کلیک‌شدنِ روزها بعد از انتخاب سال بود. با اضافه‌کردن قوانین زیر (که specificity بالاتری دارند: کلاس + attribute، پس در تعارض بین دو قانونِ هم‌ردیف normal همین‌ها برنده می‌شوند) هر سطح واقعاً و کاملاً مستقل از بقیه می‌شود. */ .jc-weekdays[hidden], .jc-days[hidden], .jc-months[hidden]{display:none;} .jc-weekdays span{font-size:.72rem;color:var(--gray-300); padding:4px 0;} .jc-days button{ aspect-ratio:1; border-radius:8px; border:none; background:transparent; color:var(--gray-100); font-size:.82rem; transition:.15s; } .jc-days button:hover:not(:disabled){background:rgba(201,162,75,.14); color:var(--gold-bright);} .jc-days button.today{border:1px solid var(--line-strong);} .jc-days button.selected{background:linear-gradient(135deg,var(--gold-bright),var(--gold)); color:#161207; font-weight:800;} .jc-days button.empty{visibility:hidden;} /* سطح انتخاب ماه: ۳ ستون × ۴ ردیف، با نام کامل ماه‌های شمسی */ .jc-months{display:grid; grid-template-columns:repeat(3,1fr); gap:8px;} .jc-months button{ padding:12px 4px; border-radius:10px; border:1px solid var(--line); background:var(--surface-2); color:var(--gray-100); font-size:.82rem; font-weight:700; transition:.15s; } .jc-months button:hover{background:rgba(201,162,75,.14); color:var(--gold-bright); border-color:var(--line-strong);} .jc-months button.today{border-color:var(--gold-dim);} .jc-months button.selected{background:linear-gradient(135deg,var(--gold-bright),var(--gold)); color:#161207; font-weight:800; border-color:transparent;} /* سطح انتخاب سال: همان تم سه‌ستونی قبلی، با این تفاوت که به‌جای صفحه‌بندی ۱۲تا۱۲تا، کل بازه‌ی ۱۳۰۰ تا امسال یک‌جا رندر می‌شود و خودِ این باکس اسکرول می‌خورد (ارتفاع ثابت + overflow-y:auto). */ .jc-years-wrap{max-height:216px; overflow-y:auto; overflow-x:hidden;} .jc-years{display:grid; grid-template-columns:repeat(3,1fr); gap:8px; align-content:start;} .jc-years button{ padding:12px 4px; border-radius:10px; border:1px solid var(--line); background:var(--surface-2); color:var(--gray-100); font-size:.85rem; font-weight:700; transition:.15s; } .jc-years button:hover:not(:disabled){background:rgba(201,162,75,.14); color:var(--gold-bright); border-color:var(--line-strong);} .jc-years button.today{border-color:var(--gold-dim);} .jc-years button.selected{background:linear-gradient(135deg,var(--gold-bright),var(--gold)); color:#161207; font-weight:800; border-color:transparent;} /* فیلد شهر جستجوپذیر */ .city-field{position:relative;} .city-options{ position:absolute; top:calc(100% + 6px); right:0; left:0; z-index:50; max-height:220px; overflow-y:auto; background:var(--surface-2); border:1px solid var(--line-strong); border-radius:12px; box-shadow:0 24px 50px -18px rgba(0,0,0,.7); opacity:0; visibility:hidden; transform:translateY(-6px); transition:opacity .2s ease, transform .2s ease, visibility .2s; } .city-options.open{opacity:1; visibility:visible; transform:translateY(0);} .city-options div{padding:10px 14px; font-size:.88rem; color:var(--gray-100); cursor:pointer;} .city-options div:hover,.city-options div.active{background:rgba(201,162,75,.12); color:var(--gold-bright);} .city-options .empty-msg{color:var(--gray-500); cursor:default;} .city-options .empty-msg:hover{background:none; color:var(--gray-500);} /* ردیف مدت فعالیت (عدد + واحد) */ .combo-row{display:flex; gap:10px;} .combo-row input{flex:2;} .combo-row select{ flex:1; cursor:pointer; font-weight:700; color:var(--gold-bright); border-color:var(--line-strong); background-color:var(--surface-2); background-image:url("data:image/svg+xml;utf8,"); background-repeat:no-repeat; background-position:left 12px center; background-size:18px; padding-left:34px; padding-right:12px; transition:border-color .2s ease, background-color .2s ease; } .combo-row select:hover,.combo-row select:focus{background-color:#20201f; border-color:var(--gold);} /* ردیف پیش‌بینی فروش ماهیانه */ .sales-forecast{display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:.9rem; color:var(--gray-100);} .sales-forecast input{width:90px; text-align:center; flex:none;} .submit-btn{ width:100%; padding:14px; border-radius:10px; border:none; font-weight:800; font-size:.96rem; background:linear-gradient(135deg,var(--gold-bright),var(--gold)); color:#161207; box-shadow:var(--shadow-gold); transition:transform .2s ease; margin-top:26px; } .submit-btn:hover{transform:translateY(-2px);} .submit-btn:disabled{opacity:.6; cursor:not-allowed; transform:none;} .agency-server-error{ display:none; margin-bottom:16px; padding:12px 16px; border-radius:10px; background:rgba(217,83,79,.1); border:1px solid rgba(217,83,79,.35); color:#e08b88; font-size:.86rem; line-height:1.7; text-align:center; } .agency-server-error.show{display:block;} .form-success{ display:none; text-align:center; padding:26px 10px; } .form-success.show{display:block;} .form-success svg{width:52px;height:52px;fill:var(--gold-bright); margin:0 auto 14px;} .form-success h4{font-weight:800; margin-bottom:8px;} .form-success p{color:var(--gray-300); font-size:.9rem;} .form-success .pdf-note{color:var(--gold-bright); font-size:.85rem; margin-top:14px; min-height:1.2em;} .pdf-redownload-btn{ margin-top:14px; padding:11px 22px; border-radius:10px; border:1.5px solid var(--line-strong); background:transparent; color:var(--white); font-weight:700; font-size:.85rem; transition:.2s; } .pdf-redownload-btn:hover{border-color:var(--gold-bright); background:rgba(201,162,75,.08);} .pdf-redownload-btn:disabled{opacity:.55; cursor:not-allowed;} @media (max-width:900px){.partnership-container{grid-template-columns:1fr;}} @media (max-width:640px){ .agency-panel-inner{padding:24px 16px;} .agency-cta{padding:30px 20px;} } /* ========================================================================== فعال‌سازی دستگاه — صفحه‌ی تسویه‌حساب (گام ۸: استایل) مارکاپ مربوطه در src/views/checkout.ejs (گام ۶) و رفتار در public/js/activation-request.js (گام ۷) تعریف شده؛ اینجا فقط ظاهر. ========================================================================== */ /* ردیف/کارتِ چک‌باکسِ «تمایل به فعالسازی دستگاه را دارم» — به‌جای یک چک‌باکسِ ساده‌ی گم‌شده در فرم، یک کارتِ کامل و قابل‌کلیک تا تجربه‌ی کاربری بهتری داشته باشد و به‌وضوح به‌عنوان یک بخش مجزا از «مشخصات گیرنده» دیده شود. */ .activation-section{margin-top:30px; padding-top:26px; border-top:1px solid var(--line);} .activation-toggle-row{ display:flex; align-items:flex-start; gap:14px; cursor:pointer; user-select:none; padding:18px 20px; border-radius:var(--radius); border:1.5px solid var(--line); background:var(--surface-2); transition:border-color .2s ease, background-color .2s ease, box-shadow .2s ease; } .activation-toggle-row:hover{border-color:var(--line-strong);} .activation-toggle-row input[type="checkbox"]{ flex:none; width:22px; height:22px; margin-top:1px; accent-color:var(--gold-bright); cursor:pointer; } .activation-toggle-row span{font-size:.98rem; font-weight:800; color:var(--white); line-height:1.6;} /* وقتی تیک خورده، کل کارت با رنگ طلایی/آبیِ برند هایلایت شود تا حس «این بخش الان باز است» به‌وضوح منتقل شود، نه فقط ظاهرشدن پنل زیرش. */ .activation-toggle-row:has(input:checked){ border-color:var(--gold); background:rgba(201,162,75,.08); box-shadow:0 0 0 1px var(--gold) inset; } .activation-toggle-row:has(input:checked) span{color:var(--gold-bright);} /* پنل بازشونده — چون activation-request.js مستقیماً روی ویژگی hidden کار می‌کند (نه یک کلاسِ max-height مثل agency-panel)، حالتِ نمایان‌شدن با یک افکتِ کوتاهِ fade+slide روی خودِ [hidden] false انجام می‌شود تا ظاهرشدنِ پنل، به‌جای یک پرشِ خشک، نرم به‌نظر برسد. */ .activation-panel{ margin-top:16px; padding:28px; border-radius:var(--radius-lg); border:1px solid var(--line-strong); background:var(--surface); box-shadow:0 30px 60px -34px rgba(0,0,0,.55); } .activation-panel:not([hidden]){animation:activationPanelIn .38s cubic-bezier(.4,0,.2,1);} @keyframes activationPanelIn{ from{opacity:0; transform:translateY(-10px);} to{opacity:1; transform:translateY(0);} } .activation-intro{ font-size:.88rem; line-height:2; color:var(--gray-100); margin-bottom:22px; padding:14px 18px; border-radius:10px; background:rgba(201,162,75,.06); border:1px solid var(--line); } /* خط‌جداکننده‌ی بین ۶ بخشِ فرم فعال‌سازی — دقیقاً شبیه form-section-title اما بدون عنوان، چون بخش‌ها در چک‌لیست کارفرما فقط با یک خط از هم جدا شده‌اند. */ .activation-section-divider{height:1px; background:var(--line); margin:26px 0;} /* شبکه‌ی ۵ باکس آپلود مدرک */ .activation-upload-grid{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:16px;} @media (max-width:640px){.activation-upload-grid{grid-template-columns:1fr;}} .upload-box{ position:relative; padding:18px; border-radius:12px; border:1.5px dashed var(--line-strong); background:var(--surface-2); transition:border-color .2s ease, background-color .2s ease; } .upload-box:hover{border-color:var(--gold); background-color:#20201f;} .upload-box.error{border-color:#d9534f;} .upload-box-label{display:block; font-size:.86rem; font-weight:800; color:var(--gray-100); margin-bottom:6px;} .upload-box-optional-tag{color:var(--gray-500); font-weight:600; font-size:.78rem;} .upload-box-hint{font-size:.78rem; color:var(--gray-300); line-height:1.7; margin-bottom:12px;} .upload-box input[type="file"]{ display:block; width:100%; font-size:.8rem; color:var(--gray-300); cursor:pointer; } .upload-box input[type="file"]::file-selector-button{ padding:8px 16px; margin-inline-end:12px; border-radius:8px; border:1px solid var(--line-strong); background:var(--surface); color:var(--gold-bright); font-family:inherit; font-size:.78rem; font-weight:700; cursor:pointer; transition:.2s; } .upload-box input[type="file"]::file-selector-button:hover{background:rgba(201,162,75,.12); border-color:var(--gold);} .upload-box-filename{ margin-top:10px; font-size:.78rem; color:var(--gold-bright); font-weight:700; word-break:break-all; min-height:1.1em; } .upload-box .error-msg{margin-top:10px;} /* پیام موفقیتِ ثبت اطلاعات فعال‌سازی — هم‌الگو با form-success ولی داخل activation-panel، پس رنگ زمینه‌ی جداگانه لازم ندارد. */ .activation-success{text-align:center; padding:30px 10px;} .activation-success-icon{ width:56px; height:56px; margin:0 auto 16px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:1.5rem; font-weight:900; background:linear-gradient(135deg,var(--gold-bright),var(--gold)); color:#161207; } .activation-success p{color:var(--gray-300); font-size:.9rem; line-height:1.9; max-width:480px; margin:0 auto 6px;} .activation-success p b{color:var(--white); font-size:.98rem;} @media (max-width:640px){ .activation-panel{padding:20px 16px;} .activation-toggle-row{padding:16px;} } /* --- حالت روشن: رنگ‌های rgba(201,162,75...) هاردکد به آبیِ برند تبدیل شوند --- */ html[data-theme="light"] .activation-toggle-row:has(input:checked){ background:rgba(37,99,235,.07); box-shadow:0 0 0 1px var(--gold) inset; } html[data-theme="light"] .activation-intro{background:rgba(37,99,235,.06);} html[data-theme="light"] .upload-box:hover{background-color:#fffdf9;} html[data-theme="light"] .upload-box input[type="file"]::file-selector-button:hover{background:rgba(37,99,235,.1);} /* ========================================================================== Footer ========================================================================== */ footer{background:#070708; padding:80px 0 0; border-top:1px solid var(--line);} .footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1.1fr; gap:40px; padding-bottom:50px;} .footer-col h4{font-size:.95rem;font-weight:800;margin-bottom:18px;color:var(--white);} .footer-col ul{display:flex;flex-direction:column;gap:11px;} .footer-col a{color:var(--gray-300);font-size:.88rem;transition:color .2s;} .footer-col a:hover{color:var(--gold-bright);} .footer-col li{display:flex; align-items:center; gap:8px; color:var(--gray-300); font-size:.88rem;} .footer-col li i{color:var(--gold-bright); font-size:1rem;} .footer-col li.footer-branch{align-items:flex-start; gap:10px; margin-top:2px;} .footer-col li.footer-branch i{margin-top:2px;} .footer-col li.footer-branch b{display:block; color:var(--white); font-size:.85rem; font-weight:800; margin-bottom:3px;} .footer-col li.footer-branch span{display:block; color:var(--gray-300); font-size:.82rem; line-height:1.7;} .footer-brand p{color:var(--gray-300); font-size:.88rem; max-width:320px; margin-top:14px;} .placeholder-note{font-size:.72rem; color:var(--gold-dim); margin-top:4px;} .copyright{ border-top:1px solid var(--line); padding:22px 0; text-align:center; color:var(--gray-500); font-size:.82rem; /* گام ۹: روی آیفون‌های بدون دکمه هوم، متن به زیر نوار Home Indicator نمی‌چسبد؛ env() روی گوشی‌های معمولی مقدار صفر برمی‌گرداند، پس هیچ تغییری برای اکثریت کاربران ایجاد نمی‌شود */ padding-bottom:max(22px, env(safe-area-inset-bottom)); } @media (max-width:900px){.footer-grid{grid-template-columns:1fr 1fr;}} @media (max-width:600px){.footer-grid{grid-template-columns:1fr;}} /* fallback icons (no icon-font dependency) */ .i{display:inline-flex;width:1em;height:1em;} /* ========================================================================== Banner Slider — نسخه تصویر-محور: هر اسلاید فقط عکس بنر است (بدون متن/گرادینت روی آن)، چون طرح گرافیکی هر عکس از قبل کامل و برند‌شده است. این بخش عمداً از عرض کامل صفحه کوچیک‌تر و داخل container قرار گرفته تا از حاشیه‌های سایت فاصله داشته باشد، با object-fit:contain عکس هیچ‌وقت کراپ نمی‌شود (کل تصویر با همان ابعاد اصلی دیده می‌شود) و پشت آن یک درخشش طلایی محو و متحرک (banner-glow) قرار دارد که هماهنگ با پالت رنگی سایت است. ========================================================================== */ .banner-section{padding:56px 0; position:relative; overflow:visible;} /* کانتینر مخصوص بخش بنر: عریض‌تر از کانتینر عمومی سایت (1180px) تا بنر در نمایشگرهای بزرگ/سیستم فضای بیشتری بگیرد و بهتر دیده شود؛ چون این کلاس اضافه (نه جایگزین) روی container گذاشته شده، بقیه‌ی بخش‌های سایت که فقط از .container استفاده می‌کنند اصلاً تغییر نمی‌کنند. */ .banner-container{max-width:1700px;} .banner-glow-wrap{position:relative; padding:6px;} /* دو حباب نور طلایی محو که به آرامی جابه‌جا و بزرگ/کوچک می‌شوند؛ چون پشت باکس بنر و با blur زیاد رندر می‌شوند، هیچ تاثیری روی خوانایی عکس ندارند و فقط به فضای اطراف بنر حس پویایی/نور می‌دهند. */ .banner-glow{ position:absolute; z-index:0; border-radius:50%; filter:blur(70px); pointer-events:none; opacity:.32; } .banner-glow-1{ width:38%; aspect-ratio:1/1; top:-14%; right:-6%; background:radial-gradient(circle, var(--gold-bright), transparent 70%); animation:bannerGlowFloat1 11s ease-in-out infinite; } .banner-glow-2{ width:32%; aspect-ratio:1/1; bottom:-16%; left:-4%; background:radial-gradient(circle, var(--gold), transparent 70%); animation:bannerGlowFloat2 13s ease-in-out infinite; } @keyframes bannerGlowFloat1{ 0%,100%{transform:translate(0,0) scale(1);} 50%{transform:translate(-16px,18px) scale(1.18);} } @keyframes bannerGlowFloat2{ 0%,100%{transform:translate(0,0) scale(1);} 50%{transform:translate(18px,-14px) scale(1.12);} } .banner-slider{ position:relative; z-index:1; width:100%; max-width:1700px; margin:0 auto; aspect-ratio:1900/600; overflow:hidden; background:var(--surface); border:1px solid var(--line-strong); border-radius:var(--radius-lg); box-shadow:var(--shadow-gold); } /* --------------------------------------------------------------------- ترک اسلایدر: به‌جای روش قبلی (محو/آشکار شدن با opacity روی هم)، الان همه‌ی اسلایدها کنار هم به‌صورت افقی (flex) چیده می‌شوند و با translateX جابه‌جا می‌شوند. این روش دو فایده دارد: ۱) با لمس/کشیدن انگشت روی موبایل، بنر واقعاً همراه انگشت کاربر جابه‌جا می‌شود (نه اینکه فقط یک‌دفعه عوض شود). ۲) جهت اسلایدها را عمداً LTR (چپ‌به‌راست) نگه داشته‌ایم، مستقل از راست‌چین بودن کل سایت، تا محاسبه‌ی translateX ساده و بدون خطا بماند؛ چون خودِ اسلایدها فقط عکس هستند، این تغییر جهت هیچ تاثیری روی متن یا چیدمان محتوای فارسی نمی‌گذارد. ------------------------------------------------------------------- */ .banner-track{ position:relative; height:100%; display:flex; direction:ltr; will-change:transform; transition:transform .5s cubic-bezier(.65,0,.35,1); } .banner-track.no-transition{transition:none;} .banner-slide{ position:relative; flex:0 0 100%; width:100%; height:100%; display:block; text-decoration:none; } /* بنری که لینک ندارد (مثلاً بنر معرفی برند) نباید نشانگر ماوس دست/کلیک بدهد */ .banner-slide-static{cursor:default;} /* کپی‌های ابتدا/انتهای ترک (برای سوایپ بی‌نهایتِ بدون پرش خاکستری): این‌ها فقط لحظه‌ی کوتاهی حین کشیدن انگشت دیده می‌شوند، پس نباید هدف کلیک/فوکوس واقع شوند. */ .banner-slide-clone{pointer-events:none;} .banner-img{ position:absolute; inset:0; width:100%; height:100%; /* contain به‌جای cover: کل تصویر با همان ابعاد اصلی و بدون کراپ دیده می‌شود */ object-fit:contain; object-position:center; transition:transform 8s ease; display:block; border:0; } .banner-slide.active .banner-img{transform:scale(1.02);} /* دکمه‌های ناوبری چپ/راست — دکمه‌ی سمت راست صفحه رو به راست و دکمه‌ی سمت چپ صفحه رو به چپ اشاره می‌کند (جهت هر آیکون داخل partials/banner-slider.ejs تعیین شده، اینجا فقط موقعیت/ظاهر دکمه‌هاست) */ .banner-nav{ position:absolute; top:50%; transform:translateY(-50%); z-index:5; width:44px;height:44px;border-radius:50%; border:1px solid var(--line-strong); background:rgba(10,10,11,.5); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); color:var(--gold-bright); display:flex; align-items:center; justify-content:center; transition:.2s; } .banner-nav:hover{background:rgba(201,162,75,.2); border-color:var(--gold-bright);} .banner-nav svg{width:18px;height:18px; fill:currentColor;} .banner-nav-prev{right:16px;} .banner-nav-next{left:16px;} /* دات‌های صفحه‌بندی */ .banner-dots{ position:absolute; bottom:14px; right:50%; transform:translateX(50%); z-index:5; display:flex; gap:10px; } .banner-dot{ width:9px;height:9px;border-radius:50%; border:1px solid var(--line-strong); background:rgba(255,255,255,.35); transition:.25s ease; padding:0; cursor:pointer; } .banner-dot:hover{background:rgba(201,162,75,.5);} .banner-dot.active{background:var(--gold-bright); box-shadow:0 0 10px var(--gold); width:24px; border-radius:6px;} @media (max-width:960px){ .banner-section{padding:40px 0;} .banner-slider{max-width:640px;} .banner-nav{width:38px;height:38px;} .banner-nav-prev{right:10px;} .banner-nav-next{left:10px;} } @media (max-width:640px){ .banner-section{padding:28px 0;} /* نکته‌ی مهم: قبلاً اینجا aspect-ratio:16/10 ست شده بود، در حالی که عکس‌های بنر واقعی با نسبت 1900/600 (خیلی پهن‌تر) ساخته شده‌اند. چون banner-img از object-fit:contain استفاده می‌کند، این عدم تطابق نسبت باعث می‌شد بالا و پایین عکس یک نوار خاکستری/تیره‌ی خالی (letterbox) دیده شود. با حذف override و برگشت به همان نسبت اصلی عکس (از قاعده‌ی پایه‌ی .banner-slider)، عکس دقیقاً جعبه را پر می‌کند و آن نوار خالی از بین می‌رود. */ .banner-slider{max-width:100%;} .banner-glow{filter:blur(46px);} .banner-nav{display:none;} /* روی موبایل فقط با swipe و دات‌ها جابه‌جا می‌شود */ } @media (prefers-reduced-motion: reduce){ .banner-track{transition:transform .01ms;} .banner-img{transition:none;} .banner-glow{animation:none;} } /* ========================================================================== FAQ (سئو) — سوالات متداول صفحه اصلی ========================================================================== */ .faq-list{max-width:820px; margin:0 auto; display:flex; flex-direction:column; gap:16px;} .faq-item{ background:var(--surface-2); border:1px solid var(--line); border-radius:14px; padding:22px 26px; } .faq-item h3{font-size:1.05rem; font-weight:800; color:var(--gold-bright); margin-bottom:8px;} .faq-item p{color:var(--gray-100); font-size:.92rem; line-height:1.9;} @media (max-width:640px){ .faq-item{padding:18px 18px;} } /* ========================================================================== حالت روشن (Light Mode) ---------------------------------------------------------------------------- منطق: تمام رنگ‌های سایت از ابتدا روی متغیرهای CSS بالا (--bg, --white, --gold, ...) بنا شده‌اند؛ پس کافی است همین متغیرها را زیر html[data-theme="light"] با مقادیر روشن بازتعریف کنیم تا کل سایت (هدر، کارت‌ها، فرم‌ها، فوتر و صفحه محصولات) بدون تغییر تک‌تک قوانین، به‌درستی عوض شود. فقط چند پس‌زمینه‌ی rgba که مستقیم (نه از طریق متغیر) نوشته شده بودند را جدا بازنویسی می‌کنیم. پیش‌فرض سایت همیشه تاریک است؛ حالت روشن فقط با انتخاب صریح کاربر (از طریق دکمه شناور) و ذخیره در localStorage فعال می‌شود — نه بر اساس تنظیمات سیستم‌عامل کاربر. ========================================================================== */ html[data-theme="light"]{ --bg: #f5f8fd; --bg-soft: #eaf1fb; --surface: #ffffff; --surface-2: #eef4fc; --line: rgba(37,99,235,.20); --line-strong: rgba(37,99,235,.38); --gold: #2f7bf0; --gold-bright: #1554d6; --gold-dim: #5b93f2; --white: #16233d; --gray-100: #3f4c66; --gray-300: #5c6a86; --gray-500: #8695ad; --shadow-gold: 0 20px 60px -20px rgba(37,99,235,.30); } /* پس‌زمینه‌های rgba ثابتی که مستقل از متغیر بالا نوشته شده بودند */ html[data-theme="light"] header{background:rgba(250,248,243,.82);} html[data-theme="light"] .mobile-nav{background:rgba(255,253,248,.98);} html[data-theme="light"] .banner-nav{background:rgba(255,255,255,.7);} html[data-theme="light"] footer{background:#f2eee3;} html[data-theme="light"] .form-group input:focus, html[data-theme="light"] .form-group select:focus, html[data-theme="light"] .form-group textarea:focus{background:#fffdf9;} html[data-theme="light"] .combo-row select:hover, html[data-theme="light"] .combo-row select:focus{background-color:#fffdf9;} html[data-theme="light"] .error-msg, html[data-theme="light"] .form-error-summary{color:#b3392f;} html[data-theme="light"] .form-group.error input, html[data-theme="light"] .form-group.error select, html[data-theme="light"] .form-group.error textarea{border-color:#c14a3f;} /* رنگ‌های rgba(201,162,75...) طلایی که مستقیم نوشته شده بودند (نه از طریق متغیر) در حالت روشن به همان آبی جدید تبدیل می‌شوند تا افکت هاور/درخشش‌ها هم‌رنگ بقیه‌ی سایت بمانند */ html[data-theme="light"] .eyebrow{background:rgba(37,99,235,.07);} html[data-theme="light"] .login-btn{box-shadow:0 8px 22px -6px rgba(37,99,235,.4);} html[data-theme="light"] .login-btn:hover{box-shadow:0 12px 28px -6px rgba(37,99,235,.5);} html[data-theme="light"] .hero-stack{background:radial-gradient(ellipse 1100px 700px at 85% 0%, rgba(37,99,235,.12), transparent 55%), var(--bg);} html[data-theme="light"] .btn-outline:hover{background:rgba(37,99,235,.08);} html[data-theme="light"] .pos-box--body .pos-face--front{box-shadow:0 40px 80px -30px rgba(16,30,60,.25), 0 0 0 1px rgba(37,99,235,.1) inset;} html[data-theme="light"] .pos-glow{background:radial-gradient(circle, rgba(37,99,235,.18), transparent 72%);} html[data-theme="light"] .pos-arc{border-top-color:rgba(37,99,235,.5); border-inline-end-color:rgba(37,99,235,.22);} html[data-theme="light"] .pos-waves span{border-color:#1554d6;} html[data-theme="light"] .pos-screen-brand,html[data-theme="light"] .pos-screen-amount,html[data-theme="light"] .pos-screen-amount em{color:#e8f0ff;} html[data-theme="light"] .pos-key:hover{background:linear-gradient(135deg,#3f8bff,#1554d6); color:#eaf2ff;} html[data-theme="light"] .pos-key.is-lit{background:linear-gradient(135deg,#3f8bff,#1554d6); color:#eaf2ff;} html[data-theme="light"] .pos-stage.hovering .pos-box--body .pos-face--front{box-shadow:0 55px 100px -25px rgba(37,99,235,.35), 0 0 0 1px rgba(37,99,235,.3) inset;} html[data-theme="light"] .product-card::before{background:radial-gradient(circle at 30% 0%, rgba(37,99,235,.12), transparent 60%);} html[data-theme="light"] .icon-box{background:rgba(37,99,235,.1);} html[data-theme="light"] .agency-cta-icon{background:rgba(37,99,235,.12);} html[data-theme="light"] .agency-close:hover{background:rgba(37,99,235,.1);} html[data-theme="light"] .jalali-calendar{box-shadow:0 24px 55px -16px rgba(16,30,60,.18), 0 0 0 1px rgba(37,99,235,.08) inset;} html[data-theme="light"] .jc-nav:hover:not(:disabled){background:rgba(37,99,235,.12);} html[data-theme="light"] .jc-title-part{background:rgba(37,99,235,.08);} html[data-theme="light"] .jc-title-part:hover,html[data-theme="light"] .jc-title-part.active{background:rgba(37,99,235,.16);} html[data-theme="light"] .jc-days button:hover:not(:disabled){background:rgba(37,99,235,.12);} html[data-theme="light"] .jc-months button:hover{background:rgba(37,99,235,.12);} html[data-theme="light"] .jc-years button:hover:not(:disabled){background:rgba(37,99,235,.12);} /* فلش کشویی select‌ها (استان/شهر و ردیف مدت فعالیت سال/ماه) به‌صورت SVG هاردکد طلایی تعریف شده بود، پس با تغییر متغیرهای رنگ به آبی خودش عوض نمی‌شد؛ این‌جا دو حالتِ همان فلش را با رنگ آبی معادل (--gold و --gold-bright لایت‌مود) بازتعریف می‌کنیم. */ html[data-theme="light"] select{ background-image:url("data:image/svg+xml;utf8,"); } html[data-theme="light"] .combo-row select{ background-image:url("data:image/svg+xml;utf8,"); } html[data-theme="light"] .city-options div:hover,html[data-theme="light"] .city-options div.active{background:rgba(37,99,235,.1);} html[data-theme="light"] .pdf-redownload-btn:hover{background:rgba(37,99,235,.08);} html[data-theme="light"] .banner-nav:hover{background:rgba(37,99,235,.18);} html[data-theme="light"] .banner-dot:hover{background:rgba(37,99,235,.45);} html[data-theme="light"] .theme-toggle-btn{box-shadow:0 12px 30px -10px rgba(16,30,60,.18), 0 0 0 1px rgba(37,99,235,.08) inset;} html[data-theme="light"] .theme-toggle-btn:hover{box-shadow:0 16px 36px -10px rgba(37,99,235,.3), 0 0 0 1px rgba(37,99,235,.1) inset;} /* متن مشکی روی دکمه‌های گرادیانی، در حالت روشن که گرادیان آبی‌ست، به سفید تغییر می‌کند تا کنتراست خوانا بماند (در دارک‌مود دست‌نخورده می‌ماند) */ html[data-theme="light"] .login-btn, html[data-theme="light"] .login-btn svg, html[data-theme="light"] .btn-primary, html[data-theme="light"] .agency-cta-btn, html[data-theme="light"] .submit-btn, html[data-theme="light"] .jc-days button.selected, html[data-theme="light"] .jc-months button.selected, html[data-theme="light"] .jc-years button.selected{color:#ffffff;} html[data-theme="light"] .login-btn svg{fill:#ffffff;} /* تغییر رنگ نرم بین دو حالت (نه فقط پرش ناگهانی) روی مهم‌ترین سطوح بصری */ body, header, footer, .mobile-nav, .model-card, .faq-item, .agency-cta, .agency-panel-inner, .form-group input, .form-group select, .form-group textarea, .cat-tab, .banner-nav, .theme-toggle-btn{ transition:background-color .35s ease, color .35s ease, border-color .35s ease, box-shadow .35s ease; } /* ========================================================================== دکمه شناور تعویض حالت روشن/تاریک ========================================================================== */ .theme-toggle-btn{ position:fixed; bottom:24px; left:24px; z-index:1000; width:56px;height:56px; border-radius:50%; border:1px solid var(--line-strong); background:var(--surface); box-shadow:0 12px 30px -10px rgba(0,0,0,.5), 0 0 0 1px rgba(201,162,75,.06) inset; display:flex;align-items:center;justify-content:center; cursor:pointer; overflow:hidden; transition:background-color .35s ease, border-color .35s ease, box-shadow .25s ease, transform .25s ease; } .theme-toggle-btn:hover{ transform:translateY(-3px); box-shadow:0 16px 36px -10px rgba(201,162,75,.35), 0 0 0 1px rgba(201,162,75,.1) inset; border-color:var(--gold-bright); } .theme-toggle-btn:active{transform:translateY(-1px) scale(.94);} .theme-toggle-btn .ttb-icon-wrap{ position:relative;width:24px;height:24px; } .theme-toggle-btn svg{ position:absolute;inset:0;width:24px;height:24px; transition:opacity .4s ease, transform .5s ease; } .theme-toggle-btn .icon-sun{fill:var(--gold-bright); opacity:0; transform:rotate(-90deg) scale(.4);} .theme-toggle-btn .icon-moon{fill:var(--gold-bright); opacity:1; transform:rotate(0) scale(1);} html[data-theme="light"] .theme-toggle-btn .icon-sun{opacity:1; transform:rotate(0) scale(1);} html[data-theme="light"] .theme-toggle-btn .icon-moon{opacity:0; transform:rotate(90deg) scale(.4);} /* برچسب راهنما هنگام هاور (دسکتاپ) */ .theme-toggle-btn .ttb-tooltip{ position:absolute; left:68px; bottom:50%; transform:translateY(50%) translateX(-6px); background:var(--surface); color:var(--white); border:1px solid var(--line); padding:7px 14px; border-radius:10px; font-size:.8rem; font-weight:700; white-space:nowrap; opacity:0; visibility:hidden; box-shadow:0 10px 24px -10px rgba(0,0,0,.4); transition:opacity .25s ease, transform .25s ease, visibility .25s; pointer-events:none; } .theme-toggle-btn:hover .ttb-tooltip{opacity:1; visibility:visible; transform:translateY(50%) translateX(0);} @media (max-width:640px){ .theme-toggle-btn{width:50px;height:50px;bottom:18px;left:18px;} .theme-toggle-btn .ttb-tooltip{display:none;} /* موبایل جای هاور ندارد */ } /* اگر کاربر انیمیشن کمتر می‌خواهد */ @media (prefers-reduced-motion: reduce){ .theme-toggle-btn, .theme-toggle-btn svg, body, header, footer{transition:none;} } /* ========================================================================== انیمیشن دایره‌ای لحظه‌ی تعویض دارک/لایت (View Transitions API) ---------------------------------------------------------------------------- theme-toggle.js با document.startViewTransition یک "عکس" از تم قبلی و یک "عکس" از تم جدید می‌گیرد؛ ما فقط جلوی کراس‌فید پیش‌فرض مرورگر را می‌گیریم و به‌جایش با root.animate(...) یک دایره‌ی نور از نقطه‌ی کلیک باز می‌کنیم که تم جدید را رو می‌کند. در مرورگرهایی که این API را ندارند این بلوک اصلاً اجرا نمی‌شود و افکت کراس‌فید ساده‌ی قبلی (روی body/header/...) جایگزین می‌شود. ========================================================================== */ @media (prefers-reduced-motion: no-preference){ ::view-transition-group(root){ animation-duration:650ms; } ::view-transition-old(root){ animation:none; z-index:1; } ::view-transition-new(root){ animation:none; z-index:2; } } /* درصورت غیرفعال بودن انیمیشن‌ها، افکت دایره‌ای اجرا نشود و فقط تم عوض شود */ @media (prefers-reduced-motion: reduce){ ::view-transition-group(root), ::view-transition-old(root), ::view-transition-new(root){ animation:none !important; } } /* ========================================================================== بخش «طراحی سایت» — گام ۴ (هم باکس معرفی در صفحه اصلی، هم صفحه مستقل /web-design) عمداً حداقلی و با استفاده از همان توکن‌های رنگ/فاصله‌ی بقیه‌ی سایت، تا با ظاهر فروشگاه یکدست بماند ولی بصری از آن جدا دیده شود (کادر مجزا). ========================================================================== */ .wd-home-section{padding-top:0;} .wd-home-box{ border:1px solid var(--line-strong); background:linear-gradient(135deg, var(--surface) 0%, var(--surface-2) 100%); border-radius:var(--radius-lg); padding:48px; text-align:center; box-shadow:var(--shadow-gold); } .wd-home-box .wd-home-text{max-width:640px;margin:0 auto;} .wd-home-box h2{font-size:clamp(1.5rem,2.6vw,2rem);font-weight:900;margin:14px 0;} .wd-home-box p{color:var(--gray-300);margin-bottom:26px;} .wd-hero{padding-bottom:60px;} .wd-services .product-card{cursor:default;} .wd-services .product-card:hover{transform:none;} .wd-steps li{align-items:flex-start;} .wd-steps li b{color:var(--gold-bright);} .wd-request .section-header{margin-bottom:0;} .wd-form-box{ max-width:760px;margin:40px auto 0; border:1px solid var(--line); background:var(--surface); border-radius:var(--radius-lg); padding:36px; } @media (max-width:640px){.wd-form-box{padding:22px 16px;}} /* ========================================================================== موس پوینتر سفارشی (Custom Cursor) ---------------------------------------------------------------------------- یک دایره‌ی توپر کوچک («هسته») که دقیقاً روی مکان ماوس می‌نشیند و یک حلقه‌ی دور آن («هاله») که با کمی تاخیر/نرمی دنبالش می‌کند. رنگ هسته از --gold می‌آید (طلایی در حالت تاریک، آبی سایت در حالت روشن) و رنگ خط دور حلقه از --white می‌آید (سفید در تاریک، مشکیِ سایت در روشن) — چون هر دو متغیر همین الان هم بین دو تم عوض می‌شوند، هیچ رنگ اضافه‌ای لازم نیست تعریف شود. فقط روی دستگاه‌هایی با ماوس واقعی فعال می‌شود (کنترل توسط JS از طریق افزودن data-cursor="ready" به ؛ روی گوشی/تبلت هرگز اضافه نمی‌شود). ========================================================================== */ /* همه‌ی سایت، بدون استثنا: کرسر پیش‌فرض مرورگر مخفی می‌شود (!important چون ده‌ها قانون پراکنده‌ی دیگر در همین فایل روی دکمه‌ها/کارت‌ها/لینک‌ها از قبل cursor:pointer گذاشته بودند و باید همه را یک‌جا بی‌اثر کند، بدون نیاز به لیست‌کردن تک‌تک‌شان و بدون خطر جا ماندن یک المان در آینده) */ html[data-cursor="ready"] *{ cursor:none !important; } /* داخل فیلدهای متنی، همان آی‌بیم استاندارد مرورگر بماند تا تایپ‌کردن طبیعی حس شود */ html[data-cursor="ready"] input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]), html[data-cursor="ready"] textarea, html[data-cursor="ready"] [contenteditable="true"]{ cursor:text !important; } .pm-cursor-dot, .pm-cursor-ring{ position:fixed; top:0; left:0; border-radius:50%; pointer-events:none; z-index:99999; will-change:transform, opacity, width, height; opacity:0; transition:opacity .25s ease, width .25s cubic-bezier(.34,1.56,.64,1), height .25s cubic-bezier(.34,1.56,.64,1), background-color .3s ease, border-color .3s ease; } html[data-cursor="ready"] .pm-cursor-dot, html[data-cursor="ready"] .pm-cursor-ring{ opacity:1; } /* هسته‌ی توپر: بزرگ‌تر و دقیقاً وسطِ نوکِ ماوس (مرکزش را JS با translate(-50%,-50%) روی نقطه‌ی دقیق ماوس نگه می‌دارد) */ .pm-cursor-dot{ width:16px; height:16px; background:var(--gold); box-shadow:0 0 12px 1px var(--gold), 0 0 3px var(--gold-bright); } /* حلقه‌ی دنبال‌کننده: نزدیک‌تر و کوچک‌تر از هسته، فقط یک هاله‌ی نازک دورش */ .pm-cursor-ring{ width:26px; height:26px; border:1.5px solid var(--white); background:transparent; transition:opacity .25s ease, width .28s cubic-bezier(.34,1.56,.64,1), height .28s cubic-bezier(.34,1.56,.64,1), border-color .3s ease, background-color .3s ease, border-width .2s ease; } /* حالت هاور روی عناصر قابل‌کلیک: حلقه بزرگ‌تر می‌شود و هسته کمی جمع می‌شود تا حس «قفل‌شدن» روی المان را منتقل کند */ html.pm-cursor-hover .pm-cursor-ring{ width:44px; height:44px; border-width:1px; background:rgba(201,162,75,.08); } html[data-theme="light"].pm-cursor-hover .pm-cursor-ring{ background:rgba(37,99,235,.08); } html.pm-cursor-hover .pm-cursor-dot{ width:11px; height:11px; } /* حالت کلیک: هر دو دایره جمع می‌شوند (فیدبک لمسیِ فوری) */ html.pm-cursor-click .pm-cursor-dot{ width:12px; height:12px; } html.pm-cursor-click .pm-cursor-ring{ width:18px; height:18px; border-width:2px; } /* موج حلقه‌ای که هنگام کلیک از مرکز باز می‌شود و محو می‌گردد (مرکزش را JS با translate(-50%,-50%) روی نقطه‌ی دقیق کلیک نگه می‌دارد) */ .pm-cursor-ripple{ position:fixed; top:0; left:0; width:10px; height:10px; border-radius:50%; border:1.5px solid var(--gold-bright); pointer-events:none; z-index:99998; opacity:.6; animation:pm-cursor-ripple-anim .55s cubic-bezier(.25,.8,.4,1) forwards; } @keyframes pm-cursor-ripple-anim{ to{ width:70px; height:70px; opacity:0; border-width:1px; } } /* موج لمسیِ گوشی/تبلت: کمی بزرگ‌تر و پررنگ‌تر از نسخه‌ی دسکتاپ چون نوک انگشت دقتی مثل نوک ماوس ندارد و باید واضح‌تر دیده شود. رنگ همچنان از --gold-bright می‌آید تا خودش را با تم روشن/تاریک هماهنگ نگه دارد. */ .pm-cursor-ripple-touch{ width:14px; height:14px; border-width:2px; opacity:.75; animation-name:pm-cursor-ripple-touch-anim; animation-duration:.6s; } @keyframes pm-cursor-ripple-touch-anim{ to{ width:90px; height:90px; opacity:0; border-width:1px; } } /* روی صفحاتی که ماوس از پنجره خارج می‌شود، دایره‌ها محو می‌شوند */ html.pm-cursor-hidden .pm-cursor-dot, html.pm-cursor-hidden .pm-cursor-ring{ opacity:0; } @media (prefers-reduced-motion: reduce){ .pm-cursor-dot, .pm-cursor-ring{ transition:opacity .2s ease, background-color .3s ease, border-color .3s ease; } } /* ========================================================================== گام ۳ — پنل کاربری / ورود با موبایل + رمز عبور (بدون پیامک) ---------------------------------------------------------------------------- عمداً از همان کلاس‌های فرم موجود (.form-group / .field-grid / .btn) استفاده شده تا ظاهر با بقیه‌ی سایت یکدست بماند؛ این‌جا فقط اندازه/چیدمان باکس اصلی صفحات ورود/پنل کاربری اضافه می‌شود. ========================================================================== */ .account-section{padding:150px 0 110px;min-height:70vh;} .account-box{ max-width:440px;margin:0 auto; border:1px solid var(--line); background:var(--surface); border-radius:var(--radius-lg); padding:36px; } .account-box.account-box-wide{max-width:640px;} @media (max-width:640px){.account-box{padding:24px 18px;}} .account-box h1{font-size:1.5rem;font-weight:900;margin-bottom:10px;text-align:center;} .account-box .account-subtitle{color:var(--gray-300);font-size:.9rem;text-align:center;margin-bottom:28px;} .account-links-row{display:flex;justify-content:space-between;align-items:center;margin-top:18px;gap:12px;flex-wrap:wrap;} .account-links-row a{color:var(--gold);font-size:.85rem;font-weight:600;} .account-links-row a:hover{color:var(--gold-bright);} /* گام ۱۰.۴ — ورود با کد پیامکی */ .account-otp-mobile{color:var(--gold);font-weight:700;unicode-bidi:plaintext;} .account-otp-hint{margin-top:8px;font-size:.8rem;color:var(--gray-300);text-align:center;} .account-info-list{list-style:none;margin:0 0 28px;padding:0;} .account-info-list li{ display:flex;justify-content:space-between;gap:16px; padding:14px 0;border-bottom:1px solid var(--line);font-size:.92rem; } .account-info-list li:last-child{border-bottom:none;} .account-info-list li b{color:var(--gray-300);font-weight:600;} .account-info-list li span{color:var(--white);text-align:left;} .account-badge{ display:inline-block;padding:4px 14px;border-radius:999px;font-size:.78rem;font-weight:700; background:rgba(201,162,75,.14);color:var(--gold-bright);border:1px solid var(--line-strong); margin-bottom:20px; } .account-empty-note{ text-align:center;color:var(--gray-300);font-size:.88rem; padding:26px 16px;border:1px dashed var(--line);border-radius:var(--radius); } /* ========================================================================== گام ۴ — پنل کاربری مشتری (طراحی کامل): آواتار، کارت مشخصات، لیست سفارش‌ها ========================================================================== */ /* ---------- آواتار (وکتور آدم پیش‌فرض یا عکس آپلودی کاربر) ---------- */ .pm-avatar{ position:relative; display:inline-flex; } .pm-avatar-circle{ border-radius:50%; overflow:hidden; display:flex; align-items:center; justify-content:center; background:var(--surface-2); border:1px solid var(--line-strong); } .pm-avatar-img{ width:100%; height:100%; object-fit:cover; display:block; } .pm-avatar-default{ width:60%; height:60%; fill:var(--gray-300); } .pm-avatar-sm .pm-avatar-circle{ width:38px; height:38px; } .pm-avatar-md .pm-avatar-circle{ width:64px; height:64px; } .pm-avatar-lg .pm-avatar-circle{ width:104px; height:104px; } .pm-avatar-lg{ margin:0 auto; display:flex; flex-direction:column; align-items:center; } .pm-avatar-editable .pm-avatar-circle{ box-shadow:0 0 0 3px var(--bg-soft); } .pm-avatar-edit-btn{ position:absolute; bottom:0; left:50%; transform:translateX(50%); width:32px; height:32px; border-radius:50%; cursor:pointer; background:var(--gold); border:2px solid var(--bg-soft); display:flex; align-items:center; justify-content:center; transition:background .2s ease, transform .2s ease; } .pm-avatar-editable.pm-avatar-lg .pm-avatar-edit-btn{ bottom:2px; } .pm-avatar-edit-btn svg{ width:16px; height:16px; fill:#12100a; } .pm-avatar-edit-btn:hover{ background:var(--gold-bright); transform:translateX(50%) scale(1.06); } .pm-avatar-reset-btn{ position:absolute; top:-4px; left:-4px; width:24px; height:24px; border-radius:50%; cursor:pointer; background:var(--surface); border:1px solid var(--line-strong); display:flex; align-items:center; justify-content:center; padding:0; } .pm-avatar-reset-btn svg{ width:12px; height:12px; fill:var(--gray-300); } .pm-avatar-reset-btn:hover svg{ fill:var(--gold-bright); } /* گام ۸ — دایره‌ی چرخان روی آواتار حذف شد؛ در حین آپلود فقط دکمه‌ها موقتاً غیرفعال می‌شوند (بدون هیچ افکت بصری چرخان روی خودِ عکس). */ .pm-avatar-loading .pm-avatar-edit-btn, .pm-avatar-loading .pm-avatar-reset-btn{ pointer-events:none; opacity:.5; } .pm-avatar-msg{ position:absolute; top:calc(100% + 8px); right:50%; transform:translateX(50%); white-space:nowrap; font-size:.76rem; color:var(--gray-300); } .pm-avatar-msg-error{ color:#ef4444; } /* ---------- کارت بالای پنل کاربری (آواتار + مشخصات خلاصه) ---------- */ .account-profile-card{ display:flex; flex-direction:column; align-items:center; text-align:center; margin-bottom:8px; } .account-profile-card h1{ margin:16px 0 2px; } .account-profile-mobile{ color:var(--gray-300); font-size:.88rem; direction:ltr; } /* ---------- سرتیتر بخش‌های داخل پنل ---------- */ .account-section-title{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin:36px 0 16px; padding-top:20px; border-top:1px solid var(--line); } .account-section-title h2{ font-size:1.08rem; font-weight:800; } .account-section-title .count{ color:var(--gray-300); font-size:.82rem; font-weight:600; } /* ---------- لیست سفارش‌ها ---------- */ .order-list{ display:flex; flex-direction:column; gap:12px; } .order-card{ display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; border:1px solid var(--line); border-radius:var(--radius); padding:16px 18px; background:var(--surface-2); transition:border-color .2s ease; } .order-card:hover{ border-color:var(--line-strong); } .order-card-main{ display:flex; flex-direction:column; gap:4px; } .order-card-number{ font-weight:800; font-size:.95rem; } .order-card-meta{ color:var(--gray-300); font-size:.8rem; } .order-card-side{ display:flex; align-items:center; gap:14px; } .order-card-total{ font-weight:800; font-size:.92rem; white-space:nowrap; } .order-card-total small{ color:var(--gray-300); font-weight:500; font-size:.72rem; margin-right:4px; } .order-card-link{ display:inline-flex; align-items:center; gap:4px; color:var(--gold); font-size:.82rem; font-weight:700; white-space:nowrap; } .order-card-link:hover{ color:var(--gold-bright); } /* ---------- برچسب‌های رنگی وضعیت سفارش ---------- */ .status-badge{ display:inline-flex; align-items:center; gap:6px; padding:5px 12px; border-radius:999px; font-size:.76rem; font-weight:700; white-space:nowrap; border:1px solid transparent; } .status-badge::before{ content:''; width:6px; height:6px; border-radius:50%; background:currentColor; } .status-pending{ background:rgba(234,179,8,.14); border-color:rgba(234,179,8,.4); color:#eab308; } .status-paid{ background:rgba(34,197,94,.14); border-color:rgba(34,197,94,.4); color:#22c55e; } .status-processing{ background:rgba(59,130,246,.14); border-color:rgba(59,130,246,.4); color:#3b82f6; } .status-handed-to-post{ background:rgba(168,85,247,.14); border-color:rgba(168,85,247,.4); color:#a855f7; } .status-shipping{ background:rgba(99,102,241,.14); border-color:rgba(99,102,241,.4); color:#6366f1; } .status-delivered{ background:rgba(34,197,94,.14); border-color:rgba(34,197,94,.4); color:#22c55e; } .status-shipped{ background:rgba(168,85,247,.14); border-color:rgba(168,85,247,.4); color:#a855f7; } .status-cancelled,.status-failed{ background:rgba(239,68,68,.14); border-color:rgba(239,68,68,.4); color:#ef4444; } /* ---------- جزئیات یک سفارش ---------- */ .order-detail-header{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:24px; } .order-detail-items{ list-style:none; margin:0 0 24px; padding:0; display:flex; flex-direction:column; gap:10px; } .order-detail-item{ display:flex; align-items:center; gap:14px; border:1px solid var(--line); border-radius:var(--radius); padding:12px 14px; background:var(--surface-2); } .order-detail-item img{ width:52px; height:52px; object-fit:contain; border-radius:10px; background:var(--surface); flex-shrink:0; } .order-detail-item-name{ font-weight:700; font-size:.9rem; flex:1; } .order-detail-item-qty{ color:var(--gray-300); font-size:.8rem; white-space:nowrap; } .order-detail-item-total{ font-weight:800; font-size:.88rem; white-space:nowrap; } .order-detail-summary{ display:flex; justify-content:space-between; align-items:center; border-top:1px solid var(--line); padding-top:16px; font-weight:800; font-size:1.02rem; } .order-detail-shipping{ margin-top:20px; } .order-detail-shipping h3{ font-size:.92rem; font-weight:800; margin-bottom:10px; } @media (max-width:560px){ .order-card{ flex-direction:column; align-items:flex-start; } .order-card-side{ width:100%; justify-content:space-between; } } /* ========================================================================== تایم‌لاین گرافیکی پیگیری سفارش (پنل کاربری مشتری) — گام ۵ ۴ مرحله‌ی نمایش‌داده‌شده به مشتری، به‌صورت نوار عمودی با نقطه/شماره‌ی هر مرحله، خط رابط بین نقطه‌ها، تاریخ رسیدن به هر مرحله، و کد رهگیری پست (اگر ثبت شده باشد). مراحل داخلی/پرداخت ناموفق عمداً این‌جا نیستند. ========================================================================== */ .order-timeline-section{ margin-top:24px; } .timeline-note{ background:var(--surface-2); border:1px solid var(--line); border-radius:var(--radius); padding:12px 14px; font-size:.84rem; color:var(--gray-100); line-height:1.9; margin-bottom:18px; } .timeline-note-failed{ border-color:rgba(239,68,68,.4); background:rgba(239,68,68,.08); color:var(--white); } .order-timeline{ list-style:none; margin:0; padding:0; } .order-timeline-step{ display:flex; align-items:flex-start; gap:14px; position:relative; padding-bottom:30px; } .order-timeline-step:last-child{ padding-bottom:0; } .order-timeline-step:not(:last-child)::before{ content:''; position:absolute; top:34px; right:16px; width:2px; height:calc(100% - 34px); background:var(--line); } .order-timeline-step.is-reached:not(:last-child)::before{ background:var(--gold); } .order-timeline-dot{ flex:none; width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:var(--surface-2); border:2px solid var(--line-strong); color:var(--gray-300); font-size:.82rem; font-weight:800; position:relative; z-index:1; } .order-timeline-step.is-reached .order-timeline-dot{ background:linear-gradient(135deg,var(--gold-bright),var(--gold)); border-color:transparent; color:#161207; } .order-timeline-step.is-current .order-timeline-dot{ box-shadow:0 0 0 4px rgba(201,162,75,.25); } .order-timeline-body{ flex:1; display:flex; flex-direction:column; gap:3px; padding-top:5px; min-width:0; } .order-timeline-label{ font-weight:700; font-size:.88rem; color:var(--gray-300); } .order-timeline-step.is-reached .order-timeline-label{ color:var(--white); font-weight:800; } .order-timeline-current-badge{ display:inline-block; margin-inline-start:8px; font-size:.66rem; font-weight:800; padding:2px 9px; border-radius:20px; background:rgba(201,162,75,.16); color:var(--gold-bright); } .order-timeline-date{ font-size:.78rem; color:var(--gray-300); } .order-timeline-date-pending{ color:var(--gray-500); } .order-timeline-tracking{ font-size:.8rem; font-weight:700; color:var(--gold-bright); margin-top:2px; } /* ========================================================================== گام ۶ — پنل مدیریت (Owner Panel): ناوبری، کارت‌های داشبورد، جدول‌ها، کارت‌های درخواست فراموشی رمز ========================================================================== */ .account-box.account-box-xwide{ max-width:920px; } .success-msg{ color:#22c55e; font-size:.85rem; padding:10px 14px; border:1px solid rgba(34,197,94,.35); border-radius:var(--radius); background:rgba(34,197,94,.08); } /* ---------- ناوبری تب‌مانند بین بخش‌های پنل مدیریت / پنل مشتری ---------- */ .admin-nav, .account-nav{ display:flex; flex-wrap:wrap; gap:8px; margin:24px 0 28px; padding-bottom:18px; border-bottom:1px solid var(--line); } .admin-nav a, .account-nav a{ padding:8px 16px; border-radius:999px; font-size:.82rem; font-weight:700; color:var(--gray-300); border:1px solid var(--line); white-space:nowrap; transition:color .2s ease, border-color .2s ease, background .2s ease; } .admin-nav a:hover, .account-nav a:hover{ color:var(--white); border-color:var(--line-strong); } .admin-nav a.active, .account-nav a.active{ color:var(--gold-bright); border-color:var(--line-strong); background:rgba(201,162,75,.1); } /* ---------- کارت‌های شمارشی داشبورد (پنل مدیریت + پنل مشتری) ---------- */ .admin-cards-grid, .account-cards-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:14px; } @media (max-width:720px){ .admin-cards-grid, .account-cards-grid{ grid-template-columns:repeat(2,1fr); } } .admin-card, .account-card{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; border:1px solid var(--line); border-radius:var(--radius); padding:22px 12px; background:var(--surface-2); text-align:center; transition:border-color .2s ease; } .admin-card:hover, .account-card:hover{ border-color:var(--gold); } .admin-card-count, .account-card-count{ font-size:1.6rem; font-weight:900; color:var(--gold-bright); } .admin-card-label, .account-card-label{ font-size:.8rem; color:var(--gray-300); } /* گام ۷.۳ — نشان اعلان (مشتری تازه ثبت‌نام کرد) روی کارت مشتری‌ها */ .admin-notif-dot{ position:absolute; top:8px; left:8px; min-width:20px; height:20px; padding:0 5px; border-radius:999px; background:#e05252; color:#fff; font-size:.72rem; font-weight:800; display:flex; align-items:center; justify-content:center; line-height:1; } /* گام ۷.۲ — صفحه‌ی مشتری‌ها: کارت‌های اطلاعات فقط-نمایشی */ .customer-group-title{ font-size:.9rem; font-weight:800; color:var(--gold-bright); margin-bottom:10px; padding-bottom:8px; border-bottom:1px solid var(--line); } .customer-list{ display:flex; flex-direction:column; gap:12px; } .customer-card{ border:1px solid var(--line); border-radius:var(--radius); background:var(--surface-2); padding:16px 18px; } .customer-card-head{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px; margin-bottom:10px; padding-bottom:10px; border-bottom:1px solid var(--line); } .customer-card-name{ font-weight:800; color:var(--white); font-size:1rem; } .customer-card-id{ font-size:.72rem; color:var(--gray-300); direction:ltr; } .customer-fields{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:10px 18px; } .customer-field-label{ font-size:.72rem; color:var(--gray-300); margin-bottom:2px; } .customer-field-value{ font-size:.86rem; color:var(--white); word-break:break-word; } /* فعال‌سازی دستگاه — گام ۱۰: بلوک دکمه‌های دانلود فرم پذیرندگی، جدا از بقیه‌ی مشخصات با یک خط‌جداکننده‌ی ملایم بالای خودش. */ .customer-card-forms{ margin-top:14px; padding-top:14px; border-top:1px solid var(--line); } /* گام ۷.۴ — جعبه‌ی جست‌وجوی مشتری */ .customer-search-box{ display:flex; align-items:center; gap:10px; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface-2); padding:0 14px; height:46px; } .customer-search-box:focus-within{ border-color:var(--gold); } .customer-search-icon{ color:var(--gray-300); flex-shrink:0; } .customer-search-box input{ flex:1; height:100%; border:none; background:transparent; color:var(--white); font-size:.9rem; font-family:inherit; } .customer-search-box input:focus{ outline:none; } .customer-search-box input::placeholder{ color:var(--gray-500); } .customer-search-clear{ flex-shrink:0; font-size:.76rem; color:var(--gray-300); background:none; border:none; cursor:pointer; padding:6px 4px; white-space:nowrap; } .customer-search-clear:hover{ color:var(--gold); } .customer-search-count{ margin-top:10px; font-size:.8rem; color:var(--gray-300); } /* گام ۷.۴ / گام ۱۳ — جدول/گرید تاریخ‌های قابل‌کلیک؛ هر تاریخ یک دکمه است که با کلیک فقط ردیف‌های همان روز را باز/بسته می‌کند (accordion). این کلاس‌ها عمومی‌اند و هم در صفحه‌ی مشتری‌ها و هم در صفحه‌ی درخواست‌ها استفاده می‌شوند، تا فقط یک ماه اخیر روز‌به‌روز و بقیه زیر یک چیپ «قدیمی‌تر» جمع شود. */ .date-chips{ display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:10px; margin-top:14px; } .date-chip{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface-2); padding:14px 10px; cursor:pointer; font-family:inherit; transition:border-color .2s ease, background .2s ease; } .date-chip:hover{ border-color:var(--gold); } .date-chip.is-open{ border-color:var(--gold); background:rgba(197,164,90,.12); } .date-chip-label{ font-size:.82rem; font-weight:700; color:var(--white); text-align:center; } .date-chip-count{ font-size:.72rem; color:var(--gold-bright); font-weight:800; } /* چیپ «قدیمی‌تر» (بایگانی) — همان ظاهر ولی با یک نشانه‌ی بصری خفیف که از تاریخ‌های روزانه متمایزش کند (خط‌چین به‌جای خط‌ِ توپر). */ .date-chip--archive{ border-style:dashed; } .date-chip--archive .date-chip-label{ color:var(--gray-300); } .date-panel{ border-top:1px dashed var(--line); } @media (max-width:600px){ .date-chips{ grid-template-columns:repeat(2,1fr); } } /* گام ۱۶ — دکمه‌ی «بارگذاری بیشتر» بخش آرشیو (قدیمی‌تر)، هم‌رنگ چیپ‌های خط‌چین بایگانی تا حس یک بخش واحد را بدهد. */ .archive-load-more-btn{ border:1px dashed var(--line); border-radius:var(--radius); background:var(--surface-2); color:var(--white); font-family:inherit; font-size:.82rem; font-weight:700; padding:10px 22px; cursor:pointer; transition:border-color .2s ease, background .2s ease; } .archive-load-more-btn:hover{ border-color:var(--gold); background:rgba(197,164,90,.12); } .archive-loading-note, .archive-loaded-note{ font-size:.78rem; color:var(--gray-300); } /* ---------- جدول‌های پنل مدیریت (درخواست‌ها/سفارش‌ها) ---------- */ .admin-table-wrap{ overflow-x:auto; margin-bottom:8px; } .admin-table{ width:100%; border-collapse:collapse; font-size:.84rem; white-space:nowrap; } .admin-table th, .admin-table td{ padding:12px 10px; text-align:right; border-bottom:1px solid var(--line); } .admin-table th{ color:var(--gray-300); font-weight:700; font-size:.78rem; } .admin-table td{ color:var(--white); } .admin-table tbody tr:hover{ background:var(--surface-2); } .admin-inline-form select{ height:36px; border-radius:8px; border:1px solid var(--line); background:var(--surface); color:var(--white); font-size:.78rem; padding:0 8px; } .admin-link{ color:var(--gold); font-weight:700; } .admin-link:hover{ color:var(--gold-bright); } /* ---------- گام ۳ — جست‌وجو/فیلتر لیست سفارش‌ها + یادداشت انتقال مرحله ---------- */ .admin-filter-row{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin:18px 0 22px; padding:14px; border:1px solid var(--line); border-radius:12px; background:var(--surface); } .admin-filter-search{ flex:1 1 260px; min-width:180px; height:38px; border-radius:8px; border:1px solid var(--line); background:var(--surface-2); color:var(--white); font-size:.84rem; padding:0 12px; } .admin-filter-select{ height:38px; border-radius:8px; border:1px solid var(--line); background:var(--surface-2); color:var(--white); font-size:.84rem; padding:0 10px; } .admin-advance-form{ display:flex; flex-direction:column; gap:6px; align-items:stretch; min-width:200px; } .admin-advance-note{ height:32px; border-radius:8px; border:1px solid var(--line); background:var(--surface-2); color:var(--white); font-size:.76rem; padding:0 8px; } /* ---------- گام ۳ — تاریخچه‌ی مراحل سفارش (فقط پنل مدیریت) ---------- */ .admin-history-list{ list-style:none; margin:14px 0 0; padding:0; display:flex; flex-direction:column; gap:12px; } .admin-history-item{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; padding:10px 12px; border:1px solid var(--line); border-radius:10px; background:var(--surface); } .admin-history-date{ font-size:.78rem; color:var(--gray-300); } .admin-history-by{ font-size:.78rem; color:var(--gray-300); } .admin-history-note{ flex-basis:100%; font-size:.82rem; color:var(--white); margin-top:2px; } /* ---------- گام ۹ — تب‌های زیرمجموعه‌ی درخواست‌ها + دکمه‌های اکشن ---------- */ .admin-subnav{ margin:0 0 22px; padding-bottom:0; border-bottom:none; } .requests-group{ margin-bottom:32px; } .requests-group h2{ font-size:1.02rem; margin:0 0 12px; color:var(--white); } .admin-action-row{ display:flex; gap:8px; flex-wrap:wrap; } .admin-action-btn{ border:1px solid var(--line); border-radius:8px; padding:6px 14px; font-size:.76rem; font-weight:700; cursor:pointer; background:var(--surface); color:var(--gray-300); transition:border-color .2s ease, color .2s ease; } .admin-action-btn:hover{ border-color:var(--line-strong); color:var(--white); } .admin-action-approve{ color:#22c55e; border-color:rgba(34,197,94,.35); } .admin-action-approve:hover{ background:rgba(34,197,94,.1); color:#22c55e; } .admin-action-reject{ color:#e05252; border-color:rgba(224,82,82,.35); } .admin-action-reject:hover{ background:rgba(224,82,82,.1); color:#e05252; } .admin-action-restore{ color:var(--gold); border-color:rgba(201,162,75,.35); } .admin-action-restore:hover{ background:rgba(201,162,75,.1); color:var(--gold-bright); } /* ---------- گام ۴ — دکمه‌ی دانلود PDF هر درخواست (نمایندگی/طراحی سایت) ---------- */ .admin-action-pdf{ color:#7cc4f2; border-color:rgba(124,196,242,.35); } .admin-action-pdf:hover{ background:rgba(124,196,242,.1); color:#a9d8f7; } .admin-action-pdf:disabled{ opacity:.6; cursor:wait; } /* ===================== پنل CRM — مدیریت محصولات + مدل‌های دستگاه ===================== */ .crm-notice{ padding:12px 16px; border-radius:10px; font-size:.85rem; margin-bottom:16px; border:1px solid; line-height:1.7; } .crm-notice-success{ background:rgba(34,197,94,.12); border-color:rgba(34,197,94,.4); color:#22c55e; } .crm-notice-error{ background:rgba(239,68,68,.12); border-color:rgba(239,68,68,.4); color:#ef4444; } .status-success{ background:rgba(34,197,94,.14); border-color:rgba(34,197,94,.4); color:#22c55e; } .status-muted{ background:rgba(148,163,184,.14); border-color:rgba(148,163,184,.4); color:#94a3b8; } .crm-toolbar{ display:flex; flex-wrap:wrap; align-items:center; gap:12px; justify-content:space-between; margin-bottom:18px; } .crm-toolbar .admin-nav{ margin:0; padding-bottom:0; border-bottom:none; } .crm-search-form{ display:flex; align-items:center; gap:8px; flex:1 1 260px; max-width:420px; } .crm-search-form input[type="text"]{ flex:1; height:40px; border-radius:8px; border:1px solid var(--line); background:var(--surface-2); color:var(--white); padding:0 12px; font-size:.85rem; } .crm-search-form input[type="text"]:focus{ border-color:var(--gold); outline:none; } .crm-search-form .btn{ padding:9px 16px; font-size:.8rem; white-space:nowrap; } .crm-clear-search{ font-size:.78rem; color:var(--gray-300); white-space:nowrap; } .crm-clear-search:hover{ color:var(--white); } @media (max-width:720px){ .crm-toolbar{ flex-direction:column; align-items:stretch; } .crm-search-form{ max-width:none; } } .crm-thumb{ width:44px; height:44px; border-radius:8px; object-fit:cover; border:1px solid var(--line); display:inline-flex; align-items:center; justify-content:center; } .crm-thumb-empty{ color:var(--gray-500); background:var(--surface-2); font-size:.68rem; } .crm-thumb-lg{ width:120px; height:120px; border-radius:12px; font-size:.8rem; } .crm-row-actions{ display:flex; align-items:center; gap:12px; } .crm-row-actions a{ color:var(--gold-bright); font-size:.8rem; font-weight:700; } .crm-row-actions a:hover{ text-decoration:underline; } .crm-delete-btn{ background:none; border:none; color:#ef4444; font-size:.8rem; font-weight:700; cursor:pointer; padding:0; font-family:inherit; } .crm-delete-btn:hover{ text-decoration:underline; } .crm-toggle-btn{ background:none; border:1px solid var(--line-strong); border-radius:8px; padding:6px 14px; color:var(--gray-100); font-size:.78rem; font-weight:700; cursor:pointer; font-family:inherit; transition:.2s; } .crm-toggle-btn:hover{ border-color:var(--gold); color:var(--gold-bright); } .crm-inline-add-form{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:22px; padding:16px; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface-2); } .crm-inline-add-form input[type="text"]{ flex:1 1 240px; height:44px; border-radius:8px; border:1px solid var(--line); background:var(--surface); color:var(--white); padding:0 14px; font-size:.86rem; } .crm-inline-add-form input[type="text"]:focus{ border-color:var(--gold); outline:none; } .crm-model-select-row{ display:flex; align-items:center; gap:8px; } .crm-model-select-row select{ flex:1; } .crm-model-select-row input[type="text"]{ flex:1; min-width:0; } .crm-add-model-btn{ flex-shrink:0; height:46px; padding:0 14px; border-radius:8px; border:1px dashed var(--line-strong); background:transparent; color:var(--gold-bright); font-size:.78rem; font-weight:700; cursor:pointer; white-space:nowrap; transition:.2s; font-family:inherit; } .crm-add-model-btn:hover{ border-color:var(--gold); background:rgba(201,162,75,.08); } .crm-add-model-box{ display:none; flex-wrap:wrap; align-items:center; gap:8px; margin-top:10px; padding:12px; border:1px solid var(--line); border-radius:10px; background:var(--surface-2); } .crm-add-model-box.open{ display:flex; } .crm-add-model-box input[type="text"]{ flex:1 1 180px; height:40px; border-radius:8px; border:1px solid var(--line); background:var(--surface); color:var(--white); padding:0 12px; font-size:.84rem; } .crm-add-model-box input[type="text"]:focus{ border-color:var(--gold); outline:none; } .crm-add-model-box .btn{ padding:9px 16px; font-size:.78rem; white-space:nowrap; } .crm-add-model-error{ color:#ef4444; font-size:.76rem; flex-basis:100%; } .crm-field-hint{ font-size:.76rem; color:var(--gray-500); margin-top:6px; line-height:1.6; } .crm-image-placeholder{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; padding:14px; border:1px dashed var(--line-strong); border-radius:var(--radius); background:var(--surface-2); } .crm-thumb-lg{ object-fit:cover; background:var(--surface); } .crm-image-controls{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; } .crm-image-pick-btn{ cursor:pointer; border:1px solid var(--line-strong); border-radius:8px; padding:9px 16px; transition:.2s; } .crm-image-pick-btn:hover{ border-color:var(--gold); color:var(--gold-bright); } .crm-image-remove-btn{ background:none; border:none; color:#ef4444; font-size:.85rem; font-weight:700; cursor:pointer; padding:0; font-family:inherit; } .crm-image-remove-btn:hover{ text-decoration:underline; } .crm-form-actions{ display:flex; align-items:center; gap:16px; margin-top:26px; flex-wrap:wrap; } .crm-form-actions .submit-btn{ width:auto; padding:13px 34px; } .btn-cancel-link{ color:var(--gray-300); font-size:.85rem; font-weight:700; } .btn-cancel-link:hover{ color:var(--white); } html[data-theme="light"] .crm-search-form input[type="text"], html[data-theme="light"] .crm-inline-add-form input[type="text"], html[data-theme="light"] .crm-add-model-box input[type="text"]{ background:#fffdf9; } /* ===================== گام ۵ — سبد خرید (آیکن هدر + صفحات cart/checkout) ===================== */ .cart-btn{ position:relative; display:flex; align-items:center; justify-content:center; width:42px; height:42px; border-radius:50%; border:1px solid var(--line-strong); background:var(--bg-soft); transition:.25s; } .cart-btn:hover{border-color:var(--gold-bright); box-shadow:var(--shadow-gold);} .cart-btn svg{width:19px;height:19px;fill:var(--gray-100);} .cart-badge{ position:absolute; top:-6px; left:-6px; min-width:18px; height:18px; padding:0 4px; border-radius:999px; background:linear-gradient(135deg,var(--gold-bright),var(--gold)); color:#161207; font-size:.68rem; font-weight:800; line-height:18px; text-align:center; } .cart-summary{ border-top:1px solid var(--line); margin-top:22px; padding-top:18px; } .cart-summary-row{display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; font-size:.95rem;} .cart-summary-row b{font-size:1.15rem; color:var(--gold-bright);} .cart-row{ display:flex; align-items:center; gap:14px; padding:14px 0; border-bottom:1px solid var(--line); } .cart-row:last-child{border-bottom:none;} .cart-row-photo{width:56px;height:56px;border-radius:10px;overflow:hidden;background:var(--bg-soft);flex:0 0 auto; display:flex;align-items:center;justify-content:center;border:1px solid var(--line);} .cart-row-photo img{width:100%;height:100%;object-fit:contain;} .cart-row-photo-placeholder{width:100%;height:100%;background:var(--bg-soft);} .cart-row-info{flex:1 1 auto; display:flex; flex-direction:column; gap:4px; min-width:0;} .cart-row-info b{font-size:.92rem; font-weight:800;} .cart-row-info span{font-size:.78rem; color:var(--gray-300);} .cart-row-error{color:#d9534f !important;} .cart-row-qty{display:flex; align-items:center; gap:6px; flex:0 0 auto;} .cart-qty-btn{ width:28px;height:28px;border-radius:8px;border:1px solid var(--line-strong); background:var(--bg-soft); color:var(--gold-bright); font-weight:800; font-size:1rem; line-height:1; } .cart-qty-btn:hover{border-color:var(--gold-bright);} html[data-theme="light"] .cart-qty-btn{color:var(--gray-100);} .cart-qty-input{ width:48px; height:28px; text-align:center; border-radius:8px; border:1px solid var(--line-strong); background:var(--bg-soft); color:var(--gray-100); } .cart-row-total{flex:0 0 auto; text-align:left; display:flex; flex-direction:column; gap:2px; min-width:70px;} .cart-row-total b{font-size:.92rem; color:var(--gold-bright);} .cart-row-total span{font-size:.7rem; color:var(--gray-300);} .cart-remove-btn{ flex:0 0 auto; font-size:.78rem; color:#d9534f; font-weight:700; padding:6px 10px; border-radius:8px; border:1px solid transparent; } .cart-remove-btn:hover{border-color:#d9534f;} .cart-row-invalid{background:rgba(217,83,79,.06); border-radius:10px; padding:12px 10px;} @media (max-width:640px){ .cart-row{flex-wrap:wrap;} .cart-row-total{margin-inline-start:auto;} } /* ========================================================================== گام ۱۱ — ریسپانسیو و یکدست‌سازی نهایی همه‌ی پنل‌ها (مدیریت / CRM / مشتری) برای موبایل، تبلت و دسکتاپ ========================================================================== */ /* ---------- ۱۱.۱-الف: ناوبری تب‌مانند پنل‌ها (admin-nav) — به‌جای رفتن به چند ردیف روی موبایل، یک نوار افقی قابل‌اسکرول و تمیز ---------- */ @media (max-width:720px){ .admin-nav, .account-nav{ flex-wrap:nowrap; overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch; scrollbar-width:none; padding-bottom:14px; margin-bottom:20px; -webkit-mask-image:linear-gradient(to left, transparent 0, #000 22px, #000 calc(100% - 8px), transparent 100%); mask-image:linear-gradient(to left, transparent 0, #000 22px, #000 calc(100% - 8px), transparent 100%); } .admin-nav::-webkit-scrollbar, .account-nav::-webkit-scrollbar{ display:none; } .admin-nav a, .account-nav a{ flex:0 0 auto; } .admin-subnav{ margin-bottom:22px; } } /* ---------- ۱۱.۱-ب: جدول‌های پنل مدیریت/CRM روی موبایل به‌صورت کارت نمایش داده می‌شوند (نه اسکرول افقی فشرده) — خواناتر و راحت‌تر با انگشت. نکته: سرصفحه (thead) مخفی می‌شود و برچسب هر مقدار از data-label خوانده می‌شود؛ اگر جایی data-label نبود، سطر بدون برچسب (خودِ محتوا گویا) نشان داده می‌شود، هیچ اطلاعاتی از قلم نمی‌افتد. ---------- */ @media (max-width:720px){ .admin-table-wrap{ overflow-x:visible; } .admin-table{ white-space:normal; } .admin-table thead{ display:none; } .admin-table, .admin-table tbody, .admin-table tr{ display:block; width:100%; } .admin-table tr{ display:block; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface-2); padding:6px 16px; margin-bottom:14px; } .admin-table td{ display:flex; flex-direction:column; gap:4px; align-items:flex-start; padding:12px 0; border-bottom:1px solid var(--line); text-align:right; width:100%; } .admin-table tr td:last-child{ border-bottom:none; } .admin-table td[data-label]::before{ content:attr(data-label); font-size:.72rem; font-weight:700; color:var(--gray-300); } .admin-table td .admin-inline-form, .admin-table td .crm-row-actions, .admin-table td .admin-action-row{ width:100%; } .admin-table td .admin-inline-form select{ width:100%; } .admin-table td .crm-row-actions, .admin-table td .admin-action-row{ flex-wrap:wrap; } } /* ---------- ۱۱.۱-ج: تنظیم‌دقیق چند بخش برای عرض‌های خیلی کم (کمتر از ۳۶۰px) ---------- */ @media (max-width:380px){ .crm-model-select-row{ flex-wrap:wrap; } .crm-model-select-row select{ flex:1 1 100%; } .crm-add-model-btn{ flex:1 1 100%; } .customer-card-head{ flex-direction:column; align-items:flex-start; gap:4px; } } /* ---------- ۱۱.۱-د: بزرگ‌تر شدن نقاط لمسی دکمه‌های عملیات در جدول‌ها/کارت‌ها روی موبایل ---------- */ @media (max-width:720px){ .admin-action-btn, .crm-toggle-btn{ padding:9px 16px; min-height:40px; } .crm-row-actions a, .crm-delete-btn{ padding:6px 2px; } } /* ---------- ۱۱.۱-ه: تبلت (نمای عمودی، ۷۲۱ تا ۱۰۲۴px) — عرض کامل جعبه‌های فرم/لیست به‌جای فشرده‌ماندن در ۹۲۰px، برای استفاده‌ی بهتر از فضای صفحه ---------- */ @media (min-width:721px) and (max-width:1024px){ .account-box.account-box-xwide{ max-width:100%; } } /* ---------- ۱۱.۱-و: فرم افزودن/ویرایش محصول CRM — روی دسکتاپ/تبلت بزرگ کمی بازتر باشد تا گرید دوستونی + بخش عکس راحت‌تر جا شود ---------- */ @media (min-width:900px){ .account-box.account-box-form-wide{ max-width:820px; } } /* ========================================================================== گام ۱۲ — مودال «مدیریت سفارش» (پنل مدیریت): انتخاب مسیر/وضعیت هر سفارش از یک پنجرهٔ شناور تمیز به‌جای فرم فشرده‌ی داخل ردیف جدول ========================================================================== */ .admin-order-row{ cursor:pointer; } .admin-order-row:focus-visible{ outline:2px solid var(--gold-bright); outline-offset:-2px; } .admin-order-manage-btn{ padding:8px 16px; font-size:.78rem; white-space:nowrap; } .admin-order-modal-backdrop{ position:fixed; inset:0; z-index:2000; display:flex; align-items:center; justify-content:center; padding:20px; background:rgba(10,10,11,.6); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); animation:adminOrderFadeIn .18s ease; } .admin-order-modal-backdrop[hidden]{ display:none; } @keyframes adminOrderFadeIn{ from{ opacity:0; } to{ opacity:1; } } .admin-order-modal{ width:100%; max-width:640px; max-height:min(88vh,780px); display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--line-strong); border-radius:var(--radius-lg); box-shadow:0 30px 80px -20px rgba(0,0,0,.55); animation:adminOrderPopIn .22s cubic-bezier(.2,.9,.3,1.1); } @keyframes adminOrderPopIn{ from{ opacity:0; transform:translateY(14px) scale(.97); } to{ opacity:1; transform:translateY(0) scale(1); } } .admin-order-modal-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; padding:20px 22px; border-bottom:1px solid var(--line); } .admin-order-modal-head h3{ font-size:1.05rem; margin:0 0 4px; } .admin-order-modal-date{ font-size:.78rem; color:var(--gray-300); } .admin-order-modal-close{ flex-shrink:0; width:34px; height:34px; border-radius:50%; border:1px solid var(--line); background:var(--surface-2); color:var(--gray-300); font-size:.9rem; line-height:1; display:flex; align-items:center; justify-content:center; transition:.2s; } .admin-order-modal-close:hover{ border-color:var(--gold-bright); color:var(--white); } .admin-order-modal-body{ padding:20px 22px 24px; overflow-y:auto; display:flex; flex-direction:column; gap:22px; } .admin-order-modal-section h4{ font-size:.86rem; font-weight:800; color:var(--gold-bright); margin:0 0 12px; } .admin-order-modal-items{ display:flex; flex-direction:column; gap:10px; } .admin-order-modal-item{ display:flex; align-items:center; gap:12px; padding:10px; border:1px solid var(--line); border-radius:10px; background:var(--surface-2); } .admin-order-modal-item-photo{ width:44px; height:44px; border-radius:8px; overflow:hidden; flex:0 0 auto; background:var(--bg-soft); border:1px solid var(--line); display:flex; align-items:center; justify-content:center; } .admin-order-modal-item-photo img{ width:100%; height:100%; object-fit:contain; } .admin-order-modal-item-info{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:2px; } .admin-order-modal-item-info b{ font-size:.86rem; font-weight:700; } .admin-order-modal-item-info span{ font-size:.76rem; color:var(--gray-300); } .admin-order-modal-item-total{ flex:0 0 auto; text-align:left; font-size:.84rem; font-weight:700; color:var(--gold-bright); white-space:nowrap; } .admin-order-modal-total{ display:flex; align-items:center; justify-content:space-between; margin-top:12px; padding-top:12px; border-top:1px solid var(--line); font-size:.92rem; } .admin-order-modal-total b{ font-size:1.05rem; color:var(--gold-bright); } .admin-order-modal-status-row{ font-size:.88rem; margin-bottom:14px; display:flex; align-items:center; gap:8px; flex-wrap:wrap; } .admin-order-modal-advance-form{ display:flex; flex-direction:column; gap:8px; align-items:stretch; padding:14px; border:1px solid var(--line); border-radius:12px; background:var(--surface-2); margin-bottom:14px; } .admin-order-modal-note-label{ font-size:.76rem; color:var(--gray-300); } .admin-order-modal-advance-form .admin-advance-note{ height:40px; font-size:.82rem; } .admin-order-modal-advance-form .btn{ align-self:flex-start; padding:9px 20px; font-size:.82rem; } .admin-order-modal-note-msg{ font-size:.84rem; color:var(--gray-300); margin-bottom:14px; } @media (max-width:640px){ .admin-order-modal-backdrop{ padding:0; align-items:flex-end; } .admin-order-modal{ max-width:none; width:100%; max-height:92vh; border-radius:var(--radius-lg) var(--radius-lg) 0 0; animation:adminOrderSlideUp .22s ease; } @keyframes adminOrderSlideUp{ from{ transform:translateY(100%); } to{ transform:translateY(0); } } }