/* ═══════════════════════════════════════════════════════════════════ پرشین میزبان — استایل صفحه‌ی «خرید هاست وردپرس» /assets/css/hosting-wordpress.css ─────────────────────────────────────────────────────────────────── فهرست: ۰۰ فونت‌ها ۰۱ توکن‌های مشترک و ابزارها ۰۲ هیرو .pjh- ۰۳ اکوسیستم سرویس‌ها .pme- ۰۴ تفاوت با هاست معمولی .pjc- ۰۵ تعرفه .pjp- ۰۶ مقایسه‌ی پلن‌ها .pjm- ۰۷ کارنامه‌ی سازگاری .pjw- ۰۸ تعهد انسانی .pjs- ۰۹ راهنمای خرید .pjg- ۱۰ سوالات متداول .pjq- ۱۱ فراخوان پایانی .pjz- ═══════════════════════════════════════════════════════════════════ */ /* ═══ ۰۰ · فونت‌ها ═══════════════════════════════════════════════════ */ @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-wordpress{ --mono:'PMNum','PMMono',ui-monospace,'SFMono-Regular','Roboto Mono',monospace; --display:'Morabba','IRANSansX','IRANSans',system-ui,sans-serif; --pad:clamp(18px,4vw,40px); } .pjh *,.pjh *::before,.pjh *::after,.pme *,.pme *::before,.pme *::after,.pjp *,.pjp *::before,.pjp *::after,.pjm *,.pjm *::before,.pjm *::after,.pjw *,.pjw *::before,.pjw *::after,.pjc *,.pjc *::before,.pjc *::after,.pjs *,.pjs *::before,.pjs *::after,.pjg *,.pjg *::before,.pjg *::after,.pjq *,.pjq *::before,.pjq *::after,.pjz *,.pjz *::before,.pjz *::after{box-sizing:border-box} .pjh img,.pme img,.pjp img,.pjm img,.pjw img,.pjc img,.pjs img,.pjg img,.pjq img,.pjz img{max-width:100%;height:auto;display:block} .pjc-num,.pjg-num,.pjh-num,.pjm-num,.pjp-num,.pjq-num,.pjs-num,.pjz-num{font-family:var(--mono);direction:ltr;unicode-bidi:isolate; font-variant-numeric:tabular-nums;letter-spacing:-.02em} .pjc-sr,.pjm-sr,.pjq-sr{position:absolute;width:1px;height:1px;overflow:hidden; clip:rect(0 0 0 0);white-space:nowrap} /* ═══ ۰۲ · هیرو ═══════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════════════════ فونت‌ها ⚠️ اگر hosting-wordpress.css یا web-hosting.css لود می‌شود، حذف کنید. ═══════════════════════════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════════════════ ۰. پایه — فیروزه‌ی جگوار روی لاجورد عمیق ═══════════════════════════════════════════════════════════════════ */ .pjh{ --ink:#04060E; --cyan:#22D3EE; --cyan-2:#67E8F9; --cyan-3:#A5F3FC; --cyan-d:#0891B2; --lapis:#1E3A8A; --lapis-2:#7C9BFF; --gold:#F5A524; --gold-2:#FFD27A; --tx:#EEF3FB; --tx-2:#A3B4CE; --tx-3:#75879F; --line:rgba(255,255,255,.10); --line-2:rgba(255,255,255,.20); position:relative;isolation:isolate;overflow:hidden; background:var(--ink);color:var(--tx); padding-block:clamp(30px,4.5vw,56px) 0; -webkit-font-smoothing:antialiased; } .pjh-wrap{width:min(1240px,100% - 2*var(--pad));margin-inline:auto;position:relative} .pjh :is(a,button):focus-visible{outline:2px solid var(--cyan);outline-offset:3px;border-radius:11px} /* ═══════════════════════════════════════════════════════════════════ ۱. پس‌زمینه — سه لایه، نه بیشتر ═══════════════════════════════════════════════════════════════════ */ /* ۱-الف · نور کلیدی: پشت جگوار می‌نشیند و هاله‌اش را تقویت می‌کند */ .pjh-light{position:absolute;inset:0;z-index:0;pointer-events:none; background: radial-gradient(46% 62% at 30% 52%, rgba(34,211,238,.28) 0%, rgba(14,116,144,.13) 34%, transparent 68%), radial-gradient(84% 56% at 66% -10%, rgba(30,58,138,.30) 0%, transparent 62%), linear-gradient(180deg,#070C1C 0%,#050914 54%,var(--ink) 100%); animation:pjhBreathe 22s ease-in-out infinite} @keyframes pjhBreathe{0%,100%{opacity:.93}50%{opacity:1}} /* ۱-ب · شبکه‌ی مویی — بافت داده، هم‌خانواده با ذرات جگوار */ .pjh-grid{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.42; background-image:linear-gradient(rgba(103,232,249,.07) 1px,transparent 1px), linear-gradient(90deg,rgba(103,232,249,.07) 1px,transparent 1px); background-size:54px 54px; -webkit-mask-image:radial-gradient(70% 60% at 34% 46%,#000,transparent 74%); mask-image:radial-gradient(70% 60% at 34% 46%,#000,transparent 74%)} /* ۱-پ · دانه‌ی فیلم */ .pjh-grain{position:absolute;inset:-120%;z-index:2;pointer-events:none;opacity:.05; 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:pjhGrain 8s steps(6) infinite} @keyframes pjhGrain{ 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)}} /* ۱-ت · وینیت */ .pjh-vig{position:absolute;inset:0;z-index:3;pointer-events:none; background:radial-gradient(120% 96% at 46% 40%,transparent 40%,rgba(0,0,0,.66) 100%)} /* ═══════════════════════════════════════════════════════════════════ ۲. چیدمان ═══════════════════════════════════════════════════════════════════ */ .pjh-grid-l{position:relative;z-index:5; display:grid;grid-template-columns:1.06fr .94fr; gap:clamp(18px,3.4vw,48px);align-items:end} /* ═══════════════════════════════════════════════════════════════════ ۳. ستون متن ═══════════════════════════════════════════════════════════════════ */ .pjh-tx{padding-block:clamp(16px,3vw,40px) clamp(20px,3.4vw,44px)} .pjh-flag{display:inline-flex;align-items:center;gap:9px;padding:8px 16px;border-radius:100px; border:1px solid rgba(34,211,238,.30);background:rgba(34,211,238,.09); color:var(--cyan-3);font-size:.77rem;font-weight:700;margin-bottom:20px; backdrop-filter:blur(8px)} .pjh-flag i{width:7px;height:7px;border-radius:50%;background:var(--cyan);flex:none; box-shadow:0 0 0 0 rgba(34,211,238,.7);animation:pjhPulse 2.6s infinite} @keyframes pjhPulse{70%{box-shadow:0 0 0 10px rgba(34,211,238,0)} 100%{box-shadow:0 0 0 0 rgba(34,211,238,0)}} .pjh-h1{font-family:var(--display);font-size:clamp(2.1rem,5.6vw,3.8rem);font-weight:900; line-height:1.16;letter-spacing:-.026em;margin:0 0 18px;color:#fff; text-shadow:0 2px 34px rgba(0,0,0,.6)} .pjh-h1 b{font-weight:inherit;color:var(--cyan-2)} @supports (background-clip:text) or (-webkit-background-clip:text){ .pjh-h1 b{color:transparent;-webkit-background-clip:text;background-clip:text; background-image:linear-gradient(100deg,#A5F3FC 0%,#67E8F9 46%,#7C9BFF 100%)}} /* حقیقت بازار — قوی‌ترین استدلال، همین ابتدای صفحه */ .pjh-truth{position:relative;margin:0 0 22px;padding:15px 18px 15px 20px;border-radius:14px; font-size:clamp(.93rem,1.5vw,1.03rem);line-height:2;color:#C6D6EA; background:linear-gradient(120deg,rgba(34,211,238,.10),rgba(30,58,138,.06)); border:1px solid rgba(34,211,238,.20); border-inline-start:3px solid var(--cyan)} .pjh-truth strong{color:#fff;font-weight:800} .pjh-truth b{color:var(--cyan-2);font-weight:800} /* قیمت */ .pjh-price{display:inline-flex;flex-direction:column;gap:2px; padding-inline-start:15px;margin-bottom:22px; border-inline-start:2px solid var(--cyan)} .pjh-price small{font-size:.76rem;font-weight:600;color:var(--tx-3)} .pjh-price b{font-family:var(--display);font-size:clamp(1.5rem,3.2vw,2rem);font-weight:900; color:#fff;line-height:1.24} .pjh-price b i{font-style:normal;font-size:.48em;font-weight:700;color:var(--tx-2)} .pjh-price em{font-style:normal;font-size:.75rem;color:var(--tx-3);line-height:1.9;margin-top:4px} /* اقدام */ .pjh-cta{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:16px} .pjh-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:13px;line-height:1; text-decoration:none;border:1px solid transparent;white-space:nowrap; transition:transform .14s ease,box-shadow .26s ease,background .24s ease} .pjh-btn:active{transform:translateY(1px)} .pjh-btn svg{flex:none} .pjh-btn--main{color:#03212A; background:linear-gradient(135deg,#A5F3FC,#22D3EE 52%,#0891B2); box-shadow:0 14px 32px -12px rgba(34,211,238,.95),inset 0 1px 0 rgba(255,255,255,.5)} .pjh-btn--main:hover{box-shadow:0 20px 44px -12px rgba(34,211,238,1)} .pjh-btn--ghost{color:#E7F0FA;border-color:var(--line-2);background:rgba(255,255,255,.04); backdrop-filter:blur(8px)} .pjh-btn--ghost:hover{border-color:rgba(124,155,255,.6);color:var(--lapis-2); background:rgba(124,155,255,.09)} /* ویجت امتیاز — استایلش از style-new.css می‌آید */ .pjh-tx .pm-ir-rating{margin:6px 0 0} /* ═══════════════════════════════════════════════════════════════════ ۴. ستون تصویر ═══════════════════════════════════════════════════════════════════ */ .pjh-fig{position:relative;margin:0;align-self:end;min-width:0} /* هاله‌ی فیروزه‌ای پشت جگوار */ .pjh-fig::before{content:"";position:absolute;z-index:0;pointer-events:none; inset-block-end:6%;inset-inline-start:4%;width:74%;aspect-ratio:1;border-radius:50%; background:radial-gradient(circle,rgba(34,211,238,.24),transparent 66%); filter:blur(26px);animation:pjhAura 7s ease-in-out infinite} @keyframes pjhAura{0%,100%{opacity:.75;transform:scale(1)}50%{opacity:1;transform:scale(1.06)}} /* سایه‌ی زمین */ .pjh-fig::after{content:"";position:absolute;z-index:1;pointer-events:none; inset-block-end:-4px;inset-inline-start:50%;translate:-50% 0; width:80%;height:32px;border-radius:50%; background:radial-gradient(ellipse,rgba(0,0,0,.75),transparent 70%);filter:blur(10px)} .pjh-fig>img{position:relative;z-index:2;width:100%;max-width:520px;margin-inline:auto; filter:drop-shadow(0 22px 48px rgba(0,0,0,.65))} /* کارت هویت */ .pjh-id{position:absolute;z-index:4;inset-block-end:24px;inset-inline-end:0; display:flex;align-items:center;gap:11px;padding:11px 15px;border-radius:13px; border:1px solid var(--line-2);background:rgba(5,9,20,.82); backdrop-filter:blur(14px) saturate(1.2);max-width:min(280px,92%); box-shadow:0 18px 40px -22px rgba(0,0,0,.95)} .pjh-id-b{flex:none;width:34px;height:34px;border-radius:10px;display:grid;place-items:center; color:#03212A;background:linear-gradient(140deg,var(--cyan-2),var(--cyan))} .pjh-id b{display:block;font-size:.88rem;font-weight:800;color:#fff;line-height:1.5} .pjh-id small{display:block;font-size:.73rem;color:var(--tx-3);line-height:1.6} /* ═══════════════════════════════════════════════════════════════════ ۵. نوار مزایا ═══════════════════════════════════════════════════════════════════ */ .pjh-deck{position:relative;z-index:5;border-block-start:1px solid var(--line); background:rgba(5,9,20,.6);backdrop-filter:blur(14px)} .pjh-deck ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr)} .pjh-deck li{display:flex;align-items:center;gap:13px; padding:20px clamp(10px,1.6vw,20px);border-inline-start:1px solid var(--line)} .pjh-deck li:first-child{border-inline-start:0} .pjh-deck li>svg{flex:none;color:var(--cyan-2)} .pjh-deck b{display:block;font-size:.9rem;font-weight:800;color:#fff;line-height:1.5} .pjh-deck small{display:block;font-size:.75rem;color:var(--tx-3);margin-top:2px} /* ⭐ عنصر امضا: LSCache درخواست را برمی‌گرداند، PHP اجرا نمی‌شود */ .pjh-deck--cache{background:linear-gradient(180deg,rgba(34,211,238,.09),transparent)} .pjh-cache{position:relative;flex:none;width:42px;height:24px} .pjh-cache-track{position:absolute;inset-block-start:50%;inset-inline:2px;height:2px; translate:0 -50%;border-radius:2px;background:rgba(34,211,238,.24)} /* گره‌ی PHP — عمداً خاموش می‌ماند */ .pjh-cache-off{position:absolute;inset-block-start:50%;inset-inline-start:0;translate:0 -50%; width:7px;height:7px;border-radius:2px;background:rgba(255,255,255,.14)} /* گره‌ی وب‌سرور — روشن */ .pjh-cache-hit{position:absolute;inset-block-start:50%;inset-inline-start:50%; translate:-50% -50%;width:9px;height:9px;border-radius:3px;background:var(--cyan-d)} .pjh-cache-dot{position:absolute;inset-block-start:50%;inset-inline-end:0; width:8px;height:8px;border-radius:50%;background:var(--cyan-2);translate:0 -50%; box-shadow:0 0 9px 1px rgba(103,232,249,.85); animation:pjhBounce 1.5s cubic-bezier(.5,0,.5,1) infinite} @keyframes pjhBounce{ 0%{inset-inline-end:0} 38%,50%{inset-inline-end:calc(50% - 4px)} 88%,100%{inset-inline-end:0}} /* ═══════════════════════════════════════════════════════════════════ ۶. واکنش‌گرایی ═══════════════════════════════════════════════════════════════════ */ @media (max-width:1000px){ .pjh-grid-l{grid-template-columns:1fr} .pjh-fig{order:-1;max-width:340px;margin-inline:auto;width:100%} .pjh-fig>img{max-width:300px} .pjh-tx{padding-block-end:0} .pjh-id{position:static;margin:-10px auto 0;max-width:100%} .pjh-deck ul{grid-template-columns:repeat(2,1fr)} .pjh-deck li{border-block-start:1px solid var(--line)} .pjh-deck li:nth-child(-n+2){border-block-start:0} .pjh-deck li:nth-child(odd){border-inline-start:0} .pjh-light{background: radial-gradient(64% 42% at 50% 24%,rgba(34,211,238,.24) 0%,rgba(14,116,144,.11) 36%,transparent 68%), linear-gradient(180deg,#070C1C 0%,#050914 56%,var(--ink) 100%)} } @media (max-width:600px){ .pjh-btn{flex:1 1 100%;padding:15px 22px} .pjh-grain{display:none} .pjh-deck ul{grid-template-columns:1fr} .pjh-deck li{border-inline-start:0;border-block-start:1px solid var(--line)} .pjh-deck li:first-child{border-block-start:0} } /* ═══════════════════════════════════════════════════════════════════ ۷. کاهش حرکت ═══════════════════════════════════════════════════════════════════ */ @media (prefers-reduced-motion:reduce){ .pjh *,.pjh *::before,.pjh *::after{ animation:none !important;transition-duration:.001ms !important} .pjh-grain{display:none} .pjh-cache-dot{inset-inline-end:calc(50% - 4px)} } /* ═══ ۰۳ · اکوسیستم سرویس‌ها ══════════════════════════════════ */ /* ═══════════════════════════════════════════════════════════════════ ۰. پایه ═══════════════════════════════════════════════════════════════════ */ .pme{ --mono:'PMNum','PMMono',ui-monospace,'SFMono-Regular','Roboto Mono',monospace; --display:'Morabba','IRANSansX','IRANSans',system-ui,sans-serif; --pad:clamp(18px,4vw,40px); --paper:#FFFFFF; --paper-2:#F5F8FC; --paper-3:#EAEFF7; --line:#DDE4EF; --line-2:#C6D1E2; --tx:#0D1526; --tx-2:#55637E; --tx-3:#8794AE; position:relative;overflow:hidden;isolation:isolate;color:var(--tx); background:linear-gradient(180deg,#FAFCFE 0%,#EFF3F9 100%); padding-block:clamp(56px,8vw,100px); } .pme-wrap{width:min(1200px,100% - 2*var(--pad));margin-inline:auto;position:relative;z-index:2} .pme :is(a,button):focus-visible{outline:2px solid var(--c);outline-offset:3px;border-radius:10px} /* نقطه‌چین پس‌زمینه */ .pme::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.6; background-image:radial-gradient(circle at 1px 1px,rgba(13,21,38,.06) 1px,transparent 0); background-size:24px 24px; -webkit-mask-image:linear-gradient(180deg,#000,transparent 62%); mask-image:linear-gradient(180deg,#000,transparent 62%)} /* پالت هر سرویس */ .pme [data-hue=teal] {--c:#0E7490;--c2:#2DD4BF;--cs:rgba(45,212,191,.13);--cg:rgba(45,212,191,.45)} .pme [data-hue=lapis] {--c:#1E3A8A;--c2:#7C9BFF;--cs:rgba(124,155,255,.14);--cg:rgba(124,155,255,.45)} .pme [data-hue=violet]{--c:#7C3AED;--c2:#A855F7;--cs:rgba(168,85,247,.13);--cg:rgba(168,85,247,.45)} .pme [data-hue=green] {--c:#0F766E;--c2:#34D399;--cs:rgba(52,211,153,.13);--cg:rgba(52,211,153,.45)} .pme [data-hue=gold] {--c:#C2760A;--c2:#F5A524;--cs:rgba(245,165,36,.15);--cg:rgba(245,165,36,.5)} /* ═══════════════════════════════════════════════════════════════════ ۱. سرتیتر ═══════════════════════════════════════════════════════════════════ */ .pme-head{text-align:center;max-width:62ch;margin:0 auto clamp(30px,4vw,48px)} .pme-eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:.75rem;font-weight:700; color:var(--tx-2);margin:0 0 14px} .pme-eyebrow::before,.pme-eyebrow::after{content:"";width:26px;height:1px; background:linear-gradient(90deg,transparent,#7C9BFF)} .pme-h2{font-family:var(--display);font-size:clamp(1.55rem,3.6vw,2.5rem);font-weight:900; line-height:1.34;letter-spacing:-.015em;margin:0 0 12px;color:var(--tx);position:relative;z-index:0} .pme-h2 em{font-style:normal;color:#1E3A8A;position:relative} .pme-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,rgba(124,155,255,.28),transparent)} .pme-lead{font-size:clamp(.93rem,1.5vw,1.03rem);line-height:2;color:var(--tx-2);margin:0} /* ═══════════════════════════════════════════════════════════════════ ۲. کارت‌های اصلی ═══════════════════════════════════════════════════════════════════ */ .pme-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,22px)} .pme-card{position:relative;display:flex;flex-direction:column;overflow:hidden; border-radius:22px;padding:clamp(22px,2.8vw,30px) clamp(18px,2.2vw,26px) clamp(18px,2.2vw,24px); background:var(--paper);border:1px solid var(--line);text-align:center; box-shadow:0 1px 2px rgba(13,21,38,.04),0 18px 36px -26px rgba(13,21,38,.3); transition:transform .3s cubic-bezier(.22,1,.36,1),box-shadow .3s ease,border-color .3s ease} .pme-card:hover{transform:translateY(-6px);border-color:var(--c2); box-shadow:0 2px 4px rgba(13,21,38,.05),0 30px 54px -24px var(--cg)} /* درخشش نرم پشت کارت */ .pme-card::before{content:"";position:absolute;inset-block-start:-46%;inset-inline-start:50%; translate:-50% 0;width:78%;aspect-ratio:1;border-radius:50%;pointer-events:none;z-index:0; background:radial-gradient(circle,var(--cs),transparent 66%); opacity:.85;transition:opacity .3s} .pme-card:hover::before{opacity:1} .pme-card>*{position:relative;z-index:1} /* کارت صفحه‌ی جاری */ .pme-card.is-current{border-color:var(--c2); box-shadow:0 0 0 2px var(--cs),0 26px 50px -26px var(--cg)} /* نشان «در حال مشاهده» */ .pme-here{position:absolute;z-index:3;inset-block-start:14px;inset-inline-start:14px; display:inline-flex;align-items:center;gap:7px;padding:5px 12px;border-radius:99px; font-size:.68rem;font-weight:800;color:var(--c);background:var(--cs)} .pme-here i{width:6px;height:6px;border-radius:50%;background:var(--c2);flex:none;font-style:normal; box-shadow:0 0 0 0 var(--cg);animation:pmePulse 2.4s infinite} @keyframes pmePulse{70%{box-shadow:0 0 0 7px transparent}100%{box-shadow:0 0 0 0 transparent}} /* ── ⭐ صحنه‌ی شخصیت‌ها ── */ .pme-stage{position:relative;width:clamp(150px,19vw,186px);min-height:clamp(92px,11vw,112px); margin:6px auto 20px;display:grid;place-items:center} .pme-stage--sm{width:auto;min-height:0;margin:0;flex:none} /* حلقه‌ی چرخان و هاله */ .pme-ring{position:absolute;inset-block:-6px;inset-inline:14%;z-index:0;border-radius:999px; border:1.5px dashed var(--c2);opacity:.34;animation:pmeSpin 30s linear infinite} .pme-ring::after{content:"";position:absolute;inset:8%;border-radius:999px; background:radial-gradient(ellipse,var(--cs),transparent 72%);filter:blur(10px)} .pme-stage--sm .pme-ring{inset-block:-5px;inset-inline:-5px} @keyframes pmeSpin{to{transform:rotate(360deg)}} /* گروه پرتره‌ها */ .pme-cast{position:relative;z-index:1;display:flex;align-items:center;justify-content:center} .pme-face{position:relative;flex:none;width:clamp(72px,9vw,86px);aspect-ratio:1;border-radius:50%; overflow:hidden;background:var(--t,#EAEFF7); box-shadow:0 0 0 3px var(--paper),0 0 0 4.5px var(--c2),0 12px 24px -10px var(--cg); animation:pmeFloat 5.6s ease-in-out infinite; transition:margin .34s cubic-bezier(.22,1,.36,1),transform .34s cubic-bezier(.22,1,.36,1)} .pme-face+.pme-face{margin-inline-start:clamp(-26px,-2.6vw,-20px);animation-delay:.7s} .pme-card:hover .pme-face+.pme-face, .pme-row:hover .pme-face+.pme-face{margin-inline-start:6px} .pme-card:hover .pme-face,.pme-row:hover .pme-face{transform:translateY(-3px)} @keyframes pmeFloat{0%,100%{translate:0 0}50%{translate:0 -5px}} /* حرف اول نام — تا وقتی تصویر نیامده */ /* آیکون سرویس — تا وقتی تصویر شخصیت نیامده نمایش داده می‌شود */ .pme-face>.pme-ph{position:absolute;inset:0;z-index:0;margin:auto; width:46%;height:46%;color:var(--c);opacity:.55;transition:opacity .4s ease} .pme-face.ok>.pme-ph{opacity:0} .pme-face>img{position:relative;z-index:1;width:100%;height:100%;object-fit:cover; object-position:center 14%;opacity:0;transition:opacity .45s} .pme-face>img.on{opacity:1} /* اندازه‌ی کوچک‌تر در نوار ورودی */ .pme-stage--sm .pme-face{width:clamp(58px,7vw,68px)} .pme-stage--sm .pme-face+.pme-face{margin-inline-start:clamp(-20px,-2vw,-16px)} .pme-stage--sm .pme-face>.pme-ph{width:44%;height:44%} /* بلیط طلایی — برای هاست رایگان که شخصیت ندارد */ .pme-ticket{position:relative;z-index:1;display:grid;place-items:center; width:clamp(72px,9vw,86px);aspect-ratio:1;border-radius:50%; font-family:var(--mono);direction:ltr;font-size:1.34rem;font-weight:700;color:#2A1B00; background:linear-gradient(145deg,#FFD27A,#F5A524 55%,#C2760A); box-shadow:0 0 0 3px var(--paper),0 0 0 4.5px var(--c2),0 12px 26px -10px var(--cg); animation:pmeFloat 5.6s ease-in-out infinite; transition:transform .34s cubic-bezier(.22,1.4,.5,1)} .pme-ticket small{font-size:.42em;vertical-align:super;margin-inline-start:1px} .pme-row:hover .pme-ticket{transform:scale(1.07) rotate(-6deg)} .pme-stage--sm .pme-ticket{width:clamp(58px,7vw,68px);font-size:1.06rem} /* ── متن ── */ .pme-card h3{font-family:var(--display);font-size:clamp(1.08rem,2vw,1.28rem);font-weight:900; line-height:1.5;margin:0 0 10px;color:var(--tx)} .pme-card p{margin:0 0 20px;font-size:.86rem;line-height:2;color:var(--tx-2);flex:1} .pme-card p strong{color:var(--tx);font-weight:800} /* ── دکمه‌ها ── */ .pme-acts{display:flex;flex-wrap:wrap;gap:8px;justify-content:center; padding-block-start:16px;border-block-start:1px solid var(--line)} .pme-btn{display:inline-flex;align-items:center;gap:7px;font-size:.84rem;font-weight:800; padding:11px 18px;border-radius:11px;text-decoration:none; color:var(--c);border:1px solid var(--line-2);background:var(--paper);transition:.18s} .pme-btn:hover{color:#fff;border-color:transparent; background:linear-gradient(140deg,var(--c2),var(--c)); box-shadow:0 10px 22px -10px var(--cg)} .pme-btn svg{flex:none;opacity:.7;transition:opacity .18s} .pme-btn:hover svg{opacity:1} .pme-now{display:inline-flex;align-items:center;gap:7px;font-size:.82rem;font-weight:800; padding:11px 16px;border-radius:11px;color:var(--c);background:var(--cs);cursor:default} .pme-now svg{flex:none} /* ═══════════════════════════════════════════════════════════════════ ۳. نوار سرویس‌های ورودی ═══════════════════════════════════════════════════════════════════ */ .pme-entry{margin-top:clamp(14px,2vw,22px); display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(14px,2vw,22px)} .pme-row{position:relative;display:flex;align-items:center;gap:clamp(14px,2vw,20px); overflow:hidden;border-radius:20px;padding:clamp(16px,2.2vw,22px) clamp(16px,2.2vw,24px); background:var(--paper);border:1px solid var(--line);text-align:start; box-shadow:0 1px 2px rgba(13,21,38,.04),0 16px 32px -26px rgba(13,21,38,.3); transition:transform .3s cubic-bezier(.22,1,.36,1),box-shadow .3s ease,border-color .3s ease} .pme-row:hover{transform:translateY(-4px);border-color:var(--c2); box-shadow:0 2px 4px rgba(13,21,38,.05),0 26px 46px -24px var(--cg)} .pme-row::before{content:"";position:absolute;inset-block:0;inset-inline-start:0;width:3px; background:linear-gradient(180deg,var(--c2),var(--c))} .pme-row.is-current{border-color:var(--c2);box-shadow:0 0 0 2px var(--cs)} .pme-row-tx{flex:1;min-width:0} .pme-row-tx h3{font-family:var(--display);font-size:1.06rem;font-weight:900;margin:0 0 5px; color:var(--tx);line-height:1.5} .pme-row-tx p{margin:0 0 4px;font-size:.83rem;line-height:1.9;color:var(--tx-2)} .pme-note{display:inline-flex;align-items:center;gap:6px;font-size:.74rem;font-weight:800; color:var(--c);padding:4px 10px;border-radius:99px;background:var(--cs)} .pme-row .pme-btn{flex:none;align-self:center} .pme-row .pme-now{flex:none} /* ═══════════════════════════════════════════════════════════════════ ۴. واکنش‌گرایی ═══════════════════════════════════════════════════════════════════ */ @media (max-width:980px){ .pme-grid{grid-template-columns:1fr;max-width:520px;margin-inline:auto} .pme-entry{grid-template-columns:1fr;max-width:520px;margin-inline:auto} } @media (max-width:520px){ .pme-row{flex-wrap:wrap;text-align:center;justify-content:center} .pme-row .pme-stage{margin-inline:auto} .pme-row-tx{flex:1 1 100%} .pme-row .pme-btn,.pme-row .pme-now{flex:1 1 100%;justify-content:center} .pme-acts .pme-btn{flex:1 1 100%;justify-content:center} } /* ═══════════════════════════════════════════════════════════════════ ۵. کاهش حرکت ═══════════════════════════════════════════════════════════════════ */ @media (prefers-reduced-motion:reduce){ .pme *,.pme *::before,.pme *::after{ animation:none !important;transition-duration:.001ms !important} } /* ═══ ۰۴ · تفاوت با هاست معمولی — .pjc- ═══════════════════════ */ /* ═══════════════════════════════════════════════════════════════════ فونت‌ها — اگر بلوک دیگری در همین صفحه هست، این را حذف کنید ═══════════════════════════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════════════════ ۰. پایه — روشن، توکن روی خودِ سکشن ═══════════════════════════════════════════════════════════════════ */ .pjc{ --paper:#FFFFFF; --paper-2:#F5F9FD; --paper-3:#ECF2F8; --line:#DFE6F0; --line-2:#C7D3E3; --tx:#0C1424; --tx-2:#53617C; --tx-3:#8593AC; --cyan:#0891B2; --cyan-2:#22D3EE; --cyan-3:#67E8F9; --cyan-s:rgba(34,211,238,.11); --cyan-g:rgba(8,145,178,.4); --ink:#071322; position:relative;overflow:hidden;isolation:isolate;color:var(--tx); background:linear-gradient(180deg,#FBFCFE 0%,#EFF4FA 100%); padding-block:clamp(56px,8vw,104px); } .pjc-wrap{width:min(1180px,100% - 2*var(--pad));margin-inline:auto;position:relative;z-index:2} .pjc :is(a,button):focus-visible{outline:2px solid var(--cyan-2);outline-offset:3px;border-radius:10px} .pjc::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.55; background-image:radial-gradient(circle at 1px 1px,rgba(12,20,36,.055) 1px,transparent 0); background-size:24px 24px; -webkit-mask-image:linear-gradient(180deg,#000,transparent 52%); mask-image:linear-gradient(180deg,#000,transparent 52%)} /* ═══════════════════════════════════════════════════════════════════ ۱. سرتیتر ═══════════════════════════════════════════════════════════════════ */ .pjc-head{text-align:center;max-width:64ch;margin:0 auto clamp(24px,3.2vw,34px)} .pjc-eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:.75rem;font-weight:700; color:var(--tx-3);margin:0 0 14px} .pjc-eyebrow::before,.pjc-eyebrow::after{content:"";width:26px;height:1px; background:linear-gradient(90deg,transparent,var(--cyan-2))} .pjc-h2{font-family:var(--display);font-size:clamp(1.55rem,3.6vw,2.5rem);font-weight:900; line-height:1.34;letter-spacing:-.016em;margin:0 0 12px;color:var(--tx);position:relative;z-index:0} .pjc-h2 em{font-style:normal;color:var(--cyan);position:relative} .pjc-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(--cyan-s),transparent)} .pjc-lead{font-size:clamp(.93rem,1.5vw,1.03rem);line-height:2;color:var(--tx-2);margin:0} /* ═══════════════════════════════════════════════════════════════════ ۲. ⭐ حقیقت بازار — قوی‌ترین استدلال این صفحه ═══════════════════════════════════════════════════════════════════ */ .pjc-truth{position:relative;overflow:hidden;border-radius:20px; padding:clamp(22px,3vw,32px);margin-bottom:clamp(24px,3.2vw,36px); background:linear-gradient(150deg,var(--ink) 0%,#0B1B2E 62%,#050F1C 100%); box-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 26px 52px -30px rgba(7,19,34,.85)} .pjc-truth::before{content:"";position:absolute;z-index:0;pointer-events:none; inset-block-start:-42%;inset-inline-end:-8%;width:46%;aspect-ratio:1;border-radius:50%; background:radial-gradient(circle,rgba(34,211,238,.24),transparent 68%)} .pjc-truth-l{position:relative;display:inline-flex;align-items:center;gap:8px; font-family:var(--mono);direction:ltr;font-size:.65rem;letter-spacing:.12em; color:var(--cyan-3);margin-bottom:14px} .pjc-truth q{position:relative;display:block;quotes:none; font-family:var(--display);font-size:clamp(1.04rem,2.1vw,1.4rem);font-weight:900; line-height:1.78;color:#fff;max-width:62ch} .pjc-truth q b{color:var(--cyan-3);font-weight:inherit} .pjc-truth p{position:relative;margin:14px 0 0;font-size:.87rem;line-height:2; color:#A9BCD4;max-width:66ch} /* ═══════════════════════════════════════════════════════════════════ ۳. جدول — بدون خط عمودی، ستون ما برجسته ═══════════════════════════════════════════════════════════════════ */ .pjc-box{border-radius:22px;background:var(--paper);border:1px solid var(--line); padding:clamp(8px,1.4vw,16px) clamp(6px,1.2vw,14px); box-shadow:0 2px 6px rgba(12,20,36,.05),0 28px 54px -34px rgba(12,20,36,.3)} .pjc-scroll{overflow-x:auto;scrollbar-width:thin;border-radius:16px} .pjc-tbl{width:100%;min-width:760px;border-collapse:separate;border-spacing:0} /* سربرگ */ .pjc-tbl thead th{padding:18px 14px 16px;text-align:center;vertical-align:bottom; font-family:var(--display);font-size:.98rem;font-weight:900;color:var(--tx);line-height:1.5} .pjc-tbl thead th:first-child{text-align:start;font-family:inherit;font-size:.77rem; font-weight:700;color:var(--tx-3);padding-inline-start:18px} .pjc-tbl thead th small{display:block;font-family:inherit;font-size:.71rem;font-weight:600; color:var(--tx-3);margin-top:4px} /* بدنه */ .pjc-tbl tbody th{padding:16px 14px 16px 18px;text-align:start;font-size:.85rem;font-weight:700; color:var(--tx-2);white-space:nowrap;border-block-start:1px solid var(--line)} .pjc-lbl{display:flex;align-items:center;gap:10px} .pjc-lbl svg{flex:none;color:var(--cyan-2)} .pjc-tbl tbody td{padding:16px 14px;text-align:center;font-size:.87rem;color:var(--tx-3); border-block-start:1px solid var(--line)} .pjc-tbl tbody tr:nth-child(even) th, .pjc-tbl tbody tr:nth-child(even) td{background:rgba(12,20,36,.016)} .pjc-tbl tbody tr:hover th, .pjc-tbl tbody tr:hover td{background:var(--cyan-s)} /* ⭐ ستون ما — کارت برجسته‌ی شناور */ .pjc-us{background:linear-gradient(180deg,var(--cyan-s),rgba(34,211,238,.04)) !important; color:var(--tx) !important;font-weight:800 !important; box-shadow:inset 1px 0 0 rgba(8,145,178,.26),inset -1px 0 0 rgba(8,145,178,.26)} .pjc-tbl thead .pjc-us{border-radius:18px 18px 0 0;padding-block-start:16px;color:var(--cyan) !important; box-shadow:inset 1px 1px 0 rgba(8,145,178,.26),inset -1px 0 0 rgba(8,145,178,.26)} .pjc-tbl tbody tr:last-child .pjc-us{border-radius:0 0 18px 18px; box-shadow:inset 1px 0 0 rgba(8,145,178,.26),inset -1px 0 0 rgba(8,145,178,.26), inset 0 -1px 0 rgba(8,145,178,.26)} .pjc-tbl tbody tr:hover .pjc-us{background:rgba(34,211,238,.2) !important} .pjc-badge{display:block;width:fit-content;margin:0 auto 9px;padding:4px 12px;border-radius:99px; font-family:var(--display);font-size:.68rem;font-weight:800;color:#03212A; background:linear-gradient(135deg,var(--cyan-3),var(--cyan-2)); box-shadow:0 6px 14px -7px var(--cyan)} .pjc-yes{display:inline-flex;align-items:center;gap:7px;justify-content:center;text-align:start} .pjc-yes svg{flex:none;color:var(--cyan)} /* پانویس */ .pjc-note{display:flex;gap:11px;align-items:flex-start;margin:clamp(12px,1.8vw,18px) 0 0; padding:16px 20px;border-radius:16px;background:var(--paper-2); font-size:.81rem;line-height:2;color:var(--tx-2)} .pjc-note svg{flex:none;margin-top:5px;color:var(--cyan)} .pjc-note b{color:var(--tx);font-weight:800} /* ═══════════════════════════════════════════════════════════════════ ۴. فراخوان ═══════════════════════════════════════════════════════════════════ */ .pjc-cta{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap; margin-top:clamp(24px,3.2vw,36px)} .pjc-go{display:inline-flex;align-items:center;gap:9px;font-weight:800;font-size:.95rem; padding:15px 28px;border-radius:13px;text-decoration:none;color:#fff; background:linear-gradient(135deg,var(--cyan-2),var(--cyan)); box-shadow:0 12px 28px -12px var(--cyan-g),inset 0 1px 0 rgba(255,255,255,.3); transition:transform .14s,box-shadow .24s} .pjc-go:active{transform:translateY(1px)} .pjc-go:hover{box-shadow:0 18px 38px -12px var(--cyan-g)} .pjc-alt{font-size:.85rem;color:var(--tx-2);line-height:1.9} .pjc-alt a{color:var(--cyan);font-weight:800;text-decoration:underline;text-underline-offset:3px} .pjc-alt a:hover{color:var(--tx)} /* ═══════════════════════════════════════════════════════════════════ ۵. موبایل — جدول به بلوک تبدیل می‌شود، بدون اسکرول افقی ═══════════════════════════════════════════════════════════════════ */ @media (max-width:880px){ .pjc-tbl{min-width:0;display:block} .pjc-tbl thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)} .pjc-tbl tbody{display:block} .pjc-scroll{overflow-x:visible} .pjc-tbl tbody tr{display:block;padding:16px 14px; border-block-start:1px solid var(--line)} .pjc-tbl tbody tr:first-child{border-block-start:0} .pjc-tbl tbody tr:nth-child(even) th, .pjc-tbl tbody tr:nth-child(even) td, .pjc-tbl tbody tr:hover th, .pjc-tbl tbody tr:hover td{background:transparent} .pjc-tbl tbody th{display:block;padding:0 0 12px;border:0;font-size:.94rem;color:var(--tx)} .pjc-tbl tbody td{display:grid;grid-template-columns:minmax(96px,38%) 1fr;gap:10px; padding:8px 0;border:0;text-align:start;font-size:.84rem} .pjc-tbl tbody td::before{content:attr(data-col);font-size:.75rem;color:var(--tx-3); font-weight:600;line-height:1.7} .pjc-us{border-radius:12px !important;padding:12px 14px !important;margin-top:8px; box-shadow:none !important} .pjc-tbl tbody tr:last-child .pjc-us, .pjc-tbl thead .pjc-us{border-radius:12px !important;box-shadow:none !important} .pjc-tbl tbody td.pjc-us::before{color:var(--cyan);font-weight:800} .pjc-yes{justify-content:flex-start} } @media (max-width:420px){ .pjc-tbl tbody td{grid-template-columns:1fr;gap:3px} .pjc-tbl tbody td::before{margin-block-end:-2px} .pjc-go{width:100%;justify-content:center} } /* ═══════════════════════════════════════════════════════════════════ ۶. کاهش حرکت ═══════════════════════════════════════════════════════════════════ */ @media (prefers-reduced-motion:reduce){ .pjc *,.pjc *::before,.pjc *::after{transition-duration:.001ms !important} } /* ═══ ۰۵ · تعرفه — .pjp- ══════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════════════════ فونت‌ها — اگر بلوک دیگری در همین صفحه هست، این را حذف کنید ═══════════════════════════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════════════════ ۰. پایه — یک رنگ لهجه، نه سه ═══════════════════════════════════════════════════════════════════ */ .pjp{ --ink:#04060E; --panel:#0A1020; --panel-2:#0D1526; --cyan:#22D3EE; --cyan-2:#67E8F9; --cyan-3:#A5F3FC; --cyan-d:#0891B2; --tx:#EEF3FB; --tx-2:#93A5C0; --tx-3:#657992; --line:rgba(255,255,255,.09); --line-2:rgba(255,255,255,.18); position:relative;overflow:hidden;isolation:isolate;background:var(--ink);color:var(--tx); padding-block:clamp(56px,8vw,104px); } .pjp-wrap{width:min(1220px,100% - 2*var(--pad));margin-inline:auto;position:relative;z-index:2} .pjp :is(a,button):focus-visible{outline:2px solid var(--cyan);outline-offset:3px;border-radius:10px} .pjp::after{content:"";position:absolute;z-index:0;pointer-events:none; inset-block-start:-16%;inset-inline-start:50%;translate:-50% 0; width:70vw;max-width:900px;aspect-ratio:1;border-radius:50%;filter:blur(110px); background:radial-gradient(circle,rgba(34,211,238,.13),transparent 68%)} /* ═══════════════════════════════════════════════════════════════════ ۱. سرتیتر ═══════════════════════════════════════════════════════════════════ */ .pjp-head{text-align:center;max-width:60ch;margin:0 auto clamp(20px,2.8vw,30px)} .pjp-eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:.75rem;font-weight:700; color:var(--tx-3);margin:0 0 14px} .pjp-eyebrow::before,.pjp-eyebrow::after{content:"";width:26px;height:1px; background:linear-gradient(90deg,transparent,var(--cyan))} .pjp-h2{font-family:var(--display);font-size:clamp(1.6rem,3.7vw,2.6rem);font-weight:900; line-height:1.34;letter-spacing:-.016em;margin:0 0 12px;color:#fff} .pjp-h2 em{font-style:normal;color:var(--cyan-2)} .pjp-lead{font-size:clamp(.92rem,1.5vw,1.01rem);line-height:2;color:var(--tx-2);margin:0} .pjp-lead strong{color:#fff;font-weight:700} /* سوییچ */ .pjp-switch{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap; margin-bottom:clamp(16px,2.2vw,22px)} .pjp-seg{display:inline-flex;padding:4px;border-radius:100px; background:rgba(255,255,255,.05);border:1px solid var(--line)} .pjp-seg button{font:inherit;font-size:.86rem;font-weight:800;cursor:pointer; padding:10px 22px;border-radius:100px;border:0;background:transparent;color:var(--tx-3); transition:.2s} .pjp-seg button:hover{color:#fff} .pjp-seg button[aria-pressed=true]{color:#03212A; background:linear-gradient(135deg,var(--cyan-3),var(--cyan) 58%,var(--cyan-d)); box-shadow:0 8px 20px -10px rgba(34,211,238,.85)} .pjp-save{font-size:.77rem;font-weight:700;color:var(--cyan-3)} /* نوار صداقت — سبک و بدون رنگ رقیب */ .pjp-honest{display:flex;align-items:center;gap:11px;flex-wrap:wrap;justify-content:center; margin:0 0 clamp(28px,3.8vw,42px);padding:13px 20px;border-radius:13px; background:rgba(255,255,255,.03);border:1px solid var(--line); font-size:.85rem;line-height:1.95;color:var(--tx-2);text-align:center} .pjp-honest svg{flex:none;color:var(--tx-3)} .pjp-honest strong{color:#fff;font-weight:800} .pjp-honest a{color:var(--cyan-2);font-weight:800;text-decoration:underline;text-underline-offset:3px} .pjp-honest a:hover{color:#fff} /* ═══════════════════════════════════════════════════════════════════ ۲. کارت‌ها — شش بلوک، نه یازده ═══════════════════════════════════════════════════════════════════ */ .pjp-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(12px,1.5vw,16px)} .pjp-card{position:relative;display:flex;flex-direction:column;overflow:hidden; flex:1 1 262px;max-width:290px;border-radius:20px; padding:clamp(24px,2.8vw,30px) clamp(20px,2.2vw,24px) clamp(20px,2.4vw,26px); background:var(--panel);border:1px solid var(--line); transition:transform .3s cubic-bezier(.22,1,.36,1),border-color .3s,background .3s} .pjp-card:hover{transform:translateY(-5px);border-color:var(--line-2);background:var(--panel-2)} /* ⭐ فقط کارت پیشنهادی رنگ دارد */ .pjp-card--star{background:linear-gradient(170deg,#0A1E2C 0%,#070F1E 88%); border-color:rgba(34,211,238,.42); box-shadow:0 0 0 1px rgba(34,211,238,.14),0 30px 58px -30px rgba(34,211,238,.5)} .pjp-card--star:hover{border-color:rgba(34,211,238,.7); box-shadow:0 0 0 1px rgba(34,211,238,.22),0 40px 72px -30px rgba(34,211,238,.65)} .pjp-flag{display:inline-flex;align-items:center;gap:6px;align-self:flex-start; margin-bottom:14px;padding:5px 12px;border-radius:99px; font-size:.68rem;font-weight:800;color:#03212A; background:linear-gradient(135deg,var(--cyan-3),var(--cyan))} .pjp-flag svg{flex:none} /* فاصله‌ی معادل در کارت‌های بدون نشان، تا قیمت‌ها هم‌تراز بمانند */ .pjp-card:not(.pjp-card--star) .pjp-name{margin-block-start:35px} /* ── ۱ · نام ── */ .pjp-name{font-family:var(--display);font-size:1.16rem;font-weight:900;color:#fff; margin:0 0 14px;line-height:1.4} /* ── ۲ · قیمت — بزرگ‌ترین عنصر کارت ── */ .pjp-price{margin-bottom:6px;min-height:52px} .pjp-amount{display:block;font-family:var(--display); font-size:clamp(1.9rem,4vw,2.45rem);font-weight:900;color:#fff;line-height:1.1; letter-spacing:-.02em;transition:opacity .22s ease,transform .22s ease} .pjp-amount i{font-style:normal;font-size:.38em;font-weight:700;color:var(--tx-3); letter-spacing:0} .pjp-card.swapping .pjp-amount{opacity:0;transform:translateY(6px)} .pjp-cycle{display:block;font-size:.74rem;color:var(--tx-3);line-height:1.8; margin-bottom:18px;min-height:1.4em} .pjp-cycle b{color:var(--cyan-3);font-weight:700} /* ── ۳ · یک خط: برای کیست و چرا این قیمت ── */ .pjp-fit{margin:0 0 18px;padding-block:14px;font-size:.81rem;line-height:1.9; color:var(--tx-2);border-block:1px solid var(--line)} /* ── ۴ · مشخصات ── */ .pjp-specs{list-style:none;margin:0 0 22px;padding:0;flex:1} .pjp-specs li{display:flex;align-items:baseline;justify-content:space-between;gap:10px; padding:8px 0;font-size:.82rem;color:var(--tx-3)} .pjp-specs b{font-family:var(--mono);direction:ltr;font-size:.86rem;font-weight:700;color:#fff} /* ── ۵ · دکمه ── */ .pjp-go{display:flex;align-items:center;justify-content:center;gap:8px;font-weight:800; font-size:.89rem;padding:14px 18px;border-radius:12px;text-decoration:none; color:#DCEBF5;border:1px solid var(--line-2);background:rgba(255,255,255,.04); transition:.2s} .pjp-go:hover{color:#03212A;border-color:transparent; background:linear-gradient(135deg,var(--cyan-3),var(--cyan) 58%,var(--cyan-d)); box-shadow:0 12px 26px -12px rgba(34,211,238,.9)} .pjp-card--star .pjp-go{color:#03212A;border-color:transparent; background:linear-gradient(135deg,var(--cyan-3),var(--cyan) 58%,var(--cyan-d)); box-shadow:0 12px 26px -12px rgba(34,211,238,.9)} .pjp-card--star .pjp-go:hover{box-shadow:0 18px 34px -12px rgba(34,211,238,1)} /* ═══════════════════════════════════════════════════════════════════ ۳. نوار اطمینان — یک خط، بدون قاب ═══════════════════════════════════════════════════════════════════ */ .pjp-safe{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 28px; margin-top:clamp(26px,3.4vw,38px);padding-block-start:22px; border-block-start:1px solid var(--line)} .pjp-safe span{display:inline-flex;align-items:center;gap:8px; font-size:.83rem;font-weight:600;color:var(--tx-2)} .pjp-safe svg{flex:none;color:var(--cyan-2)} /* ═══════════════════════════════════════════════════════════════════ ۴. واکنش‌گرایی ═══════════════════════════════════════════════════════════════════ */ @media (max-width:560px){ .pjp-card{flex:1 1 100%;max-width:380px} .pjp-card:not(.pjp-card--star) .pjp-name{margin-block-start:0} .pjp-seg{width:100%} .pjp-seg button{flex:1} .pjp-safe{gap:12px 20px} } /* ═══════════════════════════════════════════════════════════════════ ۵. کاهش حرکت ═══════════════════════════════════════════════════════════════════ */ @media (prefers-reduced-motion:reduce){ .pjp *,.pjp *::before,.pjp *::after{ animation:none !important;transition-duration:.001ms !important} } /* ═══ ۰۶ · مقایسه‌ی پلن‌ها — .pjm- ═══════════════════════════ */ /* ═══════════════════════════════════════════════════════════════════ فونت‌ها — اگر بلوک دیگری در همین صفحه هست، این را حذف کنید ═══════════════════════════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════════════════ ۰. پایه — روشن، توکن روی خودِ سکشن ═══════════════════════════════════════════════════════════════════ */ .pjm{ --paper:#FFFFFF; --paper-2:#F6F9FD; --paper-3:#ECF2F8; --line:#E3E9F2; --line-2:#CAD5E5; --tx:#0C1424; --tx-2:#53617C; --tx-3:#8492AB; --cyan:#0891B2; --cyan-2:#22D3EE; --cyan-3:#67E8F9; --cyan-s:rgba(34,211,238,.10); --cyan-g:rgba(8,145,178,.4); position:relative;overflow:hidden;isolation:isolate;color:var(--tx); background:linear-gradient(180deg,#FBFCFE 0%,#EFF4FA 100%); padding-block:clamp(56px,8vw,104px); } .pjm-wrap{width:min(1220px,100% - 2*var(--pad));margin-inline:auto;position:relative;z-index:2} .pjm :is(a,button):focus-visible{outline:2px solid var(--cyan-2);outline-offset:3px;border-radius:10px} .pjm::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.55; background-image:radial-gradient(circle at 1px 1px,rgba(12,20,36,.055) 1px,transparent 0); background-size:24px 24px; -webkit-mask-image:linear-gradient(180deg,#000,transparent 54%); mask-image:linear-gradient(180deg,#000,transparent 54%)} /* ═══════════════════════════════════════════════════════════════════ ۱. سرتیتر ═══════════════════════════════════════════════════════════════════ */ .pjm-head{text-align:center;max-width:62ch;margin:0 auto clamp(22px,3vw,32px)} .pjm-eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:.75rem;font-weight:700; color:var(--tx-3);margin:0 0 14px} .pjm-eyebrow::before,.pjm-eyebrow::after{content:"";width:26px;height:1px; background:linear-gradient(90deg,transparent,var(--cyan-2))} .pjm-h2{font-family:var(--display);font-size:clamp(1.55rem,3.6vw,2.5rem);font-weight:900; line-height:1.34;letter-spacing:-.016em;margin:0 0 12px;color:var(--tx);position:relative;z-index:0} .pjm-h2 em{font-style:normal;color:var(--cyan);position:relative} .pjm-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(--cyan-s),transparent)} .pjm-lead{font-size:clamp(.93rem,1.5vw,1.03rem);line-height:2;color:var(--tx-2);margin:0} /* ═══════════════════════════════════════════════════════════════════ ۲. انتخابگر موبایل ═══════════════════════════════════════════════════════════════════ */ .pjm-pick{display:none;margin-bottom:20px} .pjm-pick p{margin:0 0 12px;font-size:.83rem;color:var(--tx-2);text-align:center;line-height:1.8} .pjm-pick p b{color:var(--tx);font-weight:800} .pjm-chips{display:flex;flex-wrap:wrap;gap:7px;justify-content:center} .pjm-chip{font:inherit;font-size:.81rem;font-weight:700;cursor:pointer; padding:9px 16px;border-radius:99px;border:1px solid var(--line-2); background:var(--paper);color:var(--tx-2);transition:.16s;white-space:nowrap} .pjm-chip:hover{border-color:var(--cyan-2);color:var(--cyan)} .pjm-chip[aria-pressed=true]{color:#fff;border-color:transparent; background:linear-gradient(135deg,var(--cyan-2),var(--cyan)); box-shadow:0 8px 18px -9px var(--cyan)} /* ═══════════════════════════════════════════════════════════════════ ۳. جدول ═══════════════════════════════════════════════════════════════════ */ .pjm-box{border-radius:22px;background:var(--paper);border:1px solid var(--line); padding:clamp(8px,1.4vw,16px) clamp(6px,1.2vw,14px); box-shadow:0 2px 6px rgba(12,20,36,.05),0 28px 54px -34px rgba(12,20,36,.3)} .pjm-scroll{overflow-x:auto;scrollbar-width:thin;border-radius:16px} .pjm-tbl{width:100%;min-width:800px;border-collapse:separate;border-spacing:0} /* سربرگ */ .pjm-tbl thead th{padding:20px 12px 18px;text-align:center;vertical-align:bottom; font-family:var(--display);font-size:1rem;font-weight:900;color:var(--tx);white-space:nowrap} .pjm-tbl thead th:first-child{text-align:start;font-family:inherit;font-size:.77rem; font-weight:700;color:var(--tx-3);padding-inline-start:20px} .pjm-price{display:block;font-family:var(--display);font-size:1.26rem;font-weight:900; color:var(--cyan);line-height:1.25;margin-top:8px} .pjm-price small{display:block;font-family:var(--mono);direction:ltr;font-size:.58rem; font-weight:600;color:var(--tx-3);margin-top:3px;letter-spacing:.04em} .pjm-badge{display:block;width:fit-content;margin:0 auto 10px;padding:4px 12px;border-radius:99px; font-family:var(--display);font-size:.67rem;font-weight:800;color:#03212A; background:linear-gradient(135deg,var(--cyan-3),var(--cyan-2)); box-shadow:0 6px 14px -7px var(--cyan)} /* ردیف گروه */ .pjm-g th{padding:16px 12px 10px 20px !important;font-family:inherit !important; font-size:.72rem !important;font-weight:800 !important;letter-spacing:.06em; color:var(--tx-3) !important;border:0 !important;background:transparent !important} /* بدنه */ .pjm-tbl tbody th{padding:16px 12px 16px 20px;text-align:start;font-size:.85rem;font-weight:700; color:var(--tx-2);white-space:nowrap;border-block-start:1px solid var(--line)} .pjm-lbl{display:flex;align-items:center;gap:10px} .pjm-lbl svg{flex:none;color:var(--cyan-2)} .pjm-tbl tbody td{padding:16px 12px;text-align:center;font-size:.92rem;font-weight:700; color:var(--tx);border-block-start:1px solid var(--line)} .pjm-tbl tbody tr:not(.pjm-g):nth-of-type(even) th, .pjm-tbl tbody tr:not(.pjm-g):nth-of-type(even) td{background:rgba(12,20,36,.016)} .pjm-tbl tbody tr:not(.pjm-g):hover th, .pjm-tbl tbody tr:not(.pjm-g):hover td{background:var(--cyan-s)} /* ⭐ ستون پیشنهادی */ .pjm-tbl .pjm-star{background:linear-gradient(180deg,var(--cyan-s),rgba(34,211,238,.04)) !important; box-shadow:inset 1px 0 0 rgba(8,145,178,.24),inset -1px 0 0 rgba(8,145,178,.24)} .pjm-tbl thead .pjm-star{border-radius:18px 18px 0 0;padding-block-start:16px; box-shadow:inset 1px 1px 0 rgba(8,145,178,.24),inset -1px 0 0 rgba(8,145,178,.24)} .pjm-tbl tbody tr:last-child .pjm-star{border-radius:0 0 18px 18px; box-shadow:inset 1px 0 0 rgba(8,145,178,.24),inset -1px 0 0 rgba(8,145,178,.24), inset 0 -1px 0 rgba(8,145,178,.24)} .pjm-tbl tbody tr:not(.pjm-g):hover .pjm-star{background:rgba(34,211,238,.18) !important} .pjm-g .pjm-star{box-shadow:none !important} /* ردیف سفارش */ .pjm-act th,.pjm-act td{padding-block:22px} .pjm-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px; font-size:.84rem;font-weight:800;padding:12px 20px;border-radius:11px;text-decoration:none; color:var(--cyan);border:1px solid var(--line-2);background:var(--paper);transition:.18s; white-space:nowrap} .pjm-btn:hover{color:#fff;border-color:transparent; background:linear-gradient(135deg,var(--cyan-2),var(--cyan)); box-shadow:0 10px 22px -10px var(--cyan)} .pjm-btn--star{color:#fff;border-color:transparent; background:linear-gradient(135deg,var(--cyan-2),var(--cyan)); box-shadow:0 10px 22px -10px var(--cyan)} .pjm-btn--star:hover{box-shadow:0 14px 28px -10px var(--cyan)} /* پانویس */ .pjm-note{display:flex;gap:11px;align-items:flex-start;margin:clamp(12px,1.8vw,18px) 0 0; padding:16px 20px;border-radius:16px;background:var(--paper-2); font-size:.81rem;line-height:2;color:var(--tx-2)} .pjm-note svg{flex:none;margin-top:5px;color:var(--cyan)} .pjm-note b{color:var(--tx);font-weight:800} /* ═══════════════════════════════════════════════════════════════════ ۴. موبایل — انتخابگر فعال، ستون‌های انتخاب‌نشده پنهان ═══════════════════════════════════════════════════════════════════ */ @media (max-width:1000px){ .pjm-pick{display:block} .pjm-tbl{min-width:0} .pjm-scroll{overflow-x:visible} .pjm-tbl [data-p].is-off{display:none} .pjm-tbl thead th{font-size:.92rem;padding:16px 8px 14px} .pjm-tbl thead th:first-child{padding-inline-start:12px} .pjm-tbl tbody th{padding:14px 8px 14px 12px;font-size:.8rem;white-space:normal} .pjm-tbl tbody td{padding:14px 8px;font-size:.86rem} .pjm-g th{padding-inline-start:12px !important} .pjm-price{font-size:1.08rem} .pjm-lbl svg{display:none} } @media (max-width:430px){ .pjm-tbl thead th{font-size:.84rem} .pjm-tbl tbody th{font-size:.75rem} .pjm-tbl tbody td{font-size:.8rem;padding:12px 5px} .pjm-price{font-size:.94rem} .pjm-btn{padding:11px 12px;font-size:.78rem} .pjm-chip{padding:8px 12px;font-size:.76rem} } /* ═══════════════════════════════════════════════════════════════════ ۵. کاهش حرکت ═══════════════════════════════════════════════════════════════════ */ @media (prefers-reduced-motion:reduce){ .pjm *,.pjm *::before,.pjm *::after{transition-duration:.001ms !important} } /* ═══ ۰۷ · کارنامه‌ی سازگاری — .pjw- ════════════════════════ */ /* ═══════════════════════════════════════════════════════════════════ فونت‌ها — اگر بلوک دیگری در همین صفحه هست، این را حذف کنید ═══════════════════════════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════════════════ ۰. پایه — تیره، پنل کنترل ═══════════════════════════════════════════════════════════════════ */ .pjw{ --ink:#04070F; --panel:#080E1C; --panel-2:#0C1526; --well:#050A15; --cyan:#22D3EE; --cyan-2:#67E8F9; --cyan-3:#A5F3FC; --cyan-d:#0891B2; --green:#34D399; --tx:#EDF3FB; --tx-2:#8FA2BE; --tx-3:#5F7391; --line:rgba(103,232,249,.12); --line-2:rgba(103,232,249,.26); position:relative;overflow:hidden;isolation:isolate;background:var(--ink);color:var(--tx); padding-block:clamp(56px,8vw,104px); } .pjw-wrap{width:min(1180px,100% - 2*var(--pad));margin-inline:auto;position:relative;z-index:3} .pjw :is(a,button):focus-visible{outline:2px solid var(--cyan);outline-offset:3px;border-radius:10px} /* شبکه‌ی میلی‌متری */ .pjw::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.5; background-image: linear-gradient(rgba(103,232,249,.05) 1px,transparent 1px), linear-gradient(90deg,rgba(103,232,249,.05) 1px,transparent 1px), linear-gradient(rgba(103,232,249,.10) 1px,transparent 1px), linear-gradient(90deg,rgba(103,232,249,.10) 1px,transparent 1px); background-size:16px 16px,16px 16px,80px 80px,80px 80px; -webkit-mask-image:radial-gradient(88% 66% at 50% 0%,#000,transparent 78%); mask-image:radial-gradient(88% 66% at 50% 0%,#000,transparent 78%)} .pjw::after{content:"";position:absolute;z-index:0;pointer-events:none; inset-block-start:-14%;inset-inline-start:50%;translate:-50% 0; width:72vw;max-width:900px;aspect-ratio:1;border-radius:50%;filter:blur(106px); background:radial-gradient(circle,rgba(34,211,238,.15),transparent 68%)} /* ═══════════════════════════════════════════════════════════════════ ۱. سرتیتر ═══════════════════════════════════════════════════════════════════ */ .pjw-head{text-align:center;max-width:64ch;margin:0 auto clamp(26px,3.4vw,38px)} .pjw-eyebrow{display:inline-flex;align-items:center;gap:9px;padding:6px 15px;border-radius:99px; font-family:var(--mono);direction:ltr;font-size:.65rem;letter-spacing:.14em; color:var(--cyan-3);background:rgba(34,211,238,.09);border:1px solid var(--line-2); margin:0 0 16px} .pjw-h2{font-family:var(--display);font-size:clamp(1.6rem,3.7vw,2.6rem);font-weight:900; line-height:1.34;letter-spacing:-.016em;margin:0 0 12px;color:#fff} .pjw-h2 em{font-style:normal;color:var(--cyan-2)} .pjw-lead{font-size:clamp(.94rem,1.5vw,1.04rem);line-height:2.05;color:var(--tx-2);margin:0} .pjw-lead strong{color:#fff;font-weight:700} /* ═══════════════════════════════════════════════════════════════════ ۲. ⭐ پنل کنترل ═══════════════════════════════════════════════════════════════════ */ .pjw-panel{border-radius:22px;overflow:hidden; background:linear-gradient(165deg,var(--panel) 0%,#050A16 88%); border:1px solid var(--line); box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 30px 58px -34px #000} /* نوار وضعیت بالای پنل */ .pjw-bar{display:flex;align-items:center;gap:12px;padding:13px clamp(16px,2.2vw,22px); border-block-end:1px solid var(--line);background:rgba(255,255,255,.025)} .pjw-led{display:flex;gap:6px;flex:none} .pjw-led i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.14)} .pjw-led i:first-child{background:var(--green); box-shadow:0 0 8px 1px rgba(52,211,153,.7);animation:pjwBlink 2.6s ease-in-out infinite} @keyframes pjwBlink{0%,100%{opacity:.45}50%{opacity:1}} .pjw-bar b{font-family:var(--mono);direction:ltr;font-size:.68rem;letter-spacing:.1em; color:var(--tx-3);font-weight:700} .pjw-bar-ok{display:inline-flex;align-items:center;gap:7px;margin-inline-start:auto; font-size:.73rem;font-weight:700;color:var(--green)} .pjw-bar-ok svg{flex:none} /* تب‌ها */ .pjw-tabs{display:flex;gap:4px;padding:10px clamp(10px,1.6vw,14px);overflow-x:auto; scrollbar-width:none;border-block-end:1px solid var(--line)} .pjw-tabs::-webkit-scrollbar{display:none} .pjw-tab{flex:none;display:inline-flex;align-items:center;gap:9px;font:inherit; font-size:.86rem;font-weight:800;cursor:pointer;white-space:nowrap; padding:11px 18px;border-radius:12px;border:1px solid transparent; background:transparent;color:var(--tx-3);transition:.2s} .pjw-tab svg{flex:none;opacity:.7;transition:opacity .2s} .pjw-tab:hover{color:#fff;background:rgba(255,255,255,.04)} .pjw-tab[aria-selected=true]{color:#03212A;border-color:transparent; background:linear-gradient(135deg,var(--cyan-3),var(--cyan) 58%,var(--cyan-d)); box-shadow:0 10px 22px -11px rgba(34,211,238,.9)} .pjw-tab[aria-selected=true] svg{opacity:1} /* بدنه */ .pjw-body{padding:clamp(18px,2.4vw,26px) clamp(16px,2.2vw,24px) clamp(20px,2.6vw,28px)} .pjw-pane{display:none} .pjw-pane.on{display:block;animation:pjwIn .4s cubic-bezier(.22,1,.36,1) both} @keyframes pjwIn{from{opacity:0;transform:translateY(12px)}} .pjw-sum{display:flex;gap:11px;align-items:flex-start;margin:0 0 18px;padding:13px 16px; border-radius:13px;font-size:.87rem;line-height:1.95;color:#C2D4EA; background:rgba(34,211,238,.07);border:1px solid rgba(34,211,238,.18)} .pjw-sum svg{flex:none;margin-top:4px;color:var(--cyan-2)} /* ردیف‌های سازگاری */ .pjw-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr); gap:1px;background:var(--line);border-radius:14px;overflow:hidden; border:1px solid var(--line)} .pjw-list li{display:flex;align-items:flex-start;gap:12px; padding:15px clamp(13px,1.8vw,18px);background:var(--well);transition:background .2s} .pjw-list li:hover{background:var(--panel-2)} .pjw-ok{flex:none;width:22px;height:22px;border-radius:7px;display:grid;place-items:center; margin-top:1px;color:#03212A;background:linear-gradient(140deg,var(--cyan-3),var(--cyan)); box-shadow:0 6px 14px -7px var(--cyan)} .pjw-tx{min-width:0;flex:1} .pjw-tx b{display:block;font-size:.87rem;font-weight:800;color:#fff;line-height:1.55} .pjw-tx b span{font-family:var(--mono);direction:ltr} .pjw-tx small{display:block;font-size:.78rem;color:var(--tx-3);line-height:1.85;margin-top:3px} .pjw-val{display:inline-block;margin-inline-start:8px;padding:2px 9px;border-radius:99px; font-family:var(--mono);direction:ltr;font-size:.68rem;font-weight:700; color:var(--cyan-2);background:rgba(34,211,238,.11);vertical-align:middle} /* پانویس */ .pjw-note{display:flex;gap:11px;align-items:flex-start;margin:clamp(14px,2vw,20px) 0 0; padding:16px 20px;border-radius:16px;background:rgba(255,255,255,.03); border:1px solid var(--line);font-size:.82rem;line-height:2;color:var(--tx-2)} .pjw-note svg{flex:none;margin-top:5px;color:var(--cyan-2)} .pjw-note b{color:#fff;font-weight:800} .pjw-note a{color:var(--cyan-2);font-weight:800;text-decoration:underline;text-underline-offset:3px} .pjw-note a:hover{color:#fff} /* ═══════════════════════════════════════════════════════════════════ ۳. واکنش‌گرایی ═══════════════════════════════════════════════════════════════════ */ @media (max-width:760px){ .pjw-list{grid-template-columns:1fr} .pjw-tab{padding:10px 14px;font-size:.81rem} .pjw-tab svg{display:none} .pjw-bar-ok{display:none} } /* ═══════════════════════════════════════════════════════════════════ ۴. کاهش حرکت ═══════════════════════════════════════════════════════════════════ */ @media (prefers-reduced-motion:reduce){ .pjw *,.pjw *::before,.pjw *::after{ animation:none !important;transition-duration:.001ms !important} } /* ═══ ۰۸ · تعهد انسانی — .pjs- ══════════════════════════════ */ /* ═══════════════════════════════════════════════════════════════════ فونت‌ها — اگر بلوک دیگری در همین صفحه هست، این را حذف کنید ═══════════════════════════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════════════════ ۰. پایه — تیره‌ی لاجوردی، هم‌رنگ فضای عکس ═══════════════════════════════════════════════════════════════════ */ .pjs{ --ink:#04070F; --panel:#080E1C; --cyan:#22D3EE; --cyan-2:#67E8F9; --cyan-3:#A5F3FC; --cyan-d:#0891B2; --lapis:#1E3A8A; --lapis-2:#7C9BFF; --gold-2:#F5A524; --gold-3:#FFD27A; --tx:#EEF3FB; --tx-2:#9AACC6; --tx-3:#6C7E9A; --line:rgba(255,255,255,.10); --line-2:rgba(255,255,255,.20); position:relative;overflow:hidden;isolation:isolate;background:var(--ink);color:var(--tx); padding-block:clamp(56px,8vw,100px); } .pjs-wrap{width:min(1240px,100% - 2*var(--pad));margin-inline:auto;position:relative;z-index:3} .pjs :is(a,button):focus-visible{outline:2px solid var(--cyan);outline-offset:3px;border-radius:10px} .pjs::after{content:"";position:absolute;z-index:0;pointer-events:none; inset-block-start:-16%;inset-inline-start:50%;translate:-50% 0; width:72vw;max-width:920px;aspect-ratio:1;border-radius:50%;filter:blur(110px); background:radial-gradient(circle,rgba(34,211,238,.14),rgba(30,58,138,.10) 48%,transparent 70%)} /* ═══════════════════════════════════════════════════════════════════ ۱. سرتیتر ═══════════════════════════════════════════════════════════════════ */ .pjs-head{text-align:center;max-width:62ch;margin:0 auto clamp(26px,3.4vw,38px)} .pjs-eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:.76rem;font-weight:700; color:var(--tx-3);margin:0 0 14px} .pjs-eyebrow::before,.pjs-eyebrow::after{content:"";width:26px;height:1px; background:linear-gradient(90deg,transparent,var(--cyan))} .pjs-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 12px;color:#fff} .pjs-h2 em{font-style:normal;color:var(--cyan-2)} .pjs-lead{font-size:clamp(.94rem,1.5vw,1.04rem);line-height:2.05;color:var(--tx-2);margin:0} .pjs-lead strong{color:#fff;font-weight:700} /* ═══════════════════════════════════════════════════════════════════ ۲. ⭐ صحنه‌ی عکس — تمام‌عرض، متن روی تصویر ═══════════════════════════════════════════════════════════════════ */ .pjs-stage{position:relative;overflow:hidden;border-radius:26px; border:1px solid var(--line-2); box-shadow:0 34px 66px -34px #000,inset 0 1px 0 rgba(255,255,255,.1)} .pjs-photo{position:relative;z-index:0} .pjs-photo img{width:100%;aspect-ratio:16/9;object-fit:cover;object-position:center 30%} /* گرادیان خوانایی — از پایین تیره می‌شود */ .pjs-veil{position:absolute;inset:0;z-index:1;pointer-events:none; background: linear-gradient(180deg,rgba(4,7,15,.34) 0%,rgba(4,7,15,.10) 26%, rgba(4,7,15,.72) 62%,rgba(4,7,15,.96) 100%), linear-gradient(90deg,rgba(4,7,15,.5) 0%,transparent 44%)} /* درخشش فیروزه‌ای ملایم از پایین */ .pjs-glow{position:absolute;inset-block-end:-24%;inset-inline-start:50%;translate:-50% 0; z-index:2;pointer-events:none;width:78%;aspect-ratio:2/1;border-radius:50%;filter:blur(70px); background:radial-gradient(ellipse,rgba(34,211,238,.22),transparent 70%); animation:pjsBreathe 8s ease-in-out infinite} @keyframes pjsBreathe{0%,100%{opacity:.7}50%{opacity:1}} /* نشان شناور بالای عکس */ .pjs-tag{position:absolute;z-index:4;inset-block-start:clamp(16px,2.4vw,24px); inset-inline-end:clamp(16px,2.4vw,24px); display:flex;align-items:center;gap:11px;padding:11px 16px;border-radius:14px; background:rgba(4,7,15,.72);border:1px solid var(--line-2); backdrop-filter:blur(14px) saturate(1.2); box-shadow:0 18px 38px -22px rgba(0,0,0,.95)} .pjs-tag-ic{flex:none;width:34px;height:34px;border-radius:10px;display:grid;place-items:center; color:#03212A;background:linear-gradient(140deg,var(--cyan-2),var(--cyan))} .pjs-tag b{display:block;font-size:.86rem;font-weight:800;color:#fff;line-height:1.5} .pjs-tag small{display:block;font-size:.73rem;color:var(--tx-3);margin-top:2px} /* متن روی عکس */ .pjs-over{position:relative;z-index:5; padding:clamp(24px,4vw,44px) clamp(20px,3.4vw,44px) clamp(22px,3.4vw,38px); margin-block-start:clamp(-190px,-22vw,-120px)} .pjs-over-in{max-width:66ch} .pjs-quote{position:relative;margin:0 0 22px} .pjs-quote::before{content:"”";position:absolute;z-index:0;pointer-events:none;user-select:none; inset-block-start:-.34em;inset-inline-start:-.08em; font-family:var(--display);font-size:7rem;line-height:1;color:var(--cyan);opacity:.16} .pjs-quote q{position:relative;display:block;quotes:none; font-family:var(--display);font-size:clamp(1.06rem,2.2vw,1.5rem);font-weight:900; line-height:1.85;color:#fff;text-shadow:0 2px 24px rgba(0,0,0,.8)} .pjs-quote q b{color:var(--cyan-3);font-weight:inherit} /* امضا */ .pjs-sign{display:flex;align-items:center;gap:13px;padding-block-start:16px; border-block-start:1px dashed var(--line-2)} .pjs-sign-mark{flex:none;width:78px;color:#fff} .pjs-sign-mark path{fill:none;stroke:currentColor;stroke-width:2.1;stroke-linecap:round; stroke-linejoin:round;stroke-dasharray:230;stroke-dashoffset:230; transition:stroke-dashoffset 1.5s cubic-bezier(.3,.9,.4,1)} .pjs.inked .pjs-sign-mark path{stroke-dashoffset:0} .pjs-sign b{display:block;font-family:var(--display);font-size:.98rem;font-weight:900;color:#fff} .pjs-sign small{display:block;font-size:.78rem;color:var(--tx-3);margin-top:2px} /* ═══════════════════════════════════════════════════════════════════ ۳. دو تعهد ═══════════════════════════════════════════════════════════════════ */ .pjs-vow{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(13px,1.8vw,18px); margin-top:clamp(14px,2vw,20px)} .pjs-card{position:relative;display:flex;gap:15px;overflow:hidden; border-radius:20px;padding:clamp(20px,2.6vw,26px); background:linear-gradient(165deg,var(--panel) 0%,#050A16 88%); border:1px solid var(--line); box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 24px 46px -32px #000; transition:transform .3s cubic-bezier(.22,1,.36,1),border-color .3s,box-shadow .3s} .pjs-card:hover{transform:translateY(-5px);border-color:var(--ac); box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 34px 60px -30px var(--ag)} .pjs-card::before{content:"";position:absolute;z-index:0;pointer-events:none; inset-block-start:-40%;inset-inline-end:-18%;width:66%;aspect-ratio:1;border-radius:50%; background:radial-gradient(circle,var(--as),transparent 68%)} .pjs-card>*{position:relative;z-index:1} .pjs-card[data-c=cyan] {--a:#0891B2;--a2:#67E8F9;--ac:rgba(34,211,238,.5);--ag:rgba(34,211,238,.4);--as:rgba(34,211,238,.13)} .pjs-card[data-c=lapis]{--a:#1E3A8A;--a2:#7C9BFF;--ac:rgba(124,155,255,.5);--ag:rgba(124,155,255,.4);--as:rgba(124,155,255,.14)} .pjs-card-ic{flex:none;width:46px;height:46px;border-radius:14px;display:grid;place-items:center; color:#fff;background:linear-gradient(140deg,var(--a2),var(--a)); box-shadow:0 12px 26px -12px var(--ag),inset 0 1px 0 rgba(255,255,255,.3); transition:transform .34s cubic-bezier(.22,1.5,.5,1)} .pjs-card:hover .pjs-card-ic{transform:scale(1.09) rotate(-7deg)} .pjs-card h3{font-family:var(--display);font-size:1.06rem;font-weight:900;color:#fff; margin:0 0 8px;line-height:1.5} .pjs-card p{margin:0;font-size:.86rem;line-height:2;color:var(--tx-2)} .pjs-card p strong{color:#fff;font-weight:700} /* ═══════════════════════════════════════════════════════════════════ ۴. واکنش‌گرایی ═══════════════════════════════════════════════════════════════════ */ @media (max-width:820px){ .pjs-vow{grid-template-columns:1fr} .pjs-photo img{aspect-ratio:4/3;object-position:center 24%} .pjs-over{margin-block-start:clamp(-150px,-30vw,-90px)} .pjs-tag{inset-inline:auto clamp(12px,3vw,16px);padding:9px 13px} .pjs-tag small{display:none} } @media (max-width:520px){ .pjs-photo img{aspect-ratio:3/4;object-position:center 20%} .pjs-tag{display:none} .pjs-quote::before{font-size:5rem} .pjs-sign-mark{width:62px} } /* ═══════════════════════════════════════════════════════════════════ ۵. کاهش حرکت ═══════════════════════════════════════════════════════════════════ */ @media (prefers-reduced-motion:reduce){ .pjs *,.pjs *::before,.pjs *::after{ animation:none !important;transition-duration:.001ms !important} .pjs-sign-mark path{stroke-dashoffset:0} } /* ═══ ۰۹ · راهنمای خرید — .pjg- ═════════════════════════════ */ /* ═══════════════════════════════════════════════════════════════════ فونت‌ها — اگر بلوک دیگری در همین صفحه هست، این را حذف کنید ═══════════════════════════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════════════════ ۰. پایه — روشن و خوانا ═══════════════════════════════════════════════════════════════════ */ .pjg{ --paper:#FFFFFF; --paper-2:#F6F9FD; --paper-3:#ECF2F8; --line:#DFE6F0; --line-2:#C6D2E2; --tx:#101828; --tx-2:#4E5A75; --tx-3:#8894AE; --cyan:#0891B2; --cyan-2:#22D3EE; --cyan-3:#67E8F9; --cyan-s:rgba(34,211,238,.11); position:relative;overflow:hidden;isolation:isolate;color:var(--tx);background:var(--paper); padding-block:clamp(56px,8vw,104px); } .pjg-wrap{width:min(1180px,100% - 2*var(--pad));margin-inline:auto;position:relative;z-index:2} .pjg :is(a,button):focus-visible{outline:2px solid var(--cyan-2);outline-offset:3px;border-radius:8px} .pjg::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%)} /* ═══════════════════════════════════════════════════════════════════ ۱. سرتیتر ═══════════════════════════════════════════════════════════════════ */ .pjg-head{max-width:72ch;margin-bottom:clamp(26px,3.6vw,42px)} .pjg-eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:.75rem;font-weight:700; color:var(--tx-2);margin:0 0 14px} .pjg-eyebrow::before{content:"";width:26px;height:1px; background:linear-gradient(90deg,transparent,var(--cyan-2))} .pjg-h2{font-family:var(--display);font-size:clamp(1.6rem,3.8vw,2.6rem);font-weight:900; line-height:1.32;letter-spacing:-.018em;margin:0 0 14px;color:var(--tx);position:relative;z-index:0} .pjg-h2 em{font-style:normal;color:var(--cyan);position:relative} .pjg-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,var(--cyan-s),transparent)} .pjg-lead{font-size:clamp(.94rem,1.5vw,1.05rem);line-height:2.05;color:var(--tx-2);margin:0} /* ═══════════════════════════════════════════════════════════════════ ۲. چیدمان و فهرست زنده ═══════════════════════════════════════════════════════════════════ */ .pjg-grid{display:grid;grid-template-columns:262px 1fr;gap:clamp(24px,4vw,54px);align-items:start} .pjg-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)} .pjg-toc-h{padding:15px 18px 13px;border-block-end:1px solid var(--line);background:var(--paper-2)} .pjg-toc-h b{display:block;font-size:.82rem;font-weight:800;color:var(--tx);margin-bottom:8px} .pjg-meta{display:flex;align-items:center;gap:8px;font-size:.72rem;color:var(--tx-3)} .pjg-meta svg{flex:none} .pjg-bar{height:3px;background:var(--paper-3);border-radius:99px;overflow:hidden;margin-top:10px} .pjg-bar i{display:block;height:100%;width:0;border-radius:99px; background:linear-gradient(90deg,var(--cyan-2),var(--cyan));transition:width .18s linear} .pjg-toc ol{list-style:none;margin:0;padding:6px;counter-reset:toc} .pjg-toc li{counter-increment:toc} .pjg-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} .pjg-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} .pjg-toc a:hover{background:var(--paper-2);color:var(--tx)} .pjg-toc a.on{background:var(--cyan-s);color:var(--cyan);font-weight:700} .pjg-toc a.on::before{background:var(--cyan);color:#fff} /* ═══════════════════════════════════════════════════════════════════ ۳. متن ═══════════════════════════════════════════════════════════════════ */ .pjg-art{max-width:74ch;font-size:.97rem;line-height:2.2;color:#28324A} .pjg-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;color:var(--tx);scroll-margin-top:96px} .pjg-art h3:first-of-type{margin-top:0} .pjg-art h3 span{display:block;font-family:var(--mono);direction:ltr;font-size:.68rem; font-weight:700;letter-spacing:.14em;color:var(--cyan-2);margin-bottom:7px} .pjg-art p{margin:0 0 18px} .pjg-art a{color:var(--cyan);text-decoration:underline;text-underline-offset:3px;font-weight:600} .pjg-art a:hover{color:var(--tx)} .pjg-art strong{font-weight:800;color:var(--tx)} /* خلاصه‌ی یک‌خطی */ .pjg-tldr{display:flex;gap:10px;align-items:flex-start;margin:0 0 22px;padding:12px 16px; border-radius:12px;background:linear-gradient(120deg,var(--cyan-s),rgba(8,145,178,.05)); border:1px solid rgba(34,211,238,.2);font-size:.88rem;line-height:1.95;color:#1B2842} .pjg-tldr svg{flex:none;margin-top:5px;color:var(--cyan)} .pjg-tldr b{font-weight:800;color:var(--cyan)} .pjg-art ul,.pjg-art ol{margin:0 0 20px;padding-inline-start:0;list-style:none} .pjg-art ul li{position:relative;padding-inline-start:24px;margin-bottom:11px} .pjg-art ul li::before{content:"";position:absolute;inset-inline-start:6px;inset-block-start:15px; width:6px;height:6px;border-radius:50%;background:var(--cyan-2)} .pjg-art ol{counter-reset:ax} .pjg-art ol li{counter-increment:ax;position:relative;padding-inline-start:34px;margin-bottom:12px} .pjg-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} .pjg-quote{border-inline-start:3px solid var(--cyan);background:var(--paper-2);padding:18px 22px; border-radius:0 12px 12px 0;margin:0 0 24px;font-size:.93rem} .pjg-quote p:last-child{margin-bottom:0} .pjg-fig{margin:0 0 26px;border:1px solid var(--line);border-radius:14px;background:var(--paper-2); padding:20px;overflow:hidden} .pjg-fig svg{width:100%;height:auto;display:block} .pjg-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)} .pjg-tbl{width:100%;border-collapse:collapse;margin:0 0 24px;font-size:.88rem; border:1px solid var(--line);border-radius:12px;overflow:hidden} .pjg-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)} .pjg-tbl td{padding:12px 14px;border-block-start:1px solid var(--line);color:var(--tx-2)} .pjg-tbl td:first-child{font-weight:700;color:var(--tx)} /* ═══════════════════════════════════════════════════════════════════ ۴. واکنش‌گرایی ═══════════════════════════════════════════════════════════════════ */ @media (max-width:1080px){ .pjg-grid{grid-template-columns:1fr} .pjg-toc{position:static;margin-bottom:10px} .pjg-toc ol{display:grid;grid-template-columns:repeat(2,1fr);gap:2px} } @media (max-width:720px){ .pjg-toc ol{grid-template-columns:1fr} .pjg-art h3{scroll-margin-top:20px} } /* ═══════════════════════════════════════════════════════════════════ ۵. کاهش حرکت ═══════════════════════════════════════════════════════════════════ */ @media (prefers-reduced-motion:reduce){ .pjg *,.pjg *::before,.pjg *::after{ animation:none !important;transition-duration:.001ms !important} } /* ═══ ۱۰ · سوالات متداول و فراخوان — .pjq- .pjz- ════════════ */ /* ═══════════════════════════════════════════════════════════════════ فونت‌ها — اگر بلوک دیگری در همین صفحه هست، این را حذف کنید ═══════════════════════════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════════════════ بخش الف · سوالات متداول ═══════════════════════════════════════════════════════════════════ */ .pjq{ --ink:#050912; --panel:#0A1120; --tx:#EDF2FA; --tx-2:#98A9C6; --tx-3:#6A7C99; --line:rgba(255,255,255,.09); --line-2:rgba(255,255,255,.19); --cyan:#22D3EE; --cyan-2:#67E8F9; --cyan-3:#A5F3FC; --cyan-d:#0891B2; --lapis:#1E3A8A; --lapis-2:#7C9BFF; --teal:#2DD4BF; position:relative;overflow:hidden;isolation:isolate;background:var(--ink);color:var(--tx); padding-block:clamp(56px,8vw,104px); } .pjq-wrap{width:min(900px,100% - 2*var(--pad));margin-inline:auto;position:relative;z-index:3} .pjq :is(a,button,input,summary):focus-visible{outline:2px solid var(--cyan);outline-offset:3px; border-radius:10px} .pjq::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: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%)} .pjq::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(30,58,138,.12) 46%,transparent 68%)} /* سرتیتر */ .pjq-head{text-align:center;margin-bottom:clamp(24px,3.4vw,38px)} .pjq-eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:.75rem;font-weight:700; color:var(--tx-2);margin:0 0 14px} .pjq-eyebrow::before,.pjq-eyebrow::after{content:"";width:26px;height:1px; background:linear-gradient(90deg,transparent,var(--cyan))} .pjq-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} .pjq-h2 em{font-style:normal;color:var(--cyan-2)} .pjq-lead{font-size:clamp(.92rem,1.5vw,1.02rem);line-height:2;color:var(--tx-2); margin:0 auto;max-width:56ch} /* جستجو */ .pjq-search{position:relative;margin-bottom:14px} .pjq-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} .pjq-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} .pjq-search input::placeholder{color:var(--tx-3)} .pjq-search input:focus{border-color:rgba(34,211,238,.5);box-shadow:0 0 0 4px rgba(34,211,238,.1)} .pjq-search:focus-within svg{color:var(--cyan)} .pjq-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)} .pjq-clear.on{display:grid} .pjq-clear:hover{background:rgba(255,255,255,.16);color:#fff} /* فیلتر گروه */ .pjq-tabs{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none; padding-block-end:4px;margin-bottom:22px} .pjq-tabs::-webkit-scrollbar{display:none} .pjq-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} .pjq-tab svg{flex:none;opacity:.75} .pjq-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} .pjq-tab:hover{border-color:var(--line-2);color:#fff} .pjq-tab[aria-pressed=true]{background:linear-gradient(140deg,rgba(34,211,238,.2),rgba(30,58,138,.16)); border-color:rgba(34,211,238,.42);color:#fff} .pjq-tab[aria-pressed=true] b{background:rgba(255,255,255,.18);color:#fff} .pjq-tab[aria-pressed=true] svg{opacity:1;color:var(--cyan-2)} /* آکاردئون */ .pjq-list{display:grid;gap:10px} .pjq-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} .pjq-item[data-g=buy]{--ac:var(--cyan);--ac2:var(--cyan-2);--acs:rgba(34,211,238,.16)} .pjq-item[data-g=tec]{--ac:var(--lapis);--ac2:var(--lapis-2);--acs:rgba(124,155,255,.16)} .pjq-item[data-g=aft]{--ac:#0F766E;--ac2:var(--teal);--acs:rgba(45,212,191,.16)} .pjq-item[data-g=gen]{--ac:var(--cyan-d);--ac2:var(--cyan-2);--acs:rgba(34,211,238,.14)} .pjq-item:hover{border-color:var(--line-2)} .pjq-item[open]{border-color:color-mix(in srgb,var(--ac2) 45%,transparent); background:linear-gradient(160deg,var(--acs),rgba(255,255,255,.02) 46%); box-shadow:0 20px 44px -28px var(--ac2)} .pjq-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} .pjq-item[open]::before{opacity:1} .pjq-item[hidden]{display:none} .pjq-q{display:flex;align-items:center;gap:14px;cursor:pointer;list-style:none; padding:18px clamp(16px,2.2vw,22px);user-select:none} .pjq-q::-webkit-details-marker{display:none} .pjq-n{flex:none;font-family:var(--mono);direction:ltr;font-size:.72rem;font-weight:700; color:var(--tx-3);width:24px;transition:color .25s} .pjq-item[open] .pjq-n{color:var(--ac2)} .pjq-q>span:not(.pjq-n):not(.pjq-plus){flex:1;font-size:.98rem;font-weight:700;color:#fff; line-height:1.75} .pjq-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)} .pjq-plus::before,.pjq-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)} .pjq-plus::before{width:11px;height:2px} .pjq-plus::after{width:2px;height:11px} .pjq-item[open] .pjq-plus{border-color:transparent; background:linear-gradient(140deg,var(--ac2),var(--ac));rotate:180deg} .pjq-item[open] .pjq-plus::before{background:#0B1120} .pjq-item[open] .pjq-plus::after{height:0;background:#0B1120} .pjq-a{display:grid;grid-template-rows:0fr; transition:grid-template-rows .34s cubic-bezier(.22,1,.36,1)} .pjq-item[open] .pjq-a{grid-template-rows:1fr} .pjq-item.closing .pjq-a{grid-template-rows:0fr} .pjq-a>div{overflow:hidden;min-height:0} .pjq-a p{margin:0;padding:0 clamp(16px,2.2vw,22px) 20px 62px; font-size:.9rem;line-height:2.15;color:#B7C4DE} .pjq-a strong{color:#fff;font-weight:700} .pjq-a a{color:var(--ac2);font-weight:700;text-decoration:underline;text-underline-offset:3px} .pjq-a a:hover{color:#fff} .pjq-tag{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)} .pjq-hit{background:rgba(34,211,238,.26);color:#fff;border-radius:3px;padding:0 2px} .pjq-empty{display:none;text-align:center;padding:44px 20px;border-radius:16px; border:1px dashed var(--line-2);background:rgba(255,255,255,.02)} .pjq-empty.on{display:block} .pjq-empty b{display:block;font-family:var(--display);font-size:1.06rem;font-weight:900; color:#fff;margin-bottom:7px} .pjq-empty p{margin:0;font-size:.87rem;line-height:1.95;color:var(--tx-2)} @media (max-width:560px){ .pjq-q{gap:11px;padding:16px 14px} .pjq-n{display:none} .pjq-a p,.pjq-tag{padding-inline-start:14px;margin-inline-start:14px} .pjq-a p{padding-inline-end:14px} } /* ═══════════════════════════════════════════════════════════════════ بخش ب · فراخوان پایانی ═══════════════════════════════════════════════════════════════════ */ .pjz{ --ink:#04070F; --panel:#0A1020; --tx:#EDF2FA; --tx-2:#98A6C2; --tx-3:#68768F; --line:rgba(255,255,255,.10); --line-2:rgba(255,255,255,.20); --cyan:#22D3EE; --cyan-2:#67E8F9; --cyan-3:#A5F3FC; --cyan-d:#0891B2; --lapis:#1E3A8A; --lapis-2:#7C9BFF; position:relative;overflow:hidden;isolation:isolate;background:var(--ink);color:var(--tx); padding-block:clamp(56px,8vw,100px); } .pjz-wrap{width:min(1140px,100% - 2*var(--pad));margin-inline:auto;position:relative;z-index:3} .pjz :is(a,button):focus-visible{outline:2px solid var(--cyan);outline-offset:3px;border-radius:10px} .pjz::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%)} .pjz::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(34,211,238,.18) 0%,rgba(30,58,138,.12) 48%,transparent 68%)} .pjz-head{text-align:center;max-width:60ch;margin:0 auto clamp(28px,4vw,44px)} .pjz-eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:.75rem;font-weight:700; color:var(--tx-2);margin:0 0 14px} .pjz-eyebrow::before,.pjz-eyebrow::after{content:"";width:26px;height:1px; background:linear-gradient(90deg,transparent,var(--cyan))} .pjz-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} .pjz-h2 em{font-style:normal;color:var(--cyan-2)} .pjz-lead{font-size:clamp(.93rem,1.5vw,1.03rem);line-height:2.05;color:var(--tx-2);margin:0} .pjz-lead a{color:var(--cyan-2);font-weight:700;text-decoration:underline;text-underline-offset:3px} /* دو مسیر */ .pjz-paths{display:grid;grid-template-columns:1.3fr .7fr;gap:clamp(14px,2vw,22px);align-items:stretch} .pjz-card{position:relative;display:flex;flex-direction:column;overflow:hidden;border-radius:22px; 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} .pjz-card-h{display:flex;align-items:center;gap:11px;padding:18px clamp(18px,2.2vw,24px); border-block-end:1px solid var(--line)} .pjz-card-h i{width:30px;height:30px;border-radius:9px;flex:none;display:grid;place-items:center; font-style:normal} .pjz-card-h b{font-family:var(--display);font-size:1.02rem;font-weight:900;color:#fff;line-height:1.5} .pjz-card-h small{display:block;font-size:.78rem;color:var(--tx-3);font-weight:500;margin-top:2px} /* مسیر ۱ · شروع */ .pjz-body{padding:clamp(20px,2.6vw,28px);display:flex;flex-direction:column;flex:1} .pjz-price{display:flex;align-items:baseline;gap:9px;margin-bottom:6px} .pjz-price b{font-family:var(--display);font-size:clamp(1.8rem,3.8vw,2.4rem);font-weight:900; color:#fff;line-height:1.1;letter-spacing:-.02em} .pjz-price i{font-style:normal;font-size:.86rem;font-weight:700;color:var(--tx-2)} .pjz-note{margin:0 0 20px;font-size:.8rem;color:var(--tx-3);line-height:1.9} .pjz-list{list-style:none;margin:0 0 22px;padding:0;flex:1} .pjz-list li{display:flex;gap:10px;padding:9px 0;font-size:.85rem;line-height:1.9;color:var(--tx-2); border-block-start:1px solid var(--line)} .pjz-list li:first-child{border-block-start:0} .pjz-list svg{flex:none;margin-top:5px;color:var(--cyan-2)} .pjz-list b{color:#fff;font-weight:700} .pjz-go{display:flex;align-items:center;justify-content:center;gap:9px;font-weight:800; font-size:.95rem;padding:16px 24px;border-radius:13px;text-decoration:none;color:#03212A; background:linear-gradient(135deg,var(--cyan-3),var(--cyan) 55%,var(--cyan-d)); box-shadow:0 14px 32px -12px rgba(34,211,238,.95),inset 0 1px 0 rgba(255,255,255,.5); transition:transform .14s,box-shadow .22s} .pjz-go:active{transform:translateY(1px)} .pjz-go:hover{box-shadow:0 20px 44px -12px rgba(34,211,238,1)} /* مسیر ۲ · مشورت */ .pjz-ask{display:flex;flex-direction:column} .pjz-ask-b{flex:1;display:flex;flex-direction:column;justify-content:center;text-align:center; padding:clamp(20px,2.6vw,28px)} .pjz-ask-ic{width:56px;height:56px;border-radius:17px;margin:0 auto 16px;display:grid; place-items:center;color:#fff;background:linear-gradient(140deg,var(--lapis-2),var(--lapis)); box-shadow:0 14px 30px -14px var(--lapis-2)} .pjz-ask-b b{display:block;font-family:var(--display);font-size:1.1rem;font-weight:900;color:#fff; margin-bottom:10px;line-height:1.5} .pjz-ask-b p{margin:0 0 20px;font-size:.84rem;line-height:1.95;color:var(--tx-2)} .pjz-ask-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:#E8EFFA; border:1px solid var(--line-2);background:rgba(255,255,255,.04);transition:.2s} .pjz-ask-go:hover{border-color:rgba(124,155,255,.6);color:var(--lapis-2); background:rgba(124,155,255,.09)} .pjz-ask-n{margin:12px 0 0;font-size:.74rem;color:var(--tx-3);line-height:1.8} /* نوار اطمینان */ .pjz-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)} .pjz-safe div{display:flex;align-items:center;gap:11px;padding:18px clamp(16px,2vw,22px); border-inline-start:1px solid var(--line)} .pjz-safe div:first-child{border-inline-start:0} .pjz-safe svg{flex:none;color:var(--cyan-2)} .pjz-safe b{display:block;font-size:.87rem;font-weight:800;color:#fff;line-height:1.5} .pjz-safe small{display:block;font-size:.77rem;color:var(--tx-3);margin-top:2px} @media (max-width:900px){ .pjz-paths{grid-template-columns:1fr} .pjz-safe{grid-template-columns:1fr} .pjz-safe div{border-inline-start:0;border-block-start:1px solid var(--line)} .pjz-safe div:first-child{border-block-start:0} } /* کاهش حرکت */ @media (prefers-reduced-motion:reduce){ .pjq *,.pjq *::before,.pjq *::after, .pjz *,.pjz *::before,.pjz *::after{ animation:none !important;transition-duration:.001ms !important} }