/* ═══════════════════════════════════════════════════════════════════ پرشین میزبان — استایل صفحه‌ی «خرید هاست» /assets/css/web-hosting.css ─────────────────────────────────────────────────────────────────── فهرست: ۰۰ فونت‌ها ۰۱ توکن‌های مشترک و ابزارها ۰۲ پایه‌ی صفحه (مسیر راهنما، ریل، نظرات، مقالات، نوار چسبان) ۰۳ هیرو .pmh- ۰۴ کارت‌های محصول .pmw- ۰۵ تعرفه .pmp- ۰۶ رینگ OVH .pmr- ۰۷ انتخابگر هوشمند .pmn- ۰۸ هاست رایگان .pmg- ۰۹ هاست دانشجویی .pms- ۱۰ هاست دانلود .pmd- ۱۱ هاست وردپرس .pmj- ۱۲ کارنامه‌ی فنی .pmt- ۱۳ راهنمای خرید .pmb- ۱۴ سوالات متداول .pmq- ۱۵ تعهد و شناسنامه .pmc- ۱۶ فراخوان پایانی .pmz- ═══════════════════════════════════════════════════════════════════ */ /* ═══ ۰۰ · فونت‌ها ═══════════════════════════════════════════════════ ⚠️ مسیر فایل‌ها را با فایل‌های واقعی خودتان تطبیق بدهید. PMNum فقط ارقام فارسی و جداکننده‌ها را ادعا می‌کند؛ PMMono فقط لاتین پایه (ویرگول و نقطه عمداً کنار گذاشته شده‌اند). ═══════════════════════════════════════════════════════════════════ */ @font-face{font-family:'PMNum';font-weight:400;font-style:normal;font-display:swap; src:url('/assets/fonts/IRANSansXFaNum-Regular.woff2') format('woff2'); unicode-range:U+06F0-06F9,U+0660-0669,U+002C,U+002E,U+060C,U+066A-066C} @font-face{font-family:'PMNum';font-weight:700;font-style:normal;font-display:swap; src:url('/assets/fonts/IRANSansXFaNum-Bold.woff2') format('woff2'); unicode-range:U+06F0-06F9,U+0660-0669,U+002C,U+002E,U+060C,U+066A-066C} @font-face{font-family:'PMMono';font-weight:400;font-style:normal;font-display:swap; src:url('/assets/fonts/JetBrainsMono-Regular.woff2') format('woff2'); unicode-range:U+0020-002B,U+002D,U+002F-007E} @font-face{font-family:'PMMono';font-weight:700;font-style:normal;font-display:swap; src:url('/assets/fonts/JetBrainsMono-Bold.woff2') format('woff2'); unicode-range:U+0020-002B,U+002D,U+002F-007E} @font-face{font-family:'Morabba';font-weight:700;font-style:normal;font-display:swap; src:url('/assets/fonts/Morabba-Bold.woff2') format('woff2')} @font-face{font-family:'Morabba';font-weight:900;font-style:normal;font-display:swap; src:url('/assets/fonts/Morabba-Black.woff2') format('woff2')} /* ═══ ۰۱ · توکن‌های مشترک و ابزارها ═════════════════════════════════ */ .page-hosting-hub{ --mono:'PMNum','PMMono',ui-monospace,'SFMono-Regular','Roboto Mono',monospace; --display:'Morabba','IRANSansX','IRANSans',system-ui,sans-serif; --pad:clamp(18px,4vw,40px); } .pmx *,.pmx *::before,.pmx *::after,.pmh *,.pmh *::before,.pmh *::after,.pmw *,.pmw *::before,.pmw *::after,.pmp *,.pmp *::before,.pmp *::after,.pmr *,.pmr *::before,.pmr *::after,.pmn *,.pmn *::before,.pmn *::after,.pmg *,.pmg *::before,.pmg *::after,.pms *,.pms *::before,.pms *::after,.pmd *,.pmd *::before,.pmd *::after,.pmj *,.pmj *::before,.pmj *::after,.pmt *,.pmt *::before,.pmt *::after,.pmb *,.pmb *::before,.pmb *::after,.pmq *,.pmq *::before,.pmq *::after,.pmc *,.pmc *::before,.pmc *::after,.pmz *,.pmz *::before,.pmz *::after{box-sizing:border-box} .pmx img,.pmh img,.pmw img,.pmp img,.pmr img,.pmn img,.pmg img,.pms img,.pmd img,.pmj img,.pmt img,.pmb img,.pmq img,.pmc img,.pmz img{max-width:100%;height:auto;display:block} /* اعداد: همیشه مونواسپیس، چپ‌به‌راست، هم‌عرض */ .pmb-num,.pmc-num,.pmd-num,.pmg-num,.pmh-num,.pmj-num,.pmn-num,.pmp-num,.pmq-num,.pmr-num,.pms-num,.pmt-num,.pmw-num,.pmx-num,.pmz-num{font-family:var(--mono);direction:ltr;unicode-bidi:isolate; font-variant-numeric:tabular-nums;letter-spacing:-.02em} /* متن مخصوص صفحه‌خوان */ .pmb-sr,.pmc-sr,.pmd-sr,.pmg-sr,.pmh-sr,.pmj-sr,.pmn-sr,.pmp-sr,.pmq-sr,.pmr-sr,.pms-sr,.pmt-sr,.pmz-sr{position:absolute;width:1px;height:1px;overflow:hidden; clip:rect(0 0 0 0);white-space:nowrap} /* اعداد بزرگ نمایشی — اختیاری، روی قیمت‌های درشت */ .pm-bignum{font-family:var(--display);direction:ltr;unicode-bidi:isolate; font-variant-numeric:tabular-nums;letter-spacing:-.01em} /* بارگذاری تنبل بخش‌های پایین صفحه */ .pmx-defer{content-visibility:auto;contain-intrinsic-size:auto 900px} /* ═══ ۰۲ · پایه‌ی صفحه ══════════════════════════════════════════ */ /* ===================================================================== پرشین میزبان — «خرید هاست» زبان طراحی: صفحه‌ی مشخصات فنی — خط‌کش مویی، اعداد مونواسپیس، سنجه‌ی زنده تمام کلاس‌ها با پیشوند pmx- برای صفر شدن احتمال تداخل با style.css ===================================================================== */ .pmx{--ink:#0A0E1A; --ink-2:#111A2E; --paper:#FFFFFF; --paper-2:#F4F6FA; --paper-3:#EAEEF6; --line:#DEE4EF; --line-2:#C8D2E3; --line-inv:rgba(255,255,255,.11); --line-inv-2:rgba(255,255,255,.22); --blue:#1D4ED8; --blue-2:#3B82F6; --cyan:#22D3EE; --violet:#7C3AED; --gold:#F5A524; --gold-2:#FFCB63; --green:#10B981; --tx:#0D1526; --tx-2:#5A6784; --tx-3:#8792AC; --tx-inv:#EEF2FA; --tx-inv-2:#9AA8C6; --r:14px; --r-lg:20px; --r-sm:9px; --shadow:0 1px 2px rgba(13,21,38,.05),0 8px 28px -12px rgba(13,21,38,.16); --shadow-lg:0 2px 6px rgba(13,21,38,.06),0 24px 60px -24px rgba(13,21,38,.28); font-family:inherit;color:var(--tx);-webkit-font-smoothing:antialiased;} /* اعداد همیشه مونواسپیس و LTR — عدد یعنی اندازه‌گیری */ .pmx-wrap{width:min(1240px,100% - 2*var(--pad));margin-inline:auto} .pmx-sec{padding-block:clamp(56px,8vw,104px);position:relative} .pmx-sec--paper{background:var(--paper)} .pmx-sec--paper2{background:var(--paper-2)} .pmx-eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:.74rem;font-weight:700; color:var(--tx-2);margin:0 0 14px} .pmx-eyebrow::before{content:"";width:26px;height:1px;background:var(--line-2);flex:none} .pmx-eyebrow .pmx-num{font-size:.78rem;color:var(--blue);font-weight:700} .pmx-h2{font-size:clamp(1.55rem,3.6vw,2.6rem);font-weight:900;line-height:1.3; letter-spacing:-.015em;margin:0 0 14px;color:inherit} .pmx-lead{font-size:clamp(.95rem,1.5vw,1.06rem);line-height:2;color:var(--tx-2);margin:0;max-width:66ch} .pmx-head{margin-bottom:clamp(28px,4vw,48px)} .pmx-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font:inherit; font-weight:800;font-size:.95rem;padding:14px 26px;border-radius:var(--r-sm); border:1px solid transparent;text-decoration:none;cursor:pointer;line-height:1;white-space:nowrap; transition:transform .12s ease,box-shadow .2s ease,background .2s ease} .pmx-btn:active{transform:translateY(1px)} .pmx-btn svg{flex:none} .pmx-btn--primary{background:var(--blue);color:#fff;box-shadow:0 6px 18px -6px rgba(29,78,216,.6)} .pmx-btn--primary:hover{background:#1740B8;box-shadow:0 10px 26px -8px rgba(29,78,216,.7)} .pmx-btn--sm{padding:10px 18px;font-size:.86rem} .pmx :is(a,button,input,select,summary,[tabindex]):focus-visible{outline:2px solid var(--cyan);outline-offset:3px;border-radius:4px} /* ۰۱ مسیر راهنما */ .pmx-crumb{background:var(--paper);border-bottom:1px solid var(--line)} .pmx-crumb ol{display:flex;align-items:center;gap:8px;list-style:none;margin:0;padding:14px 0; font-size:.82rem;color:var(--tx-3);flex-wrap:wrap} .pmx-crumb a{color:var(--tx-2);text-decoration:none} .pmx-crumb a:hover{color:var(--blue);text-decoration:underline} .pmx-crumb li+li::before{content:"/";margin-inline-end:8px;color:var(--line-2)} .pmx-crumb [aria-current]{color:var(--tx);font-weight:700} /* ۰۲ هیرو */ /* ⭐ عنصر امضا: سنجه‌ی زنده */ /* ۰۳ ریل محصولات */ .pmx-rail{background:var(--ink-2);border-top:1px solid var(--line-inv);padding-block:16px; position:sticky;top:0;z-index:40} .pmx-rail-in{display:flex;gap:9px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px} .pmx-rail-in::-webkit-scrollbar{display:none} .pmx-chip{flex:none;display:inline-flex;align-items:center;gap:8px;padding:9px 15px;border-radius:99px; border:1px solid var(--line-inv);background:rgba(255,255,255,.03);color:#CBD6EE; text-decoration:none;font-size:.83rem;font-weight:700;white-space:nowrap;transition:.16s} .pmx-chip:hover{border-color:var(--cyan);color:#fff;background:rgba(34,211,238,.09)} .pmx-chip i{width:6px;height:6px;border-radius:50%;flex:none} .pmx-chip[data-a=blue] i{background:var(--blue-2)} .pmx-chip[data-a=violet] i{background:var(--violet)} .pmx-chip[data-a=cyan] i{background:var(--cyan)} .pmx-chip[data-a=gold] i{background:var(--gold)} .pmx-chip span{font-family:var(--mono);direction:ltr;font-size:.72rem;color:var(--tx-inv-2)} /* ۰۴ انتخابگر هوشمند */ /* ۰۵ کارت خانواده‌ها */ .pmx-stars{display:inline-flex;align-items:center;gap:7px;margin-bottom:12px; font-size:.78rem;color:var(--tx-2)} .pmx-stars-ic{display:inline-flex;gap:2px;direction:ltr} .pmx-stars-ic svg{width:14px;height:14px} .pmx-stars b{font-family:var(--mono);direction:ltr;font-weight:700;color:var(--tx)} /* ۰۶ جدول تعرفه */ /* ۰۷ چرا OVH */ /* ۰۸ هاست رایگان — تیکت طلایی */ /* ۰۹/۱۰ کارت‌های دوتایی */ /* ۱۱ سرویس‌های مدیریت‌شده */ /* ۱۲ زیرساخت + مسابقه‌ی سرعت */ /* ۱۳ دیتاسنترها */ /* ۱۴ اعتماد */ /* ۱۵ راهنمای خرید */ /* ۱۶ سوالات متداول */ /* ۱۷ فراخوان پایانی */ /* نوار چسبان موبایل */ .pmx-sticky{display:none;position:fixed;inset-block-end:0;inset-inline:0;z-index:9990; background:rgba(255,255,255,.95);border-top:1px solid var(--line); padding:10px 14px calc(10px + env(safe-area-inset-bottom)); box-shadow:0 -8px 28px -12px rgba(13,21,38,.28)} .pmx-sticky-in{display:flex;align-items:center;justify-content:space-between;gap:12px} .pmx-sticky-tx b{display:block;font-size:.84rem;font-weight:800;line-height:1.5} .pmx-sticky-tx small{display:block;font-size:.72rem;color:var(--tx-2)} .pmx-sticky-act{display:flex;gap:8px;flex:none} .pmx-sticky-call{width:46px;height:46px;flex:none;border-radius:var(--r-sm);display:grid; place-items:center;background:var(--paper-2);border:1px solid var(--line);color:var(--blue)} /* واکنش‌گرایی */ @media (max-width:900px){ .pmx-sticky{display:block} .pmx-rail{position:static} } @media (max-width:600px){ .pmx-btn{padding:13px 20px;font-size:.9rem} .pmx-sticky-tx{display:none} .pmx-sticky-act{flex:1} .pmx-sticky-act .pmx-btn{flex:1} } @media (prefers-reduced-motion:reduce){ .pmx *,.pmx *::before,.pmx *::after{animation-duration:.001ms !important; animation-iteration-count:1 !important;transition-duration:.001ms !important} } /* ===================================================================== فونت‌ها — مربا برای تیتر، JetBrains Mono برای اعداد فایل‌ها را در assets/fonts/ قرار دهید. مربا: fontiran.com | مونو: jetbrains.com/lp/mono ⚠️ اگر نام خانواده‌ی ایران‌سنس شما فرق دارد، در fallback زیر اصلاحش کنید. ===================================================================== */ @font-face{font-family:'Morabba';font-weight:700;font-display:swap; src:url('/assets/fonts/Morabba-Bold.woff2') format('woff2')} @font-face{font-family:'Morabba';font-weight:900;font-display:swap; src:url('/assets/fonts/Morabba-Black.woff2') format('woff2')} /* فقط ارقام و لاتین پایه بارگذاری می‌شود — حجم زیر ۱۵ کیلوبایت */ @font-face{font-family:'PMMono';font-weight:400;font-display:swap; src:url('/assets/fonts/JetBrainsMono-Regular.woff2') format('woff2'); unicode-range:U+0020-007E} @font-face{font-family:'PMMono';font-weight:700;font-display:swap; src:url('/assets/fonts/JetBrainsMono-Bold.woff2') format('woff2'); unicode-range:U+0020-007E} .pmx{letter-spacing:-.005em} /* ===================================================================== دریچه‌ی تصویر — پنل تیره‌ی توکار در کارت‌های روشن تصاویر DALL·E پس‌زمینه‌ی شفاف ندارند؛ این دریچه همان پس‌زمینه‌ی #0A0E1A را قاب می‌کند تا تصویر بدون حذف پس‌زمینه یکدست بنشیند. ===================================================================== */ /* تصویر تمام‌عرض داخل سکشن */ /* لایه‌ی پس‌زمینه‌ی هیرو */ /* ===================================================================== دیاگرام‌های SVG داخل محتوا ===================================================================== */ /* ===================================================================== نظرات مشتریان ===================================================================== */ .pmx-says{display:grid;grid-template-columns:repeat(2,1fr);gap:16px} .pmx-say{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--paper);padding:24px; display:flex;flex-direction:column} .pmx-say-q{flex:1;margin:0 0 18px;font-size:.92rem;line-height:2.05;color:#28324A} .pmx-say-q::before{content:"»";display:block;font-size:1.9rem;line-height:1;color:var(--line-2); margin-bottom:8px;font-family:var(--mono)} .pmx-say-who{display:flex;align-items:center;justify-content:space-between;gap:12px; padding-top:15px;border-top:1px solid var(--line)} .pmx-say-who b{display:block;font-size:.88rem;font-weight:800} .pmx-say-who small{display:block;font-size:.76rem;color:var(--tx-2);margin-top:2px} .pmx-say-plan{font-family:var(--mono);direction:ltr;font-size:.7rem;font-weight:700; padding:5px 9px;border-radius:6px;background:var(--paper-3);color:var(--tx-2);flex:none} /* ===================================================================== مقالات مرتبط ===================================================================== */ .pmx-posts{display:grid;grid-template-columns:repeat(4,1fr);gap:16px} .pmx-post{border:1px solid var(--line);border-radius:var(--r);background:var(--paper);padding:22px; text-decoration:none;color:inherit;display:flex;flex-direction:column;transition:.2s} .pmx-post:hover{border-color:var(--blue);transform:translateY(-3px);box-shadow:var(--shadow)} .pmx-post-meta{font-family:var(--mono);direction:ltr;font-size:.68rem;color:var(--tx-3);margin-bottom:12px} .pmx-post h3{margin:0 0 9px;font-size:.98rem;font-weight:800;line-height:1.7} .pmx-post p{margin:0;font-size:.82rem;line-height:1.85;color:var(--tx-2);flex:1} .pmx-post-go{margin-top:16px;font-size:.8rem;font-weight:700;color:var(--blue)} /* ===================================================================== محاسبه‌گر فضای هاست ===================================================================== */ @media (max-width:1080px){ .pmx-posts{grid-template-columns:repeat(2,1fr)} } @media (max-width:900px){ .pmx-says{grid-template-columns:1fr} } @media (max-width:600px){ .pmx-posts{grid-template-columns:1fr} } .pmx-defer{content-visibility:auto;contain-intrinsic-size:auto 900px} /* ═══ ۰۳ · هیرو ═════════════════════════════════════════════════ */ /* ───────────────────────────────────────────────────────────────── ۰. پایه ───────────────────────────────────────────────────────────────── */ .pmh{ --ink:#05070D; --ink-2:#0A0E18; --cyan:#22D3EE; --cyan-2:#67E8F9; --blue:#2563EB; --blue-2:#3B82F6; --gold:#F5A524; --gold-2:#FFD27A; --tx:#F3F6FC; --tx-2:#A6B3CE; --tx-3:#78859F; --line:rgba(255,255,255,.09); --line-2:rgba(255,255,255,.18); position:relative;isolation:isolate;overflow:hidden; background:var(--ink);color:var(--tx); padding-block:clamp(38px,5.5vw,68px) 0; -webkit-font-smoothing:antialiased; } .pmh-wrap{width:min(1200px,100% - 2*var(--pad));margin-inline:auto;position:relative;z-index:3} .pmh :is(a,button):focus-visible{outline:2px solid var(--cyan);outline-offset:3px;border-radius:8px} /* ───────────────────────────────────────────────────────────────── ۱. پس‌زمینه — سه لایه، نه بیشتر ───────────────────────────────────────────────────────────────── */ /* ۱-الف · نور کلیدی: یک منبع، پشت سوژه */ .pmh-light{position:absolute;inset:0;z-index:0;pointer-events:none; background: /* نور اصلی پشت عکس (سمت چپ در چیدمان راست‌به‌چپ) */ radial-gradient(58% 68% at 26% 44%, rgba(56,132,255,.26) 0%, rgba(34,211,238,.13) 32%, transparent 68%), /* نور تکمیلی نرم از بالا */ radial-gradient(90% 60% at 62% -12%, rgba(124,140,255,.14) 0%, transparent 62%), /* بستر */ linear-gradient(180deg,#0B1020 0%,#070B14 52%,#05070D 100%); animation:pmhBreathe 22s ease-in-out infinite} @keyframes pmhBreathe{ 0%,100%{opacity:.92;transform:scale(1)} 50%{opacity:1;transform:scale(1.03)}} /* ۱-ب · دانه‌ی فیلم — همان چیزی که پس‌زمینه را گران می‌کند */ .pmh-grain{position:absolute;inset:-120%;z-index:1;pointer-events:none;opacity:.045; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); animation:pmhGrain 8s steps(6) infinite} @keyframes pmhGrain{ 0%{transform:translate(0,0)} 16%{transform:translate(-3%,2%)} 33%{transform:translate(2%,-3%)} 50%{transform:translate(-2%,-2%)} 66%{transform:translate(3%,1%)} 83%{transform:translate(-1%,3%)} 100%{transform:translate(0,0)}} /* ۱-پ · وینیت — چشم را به مرکز می‌برد */ .pmh-vig{position:absolute;inset:0;z-index:2;pointer-events:none; background:radial-gradient(120% 95% at 50% 42%,transparent 44%,rgba(0,0,0,.55) 100%)} /* خط افق باریک زیر هیرو */ .pmh-line{position:absolute;inset-block-end:0;inset-inline:0;height:1px;z-index:4; background:linear-gradient(90deg,transparent,rgba(34,211,238,.32) 28%, rgba(124,140,255,.24) 62%,transparent)} /* ───────────────────────────────────────────────────────────────── ۲. چیدمان ───────────────────────────────────────────────────────────────── */ .pmh-grid{display:grid;grid-template-columns:1.02fr .98fr; gap:clamp(20px,4vw,54px);align-items:end} /* ───────────────────────────────────────────────────────────────── ۳. ستون متن ───────────────────────────────────────────────────────────────── */ .pmh-tx{padding-block-end:clamp(16px,3vw,34px)} .pmh-flag{display:inline-flex;align-items:center;gap:9px;padding:7px 15px;border-radius:100px; border:1px solid rgba(34,211,238,.28);color:#AEEDF8;font-size:.77rem;font-weight:700; margin-bottom:22px;background:rgba(34,211,238,.08)} .pmh-flag i{width:6px;height:6px;border-radius:50%;background:var(--cyan);flex:none; box-shadow:0 0 0 0 rgba(34,211,238,.7);animation:pmhPulse 2.6s infinite} @keyframes pmhPulse{70%{box-shadow:0 0 0 9px rgba(34,211,238,0)} 100%{box-shadow:0 0 0 0 rgba(34,211,238,0)}} .pmh-h1{font-family:var(--display);font-size:clamp(2.2rem,6.2vw,3.3rem);font-weight:900; line-height:1.16;letter-spacing:-.024em;margin:0 0 18px;color:#fff} .pmh-h1 b{font-weight:inherit;color:var(--cyan-2)} @supports (background-clip:text) or (-webkit-background-clip:text){ .pmh-h1 b{color:transparent;-webkit-background-clip:text;background-clip:text; background-image:linear-gradient(100deg,#67E8F9 0%,#93C5FD 52%,#C4B5FD 100%)}} .pmh-p{font-size:clamp(.96rem,1.5vw,1.08rem);line-height:2.05;color:#B6C3DF; margin:0 0 28px;max-width:52ch} .pmh-p strong{color:#fff;font-weight:700} /* بلوک قیمت — بدون قاب سنگین، فقط یک خط لهجه */ .pmh-price{display:inline-flex;flex-direction:column;gap:2px; padding-inline-start:16px;margin-bottom:24px; border-inline-start:2px solid var(--cyan)} .pmh-price small{font-size:.76rem;font-weight:600;color:var(--tx-3)} .pmh-price b{font-family:var(--display);font-size:clamp(1.5rem,3.2vw,2rem);font-weight:900; color:#fff;line-height:1.25} .pmh-price b i{font-style:normal;font-size:.5em;font-weight:700;color:var(--tx-2)} .pmh-price em{font-style:normal;font-size:.75rem;color:var(--tx-3);line-height:1.9;margin-top:3px} .pmh-price em span{color:var(--cyan-2);font-family:var(--mono);direction:ltr} /* دکمه‌ها */ .pmh-cta{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:14px} .pmh-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font:inherit; font-weight:800;font-size:.96rem;padding:16px 28px;border-radius:12px;line-height:1; text-decoration:none;border:1px solid transparent;white-space:nowrap; transition:transform .14s ease,box-shadow .26s ease} .pmh-btn:active{transform:translateY(1px)} .pmh-btn svg{flex:none} .pmh-btn--main{color:#fff;background:linear-gradient(135deg,#3B82F6,#2563EB 58%,#1D4ED8); box-shadow:0 12px 30px -12px rgba(37,99,235,.95),inset 0 1px 0 rgba(255,255,255,.24)} .pmh-btn--main:hover{box-shadow:0 18px 40px -12px rgba(37,99,235,1),inset 0 1px 0 rgba(255,255,255,.32)} .pmh-btn--ghost{color:#E8EFFA;border-color:var(--line-2);background:rgba(255,255,255,.04)} .pmh-btn--ghost:hover{border-color:rgba(245,165,36,.55);color:var(--gold-2); background:rgba(245,165,36,.08)} .pmh-note{margin:0;font-size:.78rem;color:var(--tx-3);line-height:1.9} /* ───────────────────────────────────────────────────────────────── ۴. ستون تصویر ───────────────────────────────────────────────────────────────── */ .pmh-fig{position:relative;margin:0;align-self:end} /* سایه‌ی زمین — سوژه واقعاً روی سطح می‌ایستد */ .pmh-fig::after{content:"";position:absolute;z-index:0; inset-block-end:-6px;inset-inline-start:50%;translate:-50% 0; width:78%;height:34px;border-radius:50%;pointer-events:none; background:radial-gradient(ellipse,rgba(0,0,0,.72),transparent 70%);filter:blur(9px)} .pmh-fig>img{position:relative;z-index:1;width:100%;max-width:470px;margin-inline:auto; filter:drop-shadow(0 20px 44px rgba(0,0,0,.6))} /* کارت هویت */ .pmh-id{position:absolute;z-index:3;inset-block-end:26px;inset-inline-start:0; display:flex;align-items:center;gap:11px;padding:11px 15px;border-radius:12px; border:1px solid var(--line-2);background:rgba(6,10,18,.82); backdrop-filter:blur(14px) saturate(1.2);max-width:min(292px,94%); box-shadow:0 18px 40px -22px rgba(0,0,0,.95)} .pmh-id-b{flex:none;width:34px;height:34px;border-radius:10px;display:grid;place-items:center; color:#05070D;background:linear-gradient(140deg,var(--cyan-2),var(--cyan))} .pmh-id b{display:block;font-size:.88rem;font-weight:800;color:#fff;line-height:1.5} .pmh-id small{display:block;font-size:.73rem;color:var(--tx-3);line-height:1.6} /* ───────────────────────────────────────────────────────────────── ۵. نوار اعتماد ───────────────────────────────────────────────────────────────── */ .pmh-trust{position:relative;z-index:3;margin-top:clamp(24px,3.4vw,44px); border-block-start:1px solid var(--line)} .pmh-trust ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr)} .pmh-trust li{display:flex;align-items:center;gap:11px;padding:20px clamp(12px,1.6vw,20px); border-inline-start:1px solid var(--line)} .pmh-trust li:first-child{border-inline-start:0} .pmh-trust svg{flex:none;color:var(--cyan)} .pmh-trust b{display:block;font-size:.9rem;font-weight:800;color:#fff;line-height:1.5} .pmh-trust small{display:block;font-size:.75rem;color:var(--tx-3);margin-top:2px} /* ───────────────────────────────────────────────────────────────── ۶. واکنش‌گرایی ───────────────────────────────────────────────────────────────── */ @media (max-width:920px){ .pmh-grid{grid-template-columns:1fr} .pmh-fig{order:-1;max-width:330px;margin-inline:auto} .pmh-fig>img{max-width:290px} .pmh-tx{padding-block-end:0} .pmh-id{position:static;margin:-8px auto 0;max-width:100%} .pmh-trust ul{grid-template-columns:repeat(2,1fr)} .pmh-trust li{border-block-start:1px solid var(--line)} .pmh-trust li:nth-child(-n+2){border-block-start:0} .pmh-trust li:nth-child(odd){border-inline-start:0} .pmh-light{background: radial-gradient(70% 46% at 50% 22%,rgba(56,132,255,.24) 0%,rgba(34,211,238,.11) 34%,transparent 68%), linear-gradient(180deg,#0B1020 0%,#070B14 54%,#05070D 100%)} } @media (max-width:560px){ .pmh-btn{flex:1 1 100%;padding:15px 22px} .pmh-trust li{padding:16px 12px} .pmh-grain{display:none} /* صرفه‌جویی در رندر موبایل */ } /* ───────────────────────────────────────────────────────────────── ۷. کاهش حرکت ───────────────────────────────────────────────────────────────── */ @media (prefers-reduced-motion:reduce){ .pmh *,.pmh *::before,.pmh *::after{ animation:none !important;transition-duration:.001ms !important} .pmh-grain{display:none} } /* ═══ ۰۴ · کارت‌های محصول ═══════════════════════════════════════ */ /* ───────────────────────────────────────────────────────────────── ۰. پایه — پالت ایرانی ───────────────────────────────────────────────────────────────── */ .pmw{ --paper:#FFFFFF; --paper-2:#F4F7FB; --line:#DFE5EF; --tx:#0D1526; --tx-2:#55627C; --tx-3:#8794AE; --saffron:#D97706; --saffron-2:#F59E0B; position:relative;overflow:hidden;isolation:isolate; background:linear-gradient(180deg,#FBFCFE 0%,#F1F5FA 100%); padding-block:clamp(56px,8vw,104px); } .pmw-wrap{width:min(1240px,100% - 2*var(--pad));margin-inline:auto;position:relative;z-index:2} .pmw :is(a,button):focus-visible{outline:2px solid var(--saffron-2);outline-offset:3px;border-radius:8px} /* ───────────────────────────────────────────────────────────────── ۱. سرتیتر ───────────────────────────────────────────────────────────────── */ .pmw-head{margin-bottom:clamp(38px,5vw,62px);max-width:70ch} .pmw-eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:.75rem;font-weight:700; color:var(--tx-2);margin:0 0 14px} .pmw-eyebrow::before{content:"";width:26px;height:1px; background:linear-gradient(90deg,transparent,var(--saffron-2))} .pmw-eyebrow .pmw-num{color:var(--saffron);font-weight:700} .pmw-h2{font-family:var(--display);font-size:clamp(1.6rem,3.7vw,2.7rem);font-weight:900; line-height:1.32;letter-spacing:-.015em;margin:0 0 14px;color:var(--tx);position:relative;z-index:0} .pmw-h2 em{font-style:normal;color:#0E7490;position:relative} .pmw-h2 em::after{content:"";position:absolute;inset-inline:-3px;inset-block-end:.05em;height:.36em; z-index:-1;border-radius:3px;background:linear-gradient(90deg,rgba(20,184,166,.20),transparent)} .pmw-lead{font-size:clamp(.94rem,1.5vw,1.05rem);line-height:2.05;color:var(--tx-2);margin:0} .pmw-lead strong{color:var(--tx);font-weight:700} /* ───────────────────────────────────────────────────────────────── ۲. شبکه — کارت میانی بزرگ‌تر و بالاتر ───────────────────────────────────────────────────────────────── */ .pmw-grid{display:grid;grid-template-columns:1fr 1.12fr 1fr;gap:clamp(14px,1.8vw,22px); align-items:start;padding-block-start:22px} /* ───────────────────────────────────────────────────────────────── ۳. کارت تیره ───────────────────────────────────────────────────────────────── */ .pmw-card{position:relative;display:flex;flex-direction:column;overflow:hidden; border-radius:26px;background:var(--ink); box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 2px 4px rgba(9,14,26,.10), 0 16px 30px -14px rgba(9,14,26,.34), 0 44px 70px -40px rgba(9,14,26,.62); transition:transform .34s cubic-bezier(.22,1,.36,1),box-shadow .34s ease} .pmw-card:hover{transform:translateY(-7px); box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 4px 8px rgba(9,14,26,.12), 0 26px 46px -16px rgba(9,14,26,.40), 0 60px 96px -44px var(--glow)} /* هویت رنگی هر سرویس */ .pmw-card[data-a=iran]{ --ink:#062A31; --ink-2:#0A3A43; --acc:#2DD4BF; --acc-2:#5EEAD4; --acc-deep:#0E7490; --win:#DDF2F1; --glow:rgba(45,212,191,.42); --body:#A7CBCD; --muted:#6F9599} .pmw-card[data-a=wordpress]{ --ink:#0B1233; --ink-2:#141C46; --acc:#7C9BFF; --acc-2:#A5BBFF; --acc-deep:#1E3A8A; --win:#E3E8FA; --glow:rgba(124,155,255,.42); --body:#AEB9DE; --muted:#7683AB} .pmw-card[data-a=germany]{ --ink:#2B0A16; --ink-2:#3D0F20; --acc:#FB7185; --acc-2:#FDA4AF; --acc-deep:#9F1239; --win:#FAE4E9; --glow:rgba(251,113,133,.40); --body:#D3ACB5; --muted:#A17A84} /* کارت ویژه */ .pmw-card--star{margin-block-start:-22px; box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 0 0 2px rgba(217,119,6,.55), 0 22px 40px -16px rgba(9,14,26,.40), 0 64px 100px -46px rgba(217,119,6,.5)} .pmw-card--star .pmw-win{aspect-ratio:4/3.2} .pmw-card--star .pmw-body{padding:24px clamp(20px,2.4vw,28px) 28px} .pmw-flag{position:absolute;z-index:5;inset-block-start:15px;inset-inline-start:15px; display:inline-flex;align-items:center;gap:6px;padding:6px 13px;border-radius:99px; font-size:.71rem;font-weight:800;color:#2A1500; background:linear-gradient(135deg,var(--saffron-2),var(--saffron)); box-shadow:0 8px 18px -8px rgba(217,119,6,.9)} /* ── ۳-الف · پنجره‌ی روشن ── */ .pmw-win{position:relative;aspect-ratio:4/2.9;overflow:hidden;background:var(--win); border-radius:26px 26px 0 0; box-shadow:inset 0 -1px 0 rgba(9,14,26,.10)} .pmw-win-orb{position:absolute;display:block;width:62%;aspect-ratio:1;border-radius:50%; inset-block-start:-24%;inset-inline-end:-12%;filter:blur(38px); background:radial-gradient(circle,rgba(255,255,255,.9),transparent 68%); animation:pmwOrb 16s ease-in-out infinite} @keyframes pmwOrb{0%,100%{transform:translate3d(0,0,0) scale(1)} 50%{transform:translate3d(-7%,6%,0) scale(1.18)}} .pmw-char{position:absolute;inset:0;z-index:2;width:100%;height:100%;object-fit:cover; object-position:center 12%;opacity:0; transition:opacity .5s ease,transform .6s cubic-bezier(.22,1,.36,1)} .pmw-char.on{opacity:1} .pmw-card:hover .pmw-char.on{transform:scale(1.05)} /* محو شدن پنجره در بدنه‌ی تیره — همین‌جا عمق ساخته می‌شود */ .pmw-win::after{content:"";position:absolute;z-index:3;inset-block-end:-1px;inset-inline:0; height:38%;pointer-events:none; background:linear-gradient(to top,var(--ink) 6%,rgba(0,0,0,.22) 52%,transparent)} .pmw-series{position:absolute;z-index:4;inset-block-start:15px;inset-inline-end:15px; font-family:var(--mono);direction:ltr;font-size:.66rem;font-weight:700;letter-spacing:.05em; padding:5px 11px;border-radius:99px;background:rgba(255,255,255,.9);color:#0D1526; box-shadow:0 2px 8px rgba(9,14,26,.18)} /* ── ۳-ب · نشانگر زنده — فقط دو جزء ── */ .pmw-live{position:absolute;z-index:4;inset-block-end:13px;inset-inline-start:13px; display:inline-flex;align-items:center;gap:9px;padding:7px 12px 7px 9px;border-radius:99px; background:rgba(255,255,255,.9);box-shadow:0 6px 18px -8px rgba(9,14,26,.5)} .pmw-live-viz{flex:none;width:40px;height:20px;position:relative;color:var(--acc-deep)} .pmw-live-v{font-family:var(--mono);direction:ltr;font-size:.76rem;font-weight:700; color:var(--acc-deep);white-space:nowrap} /* رفت‌وبرگشت بسته (ایران) */ .pmw-track{position:absolute;inset-block-start:50%;inset-inline:1px;height:2px;translate:0 -50%; border-radius:2px;background:currentColor;opacity:.22} .pmw-pkt{position:absolute;inset-block-start:50%;inset-inline-start:0;width:8px;height:8px; border-radius:50%;background:currentColor;translate:0 -50%; animation:pmwShuttle 1.9s cubic-bezier(.5,0,.5,1) infinite} @keyframes pmwShuttle{0%{inset-inline-start:0}45%,55%{inset-inline-start:calc(100% - 8px)} 100%{inset-inline-start:0}} /* دفع حمله (آلمان) */ .pmw-shield{position:absolute;inset-block-start:50%;inset-inline-end:2px;translate:0 -50%} .pmw-hit{position:absolute;inset-block-start:50%;width:5px;height:5px;border-radius:50%; background:#F97316;translate:0 -50%;animation:pmwHit 1.8s linear infinite} .pmw-hit:nth-of-type(2){animation-delay:.6s;inset-block-start:26%} .pmw-hit:nth-of-type(3){animation-delay:1.2s;inset-block-start:74%} @keyframes pmwHit{0%{inset-inline-start:0;opacity:0;transform:scale(.6)} 15%{opacity:1}66%{inset-inline-start:48%;opacity:1;transform:scale(1)} 82%{inset-inline-start:54%;opacity:0;transform:scale(2.4)} 100%{inset-inline-start:54%;opacity:0}} /* عقربه‌ی کش (وردپرس) */ .pmw-needle{transform-origin:20px 18px;animation:pmwNeedle 2.6s cubic-bezier(.3,1.4,.5,1) infinite} @keyframes pmwNeedle{0%,10%{transform:rotate(-58deg)}45%,80%{transform:rotate(50deg)} 100%{transform:rotate(-58deg)}} /* ── ۳-پ · بدنه ── */ .pmw-body{display:flex;flex-direction:column;flex:1; padding:20px clamp(18px,2.2vw,24px) 24px} .pmw-h3{font-family:var(--display);font-size:clamp(1.2rem,2.1vw,1.46rem);font-weight:900; line-height:1.45;margin:0 0 12px;color:#fff} .pmw-h3 a{color:inherit;text-decoration:none} .pmw-h3 a::after{content:"";position:absolute;inset:0;z-index:6} .pmw-card:hover .pmw-h3 a{color:var(--acc-2)} .pmw-spec{margin:0 0 16px;font-size:.87rem;line-height:2;color:var(--body)} .pmw-fit{list-style:none;margin:0 0 18px;padding:0;flex:1} .pmw-fit li{display:flex;gap:9px;font-size:.83rem;line-height:1.85;padding:8px 0; border-block-start:1px solid rgba(255,255,255,.08);color:var(--body)} .pmw-fit li:first-child{border-block-start:0} .pmw-fit svg{flex:none;margin-top:4px} .pmw-fit li.yes svg{color:var(--acc)} .pmw-fit li.no{color:var(--muted)} .pmw-fit li.no svg{color:var(--muted)} .pmw-inc{margin:0 0 18px;font-size:.74rem;color:var(--muted);line-height:1.9; padding-block-start:14px;border-block-start:1px solid rgba(255,255,255,.08)} /* قیمت — تنها عنصر زعفرانی کارت، پس بی‌رقیب دیده می‌شود */ .pmw-price{margin-bottom:16px} .pmw-price>small{display:block;font-size:.74rem;color:var(--muted);margin-bottom:2px} .pmw-price b{display:block;font-family:var(--display);font-size:clamp(1.5rem,2.7vw,1.9rem); font-weight:900;line-height:1.25;color:var(--saffron-2)} .pmw-price b i{font-style:normal;font-size:.48em;font-weight:700;color:var(--body)} .pmw-price em{display:block;font-style:normal;font-size:.73rem;color:var(--muted); margin-top:5px;line-height:1.8} .pmw-price em span{font-family:var(--mono);direction:ltr} .pmw-go{position:relative;z-index:6;display:flex;align-items:center;justify-content:center;gap:9px; font:inherit;font-weight:800;font-size:.93rem;padding:15px 22px;border-radius:13px; text-decoration:none;color:#2A1500; background:linear-gradient(135deg,var(--saffron-2),var(--saffron)); box-shadow:0 10px 24px -12px rgba(217,119,6,.95),inset 0 1px 0 rgba(255,255,255,.45); transition:transform .14s,box-shadow .22s} .pmw-go:active{transform:translateY(1px)} .pmw-card:hover .pmw-go{box-shadow:0 16px 32px -12px rgba(217,119,6,1),inset 0 1px 0 rgba(255,255,255,.55)} /* ───────────────────────────────────────────────────────────────── ۴. نوار تصمیم — سبک و بدون قاب ───────────────────────────────────────────────────────────────── */ .pmw-decide{margin-top:clamp(30px,4vw,48px);padding-top:26px;border-top:1px solid var(--line); display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.5vw,34px)} .pmw-decide b{display:flex;align-items:center;gap:8px;font-size:.87rem;font-weight:800; color:var(--tx);margin-bottom:7px} .pmw-decide b i{width:9px;height:9px;border-radius:50%;flex:none;font-style:normal} .pmw-decide p{margin:0;font-size:.83rem;line-height:2;color:var(--tx-2)} .pmw-decide a{color:#0E7490;font-weight:700;text-decoration:underline;text-underline-offset:3px} /* ───────────────────────────────────────────────────────────────── ۵. واکنش‌گرایی ───────────────────────────────────────────────────────────────── */ @media (max-width:1000px){ .pmw-grid{grid-template-columns:1fr;max-width:500px;margin-inline:auto;gap:22px} .pmw-card--star{margin-block-start:0;order:-1} .pmw-decide{grid-template-columns:1fr;gap:22px} } /* ───────────────────────────────────────────────────────────────── ۶. کاهش حرکت ───────────────────────────────────────────────────────────────── */ @media (prefers-reduced-motion:reduce){ .pmw *,.pmw *::before,.pmw *::after{ animation:none !important;transition-duration:.001ms !important} .pmw-pkt{inset-inline-start:calc(50% - 4px)} .pmw-hit{display:none} .pmw-needle{transform:rotate(50deg)} } /* ═══ ۰۵ · تعرفه ════════════════════════════════════════════════ */ /* ───────────────────────────────────────────────────────────────── ۰. پایه ───────────────────────────────────────────────────────────────── */ .pmp{ --paper:#FFFFFF; --paper-2:#F6F9FC; --paper-3:#EDF2F8; --line:#DFE5EF; --line-2:#C8D2E2; --tx:#0D1526; --tx-2:#55627C; --tx-3:#8794AE; --saffron:#D97706; --saffron-2:#F59E0B; /* لهجه‌ی جاری — با تب فعال عوض می‌شود */ --c:#0E7490; --c2:#2DD4BF; --cs:rgba(45,212,191,.13); position:relative;overflow:hidden;isolation:isolate; background:linear-gradient(180deg,#F2F6FB 0%,#FAFCFE 100%); padding-block:clamp(56px,8vw,104px); } .pmp-wrap{width:min(1240px,100% - 2*var(--pad));margin-inline:auto;position:relative;z-index:2} .pmp :is(a,button):focus-visible{outline:2px solid var(--saffron-2);outline-offset:3px;border-radius:8px} /* ───────────────────────────────────────────────────────────────── ۱. سرتیتر ───────────────────────────────────────────────────────────────── */ .pmp-head{text-align:center;margin-bottom:clamp(28px,4vw,44px)} .pmp-eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:.75rem;font-weight:700; color:var(--tx-2);margin:0 0 14px} .pmp-eyebrow::before,.pmp-eyebrow::after{content:"";width:26px;height:1px; background:linear-gradient(90deg,transparent,var(--saffron-2))} .pmp-eyebrow .pmp-num{color:var(--saffron);font-weight:700} .pmp-h2{font-family:var(--display);font-size:clamp(1.6rem,3.7vw,2.7rem);font-weight:900; line-height:1.32;letter-spacing:-.015em;margin:0 0 14px;color:var(--tx);position:relative;z-index:0} .pmp-h2 em{font-style:normal;color:var(--saffron);position:relative} .pmp-h2 em::after{content:"";position:absolute;inset-inline:-3px;inset-block-end:.05em;height:.36em; z-index:-1;border-radius:3px;background:linear-gradient(90deg,rgba(245,158,11,.24),transparent)} .pmp-lead{font-size:clamp(.94rem,1.5vw,1.05rem);line-height:2.05;color:var(--tx-2); margin:0 auto;max-width:66ch} .pmp-lead strong{color:var(--tx);font-weight:700} /* ───────────────────────────────────────────────────────────────── ۲. تب‌ها — قیمت شروع قبل از کلیک دیده می‌شود ───────────────────────────────────────────────────────────────── */ .pmp-tabs{display:flex;gap:9px;overflow-x:auto;scrollbar-width:none; padding-block-end:6px;margin-bottom:20px} .pmp-tabs::-webkit-scrollbar{display:none} .pmp-tab{flex:none;display:flex;flex-direction:column;align-items:flex-start;gap:3px; font:inherit;cursor:pointer;padding:11px 18px;border-radius:14px;text-align:start; border:1px solid var(--line);background:var(--paper);transition:.18s;white-space:nowrap} .pmp-tab b{font-size:.88rem;font-weight:800;color:var(--tx-2)} .pmp-tab small{font-family:var(--mono);direction:ltr;font-size:.68rem;color:var(--tx-3)} .pmp-tab:hover{border-color:var(--line-2);transform:translateY(-2px)} .pmp-tab[aria-selected=true]{border-color:transparent;background:var(--tab-c); box-shadow:0 10px 22px -12px var(--tab-c)} .pmp-tab[aria-selected=true] b{color:#fff} .pmp-tab[aria-selected=true] small{color:rgba(255,255,255,.72)} /* ───────────────────────────────────────────────────────────────── ۳. قاب جدول ───────────────────────────────────────────────────────────────── */ .pmp-panel[hidden]{display:none} .pmp-panel{animation:pmpFade .3s cubic-bezier(.22,1,.36,1) both} @keyframes pmpFade{from{opacity:0;transform:translateY(10px)}} .pmp-box{border-radius:22px;background:var(--paper);border:1px solid var(--line);overflow:hidden; box-shadow:0 2px 6px rgba(13,21,38,.05),0 26px 54px -34px rgba(13,21,38,.3)} .pmp-meta{display:flex;flex-wrap:wrap;gap:10px 28px;align-items:center; padding:16px var(--pad);border-block-end:1px solid var(--line); background:linear-gradient(180deg,var(--cs),transparent)} .pmp-meta div{display:flex;align-items:center;gap:7px;font-size:.79rem;color:var(--tx-2)} .pmp-meta b{color:var(--tx);font-weight:700} .pmp-meta .pmp-num{color:var(--c);font-weight:700} /* ───────────────────────────────────────────────────────────────── ۴. جدول — دسکتاپ ───────────────────────────────────────────────────────────────── */ .pmp-tbl{width:100%;border-collapse:collapse} .pmp-tbl thead th{padding:13px 16px;text-align:start;font-size:.73rem;font-weight:700; color:var(--tx-3);border-block-end:1px solid var(--line);white-space:nowrap} .pmp-tbl tbody tr{transition:background .16s ease} .pmp-tbl tbody tr:hover>*{background:var(--cs)} .pmp-tbl tbody th,.pmp-tbl tbody td{padding:15px 16px;border-block-start:1px solid var(--line); vertical-align:middle} .pmp-tbl tbody tr.pop>*{background:linear-gradient(90deg,rgba(245,158,11,.09),transparent 70%)} .pmp-tbl tbody tr.pop:hover>*{background:linear-gradient(90deg,rgba(245,158,11,.15),transparent 70%)} /* ستون ۱ — نام پلن + مناسب برای */ .pmp-c-name{text-align:start;position:relative} .pmp-c-name .n{display:flex;align-items:center;gap:8px;flex-wrap:wrap} .pmp-c-name b{font-size:.95rem;font-weight:800;color:var(--tx);white-space:nowrap} .pmp-pop{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:99px; font-size:.65rem;font-weight:800;color:#2A1500; background:linear-gradient(135deg,var(--saffron-2),var(--saffron))} .pmp-fit{display:block;margin-top:4px;font-size:.76rem;color:var(--tx-2);line-height:1.7} /* ستون ۲ — فضا با نوار نسبی */ .pmp-c-space b{display:block;font-family:var(--mono);direction:ltr;font-size:.92rem; font-weight:700;color:var(--tx);margin-bottom:6px} .pmp-bar{display:block;height:5px;border-radius:99px;background:var(--paper-3);overflow:hidden; min-width:70px} .pmp-bar i{display:block;height:100%;border-radius:99px; background:linear-gradient(90deg,var(--c2),var(--c))} /* ستون ۳ — منابع */ .pmp-c-res{font-family:var(--mono);direction:ltr;font-size:.83rem;color:var(--tx-2);white-space:nowrap} /* ستون ۴ — قیمت */ .pmp-c-price b{display:block;font-family:var(--display);font-size:1.06rem;font-weight:900; color:var(--tx);white-space:nowrap;line-height:1.35} .pmp-c-price b i{font-style:normal;font-size:.62em;font-weight:700;color:var(--tx-2)} .pmp-c-price small{display:block;font-size:.71rem;color:var(--tx-3);margin-top:3px;line-height:1.7} .pmp-c-price small span{font-family:var(--mono);direction:ltr} .pmp-gift{display:inline-flex;align-items:center;gap:4px;margin-top:6px;padding:3px 8px; border-radius:99px;font-size:.66rem;font-weight:700;color:var(--saffron); background:rgba(245,158,11,.13)} /* ستون ۵ — اقدام */ .pmp-c-act{text-align:end;white-space:nowrap} .pmp-buy{display:inline-flex;align-items:center;justify-content:center;gap:7px;font:inherit; font-weight:800;font-size:.82rem;padding:10px 18px;border-radius:11px;text-decoration:none; color:var(--c);border:1px solid var(--line-2);background:var(--paper);transition:.18s} .pmp-buy:hover{color:#fff;border-color:transparent;background:linear-gradient(135deg,var(--c2),var(--c)); box-shadow:0 8px 18px -8px var(--c)} tr.pop .pmp-buy{color:#2A1500;border-color:transparent; background:linear-gradient(135deg,var(--saffron-2),var(--saffron)); box-shadow:0 8px 18px -10px rgba(217,119,6,.9)} tr.pop .pmp-buy:hover{box-shadow:0 12px 24px -10px rgba(217,119,6,1)} /* پانویس */ .pmp-note{margin:0;padding:15px var(--pad);border-block-start:1px solid var(--line); background:var(--paper-2);font-size:.78rem;line-height:1.95;color:var(--tx-2)} .pmp-note b{color:var(--tx)} /* ───────────────────────────────────────────────────────────────── ۵. موبایل — جدول به ردیف‌های فشرده تبدیل می‌شود بدون اسکرول افقی، بدون محتوای تکراری ───────────────────────────────────────────────────────────────── */ @media (max-width:860px){ .pmp-tbl,.pmp-tbl tbody{display:block} .pmp-tbl thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)} .pmp-tbl tbody tr{ display:grid;grid-template-columns:1fr auto;gap:8px 14px;align-items:center; padding:16px var(--pad);border-block-start:1px solid var(--line)} .pmp-tbl tbody tr:hover>*{background:transparent} .pmp-tbl tbody tr.pop{background:linear-gradient(180deg,rgba(245,158,11,.09),transparent)} .pmp-tbl tbody tr.pop>*{background:transparent} .pmp-tbl tbody th,.pmp-tbl tbody td{padding:0;border:0} .pmp-c-name{grid-column:1 / -1} .pmp-c-space{grid-column:1;grid-row:2} .pmp-c-res{grid-column:2;grid-row:2;text-align:end} .pmp-c-space b{display:inline-block;margin:0 0 5px} .pmp-bar{min-width:120px} .pmp-c-price{grid-column:1;grid-row:3;padding-block-start:10px; border-block-start:1px solid var(--line)} .pmp-c-act{grid-column:2;grid-row:3;padding-block-start:10px; border-block-start:1px solid var(--line)} .pmp-buy{padding:11px 20px} } @media (max-width:420px){ .pmp-tbl tbody tr{grid-template-columns:1fr} .pmp-c-res{grid-column:1;grid-row:3;text-align:start} .pmp-c-price{grid-column:1;grid-row:4} .pmp-c-act{grid-column:1;grid-row:5;text-align:start;border-block-start:0;padding-block-start:0} .pmp-buy{width:100%} } /* ───────────────────────────────────────────────────────────────── ۶. کاهش حرکت ───────────────────────────────────────────────────────────────── */ @media (prefers-reduced-motion:reduce){ .pmp *,.pmp *::before,.pmp *::after{ animation:none !important;transition-duration:.001ms !important} } /* ═══ ۰۶ · رینگ OVH ═════════════════════════════════════════════ */ /* ───────────────────────────────────────────────────────────────── ۰. پایه ───────────────────────────────────────────────────────────────── */ .pmr{ --bg:#05070E; --bg-2:#0A0F1C; --blue:#2563EB; --blue-2:#60A5FA; --blue-3:#BFDBFE; --red:#DC2626; --red-2:#F87171; --red-3:#FECACA; --gold:#F5A524; --gold-2:#FFD27A; --tx:#EEF3FC; --tx-2:#93A2C0; --tx-3:#66748F; --line:rgba(255,255,255,.10); --line-2:rgba(255,255,255,.20); position:relative;overflow:hidden;isolation:isolate;background:var(--bg);color:var(--tx); padding-block:clamp(60px,9vw,110px); } .pmr-wrap{width:min(1240px,100% - 2*var(--pad));margin-inline:auto;position:relative;z-index:3} .pmr :is(a,button):focus-visible{outline:2px solid var(--gold-2);outline-offset:3px;border-radius:8px} /* هاله‌های سالن — آبی از راست، قرمز از چپ */ .pmr::before,.pmr::after{content:"";position:absolute;z-index:0;pointer-events:none; width:56vw;max-width:760px;aspect-ratio:1;border-radius:50%;filter:blur(90px)} .pmr::before{inset-block-start:-14%;inset-inline-end:-14%; background:radial-gradient(circle,rgba(37,99,235,.34),transparent 68%)} .pmr::after{inset-block-end:-18%;inset-inline-start:-14%; background:radial-gradient(circle,rgba(220,38,38,.28),transparent 68%)} /* ───────────────────────────────────────────────────────────────── ۱. سرتیتر ───────────────────────────────────────────────────────────────── */ .pmr-head{text-align:center;max-width:70ch;margin:0 auto clamp(26px,4vw,44px)} .pmr-eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:.75rem;font-weight:700; color:var(--tx-2);margin:0 0 14px} .pmr-eyebrow::before,.pmr-eyebrow::after{content:"";width:26px;height:1px;background:var(--line-2)} .pmr-h2{font-family:var(--display);font-size:clamp(1.6rem,3.8vw,2.8rem);font-weight:900; line-height:1.32;letter-spacing:-.018em;margin:0 0 14px;color:#fff} .pmr-h2 b{font-weight:inherit;color:var(--blue-2)} .pmr-h2 i{font-style:normal;color:var(--red-2)} .pmr-lead{font-size:clamp(.94rem,1.5vw,1.05rem);line-height:2.05;color:var(--tx-2);margin:0} /* ───────────────────────────────────────────────────────────────── ۲. رینگ ───────────────────────────────────────────────────────────────── */ .pmr-arena{position:relative;border-radius:26px;overflow:hidden; min-height:clamp(340px,44vw,470px); background:linear-gradient(180deg,#080C16 0%,#0B1120 58%,#05070E 100%); border:1px solid var(--line); box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 40px 90px -50px #000} /* ۲-الف · نورافکن‌ها */ .pmr-light{position:absolute;inset-block-start:-6%;height:112%;width:46%;pointer-events:none; clip-path:polygon(44% 0,56% 0,100% 100%,0 100%);filter:blur(10px);opacity:.85} .pmr-light--blue{inset-inline-end:2%; background:linear-gradient(180deg,rgba(96,165,250,.34) 0%,rgba(37,99,235,.10) 46%,transparent 76%)} .pmr-light--red{inset-inline-start:2%; background:linear-gradient(180deg,rgba(248,113,113,.28) 0%,rgba(220,38,38,.09) 46%,transparent 76%)} /* ۲-ب · کف رینگ با پرسپکتیو */ .pmr-floor{position:absolute;inset-block-end:0;inset-inline:0;height:44%; perspective:260px;perspective-origin:50% 0;overflow:hidden} .pmr-floor::before{content:"";position:absolute;inset:-6% -40% -30%; transform:rotateX(70deg);transform-origin:50% 0; background: linear-gradient(rgba(255,255,255,.055) 1px,transparent 1px) 0 0/58px 58px, linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px) 0 0/58px 58px, linear-gradient(180deg,#131B2E,#0A101C); -webkit-mask-image:linear-gradient(to bottom,#000 8%,rgba(0,0,0,.45) 62%,transparent 96%); mask-image:linear-gradient(to bottom,#000 8%,rgba(0,0,0,.45) 62%,transparent 96%)} /* دایره‌ی مرکز رینگ */ .pmr-floor::after{content:"";position:absolute;inset-block-start:34%;inset-inline-start:50%; translate:-50% 0;width:52%;height:46%;border-radius:50%; border:1px solid rgba(255,255,255,.07); background:radial-gradient(ellipse,rgba(255,255,255,.045),transparent 70%)} /* ۲-پ · ستون‌های گوشه */ .pmr-post{position:absolute;inset-block:14% 12%;width:14px;border-radius:9px;pointer-events:none; box-shadow:0 0 26px -4px var(--pc)} .pmr-post::before{content:"";position:absolute;inset-block-start:-11px;inset-inline-start:-4px; width:22px;height:22px;border-radius:50%;background:var(--pc); box-shadow:0 0 22px 2px var(--pc)} .pmr-post--blue{--pc:var(--blue);inset-inline-end:4%; background:linear-gradient(180deg,var(--blue-2),var(--blue) 55%,#132C6B)} .pmr-post--red{--pc:var(--red);inset-inline-start:4%; background:linear-gradient(180deg,var(--red-2),var(--red) 55%,#6B1414)} /* ۲-ت · طناب‌ها */ .pmr-ropes{position:absolute;inset-block:16% 14%;inset-inline:4%;width:92%;height:auto; pointer-events:none;overflow:visible} .pmr-ropes path{fill:none;stroke-width:2.5;stroke-linecap:round;opacity:.55} /* ۲-ث · غبار در ستون نور */ .pmr-dust b{position:absolute;display:block;width:3px;height:3px;border-radius:50%; opacity:0;animation:pmrDust linear infinite} @keyframes pmrDust{ 0%{transform:translateY(30px) scale(.5);opacity:0} 20%{opacity:.7}80%{opacity:.45} 100%{transform:translateY(-70px) scale(1);opacity:0}} /* ۲-ج · مبارزها */ .pmr-fighters{position:relative;z-index:4;height:100%;display:grid; grid-template-columns:1fr auto 1fr;align-items:center;gap:clamp(10px,2vw,26px); padding:clamp(26px,4vw,44px) clamp(46px,8vw,96px)} .pmr-fighter{position:relative;border-radius:20px;padding:20px clamp(14px,1.8vw,22px); text-align:center;background:linear-gradient(160deg,rgba(255,255,255,.075),rgba(255,255,255,.02)); border:1px solid var(--line-2);backdrop-filter:blur(8px); box-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 26px 54px -30px #000} .pmr-fighter--ovh{--fc:var(--blue);--fc2:var(--blue-2);--fc3:var(--blue-3); box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 0 0 1px rgba(96,165,250,.42), 0 30px 70px -30px rgba(37,99,235,.9)} .pmr-fighter--het{--fc:var(--red);--fc2:var(--red-2);--fc3:var(--red-3)} .pmr-corner{display:inline-flex;align-items:center;gap:6px;padding:4px 11px;border-radius:99px; font-size:.68rem;font-weight:800;margin-bottom:14px;color:var(--fc3); background:color-mix(in srgb,var(--fc) 26%,transparent); border:1px solid color-mix(in srgb,var(--fc) 46%,transparent)} .pmr-corner i{width:7px;height:7px;border-radius:50%;background:var(--fc2);flex:none} .pmr-emblem{width:clamp(46px,6vw,62px);height:clamp(46px,6vw,62px);margin:0 auto 12px; border-radius:17px;display:grid;place-items:center;color:#fff; background:linear-gradient(140deg,var(--fc2),var(--fc)); box-shadow:0 12px 28px -12px var(--fc)} .pmr-name{font-family:var(--mono);direction:ltr;font-size:clamp(1.05rem,2.1vw,1.4rem); font-weight:700;color:#fff;margin:0 0 5px;letter-spacing:-.01em} .pmr-role{margin:0 0 16px;font-size:.76rem;color:var(--tx-2);line-height:1.7} .pmr-score{padding-block-start:14px;border-block-start:1px solid var(--line)} .pmr-score small{display:block;font-size:.68rem;color:var(--tx-3);margin-bottom:2px} .pmr-score b{display:block;font-family:var(--display);font-size:clamp(1.8rem,4vw,2.6rem); font-weight:900;line-height:1;color:var(--fc2)} /* کمربند قهرمانی — فقط روی OVH */ .pmr-belt{position:absolute;inset-block-end:-15px;inset-inline:14%;height:30px;border-radius:8px; display:grid;place-items:center; background:linear-gradient(180deg,#3B2708,#170F02); border:1px solid rgba(245,165,36,.5); box-shadow:0 12px 26px -12px rgba(245,165,36,.85)} .pmr-belt i{width:30px;height:22px;border-radius:6px;display:grid;place-items:center; color:#2A1500;background:linear-gradient(140deg,var(--gold-2),var(--gold)); box-shadow:0 0 14px -2px rgba(245,165,36,.9)} /* نشان VS */ .pmr-vs{position:relative;width:clamp(52px,7vw,74px);aspect-ratio:1;border-radius:50%; display:grid;place-items:center;font-family:var(--mono);direction:ltr; font-size:clamp(.86rem,1.6vw,1.06rem);font-weight:700;color:#fff; background:radial-gradient(circle,#1A2340,#0A0F1C); border:1px solid var(--line-2); box-shadow:0 0 34px -6px rgba(255,255,255,.25),inset 0 1px 0 rgba(255,255,255,.16)} .pmr-vs::before{content:"";position:absolute;inset:-6px;border-radius:50%; border:1px dashed rgba(255,255,255,.24);animation:pmrSpin 18s linear infinite} @keyframes pmrSpin{to{transform:rotate(360deg)}} /* ───────────────────────────────────────────────────────────────── ۳. تابلوی امتیاز ───────────────────────────────────────────────────────────────── */ .pmr-board{margin-top:clamp(22px,3vw,34px);border-radius:22px;overflow:hidden; background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.02)); border:1px solid var(--line)} .pmr-board-h{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap; padding:16px var(--pad);border-block-end:1px solid var(--line); font-size:.86rem;font-weight:800;color:#fff} .pmr-board-h span{font-size:.74rem;font-weight:600;color:var(--tx-3)} .pmr-round{display:grid;grid-template-columns:56px 1fr auto;gap:clamp(12px,2vw,22px); align-items:center;padding:18px var(--pad);border-block-start:1px solid var(--line); opacity:0;transform:translateY(12px); transition:opacity .5s ease,transform .5s cubic-bezier(.22,1,.36,1)} .pmr-round:first-of-type{border-block-start:0} .pmr-round.on{opacity:1;transform:none} .pmr-round-n{display:grid;place-items:center;width:44px;height:44px;border-radius:13px; font-family:var(--display);font-size:1.02rem;font-weight:900;color:var(--tx-2); background:rgba(255,255,255,.05);border:1px solid var(--line)} .pmr-round-tx b{display:block;font-size:.95rem;font-weight:800;color:#fff;margin-bottom:5px} .pmr-round-tx p{margin:0;font-size:.84rem;line-height:1.95;color:var(--tx-2);max-width:74ch} .pmr-win{display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border-radius:99px; font-family:var(--mono);direction:ltr;font-size:.78rem;font-weight:700;white-space:nowrap} .pmr-win svg{flex:none} .pmr-win--ovh{color:var(--blue-3);background:rgba(37,99,235,.20); border:1px solid rgba(96,165,250,.42)} .pmr-win--het{color:var(--red-3);background:rgba(220,38,38,.18); border:1px solid rgba(248,113,113,.38)} /* نتیجه‌ی نهایی */ .pmr-final{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap; padding:22px var(--pad);border-block-start:1px solid var(--line-2); background:linear-gradient(90deg,rgba(37,99,235,.14),transparent 60%,rgba(220,38,38,.10))} .pmr-final-l{display:flex;align-items:baseline;gap:14px} .pmr-final-l b{font-family:var(--display);font-size:clamp(2rem,5vw,3rem);font-weight:900; line-height:1;color:#fff} .pmr-final-l b span{color:var(--blue-2)} .pmr-final-l b em{font-style:normal;color:var(--tx-3);margin-inline:8px;font-size:.7em} .pmr-final-l b i{font-style:normal;color:var(--red-2)} .pmr-final-l small{font-size:.82rem;color:var(--tx-2)} .pmr-cta{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-weight:800; font-size:.93rem;padding:14px 24px;border-radius:12px;text-decoration:none;color:#fff; background:linear-gradient(135deg,var(--blue-2),var(--blue)); box-shadow:0 12px 28px -12px rgba(37,99,235,1),inset 0 1px 0 rgba(255,255,255,.28); transition:transform .14s,box-shadow .22s} .pmr-cta:active{transform:translateY(1px)} .pmr-note{margin:20px 0 0;font-size:.8rem;line-height:1.95;color:var(--tx-3);max-width:82ch} /* ───────────────────────────────────────────────────────────────── ۴. واکنش‌گرایی ───────────────────────────────────────────────────────────────── */ @media (max-width:820px){ .pmr-fighters{padding:clamp(22px,4vw,32px) clamp(30px,7vw,52px);gap:8px} .pmr-role{display:none} .pmr-post{inset-inline-end:2.5%} .pmr-post--red{inset-inline-start:2.5%} .pmr-round{grid-template-columns:44px 1fr;gap:12px} .pmr-round-n{width:38px;height:38px;font-size:.92rem} .pmr-win{grid-column:2;justify-self:start;margin-top:10px} .pmr-dust{display:none} } @media (max-width:520px){ .pmr-arena{min-height:300px} .pmr-fighters{padding:20px 24px} .pmr-emblem{margin-bottom:8px} .pmr-corner{margin-bottom:9px;font-size:.62rem;padding:3px 8px} .pmr-belt{inset-inline:8%;height:24px} .pmr-final{flex-direction:column;align-items:stretch} .pmr-cta{justify-content:center} } /* ───────────────────────────────────────────────────────────────── ۵. کاهش حرکت ───────────────────────────────────────────────────────────────── */ @media (prefers-reduced-motion:reduce){ .pmr *,.pmr *::before,.pmr *::after{ animation:none !important;transition-duration:.001ms !important} .pmr-round{opacity:1;transform:none} .pmr-dust{display:none} } /* ═══ ۰۷ · انتخابگر هوشمند ══════════════════════════════════════ */ /* ───────────────────────────────────────────────────────────────── ۰. پایه — لهجه با پاسخ کاربر عوض می‌شود ───────────────────────────────────────────────────────────────── */ .pmn{ --paper:#FFFFFF; --paper-2:#F5F8FC; --paper-3:#EAEFF7; --line:#DDE4EF; --line-2:#C6D1E2; --tx:#0D1526; --tx-2:#55637E; --tx-3:#8794AE; --ac:#2563EB; --ac2:#3B82F6; --acs:rgba(37,99,235,.10); position:relative;overflow:hidden;isolation:isolate; background:linear-gradient(180deg,#F8FAFE 0%,#EDF1F8 100%); padding-block:clamp(54px,8vw,100px); } .pmn[data-ac=blue] {--ac:#2563EB;--ac2:#3B82F6;--acs:rgba(37,99,235,.10)} .pmn[data-ac=violet]{--ac:#7C3AED;--ac2:#A855F7;--acs:rgba(124,58,237,.10)} .pmn[data-ac=cyan] {--ac:#0891B2;--ac2:#22D3EE;--acs:rgba(8,145,178,.11)} .pmn[data-ac=teal] {--ac:#0D9488;--ac2:#2DD4BF;--acs:rgba(13,148,136,.11)} .pmn[data-ac=gold] {--ac:#C2760A;--ac2:#F5A524;--acs:rgba(194,118,10,.12)} .pmn-wrap{width:min(880px,100% - 2*var(--pad));margin-inline:auto;position:relative;z-index:2} .pmn :is(a,button):focus-visible{outline:2px solid var(--ac2);outline-offset:3px;border-radius:12px} .pmn::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.55; background-image:linear-gradient(rgba(13,21,38,.045) 1px,transparent 1px), linear-gradient(90deg,rgba(13,21,38,.045) 1px,transparent 1px); background-size:48px 48px; -webkit-mask-image:radial-gradient(85% 65% at 50% 0%,#000,transparent 76%); mask-image:radial-gradient(85% 65% at 50% 0%,#000,transparent 76%)} .pmn::after{content:"";position:absolute;z-index:0;pointer-events:none; inset-block-start:-14%;inset-inline-start:50%;translate:-50% 0; width:60vw;max-width:760px;aspect-ratio:1;border-radius:50%;filter:blur(94px); background:var(--acs);transition:background .6s ease} /* ───────────────────────────────────────────────────────────────── ۱. سرتیتر ───────────────────────────────────────────────────────────────── */ .pmn-head{text-align:center;margin-bottom:clamp(24px,3.4vw,36px)} .pmn-eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:.75rem;font-weight:700; color:var(--tx-2);margin:0 0 14px} .pmn-eyebrow::before,.pmn-eyebrow::after{content:"";width:26px;height:1px; background:linear-gradient(90deg,transparent,var(--ac2))} .pmn-eyebrow .pmn-num{color:var(--ac);font-weight:700} .pmn-h2{font-family:var(--display);font-size:clamp(1.55rem,3.6vw,2.6rem);font-weight:900; line-height:1.32;letter-spacing:-.015em;margin:0 0 12px;color:var(--tx);position:relative;z-index:0} .pmn-h2 em{font-style:normal;color:var(--ac);position:relative} .pmn-h2 em::after{content:"";position:absolute;inset-inline:-3px;inset-block-end:.05em;height:.34em; z-index:-1;border-radius:3px;background:linear-gradient(90deg,var(--acs),transparent)} .pmn-lead{font-size:clamp(.93rem,1.5vw,1.03rem);line-height:2;color:var(--tx-2); margin:0 auto;max-width:56ch} /* ───────────────────────────────────────────────────────────────── ۲. پوسته ───────────────────────────────────────────────────────────────── */ .pmn-box{position:relative;border-radius:24px;background:var(--paper);border:1px solid var(--line); overflow:hidden;box-shadow:0 2px 6px rgba(13,21,38,.05),0 30px 60px -34px rgba(13,21,38,.34)} /* نوار پیشرفت */ .pmn-bar{height:4px;background:var(--paper-3)} .pmn-bar i{display:block;height:100%;width:0;border-radius:0 99px 99px 0; background:linear-gradient(90deg,var(--ac2),var(--ac)); transition:width .5s cubic-bezier(.22,1,.36,1)} /* نوار وضعیت */ .pmn-top{display:flex;align-items:center;justify-content:space-between;gap:14px; padding:14px var(--pad);border-block-end:1px solid var(--line);background:var(--paper-2)} .pmn-step-n{font-family:var(--mono);direction:ltr;font-size:.74rem;font-weight:700;color:var(--tx-3)} .pmn-step-n b{color:var(--ac)} .pmn-crumbs{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end} .pmn-crumb{display:inline-flex;align-items:center;gap:6px;font:inherit;font-size:.75rem; font-weight:700;cursor:pointer;padding:5px 11px;border-radius:99px; border:1px solid var(--line-2);background:var(--paper);color:var(--tx-2);transition:.16s; animation:pmnPop .28s cubic-bezier(.22,1.4,.5,1) both} .pmn-crumb:hover{border-color:var(--ac);color:var(--ac);background:var(--acs)} .pmn-crumb svg{flex:none;opacity:.55} @keyframes pmnPop{from{opacity:0;transform:scale(.86)}} /* ───────────────────────────────────────────────────────────────── ۳. پرسش ───────────────────────────────────────────────────────────────── */ .pmn-quiz{padding:clamp(24px,3.6vw,40px) var(--pad) clamp(20px,3vw,32px)} .pmn-quiz[hidden]{display:none} .pmn-q{display:none} .pmn-q.on{display:block;animation:pmnIn .42s cubic-bezier(.22,1,.36,1) both} @keyframes pmnIn{from{opacity:0;transform:translateY(16px)}} .pmn-q h3{font-family:var(--display);font-size:clamp(1.2rem,2.6vw,1.68rem);font-weight:900; line-height:1.45;margin:0 0 7px;color:var(--tx);text-align:center} .pmn-hint{margin:0 0 clamp(18px,2.6vw,26px);font-size:.85rem;line-height:1.85;color:var(--tx-3); text-align:center} /* کاشی‌ها */ .pmn-tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(10px,1.4vw,14px)} .pmn-tiles[data-n="3"]{grid-template-columns:repeat(3,1fr)} .pmn-tile{position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:center; gap:10px;text-align:center;font:inherit;cursor:pointer; padding:clamp(18px,2.4vw,24px) 14px clamp(16px,2vw,20px); border-radius:18px;border:1px solid var(--line);background:var(--paper); transition:transform .18s cubic-bezier(.22,1,.36,1),border-color .2s,box-shadow .24s} .pmn-tile::before{content:"";position:absolute;inset:0;z-index:0;opacity:0;transition:opacity .24s; background:linear-gradient(180deg,var(--ts),transparent 72%)} .pmn-tile>*{position:relative;z-index:1} .pmn-tile:hover{transform:translateY(-5px);border-color:var(--tc); box-shadow:0 18px 32px -18px var(--tc)} .pmn-tile:hover::before{opacity:1} .pmn-tile-ic{width:clamp(46px,6vw,56px);aspect-ratio:1;border-radius:16px;display:grid; place-items:center;color:#fff;background:linear-gradient(140deg,var(--tc2),var(--tc)); box-shadow:0 10px 22px -10px var(--tc); transition:transform .34s cubic-bezier(.22,1.6,.5,1)} .pmn-tile:hover .pmn-tile-ic{transform:scale(1.09) rotate(-7deg)} .pmn-tile b{font-size:.92rem;font-weight:800;color:var(--tx);line-height:1.6} .pmn-tile small{font-size:.76rem;color:var(--tx-3);line-height:1.75} /* کلید میان‌بر */ .pmn-key{position:absolute;z-index:2;inset-block-start:10px;inset-inline-end:10px; font-family:var(--mono);direction:ltr;font-size:.62rem;font-weight:700; width:19px;height:19px;border-radius:6px;display:grid;place-items:center; background:var(--paper-3);color:var(--tx-3);opacity:0;transition:opacity .2s} .pmn-box:hover .pmn-key,.pmn-box:focus-within .pmn-key{opacity:1} .pmn-tile:hover .pmn-key{background:var(--tc);color:#fff} .pmn-tile.picked{border-color:var(--tc);box-shadow:0 0 0 3px var(--ts); animation:pmnStamp .34s cubic-bezier(.3,1.6,.5,1)} @keyframes pmnStamp{40%{transform:scale(.96)}100%{transform:scale(1)}} .pmn-tile[data-c=cyan] {--tc:#0891B2;--tc2:#22D3EE;--ts:rgba(8,145,178,.10)} .pmn-tile[data-c=blue] {--tc:#2563EB;--tc2:#3B82F6;--ts:rgba(37,99,235,.10)} .pmn-tile[data-c=violet]{--tc:#7C3AED;--tc2:#A855F7;--ts:rgba(124,58,237,.10)} .pmn-tile[data-c=teal] {--tc:#0D9488;--tc2:#2DD4BF;--ts:rgba(13,148,136,.10)} .pmn-tile[data-c=gold] {--tc:#C2760A;--tc2:#F5A524;--ts:rgba(194,118,10,.12)} .pmn-back{display:inline-flex;align-items:center;gap:7px;margin-top:20px;font:inherit; font-size:.83rem;font-weight:700;color:var(--tx-3);background:none;border:0;cursor:pointer; padding:8px 2px;transition:color .16s} .pmn-back:hover{color:var(--ac)} .pmn-back[hidden]{display:none} /* ───────────────────────────────────────────────────────────────── ۴. نتیجه ───────────────────────────────────────────────────────────────── */ .pmn-res{display:none} .pmn-res.on{display:block;animation:pmnReveal .55s cubic-bezier(.22,1,.36,1) both} @keyframes pmnReveal{from{opacity:0;transform:scale(.97) translateY(14px);filter:blur(4px)}} .pmn-res-top{position:relative;text-align:center;overflow:hidden; padding:clamp(26px,3.6vw,40px) var(--pad) clamp(22px,3vw,30px); background:linear-gradient(180deg,var(--acs),transparent); border-block-end:1px solid var(--line)} .pmn-res-top::before{content:"";position:absolute;inset-block-start:-56%;inset-inline-start:50%; translate:-50% 0;width:76%;aspect-ratio:1;border-radius:50%;pointer-events:none; background:radial-gradient(circle,var(--acs),transparent 66%)} .pmn-res-top>*{position:relative} .pmn-res-lbl{display:inline-flex;align-items:center;gap:8px;font-size:.76rem;font-weight:800; color:var(--ac);padding:6px 14px;border-radius:99px;background:var(--acs);margin-bottom:16px} .pmn-ava{position:relative;width:clamp(76px,10vw,92px);aspect-ratio:1;margin:0 auto 14px; border-radius:26px;display:grid;place-items:center;overflow:hidden;color:#fff; background:linear-gradient(140deg,var(--ac2),var(--ac)); box-shadow:0 16px 32px -14px var(--ac)} .pmn-ava img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 14%; opacity:0;transition:opacity .45s} .pmn-ava img.on{opacity:1} .pmn-plan{font-family:var(--display);font-size:clamp(1.5rem,3.4vw,2.1rem);font-weight:900; color:var(--tx);line-height:1.3;margin:0 0 6px} .pmn-fam{margin:0;font-size:.9rem;color:var(--tx-2)} .pmn-badge{display:inline-flex;align-items:center;margin-top:12px;padding:5px 13px;border-radius:99px; font-family:var(--mono);direction:ltr;font-size:.7rem;font-weight:700; background:var(--paper);border:1px solid var(--line-2);color:var(--tx-2)} /* مشخصات */ .pmn-specs{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line); border-block-end:1px solid var(--line)} .pmn-specs div{background:var(--paper);padding:15px 8px;text-align:center} .pmn-specs b{display:block;font-family:var(--mono);direction:ltr;font-size:.9rem;font-weight:700; color:var(--tx);line-height:1.4} .pmn-specs small{display:block;font-size:.68rem;color:var(--tx-3);margin-top:4px} /* دلایل */ .pmn-why{list-style:none;margin:0;padding:clamp(18px,2.4vw,24px) var(--pad) 0} .pmn-why li{display:flex;gap:11px;padding:11px 0;font-size:.87rem;line-height:1.95;color:var(--tx-2); border-block-start:1px solid var(--line); animation:pmnIn .45s cubic-bezier(.22,1,.36,1) both} .pmn-why li:first-child{border-block-start:0} .pmn-why li:nth-child(1){animation-delay:.1s} .pmn-why li:nth-child(2){animation-delay:.18s} .pmn-why li:nth-child(3){animation-delay:.26s} .pmn-why svg{flex:none;margin-top:5px;color:var(--ac)} .pmn-why b{color:var(--tx);font-weight:800} /* اقدام */ .pmn-act{display:flex;align-items:center;gap:12px;flex-wrap:wrap; padding:clamp(18px,2.4vw,24px) var(--pad)} .pmn-price{flex:1;min-width:150px} .pmn-price b{display:block;font-family:var(--display);font-size:clamp(1.3rem,2.6vw,1.6rem); font-weight:900;color:var(--tx);line-height:1.3} .pmn-price b span{font-family:var(--mono);direction:ltr} .pmn-price b i{font-style:normal;font-size:.5em;font-weight:700;color:var(--tx-2)} .pmn-price small{display:block;font-size:.75rem;color:var(--tx-3);margin-top:3px} .pmn-go{display:inline-flex;align-items:center;gap:9px;font-weight:800;font-size:.95rem; padding:15px 26px;border-radius:13px;text-decoration:none;color:#fff; background:linear-gradient(135deg,var(--ac2),var(--ac)); box-shadow:0 12px 28px -12px var(--ac);transition:transform .14s,box-shadow .2s} .pmn-go:active{transform:translateY(1px)} .pmn-go:hover{box-shadow:0 18px 36px -12px var(--ac)} /* گزینه‌ی جایگزین */ .pmn-alt{display:flex;align-items:center;gap:14px;flex-wrap:wrap; padding:16px var(--pad);border-block-start:1px solid var(--line);background:var(--paper-2)} .pmn-alt-l{flex:1;min-width:190px;display:flex;align-items:center;gap:11px} .pmn-alt-ic{flex:none;width:34px;height:34px;border-radius:11px;display:grid;place-items:center; background:var(--paper-3);color:var(--tx-2)} .pmn-alt-l b{display:block;font-size:.88rem;font-weight:800;color:var(--tx);line-height:1.5} .pmn-alt-l small{display:block;font-size:.76rem;color:var(--tx-3);margin-top:2px} .pmn-alt-go{font-size:.83rem;font-weight:700;color:var(--tx-2);text-decoration:none; padding:9px 16px;border-radius:10px;border:1px solid var(--line-2);background:var(--paper); transition:.16s;white-space:nowrap} .pmn-alt-go:hover{border-color:var(--ac);color:var(--ac)} .pmn-again{display:flex;justify-content:center;padding:0 var(--pad) 20px} .pmn-again button{font:inherit;font-size:.83rem;color:var(--tx-3);background:none;border:0; cursor:pointer;text-decoration:underline;text-underline-offset:3px;padding:8px} .pmn-again button:hover{color:var(--ac)} /* ───────────────────────────────────────────────────────────────── ۵. بلوک ثابت سئو ───────────────────────────────────────────────────────────────── */ .pmn-quick{margin-top:clamp(22px,3vw,34px);padding-top:20px;border-top:1px solid var(--line)} .pmn-quick h3{font-size:.88rem;font-weight:800;color:var(--tx-2);margin:0 0 13px;text-align:center} .pmn-quick ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px; justify-content:center} .pmn-quick a{display:inline-block;font-size:.81rem;font-weight:600;color:var(--tx-2); text-decoration:none;padding:9px 15px;border-radius:99px;border:1px solid var(--line); background:var(--paper);transition:.16s} .pmn-quick a:hover{border-color:var(--ac);color:var(--ac);background:var(--acs)} /* ───────────────────────────────────────────────────────────────── ۶. واکنش‌گرایی ───────────────────────────────────────────────────────────────── */ @media (max-width:720px){ .pmn-tiles,.pmn-tiles[data-n="3"]{grid-template-columns:repeat(2,1fr)} .pmn-tiles[data-n="3"] .pmn-tile:last-child{grid-column:1 / -1} .pmn-specs{grid-template-columns:repeat(2,1fr)} .pmn-crumbs{display:none} .pmn-key{display:none} } @media (max-width:460px){ .pmn-tile{padding:15px 10px} .pmn-tile small{display:none} .pmn-act{flex-direction:column;align-items:stretch} .pmn-go{justify-content:center} } /* ───────────────────────────────────────────────────────────────── ۷. کاهش حرکت ───────────────────────────────────────────────────────────────── */ @media (prefers-reduced-motion:reduce){ .pmn *,.pmn *::before,.pmn *::after{ animation:none !important;transition-duration:.001ms !important} } /* ═══ ۰۸ · هاست رایگان ══════════════════════════════════════════ */ /* ───────────────────────────────────────────────────────────────── ۰. پایه — پالت کهربایی و طلایی، متمایز از کل صفحه ───────────────────────────────────────────────────────────────── */ .pmg{ --bg:#120C04; --bg-2:#1D1408; --gold:#F5A524; --gold-2:#FFD27A; --gold-3:#FFEBC2; --amber:#C2760A; --deep:#3A2708; --paper:#FDF6E6; --paper-2:#F7EAD0; --ink:#2A1B02; --tx:#F5EAD6; --tx-2:#C9B492; --tx-3:#96825F; position:relative;overflow:hidden;isolation:isolate;background:var(--bg);color:var(--tx); padding-block:clamp(56px,8vw,104px); } .pmg-wrap{width:min(1180px,100% - 2*var(--pad));margin-inline:auto;position:relative;z-index:3} .pmg :is(a,button):focus-visible{outline:2px solid var(--gold-2);outline-offset:4px;border-radius:10px} /* هاله‌های کهربایی */ .pmg::before,.pmg::after{content:"";position:absolute;z-index:0;pointer-events:none; border-radius:50%;filter:blur(96px)} .pmg::before{inset-block-start:-22%;inset-inline-end:-12%;width:54vw;max-width:720px;aspect-ratio:1; background:radial-gradient(circle,rgba(245,165,36,.30),transparent 66%)} .pmg::after{inset-block-end:-24%;inset-inline-start:-10%;width:42vw;max-width:560px;aspect-ratio:1; background:radial-gradient(circle,rgba(194,118,10,.24),transparent 68%)} /* ───────────────────────────────────────────────────────────────── ۱. سرتیتر ───────────────────────────────────────────────────────────────── */ .pmg-head{text-align:center;max-width:64ch;margin:0 auto clamp(28px,4vw,46px)} .pmg-eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:.75rem;font-weight:700; color:var(--gold-2);margin:0 0 14px} .pmg-eyebrow::before,.pmg-eyebrow::after{content:"";width:26px;height:1px; background:linear-gradient(90deg,transparent,var(--gold))} .pmg-h2{font-family:var(--display);font-size:clamp(1.6rem,3.8vw,2.7rem);font-weight:900; line-height:1.34;letter-spacing:-.018em;margin:0 0 14px;color:#fff} .pmg-h2 b{font-weight:inherit;color:var(--gold-2)} .pmg-lead{font-size:clamp(.94rem,1.5vw,1.05rem);line-height:2.05;color:var(--tx-2);margin:0} /* ───────────────────────────────────────────────────────────────── ۲. بلیط ───────────────────────────────────────────────────────────────── */ .pmg-ticket{position:relative;display:grid; grid-template-columns:clamp(190px,26%,290px) 1fr; border-radius:22px;overflow:hidden; background: radial-gradient(120% 80% at 12% 0%,rgba(255,255,255,.55),transparent 58%), linear-gradient(150deg,var(--paper) 0%,var(--paper-2) 52%,#EFDFBF 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 2px 4px rgba(0,0,0,.35), 0 26px 50px -22px rgba(0,0,0,.75), 0 60px 110px -50px rgba(245,165,36,.65)} /* بافت کاغذ */ .pmg-ticket::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.5; background-image:radial-gradient(circle at 1px 1px,rgba(42,27,2,.09) 1px,transparent 0); background-size:16px 16px} /* درخشش عبوری */ .pmg-shine{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden} .pmg-shine::after{content:"";position:absolute;inset-block:-40%;width:34%; inset-inline-start:-40%;transform:skewX(-16deg); background:linear-gradient(90deg,transparent,rgba(255,255,255,.66),transparent); animation:pmgShine 6.5s ease-in-out infinite} @keyframes pmgShine{ 0%,58%{inset-inline-start:-40%} 92%,100%{inset-inline-start:118%}} /* ── خط پرفراژ عمودی با دندانه‌ی واقعی ── */ .pmg-perf{position:absolute;z-index:4;inset-block:0; inset-inline-start:clamp(190px,26%,290px);width:22px;translate:-50% 0;pointer-events:none} .pmg-perf::before{content:"";position:absolute;inset-block:14px;inset-inline-start:50%; translate:-50% 0;width:2px; background-image:repeating-linear-gradient(to bottom, rgba(42,27,2,.34) 0 7px, transparent 7px 15px)} /* نیم‌دایره‌های بالا و پایین — همان چیزی که بلیط را بلیط می‌کند */ .pmg-notch{position:absolute;inset-inline-start:50%;translate:-50% 0; width:24px;height:24px;border-radius:50%;background:var(--bg); box-shadow:inset 0 0 0 1px rgba(0,0,0,.25)} .pmg-notch--t{inset-block-start:-12px} .pmg-notch--b{inset-block-end:-12px} /* ── ته‌بلیط ── */ .pmg-stub{position:relative;z-index:2;display:flex;flex-direction:column; align-items:center;justify-content:center;text-align:center; padding:clamp(26px,3.4vw,40px) clamp(16px,2vw,24px); background:linear-gradient(160deg,rgba(245,165,36,.14),rgba(245,165,36,.03))} .pmg-seal{position:relative;width:clamp(112px,15vw,148px);aspect-ratio:1; display:grid;place-items:center;margin-bottom:16px} .pmg-seal svg{position:absolute;inset:0;width:100%;height:100%} .pmg-seal-ring{animation:pmgSpin 30s linear infinite;transform-origin:50% 50%} @keyframes pmgSpin{to{transform:rotate(360deg)}} .pmg-seal-tx{position:relative;z-index:1;font-family:var(--mono);direction:ltr; font-size:clamp(1.85rem,4vw,2.5rem);font-weight:700;line-height:1;color:var(--ink); letter-spacing:-.04em} .pmg-seal-tx small{font-size:.36em;vertical-align:super;margin-inline-start:2px} .pmg-stub-l{font-size:.82rem;font-weight:800;color:var(--amber);line-height:1.7} .pmg-stub-serial{margin-top:14px;padding-top:12px;width:100%; border-top:1px dashed rgba(42,27,2,.24); font-family:var(--mono);direction:ltr;font-size:.64rem;letter-spacing:.1em;color:#8A7145} /* ── بدنه‌ی بلیط ── */ .pmg-body{position:relative;z-index:2;padding:clamp(26px,3.6vw,42px)} .pmg-body h3{font-family:var(--display);font-size:clamp(1.3rem,2.7vw,1.9rem);font-weight:900; line-height:1.42;margin:0 0 12px;color:var(--ink)} .pmg-body h3 b{font-weight:inherit;color:var(--amber)} .pmg-why{margin:0 0 22px;font-size:.92rem;line-height:2.05;color:#5B4620;max-width:56ch} .pmg-why strong{color:var(--ink);font-weight:800} /* دو ستون: دارد / ندارد */ .pmg-cols{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,2vw,26px);margin-bottom:24px} .pmg-col>b{display:flex;align-items:center;gap:8px;font-size:.79rem;font-weight:800; margin-bottom:12px;color:var(--ink)} .pmg-col ul{list-style:none;margin:0;padding:0} .pmg-col li{display:flex;gap:9px;padding:8px 0;font-size:.85rem;line-height:1.8; border-block-start:1px solid rgba(42,27,2,.10)} .pmg-col li:first-child{border-block-start:0} .pmg-col svg{flex:none;margin-top:4px} .pmg-col--has li{color:#4A3813} .pmg-col--has svg{color:#15803D} .pmg-col--has .pmg-num{color:var(--amber);font-weight:700} .pmg-col--not li{color:#7A6640} .pmg-col--not svg{color:#A8895A} .pmg-col--not em{font-style:normal;font-size:.78rem;color:#96825F;display:block;margin-top:2px} /* اقدام */ .pmg-cta{display:flex;flex-wrap:wrap;align-items:center;gap:14px; padding-block-start:20px;border-block-start:1px dashed rgba(42,27,2,.22)} .pmg-go{display:inline-flex;align-items:center;gap:10px;font-weight:800;font-size:1rem; padding:16px 28px;border-radius:13px;text-decoration:none;color:var(--ink); background:linear-gradient(135deg,var(--gold-2),var(--gold) 55%,var(--amber)); box-shadow:0 12px 26px -12px rgba(194,118,10,.95),inset 0 1px 0 rgba(255,255,255,.6); transition:transform .14s,box-shadow .22s} .pmg-go:active{transform:translateY(1px)} .pmg-go:hover{box-shadow:0 18px 34px -12px rgba(194,118,10,1),inset 0 1px 0 rgba(255,255,255,.7)} .pmg-cta small{font-size:.8rem;color:#7A6640;line-height:1.8} /* مهر FOREVER */ .pmg-stamp{position:absolute;z-index:3;inset-block-end:clamp(14px,2.4vw,26px); inset-inline-end:clamp(14px,2.4vw,30px); padding:8px 16px;border-radius:7px;transform:rotate(-9deg); font-family:var(--mono);direction:ltr;font-size:.72rem;font-weight:700;letter-spacing:.14em; color:rgba(194,118,10,.62);border:2px solid rgba(194,118,10,.42); box-shadow:inset 0 0 0 1px rgba(194,118,10,.2);pointer-events:none;user-select:none} /* ذرات طلایی */ .pmg-dust b{position:absolute;display:block;width:3px;height:3px;border-radius:50%; background:var(--gold-2);opacity:0;animation:pmgDust linear infinite} @keyframes pmgDust{ 0%{transform:translateY(26px) scale(.5);opacity:0} 22%{opacity:.75}78%{opacity:.5} 100%{transform:translateY(-84px) scale(1);opacity:0}} /* پانویس */ .pmg-foot{margin:clamp(20px,3vw,30px) 0 0;text-align:center; font-size:.8rem;line-height:1.95;color:var(--tx-3)} .pmg-foot a{color:var(--gold-2);font-weight:700;text-decoration:underline;text-underline-offset:3px} /* ───────────────────────────────────────────────────────────────── ۳. واکنش‌گرایی — بلیط عمودی می‌شود، پرفراژ افقی ───────────────────────────────────────────────────────────────── */ @media (max-width:860px){ .pmg-ticket{grid-template-columns:1fr} .pmg-stub{padding-block-end:34px} .pmg-perf{inset-block:auto;inset-block-start:var(--cut,0);inset-inline:0;width:auto;height:22px; translate:0 -50%} .pmg-perf::before{inset-block:auto;inset-inline:14px;inset-block-start:50%; translate:0 -50%;width:auto;height:2px; background-image:repeating-linear-gradient(to right, rgba(42,27,2,.34) 0 7px, transparent 7px 15px)} .pmg-notch{inset-inline-start:auto;inset-block-start:50%;translate:0 -50%} .pmg-notch--t{inset-inline-start:-12px} .pmg-notch--b{inset-inline-end:-12px} .pmg-cols{grid-template-columns:1fr;gap:18px} .pmg-stamp{inset-block-end:auto;inset-block-start:14px;inset-inline-end:14px;scale:.9} } @media (max-width:520px){ .pmg-go{width:100%;justify-content:center} .pmg-cta small{text-align:center;width:100%} } /* ───────────────────────────────────────────────────────────────── ۴. کاهش حرکت ───────────────────────────────────────────────────────────────── */ @media (prefers-reduced-motion:reduce){ .pmg *,.pmg *::before,.pmg *::after{ animation:none !important;transition-duration:.001ms !important} .pmg-shine,.pmg-dust{display:none} } /* ═══ ۰۹ · هاست دانشجویی ════════════════════════════════════════ */ /* ───────────────────────────────────────────────────────────────── ۰. پایه — کاغذ دفتر ───────────────────────────────────────────────────────────────── */ .pms{ --paper:#FCFAF4; --paper-2:#F6F2E7; --card:#FFFDF8; --rule:#D8E3EE; --margin:#E9A8A8; --line:#E4DDCC; --line-2:#CFC5AE; --ink:#2B2418; --tx:#2B2418; --tx-2:#6B6047; --tx-3:#9B8F73; --pencil:#8A7F63; position:relative;overflow:hidden;isolation:isolate;color:var(--tx);background:var(--paper); padding-block:clamp(56px,8vw,104px); } .pms-wrap{width:min(1180px,100% - 2*var(--pad));margin-inline:auto;position:relative;z-index:3} .pms :is(a,button):focus-visible{outline:2px solid #B45309;outline-offset:3px;border-radius:8px} .pms-paper{position:absolute;inset:0;z-index:0;pointer-events:none; background-image:repeating-linear-gradient(to bottom,transparent 0 33px,var(--rule) 33px 34px); opacity:.5; -webkit-mask-image:linear-gradient(to bottom,transparent,#000 8%,#000 88%,transparent); mask-image:linear-gradient(to bottom,transparent,#000 8%,#000 88%,transparent)} .pms-margin{position:absolute;z-index:1;inset-block:0;inset-inline-end:clamp(24px,7vw,92px); width:1.5px;background:var(--margin);opacity:.45;pointer-events:none; -webkit-mask-image:linear-gradient(to bottom,transparent,#000 10%,#000 90%,transparent); mask-image:linear-gradient(to bottom,transparent,#000 10%,#000 90%,transparent)} /* خط‌خطی‌های حاشیه — جان بیشتر به کاغذ می‌دهد */ .pms-doodle{position:absolute;z-index:1;pointer-events:none;color:var(--pencil);opacity:.16} .pms-doodle--a{inset-block-start:9%;inset-inline-end:2%;width:clamp(70px,9vw,120px);rotate:-8deg} .pms-doodle--b{inset-block-end:12%;inset-inline-start:2%;width:clamp(60px,7vw,96px);rotate:11deg} /* ───────────────────────────────────────────────────────────────── ۱. سرتیتر ───────────────────────────────────────────────────────────────── */ .pms-head{max-width:72ch;margin-bottom:clamp(30px,4vw,50px)} .pms-eyebrow{display:inline-flex;align-items:center;gap:9px;padding:6px 13px;border-radius:99px; font-size:.74rem;font-weight:800;color:#8A5A08;background:rgba(245,158,11,.14); border:1px solid rgba(180,83,9,.24);margin:0 0 16px} .pms-h2{font-family:var(--display);font-size:clamp(1.6rem,3.8vw,2.7rem);font-weight:900; line-height:1.34;letter-spacing:-.018em;margin:0 0 16px;color:var(--ink)} .pms-h2 em{font-style:normal;position:relative;color:#B45309;display:inline-block} /* خط دست‌کشیده زیر کلمه‌ی کلیدی */ .pms-h2 em svg{position:absolute;inset-inline:-4px;inset-block-end:-9px;width:calc(100% + 8px); height:12px;overflow:visible} .pms-h2 em path{fill:none;stroke:#F59E0B;stroke-width:3.4;stroke-linecap:round; stroke-dasharray:260;stroke-dashoffset:260;transition:stroke-dashoffset 1s cubic-bezier(.22,1,.36,1)} .pms.drawn .pms-h2 em path{stroke-dashoffset:0} .pms-lead{font-size:clamp(.94rem,1.5vw,1.05rem);line-height:2.1;color:var(--tx-2);margin:0} .pms-lead strong{color:var(--ink);font-weight:800} /* ───────────────────────────────────────────────────────────────── ۲. کارت‌ها ───────────────────────────────────────────────────────────────── */ .pms-duo{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,2.6vw,34px); padding-block-start:22px} .pms-card{position:relative;display:flex;flex-direction:column;background:var(--card); border:1px solid var(--line);border-radius:6px 6px 16px 16px; box-shadow:0 1px 2px rgba(43,36,24,.06),0 14px 28px -14px rgba(43,36,24,.26); transition:transform .32s cubic-bezier(.22,1,.36,1),box-shadow .32s ease,rotate .32s ease} .pms-card:nth-child(1){rotate:-.5deg} .pms-card:nth-child(2){rotate:.6deg} .pms-card:hover{rotate:0deg;transform:translateY(-6px); box-shadow:0 2px 4px rgba(43,36,24,.07),0 28px 50px -18px rgba(43,36,24,.32)} /* بافت کاغذ کارت */ .pms-card::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.5; border-radius:inherit; background-image:radial-gradient(circle at 1px 1px,rgba(43,36,24,.055) 1px,transparent 0); background-size:15px 15px} /* چسب واشی بالای کارت */ .pms-tape{position:absolute;z-index:4;inset-block-start:-9px;inset-inline-start:50%; translate:-50% 0;width:clamp(86px,26%,124px);height:26px;rotate:-1.6deg; background:var(--tape);border-inline:2px dashed rgba(255,255,255,.5); box-shadow:0 2px 6px rgba(43,36,24,.14);transition:rotate .32s ease} .pms-card:hover .pms-tape{rotate:1.4deg} /* گیره‌ی کاغذ */ .pms-clip{position:absolute;z-index:5;inset-block-start:-15px;inset-inline-end:24px; width:24px;height:50px;border-radius:12px; border:3px solid var(--clipc);border-block-end-color:transparent; box-shadow:0 3px 6px rgba(43,36,24,.22)} .pms-clip::after{content:"";position:absolute;inset-block-start:8px;inset-inline-start:3.5px; width:11px;height:31px;border-radius:7px; border:3px solid var(--clipc);border-block-end-color:transparent;opacity:.55} /* نشان گوشه */ .pms-tag{position:absolute;z-index:5;inset-block-start:16px;inset-inline-start:16px; padding:5px 12px;border-radius:99px;font-size:.7rem;font-weight:800;color:#fff; background:linear-gradient(135deg,var(--h2),var(--h1)); box-shadow:0 8px 18px -8px var(--h1)} /* ── پرتره ── */ .pms-photo{position:relative;z-index:1;margin:30px auto 16px; width:clamp(106px,15vw,134px);aspect-ratio:1;border-radius:50%;overflow:hidden; background:var(--tint); box-shadow:0 0 0 3px var(--card),0 0 0 4.5px var(--h2),0 12px 26px -12px var(--h1)} /* حرف اول نام — پشت تصویر، و بعد از بارگذاری محو می‌شود */ .pms-photo b{position:absolute;inset:0;z-index:0;display:grid;place-items:center; font-family:var(--display);font-size:2.5rem;font-weight:900;color:var(--h1);opacity:.32; transition:opacity .4s ease;pointer-events:none} .pms-photo.ok b{opacity:0} /* 🔧 اصلاح باگ: تصویر موقعیت‌دهی‌شده و همیشه بالای حرف */ .pms-photo img{position:relative;z-index:1;width:100%;height:100%;object-fit:cover; object-position:center 16%;opacity:0; transition:opacity .5s ease,transform .6s cubic-bezier(.22,1,.36,1)} .pms-photo img.on{opacity:1} .pms-card:hover .pms-photo img.on{transform:scale(1.06)} /* ── بدنه ── */ .pms-body{position:relative;z-index:1;display:flex;flex-direction:column;flex:1;text-align:center; padding:0 clamp(18px,2.4vw,26px) clamp(20px,2.6vw,26px)} .pms-h3{font-family:var(--display);font-size:clamp(1.24rem,2.2vw,1.5rem);font-weight:900; margin:0 0 6px;color:var(--ink);line-height:1.4} .pms-h3 a{color:inherit;text-decoration:none} .pms-h3 a::after{content:"";position:absolute;inset:0;z-index:6} .pms-card:hover .pms-h3 a{color:var(--h1)} .pms-role{margin:0 0 16px;font-size:.82rem;font-weight:700;color:var(--h1)} .pms-story{margin:0 0 16px;padding:13px 15px;border-radius:10px;text-align:start; font-size:.81rem;line-height:1.95;color:var(--tx-2); background:var(--tint);border:1px dashed var(--line-2)} .pms-use{margin:0 0 18px;font-size:.85rem;line-height:2;color:var(--tx-2);text-align:start;flex:1} .pms-specs{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line); border:1px solid var(--line);border-radius:11px;overflow:hidden;margin-bottom:18px} .pms-specs div{background:var(--paper-2);padding:11px 6px} .pms-specs b{display:block;font-family:var(--mono);direction:ltr;font-size:.84rem;font-weight:700; color:var(--ink);line-height:1.4} .pms-specs small{display:block;font-size:.65rem;color:var(--tx-3);margin-top:3px} /* ── قیمت + دست‌نوشته (داخل کارت، کاملاً ریسپانسیو) ── */ .pms-price{display:flex;align-items:flex-end;justify-content:space-between;gap:12px; text-align:start;padding-block-start:16px;margin-bottom:16px; border-block-start:1px dashed var(--line-2)} .pms-price-l{min-width:0} .pms-price-l>small{display:block;font-size:.73rem;color:var(--tx-3);margin-bottom:2px} .pms-price-l b{display:block;font-family:var(--display);font-size:clamp(1.34rem,2.5vw,1.66rem); font-weight:900;color:var(--ink);line-height:1.3} .pms-price-l b i{font-style:normal;font-size:.48em;font-weight:700;color:var(--tx-2)} .pms-price-l em{display:block;font-style:normal;font-size:.73rem;color:var(--tx-3);margin-top:5px} .pms-price-l em span{font-family:var(--mono);direction:ltr} /* 🔧 اصلاح باگ: دست‌نوشته حالا در جریان چیدمان است، نه بیرون کارت */ .pms-note{flex:none;display:flex;align-items:center;gap:5px;font-size:.76rem;font-weight:700; color:var(--pencil);white-space:nowrap;rotate:-4deg;padding-block-end:4px; transition:rotate .3s ease,color .3s ease} .pms-card:hover .pms-note{rotate:1deg;color:var(--h1)} .pms-note svg{flex:none;color:currentColor} .pms-go{position:relative;z-index:6;display:flex;align-items:center;justify-content:center;gap:9px; font-weight:800;font-size:.92rem;padding:14px 22px;border-radius:12px;text-decoration:none; color:#fff;background:linear-gradient(135deg,var(--h2),var(--h1)); box-shadow:0 10px 22px -12px var(--h1);transition:transform .14s,box-shadow .22s} .pms-go:active{transform:translateY(1px)} .pms-card:hover .pms-go{box-shadow:0 16px 30px -12px var(--h1)} /* ───────────────────────────────────────────────────────────────── ۳. کاربردها ───────────────────────────────────────────────────────────────── */ .pms-uses{margin-top:clamp(32px,4vw,54px)} .pms-uses-h{display:flex;align-items:center;gap:11px;font-family:var(--display); font-size:clamp(1.1rem,2vw,1.34rem);font-weight:900;color:var(--ink);margin:0 0 18px} .pms-uses-h::after{content:"";flex:1;height:1px;background:var(--line-2)} .pms-uses-g{display:grid;grid-template-columns:repeat(4,1fr);gap:14px} .pms-use-card{position:relative;background:var(--card);border:1px solid var(--line); border-radius:14px;padding:20px;transition:.22s} .pms-use-card:hover{border-color:var(--line-2);transform:translateY(-4px); box-shadow:0 16px 28px -16px rgba(43,36,24,.34)} .pms-use-ic{width:38px;height:38px;border-radius:11px;display:grid;place-items:center; margin-bottom:13px;color:#8A5A08;background:rgba(245,158,11,.15); transition:transform .3s cubic-bezier(.22,1.5,.5,1)} .pms-use-card:hover .pms-use-ic{transform:scale(1.1) rotate(-6deg)} .pms-use-card b{display:block;font-size:.9rem;font-weight:800;color:var(--ink);margin-bottom:6px; line-height:1.5} .pms-use-card p{margin:0;font-size:.81rem;line-height:1.9;color:var(--tx-2)} /* ───────────────────────────────────────────────────────────────── ۴. سوالات + مهر تأیید ───────────────────────────────────────────────────────────────── */ .pms-qa{position:relative;margin-top:clamp(26px,3.4vw,42px); display:grid;grid-template-columns:repeat(3,1fr);gap:14px} .pms-q{background:var(--paper-2);border:1px solid var(--line);border-radius:14px;padding:18px 20px} .pms-q b{display:flex;gap:8px;font-size:.87rem;font-weight:800;color:var(--ink);margin-bottom:8px; line-height:1.6} .pms-q b span{color:#B45309;font-family:var(--mono);flex:none} .pms-q p{margin:0;font-size:.82rem;line-height:1.95;color:var(--tx-2)} .pms-stamp{display:inline-flex;align-items:center;gap:8px;margin-top:clamp(20px,3vw,30px); padding:9px 18px;border-radius:8px;rotate:-2.5deg; font-family:var(--mono);direction:ltr;font-size:.74rem;font-weight:700;letter-spacing:.1em; color:rgba(180,83,9,.62);border:2px solid rgba(180,83,9,.34); box-shadow:inset 0 0 0 1px rgba(180,83,9,.16);user-select:none} .pms-stamp svg{flex:none} /* ───────────────────────────────────────────────────────────────── ۵. واکنش‌گرایی ───────────────────────────────────────────────────────────────── */ @media (max-width:940px){ .pms-uses-g{grid-template-columns:repeat(2,1fr)} .pms-qa{grid-template-columns:1fr} } @media (max-width:760px){ .pms-duo{grid-template-columns:1fr;max-width:460px;margin-inline:auto} .pms-card{rotate:0deg !important} .pms-margin,.pms-doodle{display:none} } @media (max-width:480px){ .pms-uses-g{grid-template-columns:1fr} .pms-clip{inset-inline-end:16px} /* در عرض خیلی کم، دست‌نوشته زیر قیمت می‌رود */ .pms-price{flex-direction:column;align-items:flex-start;gap:8px} .pms-note{rotate:0deg;padding-block-end:0} } /* ───────────────────────────────────────────────────────────────── ۶. کاهش حرکت ───────────────────────────────────────────────────────────────── */ @media (prefers-reduced-motion:reduce){ .pms *,.pms *::before,.pms *::after{ animation:none !important;transition-duration:.001ms !important} .pms-card{rotate:0deg !important} .pms-h2 em path{stroke-dashoffset:0} } /* ═══ ۱۰ · هاست دانلود ══════════════════════════════════════════ */ /* ───────────────────────────────────────────────────────────────── ۰. پایه — تیره، برای تضاد با سکشن روشن قبلی ───────────────────────────────────────────────────────────────── */ .pmd{ --bg:#060A12; --bg-2:#0B1220; --tx:#EDF2FA; --tx-2:#9AA9C6; --tx-3:#6B7A96; --line:rgba(255,255,255,.10); --line-2:rgba(255,255,255,.20); position:relative;overflow:hidden;isolation:isolate;background:var(--bg);color:var(--tx); padding-block:clamp(56px,8vw,104px); } .pmd-wrap{width:min(1180px,100% - 2*var(--pad));margin-inline:auto;position:relative;z-index:3} .pmd :is(a,button):focus-visible{outline:2px solid #22D3EE;outline-offset:3px;border-radius:8px} .pmd::before,.pmd::after{content:"";position:absolute;z-index:0;pointer-events:none; border-radius:50%;filter:blur(94px)} .pmd::before{inset-block-start:-18%;inset-inline-end:-10%;width:50vw;max-width:680px;aspect-ratio:1; background:radial-gradient(circle,rgba(34,211,238,.22),transparent 66%)} .pmd::after{inset-block-end:-20%;inset-inline-start:-10%;width:44vw;max-width:580px;aspect-ratio:1; background:radial-gradient(circle,rgba(251,113,133,.18),transparent 68%)} /* ───────────────────────────────────────────────────────────────── ۱. سرتیتر ───────────────────────────────────────────────────────────────── */ .pmd-head{max-width:72ch;margin-bottom:clamp(30px,4vw,50px)} .pmd-eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:.75rem;font-weight:700; color:var(--tx-2);margin:0 0 14px} .pmd-eyebrow::before{content:"";width:26px;height:1px; background:linear-gradient(90deg,transparent,#22D3EE)} .pmd-eyebrow .pmd-num{color:#22D3EE;font-weight:700} .pmd-h2{font-family:var(--display);font-size:clamp(1.6rem,3.8vw,2.7rem);font-weight:900; line-height:1.32;letter-spacing:-.018em;margin:0 0 14px;color:#fff} .pmd-h2 em{font-style:normal;color:#67E8F9} .pmd-lead{font-size:clamp(.94rem,1.5vw,1.05rem);line-height:2.05;color:var(--tx-2);margin:0} .pmd-lead strong{color:#fff;font-weight:700} /* ───────────────────────────────────────────────────────────────── ۲. کارت‌ها ───────────────────────────────────────────────────────────────── */ .pmd-duo{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2.2vw,26px)} .pmd-card{position:relative;display:flex;flex-direction:column;overflow:hidden;border-radius:24px; background:linear-gradient(165deg,var(--cink) 0%,#080D18 78%); box-shadow:inset 0 1px 0 rgba(255,255,255,.10), 0 2px 4px rgba(0,0,0,.4),0 30px 60px -34px rgba(0,0,0,.9); transition:transform .32s cubic-bezier(.22,1,.36,1),box-shadow .32s ease} .pmd-card:hover{transform:translateY(-6px); box-shadow:inset 0 1px 0 rgba(255,255,255,.14), 0 4px 8px rgba(0,0,0,.4),0 52px 88px -40px var(--c2)} /* ── ۲-الف · نوار جریان داده ── */ .pmd-flow{position:relative;height:clamp(104px,13vw,132px); border-block-end:1px solid var(--line); background:radial-gradient(120% 90% at 50% 120%,var(--cs),transparent 70%)} .pmd-flow>svg,.pmd-flow-grid{clip-path:inset(0 0 0 0 round 24px 24px 0 0)} .pmd-flow>svg{position:absolute;inset:0;width:100%;height:100%;z-index:1} .pmd-flow-grid{position:absolute;inset:0;opacity:.5; background-image:linear-gradient(var(--line) 1px,transparent 1px), linear-gradient(90deg,var(--line) 1px,transparent 1px); background-size:26px 26px; -webkit-mask-image:radial-gradient(70% 80% at 50% 50%,#000,transparent 78%); mask-image:radial-gradient(70% 80% at 50% 50%,#000,transparent 78%)} .pmd-pkt{animation:pmdRun 3.2s linear infinite} @keyframes pmdRun{0%{offset-distance:0%;opacity:0} 10%{opacity:1}88%{opacity:1}100%{offset-distance:100%;opacity:0}} /* آواتار اطلس — اختیاری */ .pmd-ava{position:absolute;z-index:3;inset-block-end:-22px;inset-inline-end:20px; width:clamp(64px,9vw,82px);aspect-ratio:1;border-radius:50%;overflow:hidden; background:var(--cink);opacity:0;transition:opacity .5s ease,transform .5s ease; box-shadow:0 0 0 3px var(--cink),0 0 0 4.5px var(--c2),0 14px 30px -12px var(--c)} .pmd-ava.on{opacity:1} .pmd-card:hover .pmd-ava.on{transform:translateY(-3px)} .pmd-ava img{width:100%;height:100%;object-fit:cover;object-position:center 14%} /* ردیف نشان‌ها — هرگز روی هم نمی‌افتند و در عرض کم می‌شکنند */ .pmd-badges{position:absolute;z-index:3;inset-block-start:13px;inset-inline:13px; display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap-reverse} .pmd-tag{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:99px; font-size:.69rem;font-weight:800;color:#fff;white-space:nowrap; background:linear-gradient(135deg,var(--c2),var(--c)); box-shadow:0 8px 18px -8px var(--c)} .pmd-port{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:99px; background:rgba(255,255,255,.10);border:1px solid var(--line-2);white-space:nowrap; backdrop-filter:blur(8px);box-shadow:0 6px 16px -8px rgba(0,0,0,.8)} .pmd-port>svg{position:static;flex:none;width:13px;height:13px;color:var(--c2)} .pmd-port b{font-family:var(--mono);direction:ltr;unicode-bidi:isolate; font-size:.76rem;font-weight:700;color:#fff;line-height:1} /* ── ۲-ب · بدنه ── */ .pmd-body{display:flex;flex-direction:column;flex:1; padding:34px clamp(18px,2.2vw,26px) 24px} .pmd-h3{font-family:var(--display);font-size:clamp(1.2rem,2.1vw,1.46rem);font-weight:900; line-height:1.45;margin:0 0 7px;color:#fff} .pmd-h3 a{color:inherit;text-decoration:none} .pmd-h3 a::after{content:"";position:absolute;inset:0;z-index:6} .pmd-card:hover .pmd-h3 a{color:var(--c2)} .pmd-kick{margin:0 0 14px;font-size:.84rem;font-weight:700;color:var(--c2)} .pmd-text{margin:0 0 18px;font-size:.86rem;line-height:2;color:var(--tx-2)} /* ── ۲-پ · مشخصات، با پورت در صدر ── */ .pmd-specs{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line); border:1px solid var(--line);border-radius:14px;overflow:hidden;margin-bottom:18px} .pmd-specs div{background:rgba(255,255,255,.035);padding:13px 8px;text-align:center} .pmd-specs div:first-child{background:var(--cs)} .pmd-specs b{display:block;font-family:var(--mono);direction:ltr;font-size:.9rem;font-weight:700; color:#fff;line-height:1.4} .pmd-specs div:first-child b{color:var(--c2)} .pmd-specs small{display:block;font-size:.65rem;color:var(--tx-3);margin-top:4px} /* ── ۲-ت · مقیاس حجم ── */ .pmd-scale{margin-bottom:18px} .pmd-scale-t{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:9px; font-size:.76rem;color:var(--tx-3)} .pmd-scale-t b{font-family:var(--mono);direction:ltr;font-size:.82rem;font-weight:700;color:#fff} .pmd-rail{position:relative;height:8px;border-radius:99px;background:rgba(255,255,255,.07); overflow:hidden} .pmd-rail i{position:absolute;inset-block:0;inset-inline-start:0;border-radius:99px;display:block; background:linear-gradient(90deg,var(--c2),var(--c));opacity:.9} .pmd-ticks{display:flex;justify-content:space-between;margin-top:8px; font-family:var(--mono);direction:ltr;font-size:.66rem;color:var(--tx-3)} /* ── ۲-ث · مناسب / نامناسب ── */ .pmd-fit{list-style:none;margin:0 0 18px;padding:0;flex:1} .pmd-fit li{display:flex;gap:9px;padding:9px 0;font-size:.83rem;line-height:1.85; border-block-start:1px solid var(--line);color:var(--tx-2)} .pmd-fit li:first-child{border-block-start:0} .pmd-fit svg{flex:none;margin-top:4px} .pmd-fit li.y svg{color:var(--c2)} .pmd-fit li.n{color:var(--tx-3)} .pmd-fit li.n svg{color:var(--tx-3)} /* ── ۲-ج · قیمت و اقدام ── */ .pmd-price{padding-block-start:16px;border-block-start:1px solid var(--line);margin-bottom:16px} .pmd-price>small{display:block;font-size:.74rem;color:var(--tx-3);margin-bottom:2px} .pmd-price b{display:block;font-family:var(--display);font-size:clamp(1.4rem,2.6vw,1.76rem); font-weight:900;line-height:1.28;color:#fff} .pmd-price b i{font-style:normal;font-size:.48em;font-weight:700;color:var(--tx-2)} .pmd-price em{display:block;font-style:normal;font-size:.74rem;color:var(--tx-3);margin-top:5px} .pmd-price em span{font-family:var(--mono);direction:ltr} .pmd-go{position:relative;z-index:6;display:flex;align-items:center;justify-content:center;gap:9px; font-weight:800;font-size:.93rem;padding:15px 22px;border-radius:13px;text-decoration:none; color:#fff;background:linear-gradient(135deg,var(--c2),var(--c)); box-shadow:0 12px 26px -12px var(--c),inset 0 1px 0 rgba(255,255,255,.22); transition:transform .14s,box-shadow .22s} .pmd-go:active{transform:translateY(1px)} .pmd-card:hover .pmd-go{box-shadow:0 18px 34px -12px var(--c),inset 0 1px 0 rgba(255,255,255,.3)} /* ───────────────────────────────────────────────────────────────── ۳. نوار تصمیم ───────────────────────────────────────────────────────────────── */ .pmd-decide{margin-top:clamp(24px,3.4vw,40px);padding:20px var(--pad);border-radius:18px; background:linear-gradient(90deg,rgba(34,211,238,.10),transparent 55%,rgba(251,113,133,.09)); border:1px solid var(--line); display:flex;align-items:center;gap:16px;flex-wrap:wrap} .pmd-decide svg{flex:none;color:#67E8F9} .pmd-decide p{margin:0;font-size:.86rem;line-height:2;color:var(--tx-2);flex:1;min-width:240px} .pmd-decide strong{color:#fff;font-weight:700} .pmd-decide a{color:#67E8F9;font-weight:700;text-decoration:underline;text-underline-offset:3px} /* ───────────────────────────────────────────────────────────────── ۴. واکنش‌گرایی ───────────────────────────────────────────────────────────────── */ @media (max-width:860px){ .pmd-duo{grid-template-columns:1fr;max-width:520px;margin-inline:auto} } @media (max-width:480px){ .pmd-specs{grid-template-columns:1fr 1fr} .pmd-specs div:first-child{grid-column:1 / -1} .pmd-badges{justify-content:flex-start} .pmd-ava{inset-inline-end:14px;width:60px} } /* ───────────────────────────────────────────────────────────────── ۵. کاهش حرکت ───────────────────────────────────────────────────────────────── */ @media (prefers-reduced-motion:reduce){ .pmd *,.pmd *::before,.pmd *::after{ animation:none !important;transition-duration:.001ms !important} .pmd-pkt{display:none} } /* ═══ ۱۱ · هاست وردپرس ══════════════════════════════════════════ */ /* ───────────────────────────────────────────────────────────────── ۰. پایه — روشن با لهجه‌ی لاجوردی ───────────────────────────────────────────────────────────────── */ .pmj{ --paper:#FFFFFF; --paper-2:#F4F6FC; --paper-3:#E9EDF8; --line:#DCE2F0; --line-2:#C3CCE4; --lapis:#1E3A8A; --lapis-2:#3B5BDB; --lapis-3:#7C9BFF; --ink:#0B1233; --tx:#101835; --tx-2:#55618A; --tx-3:#8A93B4; --warn:#B45309; --warn-2:#F59E0B; position:relative;overflow:hidden;isolation:isolate;color:var(--tx); background:linear-gradient(180deg,#FAFBFF 0%,#EEF2FB 100%); padding-block:clamp(56px,8vw,104px); } .pmj-wrap{width:min(1180px,100% - 2*var(--pad));margin-inline:auto;position:relative;z-index:3} .pmj :is(a,button):focus-visible{outline:2px solid var(--lapis-2);outline-offset:3px;border-radius:8px} .pmj::before{content:"";position:absolute;z-index:0;pointer-events:none; inset-block-start:-16%;inset-inline-end:-10%;width:52vw;max-width:700px;aspect-ratio:1; border-radius:50%;filter:blur(92px); background:radial-gradient(circle,rgba(124,155,255,.26),transparent 66%)} /* ───────────────────────────────────────────────────────────────── ۱. سرتیتر با شخصیت ───────────────────────────────────────────────────────────────── */ .pmj-top{display:grid;grid-template-columns:1fr auto;gap:clamp(20px,4vw,48px); align-items:center;margin-bottom:clamp(26px,3.6vw,42px)} .pmj-eyebrow{display:inline-flex;align-items:center;gap:9px;padding:6px 13px;border-radius:99px; font-size:.74rem;font-weight:800;color:var(--lapis);background:rgba(124,155,255,.16); border:1px solid rgba(30,58,138,.16);margin:0 0 16px} .pmj-h2{font-family:var(--display);font-size:clamp(1.6rem,3.8vw,2.7rem);font-weight:900; line-height:1.32;letter-spacing:-.018em;margin:0 0 14px;color:var(--ink);position:relative;z-index:0} .pmj-h2 em{font-style:normal;color:var(--lapis-2);position:relative} .pmj-h2 em::after{content:"";position:absolute;inset-inline:-3px;inset-block-end:.04em;height:.34em; z-index:-1;border-radius:3px;background:linear-gradient(90deg,rgba(124,155,255,.34),transparent)} .pmj-lead{font-size:clamp(.94rem,1.5vw,1.05rem);line-height:2.05;color:var(--tx-2);margin:0; max-width:62ch} .pmj-lead strong{color:var(--ink);font-weight:800} .pmj-hero{position:relative;width:clamp(128px,17vw,180px);aspect-ratio:1;border-radius:28px; overflow:hidden;background:linear-gradient(160deg,#E3E8FA,#F2F5FD); box-shadow:0 0 0 1px var(--line),0 22px 44px -22px rgba(30,58,138,.6)} .pmj-hero img{width:100%;height:100%;object-fit:cover;object-position:center 12%; opacity:0;transition:opacity .5s ease} .pmj-hero img.on{opacity:1} .pmj-hero::before{content:"";position:absolute;inset-block-start:-30%;inset-inline-start:-20%; width:80%;aspect-ratio:1;border-radius:50%;pointer-events:none; background:radial-gradient(circle,rgba(255,255,255,.85),transparent 66%)} /* ───────────────────────────────────────────────────────────────── ۲. حقیقت بازار ───────────────────────────────────────────────────────────────── */ .pmj-truth{position:relative;border-radius:20px;overflow:hidden;padding:clamp(22px,3vw,32px); margin-bottom:clamp(28px,3.6vw,46px); background:linear-gradient(150deg,var(--ink) 0%,#141C46 60%,#0B1233 100%); box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 26px 54px -30px rgba(11,18,51,.9)} .pmj-truth::before{content:"";position:absolute;inset-block-start:-40%;inset-inline-end:-8%; width:44%;aspect-ratio:1;border-radius:50%;pointer-events:none; background:radial-gradient(circle,rgba(124,155,255,.24),transparent 68%)} .pmj-truth-l{position:relative;display:inline-flex;align-items:center;gap:8px; font-family:var(--mono);direction:ltr;font-size:.66rem;letter-spacing:.12em; color:var(--lapis-3);margin-bottom:14px} .pmj-truth q{position:relative;display:block;quotes:none; font-family:var(--display);font-size:clamp(1.06rem,2.2vw,1.44rem);font-weight:900; line-height:1.75;color:#fff;max-width:62ch} .pmj-truth q b{color:var(--lapis-3);font-weight:inherit} .pmj-truth p{position:relative;margin:14px 0 0;font-size:.87rem;line-height:2; color:#AEB9DE;max-width:66ch} /* ───────────────────────────────────────────────────────────────── ۳. جدول مقایسه ───────────────────────────────────────────────────────────────── */ .pmj-cmp{border-radius:20px;overflow:hidden;background:var(--paper);border:1px solid var(--line); box-shadow:0 2px 6px rgba(16,24,53,.05),0 26px 52px -34px rgba(16,24,53,.32); margin-bottom:clamp(28px,3.6vw,46px)} .pmj-cmp-h{padding:16px var(--pad);border-block-end:1px solid var(--line); background:var(--paper-2);font-size:.88rem;font-weight:800;color:var(--ink)} .pmj-tbl{width:100%;border-collapse:collapse;font-size:.86rem} .pmj-tbl th,.pmj-tbl td{padding:14px 16px;text-align:start;vertical-align:middle} .pmj-tbl thead th{font-size:.75rem;font-weight:700;color:var(--tx-3); border-block-end:1px solid var(--line);white-space:nowrap} .pmj-tbl thead th.us{color:#fff;background:linear-gradient(150deg,var(--lapis-2),var(--lapis)); font-size:.86rem;font-weight:900} .pmj-tbl tbody th{font-weight:800;color:var(--ink);white-space:nowrap; border-block-start:1px solid var(--line)} .pmj-tbl tbody td{color:var(--tx-3);border-block-start:1px solid var(--line)} .pmj-tbl tbody td.us{color:var(--ink);font-weight:800;background:rgba(124,155,255,.10); border-inline:1px solid rgba(124,155,255,.28)} .pmj-tbl tbody tr:last-child td.us{border-block-end:1px solid rgba(124,155,255,.28)} .pmj-tbl tbody tr:hover>*{background:rgba(124,155,255,.05)} .pmj-tbl tbody tr:hover td.us{background:rgba(124,155,255,.16)} .pmj-chk{display:inline-flex;align-items:center;gap:7px} .pmj-chk svg{flex:none;color:var(--lapis-2)} .pmj-note{margin:0;padding:14px var(--pad);border-block-start:1px solid var(--line); background:var(--paper-2);font-size:.77rem;line-height:1.9;color:var(--tx-3)} /* ───────────────────────────────────────────────────────────────── ۴. سناریوی روز بد ───────────────────────────────────────────────────────────────── */ .pmj-day{margin-bottom:clamp(28px,3.6vw,46px)} .pmj-day-h{font-family:var(--display);font-size:clamp(1.14rem,2.1vw,1.4rem);font-weight:900; color:var(--ink);margin:0 0 6px} .pmj-day-s{margin:0 0 20px;font-size:.87rem;line-height:1.95;color:var(--tx-2);max-width:66ch} .pmj-paths{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,2vw,22px)} .pmj-path{border-radius:18px;padding:22px;border:1px solid var(--line);background:var(--paper)} .pmj-path--bad{background:linear-gradient(180deg,#FFF8F0,var(--paper)); border-color:rgba(180,83,9,.24)} .pmj-path--good{background:linear-gradient(180deg,#F3F6FF,var(--paper)); border-color:rgba(30,58,138,.24); box-shadow:0 0 0 2px rgba(124,155,255,.22),0 22px 40px -24px rgba(30,58,138,.5)} .pmj-path-t{display:flex;align-items:center;gap:9px;font-size:.87rem;font-weight:800; margin-bottom:16px} .pmj-path--bad .pmj-path-t{color:var(--warn)} .pmj-path--good .pmj-path-t{color:var(--lapis)} .pmj-path-t svg{flex:none} .pmj-steps{list-style:none;margin:0;padding:0;position:relative} .pmj-steps::before{content:"";position:absolute;inset-block:14px 14px;inset-inline-start:34px; width:2px;background:var(--line-2)} .pmj-path--good .pmj-steps::before{background:rgba(124,155,255,.5)} .pmj-steps li{position:relative;display:grid;grid-template-columns:70px 1fr;gap:12px; align-items:baseline;padding:9px 0} .pmj-steps time{font-family:var(--mono);direction:ltr;font-size:.79rem;font-weight:700; color:var(--tx-3);position:relative} .pmj-steps time::after{content:"";position:absolute;inset-block-start:6px;inset-inline-start:-11px; width:9px;height:9px;border-radius:50%;background:var(--line-2); box-shadow:0 0 0 3px var(--paper)} .pmj-path--good .pmj-steps time{color:var(--lapis)} .pmj-path--good .pmj-steps time::after{background:var(--lapis-2)} .pmj-path--bad .pmj-steps li:last-child time::after{background:var(--warn-2)} .pmj-steps p{margin:0;font-size:.84rem;line-height:1.9;color:var(--tx-2)} .pmj-path--bad .pmj-steps li:last-child p{color:var(--warn);font-weight:700} .pmj-path--good .pmj-steps li:last-child p{color:var(--lapis);font-weight:700} /* ───────────────────────────────────────────────────────────────── ۵. قابلیت‌ها ───────────────────────────────────────────────────────────────── */ .pmj-caps{display:grid;grid-template-columns:repeat(3,1fr);gap:14px; margin-bottom:clamp(28px,3.6vw,44px)} .pmj-cap{background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:22px; transition:.22s} .pmj-cap:hover{border-color:var(--lapis-3);transform:translateY(-4px); box-shadow:0 18px 34px -20px rgba(30,58,138,.55)} .pmj-cap-ic{width:40px;height:40px;border-radius:12px;display:grid;place-items:center; margin-bottom:14px;color:#fff; background:linear-gradient(140deg,var(--lapis-3),var(--lapis-2)); box-shadow:0 8px 18px -10px var(--lapis-2); transition:transform .3s cubic-bezier(.22,1.5,.5,1)} .pmj-cap:hover .pmj-cap-ic{transform:scale(1.1) rotate(-6deg)} .pmj-cap b{display:block;font-size:.94rem;font-weight:800;color:var(--ink);margin-bottom:8px; line-height:1.55} .pmj-cap p{margin:0;font-size:.83rem;line-height:1.95;color:var(--tx-2)} /* ───────────────────────────────────────────────────────────────── ۶. حذف ریسک + اقدام ───────────────────────────────────────────────────────────────── */ .pmj-close{border-radius:20px;overflow:hidden; background:linear-gradient(150deg,var(--ink),#182052 62%,#0B1233); box-shadow:0 30px 60px -34px rgba(11,18,51,.95)} .pmj-risk{display:grid;grid-template-columns:repeat(3,1fr); border-block-end:1px solid rgba(255,255,255,.12)} .pmj-risk div{padding:20px var(--pad);border-inline-start:1px solid rgba(255,255,255,.12)} .pmj-risk div:first-child{border-inline-start:0} .pmj-risk b{display:flex;align-items:center;gap:9px;font-size:.88rem;font-weight:800;color:#fff; margin-bottom:6px} .pmj-risk b svg{flex:none;color:var(--lapis-3)} .pmj-risk p{margin:0;font-size:.81rem;line-height:1.9;color:#A9B4D8} .pmj-cta{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap; padding:24px var(--pad)} .pmj-cta-l b{display:block;font-family:var(--display);font-size:clamp(1.1rem,2.2vw,1.4rem); font-weight:900;color:#fff;line-height:1.5;margin-bottom:4px} .pmj-cta-l small{display:block;font-size:.83rem;color:#A9B4D8} .pmj-cta-l small span{font-family:var(--mono);direction:ltr;color:var(--lapis-3);font-weight:700} .pmj-go{display:inline-flex;align-items:center;gap:9px;font-weight:800;font-size:.96rem; padding:16px 28px;border-radius:13px;text-decoration:none;color:#fff; background:linear-gradient(135deg,var(--lapis-3),var(--lapis-2) 55%,var(--lapis)); box-shadow:0 14px 30px -12px rgba(59,91,219,.95),inset 0 1px 0 rgba(255,255,255,.3); transition:transform .14s,box-shadow .22s} .pmj-go:active{transform:translateY(1px)} .pmj-go:hover{box-shadow:0 20px 38px -12px rgba(59,91,219,1),inset 0 1px 0 rgba(255,255,255,.4)} /* ───────────────────────────────────────────────────────────────── ۷. واکنش‌گرایی ───────────────────────────────────────────────────────────────── */ @media (max-width:1000px){ .pmj-caps{grid-template-columns:repeat(2,1fr)} .pmj-risk{grid-template-columns:1fr} .pmj-risk div{border-inline-start:0;border-block-start:1px solid rgba(255,255,255,.12)} .pmj-risk div:first-child{border-block-start:0} } @media (max-width:820px){ .pmj-top{grid-template-columns:1fr} .pmj-hero{order:-1;width:clamp(112px,26vw,150px)} .pmj-paths{grid-template-columns:1fr} /* جدول: هر ردیف یک بلوک، بدون اسکرول افقی و بدون محتوای تکراری */ .pmj-tbl,.pmj-tbl tbody{display:block} .pmj-tbl thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)} .pmj-tbl tbody tr{display:block;padding:16px var(--pad); border-block-start:1px solid var(--line)} .pmj-tbl tbody tr:hover>*{background:transparent} .pmj-tbl tbody th{display:block;padding:0 0 10px;border:0;font-size:.92rem} .pmj-tbl tbody td{display:grid;grid-template-columns:118px 1fr;gap:10px;padding:7px 0;border:0} .pmj-tbl tbody td::before{content:attr(data-col);font-size:.74rem;color:var(--tx-3); font-weight:600} .pmj-tbl tbody td.us{border:0;border-radius:10px;padding:10px 12px;margin-top:6px; background:rgba(124,155,255,.14)} .pmj-tbl tbody td.us::before{color:var(--lapis)} } @media (max-width:560px){ .pmj-caps{grid-template-columns:1fr} .pmj-steps li{grid-template-columns:60px 1fr;gap:10px} .pmj-steps::before{inset-inline-start:29px} .pmj-go{width:100%;justify-content:center} .pmj-tbl tbody td{grid-template-columns:1fr} .pmj-tbl tbody td::before{margin-block-end:-4px} } /* ───────────────────────────────────────────────────────────────── ۸. کاهش حرکت ───────────────────────────────────────────────────────────────── */ @media (prefers-reduced-motion:reduce){ .pmj *,.pmj *::before,.pmj *::after{ animation:none !important;transition-duration:.001ms !important} } /* ═══ ۱۲ · کارنامه‌ی فنی ════════════════════════════════════════ */ /* ───────────────────────────────────────────────────────────────── ۰. پایه — سند فنی تیره ───────────────────────────────────────────────────────────────── */ .pmt{ --bg:#070B14; --panel:#0D1422; --panel-2:#111A2C; --tx:#EDF2FA; --tx-2:#9AA9C6; --tx-3:#69788F; --line:rgba(255,255,255,.09); --line-2:rgba(255,255,255,.18); --cyan:#22D3EE; --cyan-2:#67E8F9; --blue:#3B82F6; position:relative;overflow:hidden;isolation:isolate;background:var(--bg);color:var(--tx); padding-block:clamp(56px,8vw,104px); } .pmt-wrap{width:min(1180px,100% - 2*var(--pad));margin-inline:auto;position:relative;z-index:3} .pmt :is(a,button):focus-visible{outline:2px solid var(--cyan);outline-offset:3px;border-radius:8px} /* شبکه‌ی سند در پس‌زمینه */ .pmt::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.55; background-image:linear-gradient(var(--line) 1px,transparent 1px), linear-gradient(90deg,var(--line) 1px,transparent 1px); background-size:52px 52px; -webkit-mask-image:radial-gradient(90% 70% at 50% 0%,#000,transparent 76%); mask-image:radial-gradient(90% 70% at 50% 0%,#000,transparent 76%)} .pmt::after{content:"";position:absolute;z-index:0;pointer-events:none; inset-block-start:-16%;inset-inline-end:-10%;width:48vw;max-width:640px;aspect-ratio:1; border-radius:50%;filter:blur(92px); background:radial-gradient(circle,rgba(34,211,238,.20),transparent 66%)} /* ───────────────────────────────────────────────────────────────── ۱. سرتیتر ───────────────────────────────────────────────────────────────── */ .pmt-head{max-width:70ch;margin-bottom:clamp(26px,3.4vw,42px)} .pmt-eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:.75rem;font-weight:700; color:var(--tx-2);margin:0 0 14px} .pmt-eyebrow::before{content:"";width:26px;height:1px; background:linear-gradient(90deg,transparent,var(--cyan))} .pmt-h2{font-family:var(--display);font-size:clamp(1.6rem,3.8vw,2.7rem);font-weight:900; line-height:1.32;letter-spacing:-.018em;margin:0 0 14px;color:#fff} .pmt-h2 em{font-style:normal;color:var(--cyan-2)} .pmt-lead{font-size:clamp(.94rem,1.5vw,1.05rem);line-height:2.05;color:var(--tx-2);margin:0} .pmt-lead strong{color:#fff;font-weight:700} /* ───────────────────────────────────────────────────────────────── ۲. سند مشخصات ───────────────────────────────────────────────────────────────── */ .pmt-doc{border-radius:22px;overflow:hidden;background:var(--panel);border:1px solid var(--line); box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 30px 60px -36px #000; margin-bottom:clamp(24px,3vw,38px)} .pmt-bar{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap; padding:15px var(--pad);border-block-end:1px solid var(--line);background:var(--panel-2)} .pmt-bar-l{display:flex;align-items:center;gap:9px;font-size:.85rem;font-weight:800;color:#fff} .pmt-bar-l i{width:8px;height:8px;border-radius:50%;background:#22C55E;flex:none;font-style:normal; box-shadow:0 0 0 0 rgba(34,197,94,.7);animation:pmtLive 2.4s infinite} @keyframes pmtLive{70%{box-shadow:0 0 0 8px rgba(34,197,94,0)}100%{box-shadow:0 0 0 0 rgba(34,197,94,0)}} .pmt-bar-r{font-family:var(--mono);direction:ltr;font-size:.68rem;letter-spacing:.08em; color:var(--tx-3)} .pmt-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line)} .pmt-grp{background:var(--panel);padding:22px clamp(16px,2vw,24px)} .pmt-grp-h{display:flex;align-items:center;gap:10px;margin-bottom:14px; padding-block-end:12px;border-block-end:1px solid var(--line)} .pmt-grp-ic{width:32px;height:32px;border-radius:10px;flex:none;display:grid;place-items:center; color:var(--cyan);background:rgba(34,211,238,.12)} .pmt-grp-h b{font-size:.9rem;font-weight:800;color:#fff} .pmt-rows{list-style:none;margin:0;padding:0} .pmt-row{display:flex;align-items:baseline;justify-content:space-between;gap:10px; padding:9px 0;font-size:.83rem;line-height:1.7; border-block-start:1px dashed rgba(255,255,255,.07)} .pmt-row:first-child{border-block-start:0} .pmt-row>span{color:var(--tx-2);flex:none} /* خط‌چین رابط بین برچسب و مقدار — حس سند فنی */ .pmt-dot{flex:1;height:1px;min-width:12px; background-image:linear-gradient(90deg,var(--line-2) 40%,transparent 0); background-size:5px 1px;background-repeat:repeat-x;translate:0 -3px;opacity:.5} .pmt-row>b{font-family:var(--mono);direction:ltr;unicode-bidi:isolate; font-size:.79rem;font-weight:700;color:#fff;flex:none;text-align:left} .pmt-row>b.fa{font-family:var(--display);direction:rtl;font-size:.82rem} .pmt-foot{padding:15px var(--pad);border-block-start:1px solid var(--line); background:var(--panel-2);font-size:.78rem;line-height:1.95;color:var(--tx-3)} .pmt-foot b{color:var(--tx-2)} /* ───────────────────────────────────────────────────────────────── ۳. نمودار معماری ───────────────────────────────────────────────────────────────── */ .pmt-race{border-radius:22px;padding:clamp(20px,3vw,30px); background:linear-gradient(160deg,rgba(255,255,255,.05),rgba(255,255,255,.02)); border:1px solid var(--line)} .pmt-race-top{display:flex;align-items:flex-start;justify-content:space-between;gap:14px; flex-wrap:wrap;margin-bottom:20px} .pmt-race-top h3{margin:0 0 5px;font-family:var(--display);font-size:1.06rem;font-weight:900;color:#fff} .pmt-race-top p{margin:0;font-size:.83rem;color:var(--tx-2);line-height:1.85} /* برچسب منبع، روی خود نمودار — نه پنهان در پانویس */ .pmt-src{flex:none;display:inline-flex;align-items:center;gap:7px;padding:7px 13px;border-radius:99px; font-size:.71rem;font-weight:700;color:#FCD34D;background:rgba(245,158,11,.13); border:1px solid rgba(245,158,11,.32)} .pmt-src svg{flex:none} .pmt-bars{display:grid;gap:12px} .pmt-brow{display:grid;grid-template-columns:158px 1fr 66px;gap:14px;align-items:center} .pmt-blbl{font-family:var(--mono);direction:ltr;font-size:.79rem;font-weight:700;color:#C6D2EC} .pmt-blbl small{display:block;font-family:var(--display);direction:rtl;font-size:.7rem; font-weight:500;color:var(--tx-3);margin-top:3px} .pmt-btrack{height:26px;border-radius:8px;background:rgba(255,255,255,.06);overflow:hidden;display:block} .pmt-bfill{display:block;height:100%;width:0;border-radius:8px; transition:width 1.6s cubic-bezier(.22,1,.36,1)} .pmt-brow[data-w=us] .pmt-bfill{background:linear-gradient(90deg,var(--cyan),#0EA5E9)} .pmt-brow[data-w=mid] .pmt-bfill{background:rgba(255,255,255,.28)} .pmt-brow[data-w=slow] .pmt-bfill{background:rgba(255,255,255,.15)} .pmt-bval{font-family:var(--mono);direction:ltr;font-size:.86rem;font-weight:700;text-align:left} .pmt-brow[data-w=us] .pmt-bval{color:var(--cyan-2)} .pmt-brow:not([data-w=us]) .pmt-bval{color:var(--tx-3)} .pmt-race-note{margin:18px 0 0;font-size:.75rem;line-height:1.95;color:var(--tx-3);max-width:84ch} /* ───────────────────────────────────────────────────────────────── ۴. واکنش‌گرایی ───────────────────────────────────────────────────────────────── */ @media (max-width:1000px){.pmt-grid{grid-template-columns:repeat(2,1fr)}} @media (max-width:660px){ .pmt-grid{grid-template-columns:1fr} .pmt-brow{grid-template-columns:118px 1fr 54px;gap:10px} .pmt-blbl{font-size:.72rem} } @media (max-width:420px){ .pmt-row{flex-wrap:wrap} .pmt-dot{display:none} .pmt-row>b{width:100%;text-align:start;margin-top:2px} } /* ───────────────────────────────────────────────────────────────── ۵. کاهش حرکت ───────────────────────────────────────────────────────────────── */ @media (prefers-reduced-motion:reduce){ .pmt *,.pmt *::before,.pmt *::after{ animation:none !important;transition-duration:.001ms !important} } /* ═══ ۱۳ · راهنمای خرید ═════════════════════════════════════════ */ /* ───────────────────────────────────────────────────────────────── ۰. پایه ───────────────────────────────────────────────────────────────── */ .pmb{ --paper:#FFFFFF; --paper-2:#F6F8FC; --paper-3:#EDF1F8; --line:#DFE5EF; --line-2:#C7D0E2; --tx:#101828; --tx-2:#4E5A75; --tx-3:#8894AE; --blue:#1D4ED8; --blue-2:#3B82F6; --cyan:#0891B2; position:relative;overflow:hidden;isolation:isolate;color:var(--tx);background:var(--paper); padding-block:clamp(56px,8vw,104px); } .pmb-wrap{width:min(1180px,100% - 2*var(--pad));margin-inline:auto;position:relative;z-index:2} .pmb :is(a,button,input):focus-visible{outline:2px solid var(--blue-2);outline-offset:3px;border-radius:8px} .pmb::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.5; background-image:radial-gradient(circle at 1px 1px,rgba(16,24,40,.05) 1px,transparent 0); background-size:24px 24px; -webkit-mask-image:linear-gradient(to bottom,#000,transparent 40%); mask-image:linear-gradient(to bottom,#000,transparent 40%)} /* ───────────────────────────────────────────────────────────────── ۱. سرتیتر ───────────────────────────────────────────────────────────────── */ .pmb-head{max-width:72ch;margin-bottom:clamp(28px,4vw,44px)} .pmb-eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:.75rem;font-weight:700; color:var(--tx-2);margin:0 0 14px} .pmb-eyebrow::before{content:"";width:26px;height:1px; background:linear-gradient(90deg,transparent,var(--blue-2))} .pmb-h2{font-family:var(--display);font-size:clamp(1.6rem,3.8vw,2.7rem);font-weight:900; line-height:1.32;letter-spacing:-.018em;margin:0 0 14px;color:var(--tx);position:relative;z-index:0} .pmb-h2 em{font-style:normal;color:var(--blue);position:relative} .pmb-h2 em::after{content:"";position:absolute;inset-inline:-3px;inset-block-end:.04em;height:.34em; z-index:-1;border-radius:3px;background:linear-gradient(90deg,rgba(59,130,246,.20),transparent)} .pmb-lead{font-size:clamp(.94rem,1.5vw,1.05rem);line-height:2.05;color:var(--tx-2);margin:0} /* ───────────────────────────────────────────────────────────────── ۲. چیدمان + فهرست زنده ───────────────────────────────────────────────────────────────── */ .pmb-grid{display:grid;grid-template-columns:262px 1fr;gap:clamp(24px,4vw,56px);align-items:start} .pmb-toc{position:sticky;top:86px;border:1px solid var(--line);border-radius:16px; background:var(--paper);overflow:hidden; box-shadow:0 1px 2px rgba(16,24,40,.04),0 18px 34px -26px rgba(16,24,40,.3)} .pmb-toc-h{padding:15px 18px 13px;border-block-end:1px solid var(--line);background:var(--paper-2)} .pmb-toc-h b{display:block;font-size:.82rem;font-weight:800;color:var(--tx);margin-bottom:8px} .pmb-meta{display:flex;align-items:center;gap:8px;font-size:.72rem;color:var(--tx-3)} .pmb-meta svg{flex:none} /* نوار پیشرفت مطالعه */ .pmb-bar{height:3px;background:var(--paper-3);border-radius:99px;overflow:hidden;margin-top:10px} .pmb-bar i{display:block;height:100%;width:0;border-radius:99px; background:linear-gradient(90deg,var(--cyan),var(--blue));transition:width .18s linear} .pmb-toc ol{list-style:none;margin:0;padding:6px;counter-reset:toc; max-height:min(56vh,520px);overflow-y:auto;scrollbar-width:thin} .pmb-toc li{counter-increment:toc} .pmb-toc a{display:flex;gap:10px;align-items:flex-start;padding:9px 11px;border-radius:9px; font-size:.83rem;line-height:1.75;color:var(--tx-2);text-decoration:none;transition:.16s} .pmb-toc a::before{content:counter(toc);flex:none;width:20px;height:20px;border-radius:6px; display:grid;place-items:center;font-family:var(--mono);font-size:.66rem;font-weight:700; background:var(--paper-3);color:var(--tx-3);margin-top:2px;transition:.16s} .pmb-toc a:hover{background:var(--paper-2);color:var(--tx)} .pmb-toc a.on{background:rgba(59,130,246,.10);color:var(--blue);font-weight:700} .pmb-toc a.on::before{background:var(--blue);color:#fff} /* ───────────────────────────────────────────────────────────────── ۳. متن ───────────────────────────────────────────────────────────────── */ .pmb-art{max-width:74ch;font-size:.97rem;line-height:2.2;color:#28324A} .pmb-art h3{position:relative;font-family:var(--display); font-size:clamp(1.2rem,2.4vw,1.5rem);font-weight:900;line-height:1.5; margin:52px 0 8px;padding-inline-start:0;color:var(--tx);scroll-margin-top:96px} .pmb-art h3:first-of-type{margin-top:0} .pmb-art h3 span{display:block;font-family:var(--mono);direction:ltr;font-size:.68rem; font-weight:700;letter-spacing:.14em;color:var(--blue-2);margin-bottom:7px} .pmb-art h4{font-size:1.02rem;font-weight:800;margin:28px 0 10px;color:var(--tx)} .pmb-art p{margin:0 0 18px} .pmb-art a{color:var(--blue);text-decoration:underline;text-underline-offset:3px;font-weight:600} .pmb-art a:hover{color:#1740B8} .pmb-art strong{font-weight:800;color:var(--tx)} /* خلاصه‌ی یک‌خطی هر فصل */ .pmb-tldr{display:flex;gap:10px;align-items:flex-start;margin:0 0 22px;padding:12px 16px; border-radius:12px;background:linear-gradient(120deg,rgba(59,130,246,.10),rgba(8,145,178,.05)); border:1px solid rgba(59,130,246,.20);font-size:.88rem;line-height:1.95;color:#1B2842} .pmb-tldr svg{flex:none;margin-top:5px;color:var(--blue)} .pmb-tldr b{font-weight:800;color:var(--blue)} .pmb-art ul,.pmb-art ol{margin:0 0 20px;padding-inline-start:0;list-style:none} .pmb-art ul li{position:relative;padding-inline-start:24px;margin-bottom:11px} .pmb-art ul li::before{content:"";position:absolute;inset-inline-start:6px;inset-block-start:15px; width:6px;height:6px;border-radius:50%;background:var(--blue-2)} .pmb-art ol{counter-reset:ax} .pmb-art ol li{counter-increment:ax;position:relative;padding-inline-start:34px;margin-bottom:12px} .pmb-art ol li::before{content:counter(ax);position:absolute;inset-inline-start:0;inset-block-start:6px; width:22px;height:22px;border-radius:7px;display:grid;place-items:center; background:var(--paper-3);color:var(--tx-2);font-family:var(--mono);font-size:.7rem;font-weight:700} .pmb-quote{border-inline-start:3px solid var(--blue);background:var(--paper-2);padding:18px 22px; border-radius:0 12px 12px 0;margin:0 0 24px;font-size:.93rem} .pmb-quote p:last-child{margin-bottom:0} .pmb-tbl{width:100%;border-collapse:collapse;margin:0 0 24px;font-size:.88rem; border:1px solid var(--line);border-radius:12px;overflow:hidden} .pmb-tbl th{background:var(--paper-2);padding:12px 14px;text-align:start;font-size:.78rem; font-weight:700;color:var(--tx-2);border-block-end:1px solid var(--line)} .pmb-tbl td{padding:12px 14px;border-block-start:1px solid var(--line);color:var(--tx-2)} .pmb-tbl td:first-child{font-weight:700;color:var(--tx)} .pmb-fig{margin:0 0 26px;border:1px solid var(--line);border-radius:14px;background:var(--paper-2); padding:20px;overflow:hidden} .pmb-fig svg{width:100%;height:auto;display:block} .pmb-fig figcaption{margin-top:14px;font-size:.8rem;line-height:1.9;color:var(--tx-2); padding-top:12px;border-top:1px solid var(--line)} /* ───────────────────────────────────────────────────────────────── ۴. نوار مراحل خرید ───────────────────────────────────────────────────────────────── */ .pmb-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:0 0 24px} .pmb-step{position:relative;padding:20px 18px;border-radius:14px;background:var(--paper); border:1px solid var(--line);transition:.22s} .pmb-step:hover{border-color:var(--blue-2);transform:translateY(-4px); box-shadow:0 18px 32px -20px rgba(29,78,216,.5)} .pmb-step-n{position:absolute;inset-block-start:-11px;inset-inline-start:16px; width:24px;height:24px;border-radius:8px;display:grid;place-items:center; font-family:var(--display);font-size:.78rem;font-weight:900;color:#fff; background:linear-gradient(140deg,var(--blue-2),var(--blue)); box-shadow:0 6px 14px -7px var(--blue)} .pmb-step-ic{width:36px;height:36px;border-radius:11px;display:grid;place-items:center; margin:6px 0 12px;color:var(--blue);background:rgba(59,130,246,.12)} .pmb-step b{display:block;font-size:.9rem;font-weight:800;color:var(--tx);margin-bottom:7px; line-height:1.5} .pmb-step p{margin:0;font-size:.81rem;line-height:1.9;color:var(--tx-2)} /* ───────────────────────────────────────────────────────────────── ۵. محاسبه‌گر فضا ───────────────────────────────────────────────────────────────── */ .pmb-calc{border:1px solid var(--line);border-radius:18px;background:var(--paper);overflow:hidden; box-shadow:0 2px 6px rgba(16,24,40,.05),0 22px 44px -30px rgba(16,24,40,.36); display:grid;grid-template-columns:1.1fr .9fr;margin:0 0 26px} .pmb-calc-form{padding:22px;border-inline-end:1px solid var(--line)} .pmb-calc-row{margin-bottom:20px} .pmb-calc-row:last-child{margin-bottom:0} .pmb-calc-row>label,.pmb-calc-row>span.l{display:block;font-size:.85rem;font-weight:800; margin-bottom:9px;color:var(--tx)} .pmb-segs{display:flex;flex-wrap:wrap;gap:7px} .pmb-seg{font:inherit;font-size:.81rem;font-weight:700;cursor:pointer;padding:9px 14px; border-radius:99px;border:1px solid var(--line);background:var(--paper);color:var(--tx-2); transition:.15s} .pmb-seg:hover{border-color:var(--line-2);color:var(--tx)} .pmb-seg[aria-pressed=true]{background:var(--blue);border-color:var(--blue);color:#fff} .pmb-range{width:100%;accent-color:var(--blue);margin:4px 0} .pmb-range-v{display:flex;justify-content:space-between;font-size:.74rem;color:var(--tx-3)} .pmb-range-v b{font-family:var(--mono);direction:ltr;font-size:.88rem;color:var(--blue);font-weight:700} .pmb-calc-out{padding:22px;background:linear-gradient(180deg,#F4F8FF,var(--paper)); display:flex;flex-direction:column;justify-content:center} .pmb-calc-n{font-family:var(--mono);direction:ltr;font-size:clamp(2rem,5vw,2.9rem);font-weight:700; color:var(--blue);line-height:1;letter-spacing:-.04em;margin-bottom:6px} .pmb-calc-l{font-size:.79rem;color:var(--tx-2);margin-bottom:18px;line-height:1.8} .pmb-calc-rec{border-block-start:1px solid var(--line);padding-block-start:16px} .pmb-calc-rec small{display:block;font-size:.75rem;color:var(--tx-2);margin-bottom:4px} .pmb-calc-rec b{display:block;font-family:var(--display);font-size:1.06rem;font-weight:900; margin-bottom:13px;color:var(--tx)} .pmb-go{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:800; font-size:.86rem;padding:11px 18px;border-radius:10px;text-decoration:none;color:#fff; background:linear-gradient(135deg,var(--blue-2),var(--blue)); box-shadow:0 10px 22px -12px var(--blue);transition:transform .14s,box-shadow .2s} .pmb-go:active{transform:translateY(1px)} .pmb-calc-note{margin:14px 0 0;font-size:.74rem;line-height:1.85;color:var(--tx-3)} /* ───────────────────────────────────────────────────────────────── ۶. واکنش‌گرایی ───────────────────────────────────────────────────────────────── */ @media (max-width:1080px){ .pmb-grid{grid-template-columns:1fr} .pmb-toc{position:static;margin-bottom:10px} .pmb-toc ol{max-height:none;display:grid;grid-template-columns:repeat(2,1fr);gap:2px} .pmb-steps{grid-template-columns:repeat(2,1fr)} } @media (max-width:720px){ .pmb-calc{grid-template-columns:1fr} .pmb-calc-form{border-inline-end:0;border-block-end:1px solid var(--line)} .pmb-art h3{scroll-margin-top:20px} } @media (max-width:520px){ .pmb-toc ol{grid-template-columns:1fr} .pmb-steps{grid-template-columns:1fr} } /* ───────────────────────────────────────────────────────────────── ۷. کاهش حرکت ───────────────────────────────────────────────────────────────── */ @media (prefers-reduced-motion:reduce){ .pmb *,.pmb *::before,.pmb *::after{ animation:none !important;transition-duration:.001ms !important} html{scroll-behavior:auto} } /* ═══ ۱۴ · سوالات متداول ════════════════════════════════════════ */ /* ───────────────────────────────────────────────────────────────── ۰. پایه ───────────────────────────────────────────────────────────────── */ .pmq{ --bg:#060A13; --panel:#0C1322; --panel-2:#111A2B; --tx:#EDF2FA; --tx-2:#9AA9C6; --tx-3:#6B7A94; --line:rgba(255,255,255,.09); --line-2:rgba(255,255,255,.19); --cyan:#22D3EE; --cyan-2:#67E8F9; --violet:#A855F7; --violet-2:#C4B5FD; --teal:#2DD4BF; --teal-2:#5EEAD4; position:relative;overflow:hidden;isolation:isolate;background:var(--bg);color:var(--tx); padding-block:clamp(56px,8vw,104px); } .pmq-wrap{width:min(900px,100% - 2*var(--pad));margin-inline:auto;position:relative;z-index:3} .pmq :is(a,button,input,summary):focus-visible{outline:2px solid var(--cyan);outline-offset:3px; border-radius:10px} /* هاله و شبکه */ .pmq::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.6; background-image:linear-gradient(var(--line) 1px,transparent 1px), linear-gradient(90deg,var(--line) 1px,transparent 1px); background-size:56px 56px; -webkit-mask-image:radial-gradient(80% 60% at 50% 0%,#000,transparent 74%); mask-image:radial-gradient(80% 60% at 50% 0%,#000,transparent 74%)} .pmq::after{content:"";position:absolute;z-index:0;pointer-events:none; inset-block-start:-18%;inset-inline-start:50%;translate:-50% 0; width:70vw;max-width:820px;aspect-ratio:1;border-radius:50%;filter:blur(100px); background:radial-gradient(circle,rgba(34,211,238,.16) 0%,rgba(168,85,247,.12) 46%,transparent 68%)} /* ───────────────────────────────────────────────────────────────── ۱. سرتیتر ───────────────────────────────────────────────────────────────── */ .pmq-head{text-align:center;margin-bottom:clamp(24px,3.4vw,38px)} .pmq-eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:.75rem;font-weight:700; color:var(--tx-2);margin:0 0 14px} .pmq-eyebrow::before,.pmq-eyebrow::after{content:"";width:26px;height:1px; background:linear-gradient(90deg,transparent,var(--cyan))} .pmq-h2{font-family:var(--display);font-size:clamp(1.6rem,3.8vw,2.7rem);font-weight:900; line-height:1.32;letter-spacing:-.018em;margin:0 0 12px;color:#fff} .pmq-h2 em{font-style:normal;color:var(--cyan-2)} .pmq-lead{font-size:clamp(.92rem,1.5vw,1.02rem);line-height:2;color:var(--tx-2); margin:0 auto;max-width:56ch} /* ───────────────────────────────────────────────────────────────── ۲. جستجو ───────────────────────────────────────────────────────────────── */ .pmq-search{position:relative;margin-bottom:14px} .pmq-search svg{position:absolute;inset-block-start:50%;inset-inline-start:18px;translate:0 -50%; color:var(--tx-3);pointer-events:none;transition:color .2s} .pmq-search input{width:100%;font:inherit;font-size:.95rem;color:#fff; padding:16px 20px 16px 50px;border-radius:14px; background:linear-gradient(150deg,rgba(255,255,255,.07),rgba(255,255,255,.03)); border:1px solid var(--line);outline:none;transition:.2s} .pmq-search input::placeholder{color:var(--tx-3)} .pmq-search input:focus{border-color:rgba(34,211,238,.5); box-shadow:0 0 0 4px rgba(34,211,238,.10)} .pmq-search:focus-within svg{color:var(--cyan)} .pmq-clear{position:absolute;inset-block-start:50%;inset-inline-end:12px;translate:0 -50%; display:none;place-items:center;width:30px;height:30px;border-radius:50%;border:0;cursor:pointer; background:rgba(255,255,255,.09);color:var(--tx-2)} .pmq-clear.on{display:grid} .pmq-clear:hover{background:rgba(255,255,255,.16);color:#fff} /* ───────────────────────────────────────────────────────────────── ۳. فیلتر گروه‌ها ───────────────────────────────────────────────────────────────── */ .pmq-tabs{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none; padding-block-end:4px;margin-bottom:22px} .pmq-tabs::-webkit-scrollbar{display:none} .pmq-tab{flex:none;display:inline-flex;align-items:center;gap:8px;font:inherit;font-size:.83rem; font-weight:700;cursor:pointer;padding:10px 16px;border-radius:99px;white-space:nowrap; border:1px solid var(--line);background:rgba(255,255,255,.03);color:var(--tx-2);transition:.18s} .pmq-tab svg{flex:none;opacity:.75} .pmq-tab b{font-family:var(--mono);direction:ltr;font-size:.7rem;padding:2px 7px;border-radius:99px; background:rgba(255,255,255,.09);color:var(--tx-3);font-weight:700} .pmq-tab:hover{border-color:var(--line-2);color:#fff} .pmq-tab[aria-pressed=true]{background:linear-gradient(140deg,rgba(34,211,238,.20),rgba(168,85,247,.14)); border-color:rgba(34,211,238,.42);color:#fff} .pmq-tab[aria-pressed=true] b{background:rgba(255,255,255,.18);color:#fff} .pmq-tab[aria-pressed=true] svg{opacity:1;color:var(--cyan-2)} /* ───────────────────────────────────────────────────────────────── ۴. آکاردئون ───────────────────────────────────────────────────────────────── */ .pmq-list{display:grid;gap:10px} .pmq-item{position:relative;border-radius:16px;overflow:hidden; background:linear-gradient(160deg,rgba(255,255,255,.055),rgba(255,255,255,.02)); border:1px solid var(--line);transition:border-color .25s,box-shadow .25s,background .25s} .pmq-item[data-g=buy]{--ac:var(--cyan);--ac2:var(--cyan-2);--acs:rgba(34,211,238,.16)} .pmq-item[data-g=srv]{--ac:var(--violet);--ac2:var(--violet-2);--acs:rgba(168,85,247,.16)} .pmq-item[data-g=aft]{--ac:var(--teal);--ac2:var(--teal-2);--acs:rgba(45,212,191,.16)} .pmq-item:hover{border-color:var(--line-2)} .pmq-item[open]{border-color:color-mix(in srgb,var(--ac) 45%,transparent); background:linear-gradient(160deg,var(--acs),rgba(255,255,255,.02) 46%); box-shadow:0 20px 44px -28px var(--ac)} /* نوار رنگی لبه، فقط وقتی باز است */ .pmq-item::before{content:"";position:absolute;inset-block:0;inset-inline-start:0;width:3px; background:linear-gradient(180deg,var(--ac2),var(--ac)); opacity:0;transition:opacity .25s} .pmq-item[open]::before{opacity:1} .pmq-item[hidden]{display:none} .pmq-q{display:flex;align-items:center;gap:14px;cursor:pointer;list-style:none; padding:18px clamp(16px,2.2vw,22px);user-select:none} .pmq-q::-webkit-details-marker{display:none} .pmq-n{flex:none;font-family:var(--mono);direction:ltr;font-size:.72rem;font-weight:700; color:var(--tx-3);width:24px;transition:color .25s} .pmq-item[open] .pmq-n{color:var(--ac2)} .pmq-q span{flex:1;font-size:.98rem;font-weight:700;color:#fff;line-height:1.75} .pmq-plus{flex:none;position:relative;width:28px;height:28px;border-radius:9px; border:1px solid var(--line-2);transition:.28s cubic-bezier(.22,1,.36,1)} .pmq-plus::before,.pmq-plus::after{content:"";position:absolute;inset-block-start:50%; inset-inline-start:50%;translate:-50% -50%;background:var(--tx-2);border-radius:2px; transition:.28s cubic-bezier(.22,1,.36,1)} .pmq-plus::before{width:11px;height:2px} .pmq-plus::after{width:2px;height:11px} .pmq-item[open] .pmq-plus{border-color:transparent;background:linear-gradient(140deg,var(--ac2),var(--ac)); rotate:180deg} .pmq-item[open] .pmq-plus::before{background:#0B1120} .pmq-item[open] .pmq-plus::after{height:0;background:#0B1120} /* بدنه‌ی پاسخ — انیمیشن نرم با grid */ .pmq-a{display:grid;grid-template-rows:0fr; transition:grid-template-rows .34s cubic-bezier(.22,1,.36,1)} .pmq-item[open] .pmq-a{grid-template-rows:1fr} .pmq-item.closing .pmq-a{grid-template-rows:0fr} .pmq-a>div{overflow:hidden;min-height:0} .pmq-a p{margin:0;padding:0 clamp(16px,2.2vw,22px) 20px 62px; font-size:.9rem;line-height:2.15;color:#B7C4DE} .pmq-a strong{color:#fff;font-weight:700} .pmq-a a{color:var(--ac2);font-weight:700;text-decoration:underline;text-underline-offset:3px} .pmq-a a:hover{color:#fff} .pmq-tagline{display:inline-flex;align-items:center;gap:6px;margin-inline-start:62px; margin-block-end:18px;padding:4px 11px;border-radius:99px;font-size:.68rem;font-weight:700; background:var(--acs);color:var(--ac2)} /* واژه‌ی یافت‌شده در جستجو */ .pmq-hit{background:rgba(34,211,238,.26);color:#fff;border-radius:3px;padding:0 2px} /* حالت خالی */ .pmq-empty{display:none;text-align:center;padding:44px 20px;border-radius:16px; border:1px dashed var(--line-2);background:rgba(255,255,255,.02)} .pmq-empty.on{display:block} .pmq-empty b{display:block;font-family:var(--display);font-size:1.06rem;font-weight:900; color:#fff;margin-bottom:7px} .pmq-empty p{margin:0;font-size:.87rem;line-height:1.95;color:var(--tx-2)} /* ───────────────────────────────────────────────────────────────── ۵. کارت پایانی ───────────────────────────────────────────────────────────────── */ .pmq-ask{margin-top:22px;border-radius:18px;padding:clamp(20px,3vw,28px); display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap; background:linear-gradient(140deg,rgba(34,211,238,.13),rgba(168,85,247,.10)); border:1px solid var(--line-2)} .pmq-ask-l{display:flex;align-items:center;gap:14px;min-width:min(100%,260px)} .pmq-ask-ic{flex:none;width:44px;height:44px;border-radius:13px;display:grid;place-items:center; color:#08131E;background:linear-gradient(140deg,var(--cyan-2),var(--cyan))} .pmq-ask-l b{display:block;font-family:var(--display);font-size:1.04rem;font-weight:900;color:#fff; line-height:1.5} .pmq-ask-l small{display:block;font-size:.82rem;color:var(--tx-2);margin-top:2px} .pmq-acts{display:flex;gap:10px;flex-wrap:wrap} .pmq-btn{display:inline-flex;align-items:center;gap:8px;font-weight:800;font-size:.88rem; padding:13px 20px;border-radius:11px;text-decoration:none;transition:transform .14s,box-shadow .2s} .pmq-btn:active{transform:translateY(1px)} .pmq-btn--main{color:#08131E;background:linear-gradient(135deg,var(--cyan-2),var(--cyan)); box-shadow:0 10px 24px -12px var(--cyan)} .pmq-btn--ghost{color:#fff;border:1px solid var(--line-2)} .pmq-btn--ghost:hover{background:rgba(255,255,255,.06)} /* ───────────────────────────────────────────────────────────────── ۶. واکنش‌گرایی ───────────────────────────────────────────────────────────────── */ @media (max-width:560px){ .pmq-q{gap:11px;padding:16px 14px} .pmq-n{display:none} .pmq-a p,.pmq-tagline{padding-inline-start:14px;margin-inline-start:14px} .pmq-a p{padding-inline-end:14px} .pmq-ask{flex-direction:column;align-items:stretch} .pmq-acts .pmq-btn{flex:1;justify-content:center} } /* ───────────────────────────────────────────────────────────────── ۷. کاهش حرکت ───────────────────────────────────────────────────────────────── */ @media (prefers-reduced-motion:reduce){ .pmq *,.pmq *::before,.pmq *::after{ animation:none !important;transition-duration:.001ms !important} } /* ═══ ۱۵ · تعهد و شناسنامه ══════════════════════════════════════ */ /* ───────────────────────────────────────────────────────────────── ۰. پایه — سند رسمی، کاغذ کرم با مرکب سرمه‌ای ───────────────────────────────────────────────────────────────── */ .pmc{ --paper:#FDFBF6; --paper-2:#F6F1E6; --edge:#E6DFCE; --ink:#141C2E; --tx:#141C2E; --tx-2:#5A6076; --tx-3:#8B8F9F; --gold:#C08A2E; --gold-2:#E0B45E; --gold-3:#F6E3B8; --navy:#1E293B; position:relative;overflow:hidden;isolation:isolate;color:var(--tx); background:linear-gradient(180deg,#FAF7F0 0%,#F3EFE4 100%); padding-block:clamp(48px,6.5vw,84px); } .pmc-wrap{width:min(1060px,100% - 2*var(--pad));margin-inline:auto;position:relative;z-index:3} .pmc :is(a,button):focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:8px} /* هاله‌ی طلایی ملایم */ .pmc::before{content:"";position:absolute;z-index:0;pointer-events:none; inset-block-start:-24%;inset-inline-end:-12%;width:44vw;max-width:560px;aspect-ratio:1; border-radius:50%;filter:blur(90px); background:radial-gradient(circle,rgba(224,180,94,.24),transparent 68%)} /* ───────────────────────────────────────────────────────────────── ۱. کارت سند ───────────────────────────────────────────────────────────────── */ .pmc-doc{position:relative;border-radius:20px;overflow:hidden;background:var(--paper); border:1px solid var(--edge); box-shadow:0 1px 2px rgba(20,28,46,.05),0 24px 50px -30px rgba(20,28,46,.35)} /* قاب داخلی نازک — حس سند رسمی */ .pmc-doc::before{content:"";position:absolute;inset:9px;border-radius:13px;pointer-events:none; border:1px solid rgba(192,138,46,.26)} /* بافت کاغذ */ .pmc-doc::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.5; background-image:radial-gradient(circle at 1px 1px,rgba(20,28,46,.05) 1px,transparent 0); background-size:15px 15px} .pmc-body{position:relative;z-index:1; display:grid;grid-template-columns:auto 1fr;gap:clamp(18px,3vw,34px); padding:clamp(26px,3.6vw,42px)} /* ── مهر ── */ .pmc-seal{position:relative;width:clamp(84px,11vw,108px);aspect-ratio:1; display:grid;place-items:center;flex:none} .pmc-seal svg{position:absolute;inset:0;width:100%;height:100%} .pmc-seal-ring{transform-origin:50% 50%;animation:pmcSpin 34s linear infinite} @keyframes pmcSpin{to{transform:rotate(360deg)}} .pmc-seal-in{position:relative;z-index:1;text-align:center;line-height:1.25} .pmc-seal-in b{display:block;font-family:var(--display);font-size:.98rem;font-weight:900; color:var(--navy)} .pmc-seal-in small{display:block;font-family:var(--mono);direction:ltr;font-size:.58rem; letter-spacing:.08em;color:var(--gold);margin-top:3px} /* ── متن تعهد ── */ .pmc-lbl{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);direction:ltr; font-size:.63rem;letter-spacing:.14em;color:var(--gold);margin:0 0 10px} .pmc-lbl::after{content:"";width:34px;height:1px;background:linear-gradient(90deg,var(--gold-2),transparent)} .pmc-h2{font-family:var(--display);font-size:clamp(1.32rem,2.9vw,1.95rem);font-weight:900; line-height:1.44;letter-spacing:-.012em;margin:0 0 18px;color:var(--ink)} .pmc-h2 em{font-style:normal;color:var(--gold)} .pmc-list{list-style:none;margin:0 0 24px;padding:0} .pmc-list li{display:flex;gap:11px;padding:11px 0;font-size:.9rem;line-height:2;color:#39405A; border-block-start:1px solid rgba(20,28,46,.08)} .pmc-list li:first-child{border-block-start:0} .pmc-list svg{flex:none;margin-top:6px;color:var(--gold)} /* ── امضا ── */ .pmc-sign{display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap; padding-block-start:18px;border-block-start:1px dashed rgba(192,138,46,.4)} .pmc-sign-mark{flex:none;width:clamp(104px,14vw,132px);color:var(--navy)} .pmc-sign-mark path{fill:none;stroke:currentColor;stroke-width:2.1;stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:340;stroke-dashoffset:340; transition:stroke-dashoffset 1.5s cubic-bezier(.3,.9,.4,1)} .pmc.inked .pmc-sign-mark path{stroke-dashoffset:0} .pmc-sign-tx b{display:block;font-family:var(--display);font-size:1rem;font-weight:900; color:var(--ink);line-height:1.5} .pmc-sign-tx small{display:block;font-size:.79rem;color:var(--tx-2);margin-top:2px} /* ───────────────────────────────────────────────────────────────── ۲. نوار شناسنامه ───────────────────────────────────────────────────────────────── */ .pmc-id{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between; gap:clamp(16px,3vw,32px);flex-wrap:wrap; padding:18px clamp(26px,3.6vw,42px); border-block-start:1px solid var(--edge);background:var(--paper-2)} .pmc-badges{display:flex;align-items:center;gap:12px;flex-wrap:wrap} .pmc-badge{display:grid;place-items:center;min-width:76px;min-height:76px;padding:6px; border-radius:12px;background:var(--paper);border:1px solid var(--edge); transition:.2s} .pmc-badge:hover{border-color:var(--gold-2);transform:translateY(-2px); box-shadow:0 10px 20px -12px rgba(192,138,46,.7)} .pmc-badge img,.pmc-badge a{max-width:100%;height:auto;display:block} /* جای خالی، تا وقتی کد نماد را نگذاشته‌اید */ .pmc-badge--empty{border-style:dashed;color:var(--tx-3);text-align:center; font-size:.62rem;line-height:1.6;padding:10px 8px} .pmc-legal{font-size:.8rem;line-height:2;color:var(--tx-2);min-width:min(100%,230px)} .pmc-legal b{display:block;font-size:.87rem;font-weight:800;color:var(--ink);margin-bottom:2px} .pmc-legal span{font-family:var(--mono);direction:ltr;unicode-bidi:isolate;color:var(--tx)} /* ───────────────────────────────────────────────────────────────── ۳. واکنش‌گرایی ───────────────────────────────────────────────────────────────── */ @media (max-width:760px){ .pmc-body{grid-template-columns:1fr;gap:18px} .pmc-seal{margin-inline:auto} .pmc-id{flex-direction:column;align-items:stretch;text-align:center} .pmc-badges{justify-content:center} .pmc-legal{text-align:center} .pmc-sign{justify-content:center;text-align:center} } /* ───────────────────────────────────────────────────────────────── ۴. کاهش حرکت ───────────────────────────────────────────────────────────────── */ @media (prefers-reduced-motion:reduce){ .pmc *,.pmc *::before,.pmc *::after{ animation:none !important;transition-duration:.001ms !important} .pmc-sign-mark path{stroke-dashoffset:0} } /* ═══ ۱۶ · فراخوان پایانی ═══════════════════════════════════════ */ /* ───────────────────────────────────────────────────────────────── ۰. پایه ───────────────────────────────────────────────────────────────── */ .pmz{ --bg:#05080F; --panel:#0B1120; --tx:#EDF2FA; --tx-2:#98A6C2; --tx-3:#68768F; --line:rgba(255,255,255,.10); --line-2:rgba(255,255,255,.20); --saffron:#D97706; --saffron-2:#F59E0B; --saffron-3:#FFD27A; --cyan:#22D3EE; --cyan-2:#67E8F9; position:relative;overflow:hidden;isolation:isolate;background:var(--bg);color:var(--tx); padding-block:clamp(56px,8vw,100px); } .pmz-wrap{width:min(1140px,100% - 2*var(--pad));margin-inline:auto;position:relative;z-index:3} .pmz :is(a,button):focus-visible{outline:2px solid var(--saffron-2);outline-offset:3px;border-radius:10px} .pmz::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.5; background-image:linear-gradient(var(--line) 1px,transparent 1px), linear-gradient(90deg,var(--line) 1px,transparent 1px); background-size:58px 58px; -webkit-mask-image:radial-gradient(76% 60% at 50% 0%,#000,transparent 76%); mask-image:radial-gradient(76% 60% at 50% 0%,#000,transparent 76%)} .pmz::after{content:"";position:absolute;z-index:0;pointer-events:none; inset-block-end:-28%;inset-inline-start:50%;translate:-50% 0; width:76vw;max-width:900px;aspect-ratio:1;border-radius:50%;filter:blur(110px); background:radial-gradient(circle,rgba(217,119,6,.20) 0%,rgba(34,211,238,.10) 48%,transparent 68%)} /* ───────────────────────────────────────────────────────────────── ۱. سرتیتر ───────────────────────────────────────────────────────────────── */ .pmz-head{text-align:center;max-width:60ch;margin:0 auto clamp(28px,4vw,44px)} .pmz-eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:.75rem;font-weight:700; color:var(--tx-2);margin:0 0 14px} .pmz-eyebrow::before,.pmz-eyebrow::after{content:"";width:26px;height:1px; background:linear-gradient(90deg,transparent,var(--saffron-2))} .pmz-h2{font-family:var(--display);font-size:clamp(1.6rem,3.8vw,2.7rem);font-weight:900; line-height:1.32;letter-spacing:-.018em;margin:0 0 12px;color:#fff} .pmz-h2 em{font-style:normal;color:var(--saffron-3)} .pmz-lead{font-size:clamp(.93rem,1.5vw,1.03rem);line-height:2.05;color:var(--tx-2);margin:0} .pmz-lead a{color:var(--cyan-2);font-weight:700;text-decoration:underline;text-underline-offset:3px} /* ───────────────────────────────────────────────────────────────── ۲. دو مسیر ───────────────────────────────────────────────────────────────── */ .pmz-paths{display:grid;grid-template-columns:1.32fr .68fr;gap:clamp(14px,2vw,22px); align-items:stretch} .pmz-card{position:relative;border-radius:22px;overflow:hidden; background:linear-gradient(160deg,rgba(255,255,255,.06),rgba(255,255,255,.02)); border:1px solid var(--line); box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 30px 60px -38px #000} .pmz-card-h{display:flex;align-items:center;gap:11px;padding:18px clamp(18px,2.2vw,24px); border-block-end:1px solid var(--line)} .pmz-card-h i{width:30px;height:30px;border-radius:9px;flex:none;display:grid;place-items:center; font-style:normal} .pmz-card-h b{font-family:var(--display);font-size:1.02rem;font-weight:900;color:#fff;line-height:1.5} .pmz-card-h small{display:block;font-size:.78rem;color:var(--tx-3);font-weight:500;margin-top:2px} /* ── مسیر ۱ · پلن‌ها ── */ .pmz-picks{padding:10px clamp(12px,1.6vw,16px) 16px} .pmz-pick{display:grid;grid-template-columns:1fr auto auto;gap:clamp(10px,1.6vw,18px); align-items:center;padding:15px clamp(8px,1vw,10px);border-radius:13px; text-decoration:none;color:inherit;transition:background .18s} .pmz-pick+.pmz-pick{border-block-start:1px solid var(--line)} .pmz-pick:hover{background:rgba(255,255,255,.04)} .pmz-pick-l b{display:flex;align-items:center;gap:8px;font-size:.95rem;font-weight:800;color:#fff; line-height:1.5} .pmz-pick-l b i{width:7px;height:7px;border-radius:50%;flex:none;font-style:normal; background:var(--pc2);box-shadow:0 0 10px -1px var(--pc2)} .pmz-pick-l small{display:block;font-size:.79rem;color:var(--tx-3);margin-top:3px; padding-inline-start:15px} .pmz-pick-s{font-family:var(--mono);direction:ltr;font-size:.79rem;color:var(--tx-2); white-space:nowrap;text-align:center} .pmz-pick-p{text-align:end;white-space:nowrap} .pmz-pick-p b{font-family:var(--display);font-size:1.04rem;font-weight:900;color:#fff} .pmz-pick-p b span{font-family:var(--mono);direction:ltr} .pmz-pick-p small{display:block;font-size:.7rem;color:var(--tx-3);margin-top:2px} .pmz-pick-go{flex:none;width:34px;height:34px;border-radius:10px;display:grid;place-items:center; background:rgba(255,255,255,.07);color:var(--tx-2);transition:.2s} .pmz-pick:hover .pmz-pick-go{background:linear-gradient(140deg,var(--pc2),var(--pc));color:#fff} .pmz-all{display:flex;align-items:center;justify-content:center;gap:8px;margin:6px 10px 0; padding:13px;border-radius:12px;font-size:.86rem;font-weight:800;text-decoration:none; color:#2A1500;background:linear-gradient(135deg,var(--saffron-3),var(--saffron-2) 55%,var(--saffron)); box-shadow:0 12px 26px -12px rgba(217,119,6,.95),inset 0 1px 0 rgba(255,255,255,.5); transition:transform .14s,box-shadow .2s} .pmz-all:active{transform:translateY(1px)} .pmz-all:hover{box-shadow:0 18px 34px -12px rgba(217,119,6,1),inset 0 1px 0 rgba(255,255,255,.6)} /* ── مسیر ۲ · رایگان ── */ .pmz-free{display:flex;flex-direction:column} .pmz-free-b{flex:1;display:flex;flex-direction:column;justify-content:center;text-align:center; padding:clamp(20px,2.6vw,28px)} .pmz-gb{font-family:var(--mono);direction:ltr;font-size:clamp(2.4rem,6vw,3.4rem);font-weight:700; line-height:1;letter-spacing:-.05em;color:var(--cyan-2);margin-bottom:6px} .pmz-gb small{font-size:.34em;vertical-align:super;margin-inline-start:3px} .pmz-free-b>span{display:block;font-size:.85rem;font-weight:700;color:#fff;margin-bottom:14px} .pmz-free-b p{margin:0 0 20px;font-size:.84rem;line-height:1.95;color:var(--tx-2)} .pmz-free-go{display:flex;align-items:center;justify-content:center;gap:8px;padding:14px 20px; border-radius:12px;font-size:.9rem;font-weight:800;text-decoration:none;color:#052A33; background:linear-gradient(135deg,var(--cyan-2),var(--cyan)); box-shadow:0 12px 26px -12px rgba(34,211,238,.9),inset 0 1px 0 rgba(255,255,255,.45); transition:transform .14s,box-shadow .2s} .pmz-free-go:active{transform:translateY(1px)} .pmz-free-go:hover{box-shadow:0 18px 34px -12px rgba(34,211,238,1)} .pmz-free-n{margin:12px 0 0;font-size:.74rem;color:var(--tx-3);line-height:1.8} /* ───────────────────────────────────────────────────────────────── ۳. نوار اطمینان ───────────────────────────────────────────────────────────────── */ .pmz-safe{margin-top:clamp(16px,2.2vw,22px);border-radius:18px;border:1px solid var(--line); background:rgba(255,255,255,.03);display:grid;grid-template-columns:repeat(3,1fr)} .pmz-safe div{display:flex;align-items:center;gap:11px;padding:18px clamp(16px,2vw,22px); border-inline-start:1px solid var(--line)} .pmz-safe div:first-child{border-inline-start:0} .pmz-safe svg{flex:none;color:var(--saffron-2)} .pmz-safe b{display:block;font-size:.87rem;font-weight:800;color:#fff;line-height:1.5} .pmz-safe small{display:block;font-size:.77rem;color:var(--tx-3);margin-top:2px} /* ───────────────────────────────────────────────────────────────── ۴. واکنش‌گرایی ───────────────────────────────────────────────────────────────── */ @media (max-width:900px){ .pmz-paths{grid-template-columns:1fr} .pmz-safe{grid-template-columns:1fr} .pmz-safe div{border-inline-start:0;border-block-start:1px solid var(--line)} .pmz-safe div:first-child{border-block-start:0} } @media (max-width:520px){ .pmz-pick{grid-template-columns:1fr auto} .pmz-pick-s{display:none} .pmz-pick-go{display:none} .pmz-pick-l small{padding-inline-start:0} } /* ───────────────────────────────────────────────────────────────── ۵. کاهش حرکت ───────────────────────────────────────────────────────────────── */ @media (prefers-reduced-motion:reduce){ .pmz *,.pmz *::before,.pmz *::after{ animation:none !important;transition-duration:.001ms !important} }