/* =========================================================== cp.css — صفحهٔ «خرید سی پی» (pageCp.html) هماهنگ با تم مشکی-طلاییِ سایت. فقط این صفحه لودش می‌کند. =========================================================== */ :root { --cp-bg: #090909; --cp-card: #121212; --cp-border: #252525; --cp-gold: var(--gold, #ffc107); --cp-gold-2: var(--gold-2, #ffd54f); --cp-glow: #ffb300; --cp-text: #ffffff; --cp-muted: #bdbdbd; } .cp-wrap { width: min(1200px, calc(100% - 40px)); margin-inline: auto; } /* ---------- reveal on scroll ---------- مخفی‌سازیِ اولیه فقط وقتی اعمال می‌شود که JS کلاسِ .cp-anim را روی گذاشته باشد. اینطوری اگر JS/observer کار نکند، محتوا مرئی می‌ماند (بدونِ صفحهٔ خالی). */ .cp-anim [data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); } .cp-anim [data-reveal].in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .cp-anim [data-reveal] { opacity: 1; transform: none; transition: none; } } /* ═══════════ HERO ═══════════ */ .cp-hero { position: relative; overflow: hidden; display: flex; align-items: flex-end; justify-content: flex-start; background: #05060a; /* تمام‌عرض (بیرون از محدودیتِ ۱۲۰۰px هیرو) */ width: 100%; max-width: 100%; margin-inline: 0; padding-inline: clamp(20px, 6vw, 80px); } /* ویدیوی پس‌زمینهٔ هیرو */ .cp-hero__video { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; /* بالا نگه‌داشتنِ کادر تا سوژه زیرِ نوارِ بالای صفحه نیفتد */ object-position: center top; pointer-events: none; /* لبهٔ پایین نرم محو می‌شود تا بدونِ خط با پس‌زمینهٔ سیاه ترکیب شود */ -webkit-mask: linear-gradient(to bottom, #000 55%, rgba(0,0,0,.35) 82%, transparent 100%); mask: linear-gradient(to bottom, #000 55%, rgba(0,0,0,.35) 82%, transparent 100%); } /* پوستر/فالبک پشتِ ویدیو (اگر ویدیو لود/پخش نشد) — همان محوِ پایین */ .cp-hero::before { content: ""; position: absolute; inset: 0; z-index: 0; background: url('images/cp/cp-hero-poster.webp') center top / cover no-repeat; -webkit-mask: linear-gradient(to bottom, #000 55%, rgba(0,0,0,.35) 82%, transparent 100%); mask: linear-gradient(to bottom, #000 55%, rgba(0,0,0,.35) 82%, transparent 100%); } /* پردهٔ تیره برای خواناییِ متن */ .cp-hero::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: /* فقط سمتِ راست (پشتِ متن) کمی تیره؛ سمتِ چپ که کاراکتر است شفاف می‌ماند */ linear-gradient(90deg, rgba(5,6,10,0) 34%, rgba(5,6,10,.12) 58%, rgba(5,6,10,.6) 100%), /* کفِ نرم برای نشستنِ دکمه‌ها */ linear-gradient(180deg, rgba(5,6,10,0) 60%, rgba(5,6,10,.5) 100%); } /* سایهٔ متن تا بدونِ پردهٔ تیره هم خوانا بماند */ .cp-hero .hero-content .eyebrow { text-shadow: 0 2px 12px rgba(0,0,0,.7); } .cp-hero-title { text-shadow: 0 3px 22px rgba(0,0,0,.6), 0 0 34px rgba(255,179,0,.4); } .cp-hero-sub, .cp-hero-desc { text-shadow: 0 2px 14px rgba(0,0,0,.75); } /* حلقهٔ کاراکترِ قبلی و ذراتش دیگر لازم نیست */ .cp-hero .hero-art { display: none; } .cp-hero .hero-content { position: relative; z-index: 2; width: 100%; max-width: 600px; padding-bottom: clamp(24px, 6vw, 60px); } .cp-hero-title { margin: 6px 0 4px; font-size: clamp(38px, 7vw, 76px); line-height: 1.05; color: var(--cp-gold); text-shadow: 0 0 34px rgba(255, 179, 0, .45); } .cp-hero-sub { margin: 0 0 18px; font-size: clamp(20px, 3.4vw, 34px); color: #fff; font-weight: 800; } .cp-hero-desc { max-width: 440px; margin: 0 0 28px; color: var(--cp-muted); line-height: 2.1; font-size: clamp(14px, 1.5vw, 16px); } .cp-hero-cta { display: flex; gap: 14px; flex-wrap: wrap; } .cp-btn { --cut: 12px; display: inline-flex; align-items: center; gap: 9px; padding: 14px 30px; font: inherit; font-weight: 800; font-size: 15px; cursor: pointer; text-decoration: none; clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut)); transition: transform .2s ease, box-shadow .25s ease, background .2s ease, color .2s ease; } .cp-btn svg { width: 20px; height: 20px; } .cp-btn--gold { background: linear-gradient(135deg, var(--cp-gold-2), var(--cp-gold)); color: #241500; box-shadow: 0 10px 30px rgba(255, 179, 0, .32); } .cp-btn--gold:hover { transform: translateY(-3px); box-shadow: 0 16px 40px rgba(255, 179, 0, .5); } .cp-btn--ghost { background: transparent; color: var(--cp-gold); border: 1px solid rgba(255, 193, 7, .5); } .cp-btn--ghost:hover { background: rgba(255, 193, 7, .1); border-color: var(--cp-gold); transform: translateY(-3px); } /* ذراتِ آتش (embers) که آرام بالا می‌روند */ .cp-hero .ember { position: absolute; bottom: 20%; width: 6px; height: 6px; border-radius: 50%; background: radial-gradient(circle, #ffd54f, #ff8a00); box-shadow: 0 0 10px 2px rgba(255, 138, 0, .7); opacity: 0; pointer-events: none; animation: cp-ember 5s ease-in infinite; } .cp-hero .e1 { right: 22%; animation-delay: 0s; } .cp-hero .e2 { right: 30%; animation-delay: 1.4s; } .cp-hero .e3 { right: 16%; animation-delay: 2.6s; } .cp-hero .e4 { right: 36%; animation-delay: 3.4s; width: 4px; height: 4px; } .cp-hero .e5 { right: 26%; animation-delay: 4.2s; width: 5px; height: 5px; } @keyframes cp-ember { 0% { transform: translateY(0) scale(1); opacity: 0; } 15% { opacity: 1; } 100% { transform: translateY(-220px) scale(.3); opacity: 0; } } @media (prefers-reduced-motion: reduce) { .cp-hero .ember { display: none; } } /* ورودِ نرمِ هیرو */ .cp-reveal-left { animation: cp-in-left .9s cubic-bezier(.2,.7,.2,1) both; } .cp-reveal-right { animation: cp-in-right .9s cubic-bezier(.2,.7,.2,1) .12s both; } @keyframes cp-in-left { from { opacity: 0; transform: translateX(-40px); } to { opacity: 1; transform: none; } } @keyframes cp-in-right { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .cp-reveal-left, .cp-reveal-right { animation: none; } } /* ═══════════ FEATURE BAR ═══════════ */ .cp-featurebar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: -30px; margin-bottom: 90px; position: relative; z-index: 3; } .cp-feature { text-align: center; padding: 6px 8px; background: none; border: none; transition: transform .2s ease; } .cp-feature:hover { transform: translateY(-3px); } .cp-feature__ic { display: grid; place-items: center; width: 56px; height: 56px; margin: 0 auto 14px; border-radius: 14px; color: var(--cp-gold); background: rgba(255, 193, 7, .1); border: 1px solid rgba(255, 193, 7, .25); transition: transform .3s ease; } .cp-feature:hover .cp-feature__ic { transform: rotate(-8deg) scale(1.06); } .cp-feature__ic svg { width: 28px; height: 28px; } .cp-feature h3 { margin: 0 0 5px; font-size: 16px; color: #fff; } .cp-feature p { margin: 0; font-size: 13px; color: var(--cp-muted); } /* ═══════════ SECTION HEAD ═══════════ */ .cp-head { text-align: center; margin-bottom: 40px; } .cp-head .section-label { justify-content: center; } .cp-head h2 { margin: 6px 0 8px; font-size: clamp(26px, 4vw, 40px); } .cp-head__sub { color: var(--cp-muted); margin: 0; } /* ═══════════ CP PACKAGES ═══════════ */ .cp-packages { margin-bottom: 100px; } .cp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; align-items: stretch; } .cp-pack { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 16px 16px 18px; border-radius: 22px; background: radial-gradient(120% 80% at 50% 0%, #1b1b1b, #101010 70%); border: 1px solid var(--cp-border); /* کارت موقعِ هاور جابه‌جا نمی‌شود تا دکمهٔ خرید زیرِ موس نلغزد */ transition: border-color .25s ease, box-shadow .25s ease; } .cp-pack:hover { border-color: rgba(255, 193, 7, .5); box-shadow: 0 26px 60px rgba(0, 0, 0, .55), 0 0 30px rgba(255, 179, 0, .18); } .cp-pack__tag, .cp-pack__featured-badge { position: absolute; z-index: 2; top: 62px; right: 24px; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); background: rgba(12, 10, 2, .72); padding: 4px 12px; font-size: 11px; font-weight: 800; border-radius: 999px; background: rgba(255, 193, 7, .14); color: var(--cp-gold); border: 1px solid rgba(255, 193, 7, .35); } /* عنوانِ بسته — بازسازیِ سبکِ «80 CP» با خطِ درخشانِ زیرش */ .cp-pack__amt { margin: 10px 0 0; font-family: "Barlow Condensed", "Rajdhani", sans-serif; font-size: 34px; font-weight: 800; letter-spacing: 1px; line-height: 1; direction: ltr; color: var(--cp-gold); text-shadow: 0 0 18px rgba(255, 193, 7, .45); } .cp-pack__amt span { font-size: 19px; font-weight: 700; color: #e8c96a; } .cp-pack__line { display: block; width: 78%; height: 2px; margin: 10px auto 4px; border-radius: 99px; background: linear-gradient(90deg, transparent, rgba(255, 193, 7, .85) 30%, #ffe9a8 50%, rgba(255, 193, 7, .85) 70%, transparent); box-shadow: 0 0 10px rgba(255, 193, 7, .55), 0 0 26px rgba(255, 179, 0, .3); } /* سکه‌ی شفاف — بدون قاب، شناور روی کارت */ .cp-pack__coins { width: 100%; min-height: 128px; display: grid; place-items: center; padding: 10px 6px 4px; margin-bottom: 10px; filter: drop-shadow(0 14px 22px rgba(0, 0, 0, .55)) drop-shadow(0 0 22px rgba(255, 179, 0, .16)); animation: cp-float 4.5s ease-in-out infinite; transition: filter .25s ease; } .cp-pack__coins img { width: 82%; max-width: 210px; height: auto; display: block; transition: transform .35s ease; } .cp-pack:hover .cp-pack__coins { filter: drop-shadow(0 18px 28px rgba(0, 0, 0, .6)) drop-shadow(0 0 30px rgba(255, 179, 0, .35)); } .cp-pack:hover .cp-pack__coins img { transform: scale(1.07); } @keyframes cp-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-7px); } } @media (prefers-reduced-motion: reduce) { .cp-pack__coins { animation: none; } } .cp-pack__price { margin: 0 0 14px; font-size: 18px; font-weight: 800; color: var(--cp-gold); } .cp-pack__price span { font-size: 12px; color: var(--cp-muted); font-weight: 600; } .cp-pack__stock { margin: 0 0 16px; font-size: 12px; color: var(--cp-muted); } .cp-buy { --cut: 9px; display: block; width: 100%; margin-top: auto; padding: 11px; font: inherit; text-align: center; text-decoration: none; font-weight: 800; color: var(--cp-gold); cursor: pointer; background: rgba(255, 193, 7, .08); border: 1px solid rgba(255, 193, 7, .4); clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut)); transition: background .2s ease, color .2s ease, box-shadow .2s ease; } .cp-buy:hover { background: linear-gradient(135deg, var(--cp-gold-2), var(--cp-gold)); color: #241500; box-shadow: 0 8px 22px rgba(255, 179, 0, .4); } /* بستهٔ ویژه */ .cp-pack--featured { border-color: var(--cp-gold); background: radial-gradient(120% 90% at 50% 0%, #241d05, #121003 75%); box-shadow: 0 0 0 1px rgba(255, 193, 7, .5), 0 22px 50px rgba(0, 0, 0, .5), 0 0 40px rgba(255, 179, 0, .2); transform: translateY(-10px); } .cp-pack--featured:hover { transform: translateY(-16px); } .cp-pack__featured-badge { top: -12px; right: 50%; transform: translateX(50%); background: linear-gradient(135deg, var(--cp-gold-2), var(--cp-gold)); color: #241500; border: none; box-shadow: 0 6px 18px rgba(255, 179, 0, .5); white-space: nowrap; } .cp-buy--featured { background: linear-gradient(135deg, var(--cp-gold-2), var(--cp-gold)); color: #241500; } /* ═══════════ WHY US ═══════════ */ .cp-why { margin-bottom: 100px; } .cp-why-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; } .cp-why-card { padding: 28px 24px; border-radius: 20px; background: linear-gradient(180deg, #161616, #0e0e0e); border: 1px solid var(--cp-border); transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease; } .cp-why-card:hover { transform: translateY(-6px); border-color: rgba(255, 193, 7, .4); box-shadow: 0 20px 46px rgba(0, 0, 0, .5), 0 0 24px rgba(255, 179, 0, .12); } .cp-why__ic { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 16px; border-radius: 14px; color: var(--cp-gold); background: rgba(255, 193, 7, .1); border: 1px solid rgba(255, 193, 7, .25); } .cp-why__ic svg { width: 26px; height: 26px; } .cp-why-card h3 { margin: 0 0 8px; font-size: 17px; color: #fff; } .cp-why-card p { margin: 0; font-size: 14px; color: var(--cp-muted); line-height: 2; } /* ═══════════ STATS ═══════════ */ .cp-stats { display: flex; align-items: center; justify-content: space-around; flex-wrap: wrap; gap: 20px; padding: 36px 24px; margin-bottom: 100px; border-radius: 22px; background: linear-gradient(180deg, #141414, #0c0c0c); border: 1px solid var(--cp-border); } .cp-stat { text-align: center; min-width: 130px; } .cp-stat b { display: block; font-size: clamp(28px, 4vw, 42px); font-weight: 800; color: var(--cp-gold); text-shadow: 0 0 22px rgba(255, 179, 0, .3); line-height: 1.1; } .cp-stat span { font-size: 13px; color: var(--cp-muted); } .cp-stat-div { width: 1px; height: 44px; background: var(--cp-border); } /* ═══════════ REVIEWS ═══════════ */ .cp-reviews { margin-bottom: 100px; } .cp-review-track { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; } .cp-review { position: relative; padding: 30px 26px 24px; border-radius: 20px; background: linear-gradient(180deg, #161616, #0e0e0e); border: 1px solid var(--cp-border); transition: transform .25s ease, border-color .25s ease; } .cp-review:hover { transform: translateY(-5px); border-color: rgba(255, 193, 7, .35); } .cp-quote { position: absolute; top: 10px; left: 20px; font-size: 60px; line-height: 1; color: rgba(255, 193, 7, .18); font-family: Georgia, serif; } .cp-stars { color: var(--cp-gold); letter-spacing: 3px; margin-bottom: 12px; font-size: 15px; } .cp-review p { margin: 0 0 18px; color: #e6e6e6; line-height: 2; font-size: 14px; } .cp-reviewer { display: flex; align-items: center; gap: 10px; } .cp-avatar { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; font-weight: 800; color: #241500; background: linear-gradient(135deg, var(--cp-gold-2), var(--cp-gold)); } .cp-reviewer b { color: #fff; font-size: 14px; } /* ═══════════ FAQ ═══════════ */ .cp-faq { margin-bottom: 90px; } .cp-accordion { max-width: 780px; margin-inline: auto; display: flex; flex-direction: column; gap: 12px; } .cp-acc-item { border-radius: 16px; background: linear-gradient(180deg, #151515, #0e0e0e); border: 1px solid var(--cp-border); overflow: hidden; transition: border-color .2s ease; } .cp-acc-item.open { border-color: rgba(255, 193, 7, .45); } .cp-acc-q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 18px 22px; font: inherit; font-weight: 700; font-size: 15px; color: #fff; text-align: right; background: transparent; border: none; cursor: pointer; } .cp-acc-ic { flex-shrink: 0; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; color: var(--cp-gold); background: rgba(255, 193, 7, .12); font-size: 18px; transition: transform .25s ease; } .cp-acc-item.open .cp-acc-ic { transform: rotate(45deg); } .cp-acc-a { max-height: 0; overflow: hidden; transition: max-height .3s ease; } .cp-acc-a p { margin: 0; padding: 0 22px 20px; color: var(--cp-muted); line-height: 2.1; font-size: 14px; } /* ═══════════ RESPONSIVE ═══════════ */ @media (max-width: 900px) { .cp-featurebar { margin-top: 30px; } .cp-stat-div { display: none; } } @media (max-width: 560px) { /* «چرا ما»یِ بالای صفحه همیشه هر ۴ در یک ردیف، جمع‌وجور و بدونِ بک‌گراند */ .cp-featurebar { gap: 8px; } .cp-feature { padding: 4px 2px; } .cp-feature__ic { width: 40px; height: 40px; margin-bottom: 7px; border-radius: 11px; } .cp-feature__ic svg { width: 20px; height: 20px; } .cp-feature h3 { font-size: 11.5px; margin-bottom: 3px; } .cp-feature p { font-size: 9.5px; line-height: 1.5; } /* دکمه‌های هیرو: کوچیک‌تر و کنارِ هم زیرِ متن (نه تمام‌عرض) */ .cp-hero-cta { flex-direction: row; flex-wrap: wrap; gap: 10px; } .cp-btn { justify-content: center; padding: 10px 18px; font-size: 13px; gap: 7px; --cut: 9px; } .cp-btn svg { width: 16px; height: 16px; } } /* ── موبایل: ویدیوِ هیرو مثلِ بخشِ اجاره کوچیک‌تر (پنلِ بالا با محوِ نرمِ لبهٔ پایین) ── آیبروِ زرد و متنِ توضیح حذف می‌شوند تا اسکین بهتر دیده شود و عنوان/دکمه‌ها واضح بمانند */ @media (max-width: 640px) { .cp-hero { min-height: 72vh; align-items: flex-end; } .cp-hero .hero-content .eyebrow, .cp-hero-desc { display: none; } /* ویدیو: پنلِ بالا؛ لبهٔ پایین نرم محو می‌شود تا کفِ تیره برای متن بماند */ .cp-hero__video { height: 70%; top: 0; bottom: auto; object-position: center top; -webkit-mask: linear-gradient(to bottom, #000 55%, transparent 93%); mask: linear-gradient(to bottom, #000 55%, transparent 93%); } /* پوسترِ فالبک هم‌اندازهٔ همان پنل */ .cp-hero::before { height: 70%; bottom: auto; -webkit-mask: linear-gradient(to bottom, #000 55%, transparent 93%); mask: linear-gradient(to bottom, #000 55%, transparent 93%); } /* اسکریم: کفِ پایین تیره‌تر برای خواناییِ عنوان و دکمه‌ها */ .cp-hero::after { background: linear-gradient(180deg, rgba(5, 6, 10, 0) 40%, rgba(5, 6, 10, .5) 66%, rgba(5, 6, 10, .9) 100%); } /* متنِ کوچیک‌تر و بالاتر؛ دکمه‌ها زیرش */ .cp-hero .hero-content { max-width: 100%; padding-bottom: clamp(92px, 17vh, 150px); } .cp-hero-title { margin: 0 0 2px; font-size: clamp(28px, 7.4vw, 36px); } .cp-hero-sub { margin: 0 0 16px; font-size: clamp(13px, 3.4vw, 16px); } } /* ═══════════ نوارِ تب‌های خرید + پنل‌ها (سی پی فوری/دوبل/زمان‌بر/آفرها) ═══════════ */ .cp-tabs { display: flex; flex-wrap: nowrap; justify-content: center; gap: 6px; max-width: 720px; margin: 0 auto 34px; padding: 6px; background: linear-gradient(180deg, #161616, #0f0f0f); border: 1px solid var(--cp-border); border-radius: 999px; } .cp-tab { flex: 1 1 auto; min-width: 0; padding: 11px 16px; border: 0; cursor: pointer; white-space: nowrap; background: transparent; color: var(--cp-muted); font: inherit; font-weight: 800; font-size: 15px; border-radius: 999px; transition: color .2s ease, background .2s ease, box-shadow .2s ease; } .cp-tab:hover { color: #fff; } .cp-tab.is-active { color: #241500; background: linear-gradient(135deg, var(--cp-gold-2), var(--cp-gold)); box-shadow: 0 8px 22px rgba(255, 179, 0, .35); } .cp-panel { display: none; } .cp-panel.is-active { display: block; animation: cpPanelFade .3s ease; } @keyframes cpPanelFade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } /* آفرها */ .cp-offers-note { text-align: center; color: var(--cp-muted); font-size: 13.5px; margin: 0 auto 24px; max-width: 620px; line-height: 1.8; } /* نوارِ زمانِ تحویلِ هر بخش (بین تب‌ها و کارت‌های CP) */ .cp-speed-note { display: flex; align-items: center; justify-content: center; gap: 8px; width: max-content; max-width: 92%; margin: -6px auto 28px; padding: 9px 22px; border-radius: 999px; background: rgba(255, 193, 7, .08); border: 1px solid rgba(255, 193, 7, .32); color: var(--cp-gold-2); font-size: 14px; font-weight: 800; text-align: center; } @media (max-width: 560px) { .cp-speed-note { font-size: 12.5px; padding: 8px 16px; margin-bottom: 22px; } } /* تبِ دوبل: بجِ ×۲ و دکمه‌های انتخابِ سرعت روی هر کارت */ .cp-pack--dbl { position: relative; } .cp-dbl-badge { position: absolute; top: 12px; inset-inline-start: 12px; z-index: 3; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 800; color: #241500; background: linear-gradient(135deg, var(--cp-gold-2), var(--cp-gold)); box-shadow: 0 4px 12px rgba(255, 179, 0, .35); } .cp-speed-pills { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; margin: 4px 0 2px; } .cp-speed-pill { padding: 5px 12px; border-radius: 999px; cursor: pointer; font: inherit; font-size: 12.5px; font-weight: 700; color: var(--cp-muted); background: rgba(255, 255, 255, .04); border: 1px solid var(--cp-border); transition: color .18s ease, background .18s ease, border-color .18s ease; } .cp-speed-pill:hover { color: #fff; border-color: rgba(255, 193, 7, .45); } .cp-speed-pill.is-active { color: #241500; background: linear-gradient(135deg, var(--cp-gold-2), var(--cp-gold)); border-color: transparent; } .cp-pack__price.is-ask b { font-size: 14px; color: var(--cp-gold-2); } .cp-pack__price.is-ask span { display: none; } /* برچسبِ «... + ...» دوبل: کوتاه‌تر و بدونِ شکستِ خط تا سرریز نکند */ .cp-pack__amt--dbl { font-size: 24px; letter-spacing: 0; white-space: nowrap; } .cp-pack__amt--dbl span { font-size: 14px; } @media (max-width: 560px) { .cp-pack__amt--dbl { font-size: 17px; } .cp-pack__amt--dbl span { font-size: 12px; } } /* حالتِ «موجود نیست» (ایونتِ دوبل غیرفعال) */ .cp-pack--off { filter: grayscale(.95) brightness(.78) opacity(.62); } .cp-pack--off .cp-speed-pill, .cp-pack--off .cp-buy { pointer-events: none; } .cp-pack--off .cp-buy { color: var(--cp-muted); border-color: var(--cp-border); background: rgba(255, 255, 255, .04); } .cp-pack__off-badge { position: absolute; top: 12px; inset-inline-end: 12px; z-index: 4; padding: 4px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 800; color: #fff; background: rgba(220, 53, 69, .92); box-shadow: 0 4px 12px rgba(0, 0, 0, .4); } /* ═══════════ پاپ‌آپِ آفر (سبکِ درون‌بازی) ═══════════ */ .offer-modal { position: fixed; inset: 0; z-index: 3000; display: flex; align-items: center; justify-content: center; padding: 20px; } .offer-modal[hidden] { display: none; } .offer-modal__overlay { position: absolute; inset: 0; background: rgba(4, 6, 10, .78); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .offer-modal__frame { position: relative; width: min(880px, 96vw); max-height: 92vh; overflow: hidden auto; border-radius: 14px; background: linear-gradient(180deg, #2a2d33, #191b1f); border: 1px solid rgba(255, 255, 255, .12); box-shadow: 0 30px 80px rgba(0, 0, 0, .6); animation: opPop .25s ease; } @keyframes opPop { from { transform: translateY(14px) scale(.97); opacity: 0; } to { transform: none; opacity: 1; } } .offer-modal__bar { display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: linear-gradient(180deg, #33373d, #24272c); border-bottom: 1px solid rgba(0, 0, 0, .4); } .offer-modal__logo { width: 34px; height: 34px; flex: none; display: grid; place-items: center; border-radius: 50%; font-weight: 900; color: #241500; background: linear-gradient(135deg, var(--cp-gold-2), var(--cp-gold)); box-shadow: 0 0 14px rgba(255, 179, 0, .5); } .offer-modal__titles { flex: 1; min-width: 0; } .offer-modal__title { margin: 0; font-size: 19px; font-weight: 800; color: #fff; } .offer-modal__sub { font-size: 10.5px; letter-spacing: 2px; color: var(--cp-muted); } .offer-modal__x { flex: none; width: 34px; height: 34px; border-radius: 8px; cursor: pointer; font-size: 15px; color: var(--cp-gold); background: rgba(255, 193, 7, .08); border: 1px solid rgba(255, 193, 7, .4); } .offer-modal__x:hover { background: rgba(255, 193, 7, .2); } .offer-modal__banner { position: relative; aspect-ratio: 16 / 7; background: #0d0f12 center / cover no-repeat; border-bottom: 2px solid rgba(255, 193, 7, .3); } .offer-modal__ends { position: absolute; top: 12px; inset-inline-start: 16px; z-index: 2; padding: 5px 12px; border-radius: 8px; font-size: 13px; font-weight: 700; color: #fff; background: rgba(0, 0, 0, .55); backdrop-filter: blur(3px); } .offer-modal__ends b { color: var(--cp-gold-2); } .offer-modal__thumb { position: absolute; inset-inline-start: 24px; top: 50%; transform: translateY(-50%); z-index: 2; width: 26%; max-width: 160px; height: auto; filter: drop-shadow(0 10px 24px rgba(0, 0, 0, .6)); } .offer-modal__body { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 18px 22px; background: linear-gradient(180deg, #23262b, #1b1d21); } .offer-modal__tag { margin: 0 0 4px; font-size: 12px; font-weight: 800; letter-spacing: 1px; color: var(--cp-gold-2); } .offer-modal__desc { margin: 0; font-size: 22px; font-weight: 800; color: #fff; } .offer-modal__buy { flex: none; min-width: 150px; text-align: center; text-decoration: none; padding: 13px 26px; border-radius: 10px; font-weight: 900; font-size: 17px; color: #241500; background: linear-gradient(135deg, var(--cp-gold-2), var(--cp-gold)); box-shadow: 0 8px 22px rgba(255, 179, 0, .4); transition: transform .15s ease, box-shadow .15s ease; } .offer-modal__buy:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(255, 179, 0, .55); } @media (max-width: 560px) { .offer-modal__banner { aspect-ratio: 16 / 9; } .offer-modal__thumb { width: 32%; inset-inline-start: 14px; } .offer-modal__desc { font-size: 18px; } .offer-modal__body { padding: 14px 16px; } .offer-modal__buy { width: 100%; } } /* آفرِ غیرفعال («موجود نیست») — خاکستری، غیرقابلِ‌کلیک، منتقل به ته لیست (ترتیب با JS) */ .cp-offer--off { filter: grayscale(.95) brightness(.78) opacity(.62); pointer-events: none; } .cp-offer__off-badge { position: absolute; top: 10px; inset-inline-end: 10px; z-index: 4; padding: 3px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 800; color: #fff; background: rgba(220, 53, 69, .92); box-shadow: 0 4px 12px rgba(0, 0, 0, .4); } /* پاپ‌آپِ آفرِ بدونِ بنرِ اختصاصی: آیکونِ آفر بزرگ و وسط‌چین */ .offer-modal--noart .offer-modal__banner { background: radial-gradient(120% 100% at 50% 0%, #26313b, #12161b); } .offer-modal--noart .offer-modal__thumb { inset-inline-start: 0; inset-inline-end: 0; margin-inline: auto; width: 40%; max-width: 200px; } /* ═══════════ پاپ‌آپِ بتل‌پس (دوستونه) ═══════════ */ .bp-modal { position: fixed; inset: 0; z-index: 3000; display: flex; align-items: center; justify-content: center; padding: 20px; } .bp-modal[hidden] { display: none; } .bp-modal__overlay { position: absolute; inset: 0; background: rgba(4, 6, 10, .8); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .bp-modal__frame { position: relative; max-height: 92vh; overflow: hidden auto; border-radius: 14px; /* عرض را با ارتفاعِ ویوپورت هم مقیّد کن تا کلِ کارت (بار+صحنه+فوتر) بدونِ اسکرول جا شود */ width: min(920px, 96vw, calc((92vh - 150px) * 1.4515)); background: linear-gradient(180deg, #1c2530, #12171d); border: 1px solid rgba(255, 255, 255, .1); box-shadow: 0 30px 80px rgba(0, 0, 0, .65); animation: opPop .25s ease; scrollbar-width: thin; scrollbar-color: rgba(255, 193, 7, .55) transparent; } .bp-modal__frame::-webkit-scrollbar, .offer-modal__frame::-webkit-scrollbar { width: 8px; } .bp-modal__frame::-webkit-scrollbar-track, .offer-modal__frame::-webkit-scrollbar-track { background: transparent; } .bp-modal__frame::-webkit-scrollbar-thumb, .offer-modal__frame::-webkit-scrollbar-thumb { background: rgba(255, 193, 7, .45); border-radius: 8px; } .bp-modal__frame::-webkit-scrollbar-thumb:hover, .offer-modal__frame::-webkit-scrollbar-thumb:hover { background: rgba(255, 193, 7, .7); } .offer-modal__frame { scrollbar-width: thin; scrollbar-color: rgba(255, 193, 7, .55) transparent; } .bp-modal__bar { display: flex; align-items: center; gap: 12px; padding: 12px 18px; background: linear-gradient(180deg, #26303c, #1a222c); border-bottom: 1px solid rgba(0, 0, 0, .4); } .bp-modal__back { color: var(--cp-gold); font-size: 15px; } .bp-modal__title { flex: 1; margin: 0; font-size: 18px; font-weight: 900; letter-spacing: 2px; color: #fff; } .bp-modal__x { flex: none; width: 34px; height: 34px; border-radius: 8px; cursor: pointer; font-size: 15px; color: var(--cp-gold); background: rgba(255, 193, 7, .08); border: 1px solid rgba(255, 193, 7, .4); } .bp-modal__x:hover { background: rgba(255, 193, 7, .2); } /* صحنه = عکسِ بک‌گراند + کانتینر برای مقیاسِ متن (cqw) */ .bp-stage { position: relative; aspect-ratio: 1511 / 1041; background: #0d1116 url("images/cp/offers/battlepass-bg.webp") center/cover no-repeat; container-type: inline-size; } .bp-ov { position: absolute; display: flex; flex-direction: column; } /* موقعیتِ فیزیکی (نه منطقیِ RTL) تا با ردیف‌های جایزهٔ داخلِ عکس هم‌تراز شود. هر دو top یکسان + ارتفاعِ تیترِ یکسان ⇒ دیوایدرها هم‌راستا. */ .bp-ov--left { top: 7%; left: 3.5%; width: 33%; } .bp-ov--right { top: 7%; right: 2.5%; width: 34%; } .bp-col__title { margin: 0; height: clamp(20px, 3.6cqw, 40px); display: flex; align-items: center; justify-content: center; gap: .35em; direction: ltr; font-size: clamp(13px, 3.1cqw, 30px); font-weight: 900; letter-spacing: .5px; color: #fff; text-align: center; text-shadow: 0 2px 9px rgba(0, 0, 0, .9); white-space: nowrap; } .bp-col__title span { color: var(--cp-gold); } .bp-col__title--bundle { font-size: clamp(10px, 2.2cqw, 21px); } .bp-list.bp-list--gold li { color: var(--cp-gold); text-shadow: 0 1px 7px rgba(0, 0, 0, .95); } .bp-nowrap { white-space: nowrap; } /* دکمه‌های قیمت در فوترِ پایین (زیرِ ردیف‌های جایزه)، در یک خط */ .bp-foot { display: flex; direction: ltr; gap: 14px; padding: 15px 20px 20px; background: linear-gradient(180deg, #171d24, #10151b); } .bp-foot .bp-btn { flex: 1; margin-top: 0; } /* دیوایدرِ زیرِ عنوان: خط با دو سرِ بزرگ‌تر (::before/::after) + گرهِ وسط */ .bp-rule { position: relative; height: 2px; width: 100%; margin: 1.6cqw 0 2cqw; background: linear-gradient(90deg, transparent, rgba(206, 214, 222, .8) 18%, rgba(206, 214, 222, .8) 82%, transparent); } .bp-rule::before, .bp-rule::after { content: ""; position: absolute; top: 50%; width: 9px; height: 9px; transform: translateY(-50%) rotate(45deg); background: #ced6de; } .bp-rule::before { inset-inline-start: 0; } .bp-rule::after { inset-inline-end: 0; } .bp-rule__node { position: absolute; inset-inline-start: 50%; top: 50%; width: 12px; height: 12px; transform: translate(50%, -50%) rotate(45deg); background: #fff; box-shadow: 0 0 8px rgba(255, 255, 255, .45); } .bp-rule--gold { background: linear-gradient(90deg, transparent, rgba(255, 193, 7, .7) 18%, rgba(255, 193, 7, .7) 82%, transparent); } .bp-rule--gold::before, .bp-rule--gold::after { background: var(--cp-gold); } .bp-rule--gold .bp-rule__node { background: var(--cp-gold-2); box-shadow: 0 0 9px rgba(255, 193, 7, .6); } .bp-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2.3cqw; text-align: start; } .bp-list li { display: flex; align-items: center; gap: 1.6cqw; font-size: clamp(10px, 1.95cqw, 17px); font-weight: 700; color: #fff; text-shadow: 0 1px 6px rgba(0, 0, 0, .9); } .bp-ic { flex: none; width: clamp(22px, 3.5cqw, 38px); height: clamp(22px, 3.5cqw, 38px); display: grid; place-items: center; font-size: clamp(8px, 1.2cqw, 12px); font-weight: 900; color: #3a2500; position: relative; } .bp-ic--epic { background: linear-gradient(135deg, #b98cff, #7a3ff0); border-radius: 6px; transform: rotate(45deg); box-shadow: 0 0 12px rgba(138, 79, 255, .45); } .bp-ic--epic.bp-ic--gold { background: linear-gradient(135deg, var(--cp-gold-2), var(--cp-gold)); box-shadow: 0 0 12px rgba(255, 179, 0, .5); } .bp-ic--coin { border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ffe9a8, var(--cp-gold) 60%, #b8860b); box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .15), 0 0 10px rgba(255, 179, 0, .4); } .bp-ic--tier::before { content: ""; position: absolute; inset: 3px; transform: rotate(45deg); border-radius: 5px; background: linear-gradient(135deg, var(--cp-gold-2), var(--cp-gold)); box-shadow: 0 0 10px rgba(255, 179, 0, .5); } .bp-ic--tier b { position: relative; z-index: 1; font-size: 12px; color: #3a2500; } /* دکمهٔ فلزیِ نقره‌ای — دقیقاً حس‌وحالِ دکمهٔ بازی */ .bp-btn { position: relative; margin-top: auto; display: flex; align-items: center; justify-content: center; gap: 9px; text-decoration: none; padding: 13px 18px; border-radius: 6px; color: #1b2126; font-weight: 900; background: linear-gradient(180deg, #f4f7f9 0%, #d3dade 46%, #a9b2b9 54%, #c9d0d6 100%); border: 1px solid #7c848b; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), inset 0 -2px 3px rgba(0, 0, 0, .22), 0 3px 9px rgba(0, 0, 0, .4); transition: filter .15s ease, transform .12s ease; } .bp-btn:hover { filter: brightness(1.05); transform: translateY(-1px); } .bp-btn:active { transform: translateY(1px); box-shadow: inset 0 2px 4px rgba(0, 0, 0, .3); } .bp-btn__price { font-size: 18px; letter-spacing: .3px; } .bp-btn__old { color: #6b7278; font-size: 13px; font-weight: 800; } .bp-btn__off { position: absolute; top: -11px; inset-inline-end: -6px; background: #e23b3b; color: #fff; font-size: 12px; font-weight: 800; padding: 2px 8px; border-radius: 5px; box-shadow: 0 2px 6px rgba(0, 0, 0, .45); } .bp-coin { flex: none; width: 20px; height: 20px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ffe9a8, var(--cp-gold) 58%, #a9760a); box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .18); } @media (max-width: 620px) { .bp-foot { gap: 8px; padding: 12px 12px 15px; } .bp-foot .bp-btn { padding: 9px 6px; gap: 5px; } .bp-foot .bp-btn__price { font-size: 13px; } .bp-foot .bp-coin { width: 15px; height: 15px; } .bp-modal { padding: 8px; } } /* ═══ انیمیشنِ ورودِ پاپ‌آپ‌ها (اجزا به‌نوبت با fade بالا می‌آیند) + هاور ═══ */ @keyframes opFadeUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } } /* پاپ‌آپِ آفرِ عمومی */ .offer-modal__banner { animation: opFadeUp .45s ease both .04s; } .offer-modal__tag { animation: opFadeUp .45s ease both .16s; } .offer-modal__desc { animation: opFadeUp .45s ease both .24s; } .offer-modal__buy { animation: opFadeUp .45s ease both .34s; } /* پاپ‌آپِ بتل‌پس — عنوان، خط، بولت‌ها و دکمه‌ها به‌ترتیب */ .bp-col__title { animation: opFadeUp .45s ease both .08s; } .bp-rule { animation: opFadeUp .45s ease both .16s; } .bp-list li { animation: opFadeUp .45s ease both; } .bp-ov--left .bp-list li:nth-child(1) { animation-delay: .22s; } .bp-ov--left .bp-list li:nth-child(2) { animation-delay: .30s; } .bp-ov--left .bp-list li:nth-child(3) { animation-delay: .38s; } .bp-ov--right .bp-list li:nth-child(1) { animation-delay: .26s; } .bp-ov--right .bp-list li:nth-child(2) { animation-delay: .34s; } .bp-foot .bp-btn { animation: opFadeUp .45s ease both; } .bp-foot .bp-btn:nth-child(1) { animation-delay: .44s; } .bp-foot .bp-btn:nth-child(2) { animation-delay: .52s; } /* ── هاورها ── */ /* کارتِ آفر: آیکون کمی بزرگ، اسم طلایی، دکمه طلایی و بالا */ .cp-offer__ic img { transition: transform .28s ease; } .cp-offer:hover .cp-offer__ic img { transform: scale(1.07); } .cp-offer__name { transition: color .2s ease; } .cp-offer:hover .cp-offer__name { color: var(--cp-gold-2); } .cp-offer__btn { transition: background .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease; } .cp-offer:hover .cp-offer__btn, .cp-offer__btn:hover { background: linear-gradient(135deg, var(--cp-gold-2), var(--cp-gold)); color: #241500; transform: translateY(-2px); box-shadow: 0 8px 20px rgba(255, 179, 0, .32); } .cp-offer__btn:hover { transform: translateY(-2px) scale(1.02); } /* دکمه‌های پاپ‌آپ: بالا آمدن + درخشش */ .bp-btn:hover, .offer-modal__buy:hover { filter: brightness(1.06); transform: translateY(-2px) scale(1.01); } /* متن‌ها هاورِ ریز: کمی به داخل می‌لغزند و روشن‌تر می‌شوند */ .bp-list li { transition: transform .18s ease, filter .18s ease; } .bp-list li:hover { transform: translateX(-4px); filter: brightness(1.25); } .offer-modal__desc { transition: filter .18s ease, transform .18s ease; } .offer-modal__desc:hover { filter: brightness(1.15); transform: translateY(-1px); } @media (prefers-reduced-motion: reduce) { .offer-modal *, .bp-modal * { animation-duration: .01ms !important; animation-delay: 0s !important; } } /* ═══════════ پاپ‌آپِ آفر ولت (تایم‌لاین روی بک‌گراند) ═══════════ */ .vault-modal { position: fixed; inset: 0; z-index: 3000; display: flex; align-items: center; justify-content: center; padding: 18px; } .vault-modal[hidden] { display: none; } .vault-modal__overlay { position: absolute; inset: 0; background: rgba(3, 5, 8, .82); backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px); } .vault-modal__frame { position: relative; direction: ltr; overflow: hidden; border-radius: 16px; width: min(1120px, 96vw, calc(90vh * 2.223)); aspect-ratio: 1870 / 841; background: #0a0d10 url("images/cp/offers/vault-bg-desktop.webp") center / cover no-repeat; border: 1px solid rgba(255, 255, 255, .1); box-shadow: 0 30px 90px rgba(0, 0, 0, .7); animation: opPop .3s ease; } /* تیره‌کردنِ نیمهٔ راست برای خوانایی متن */ .vault-modal__frame::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, transparent 38%, rgba(6, 9, 12, .5) 60%, rgba(6, 9, 12, .8)); } .vault-modal__x { position: absolute; top: 12px; inset-inline-end: 12px; z-index: 6; width: 34px; height: 34px; border-radius: 9px; cursor: pointer; font-size: 14px; color: var(--cp-gold); background: rgba(0, 0, 0, .5); border: 1px solid rgba(255, 193, 7, .4); } .vault-modal__x:hover { background: rgba(255, 193, 7, .2); } .vault-title { position: absolute; z-index: 2; top: 14px; right: 22px; margin: 0; font-size: 20px; font-weight: 900; letter-spacing: 4px; color: #fff; text-shadow: 0 2px 12px rgba(0, 0, 0, .9); } /* تایم‌لاینِ عمودی، روی فضای خالیِ راست */ .vault-timeline { position: absolute; z-index: 2; direction: ltr; left: 50%; right: 3%; top: 12%; bottom: 12%; display: flex; flex-direction: column; justify-content: space-between; } .vault-spine { position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; margin-left: -1px; transform-origin: top; transform: scaleY(0); background: linear-gradient(180deg, rgba(255, 213, 79, 0), var(--cp-gold) 6%, var(--cp-gold) 94%, rgba(255, 213, 79, 0)); box-shadow: 0 0 12px rgba(255, 193, 7, .6); animation: vaultSpine 1.4s cubic-bezier(.6, .04, .2, 1) both; } .vault-tier { position: relative; display: grid; grid-template-columns: 1fr 26px 1fr; align-items: center; background: none; border: 0; padding: 0; cursor: pointer; font: inherit; } .vault-node { position: absolute; left: 50%; top: 50%; margin: -5.5px 0 0 -5.5px; width: 11px; height: 11px; border-radius: 50%; background: var(--cp-gold); z-index: 3; box-shadow: 0 0 0 4px rgba(255, 193, 7, .14), 0 0 12px rgba(255, 193, 7, .75); opacity: 0; transform: scale(0); animation: vaultPop .5s cubic-bezier(.2, 1.4, .4, 1) both; animation-delay: var(--d); } .vault-card { direction: rtl; position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 10px; background: rgba(10, 13, 17, .74); border: 1px solid rgba(255, 193, 7, .3); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); box-shadow: 0 6px 18px rgba(0, 0, 0, .5); opacity: 0; transform: translateY(14px); animation: vaultTier .6s cubic-bezier(.2, .7, .2, 1) both; animation-delay: var(--d); transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease; } .vault-tier:hover .vault-card { border-color: rgba(255, 193, 7, .8); transform: translateY(-2px); } .vault-tier.is-sel .vault-card { border-color: var(--cp-gold); background: rgba(255, 193, 7, .16); box-shadow: 0 0 0 2px rgba(255, 193, 7, .4), 0 8px 22px rgba(0, 0, 0, .5); } .vault-tier--left .vault-card { grid-column: 1; justify-self: end; } .vault-tier--right .vault-card { grid-column: 3; justify-self: start; } .vault-tier--left .vault-card::after, .vault-tier--right .vault-card::after { content: ""; position: absolute; top: 50%; width: 15px; height: 1px; background: var(--cp-gold); opacity: .55; } .vault-tier--left .vault-card::after { left: 100%; } .vault-tier--right .vault-card::after { right: 100%; } .vault-usd { color: var(--cp-gold); font-weight: 900; font-size: 13px; } .vault-amt { color: #fff; font-weight: 800; font-size: 13.5px; direction: ltr; font-family: "Barlow Condensed", "Rajdhani", sans-serif; letter-spacing: .3px; } .vault-amt i { color: var(--cp-gold); font-style: normal; } /* پنلِ خرید — با کلیک روی هر پله، پایین‌چپ (روی میزِ خالی) ظاهر می‌شود */ .vault-buybar { position: absolute; left: 12%; bottom: 8%; z-index: 5; direction: rtl; display: inline-flex; flex-direction: column; align-items: flex-start; gap: 9px; max-width: 34%; padding: 13px 16px; border-radius: 14px; background: rgba(6, 9, 12, .82); border: 1px solid rgba(255, 193, 7, .42); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); box-shadow: 0 14px 36px rgba(0, 0, 0, .6); opacity: 0; transform: translateY(16px); transition: opacity .3s ease, transform .3s cubic-bezier(.2, .7, .2, 1); } .vault-buybar[hidden] { display: none; } .vault-buybar.is-shown { opacity: 1; transform: none; } .vault-buybar__info { color: #fff; font-weight: 700; font-size: 13.5px; line-height: 1.5; } .vault-buybar__info b { color: var(--cp-gold-2); } .vault-buybar__info #vbFree { color: var(--cp-gold); font-size: 12px; } .vault-buybar__btn { align-self: stretch; text-align: center; padding: 10px 22px; border-radius: 10px; font-weight: 900; color: #241500; text-decoration: none; background: linear-gradient(135deg, var(--cp-gold-2), var(--cp-gold)); box-shadow: 0 8px 22px rgba(255, 179, 0, .4); transition: transform .15s ease, filter .15s ease; } .vault-buybar__btn:hover { transform: translateY(-2px); filter: brightness(1.05); } @keyframes vaultSpine { to { transform: scaleY(1); } } @keyframes vaultPop { to { opacity: 1; transform: scale(1); } } @keyframes vaultTier { to { opacity: 1; transform: none; } } @media (max-width: 760px) { .vault-modal__frame { aspect-ratio: 853 / 1844; width: min(94vw, calc(88vh * 0.4626)); background-image: url("images/cp/offers/vault-bg-mobile.webp"); background-position: bottom center; } .vault-modal__frame::before { background: linear-gradient(180deg, rgba(6, 9, 12, .72) 28%, rgba(6, 9, 12, .3) 60%, transparent 80%); } .vault-title { top: 12px; right: 14px; font-size: 17px; letter-spacing: 3px; } .vault-timeline { left: 5%; right: 5%; top: 7%; bottom: auto; height: 54%; } .vault-tier { grid-template-columns: 1fr 20px 1fr; } .vault-card { padding: 4px 8px; gap: 5px; } .vault-usd { font-size: 12px; } .vault-amt { font-size: 12px; } .vault-tier--left .vault-card::after, .vault-tier--right .vault-card::after { width: 9px; } .vault-buybar { left: 50%; right: auto; bottom: 11%; max-width: 84%; padding: 11px 14px; gap: 8px; transform: translate(-50%, 16px); } .vault-buybar.is-shown { transform: translate(-50%, 0); } .vault-buybar__info { font-size: 12px; } .vault-buybar__btn { padding: 9px 16px; font-size: 13px; } } @media (prefers-reduced-motion: reduce) { .vault-modal * { animation-duration: .01ms !important; animation-delay: 0s !important; } .vault-spine { transform: scaleY(1); } } /* دکمهٔ توضیحات + پنلِ کشویی برای آفرِ ولت */ .vault-info-toggle { position: absolute; z-index: 6; top: 12px; left: 14px; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; padding: 7px 14px; border-radius: 999px; font-weight: 800; font-size: 13px; color: var(--cp-gold-2); background: rgba(6, 9, 12, .72); border: 1px solid rgba(255, 193, 7, .4); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); transition: background .18s ease, transform .15s ease; } .vault-info-toggle span { display: inline-grid; place-items: center; width: 17px; height: 17px; border-radius: 50%; background: var(--cp-gold); color: #241500; font-size: 12px; font-weight: 900; } .vault-info-toggle:hover { background: rgba(255, 193, 7, .18); transform: translateY(-1px); } .vault-info { position: absolute; z-index: 9; direction: rtl; top: 0; right: 0; height: 100%; width: min(400px, 86%); display: flex; flex-direction: column; background: linear-gradient(180deg, rgba(14, 18, 24, .97), rgba(9, 12, 16, .98)); border-inline-start: 1px solid rgba(255, 193, 7, .35); box-shadow: -18px 0 44px rgba(0, 0, 0, .55); transform: translateX(100%); transition: transform .3s cubic-bezier(.2, .7, .2, 1); } .vault-info[hidden] { display: none; } .vault-info.is-open { transform: translateX(0); } .vault-info__bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px; background: linear-gradient(180deg, #26303c, #1a222c); border-bottom: 1px solid rgba(0, 0, 0, .4); } .vault-info__bar h3 { margin: 0; font-size: 16px; font-weight: 900; color: #fff; } .vault-info__x { flex: none; width: 32px; height: 32px; border-radius: 8px; cursor: pointer; font-size: 13px; color: var(--cp-gold); background: rgba(255, 193, 7, .08); border: 1px solid rgba(255, 193, 7, .4); transition: background .18s ease; } .vault-info__x:hover { background: rgba(255, 193, 7, .2); } .vault-info__body { flex: 1; overflow-y: auto; padding: 16px 18px 20px; scrollbar-width: thin; scrollbar-color: rgba(255, 193, 7, .5) transparent; } .vault-info__body::-webkit-scrollbar { width: 7px; } .vault-info__body::-webkit-scrollbar-thumb { background: rgba(255, 193, 7, .45); border-radius: 8px; } .vault-info__body p { margin: 0 0 12px; font-size: 13.5px; line-height: 1.85; color: #d3d9df; } .vault-info__body b { color: var(--cp-gold-2); } .vault-info__body h4 { margin: 14px 0 8px; font-size: 14px; font-weight: 900; color: #fff; } .vault-info__list { margin: 0; padding-inline-start: 18px; display: flex; flex-direction: column; gap: 10px; } .vault-info__list li { font-size: 13px; line-height: 1.7; color: #d3d9df; } .vault-info__list b { color: #fff; } .vault-info__note { margin: 6px 0 0; padding-top: 12px; border-top: 1px solid rgba(255, 193, 7, .18); font-size: 12.5px; line-height: 1.85; color: #c7ccd2; } .vault-info__note b { color: var(--cp-gold-2); } @media (max-width: 760px) { .vault-info { width: 100%; } /* موبایل: توضیحات پایین-وسط (نه گوشهٔ شلوغِ بالا-چپ)، کوچیک‌تر */ .vault-info-toggle { top: auto; left: 50%; transform: translateX(-50%); bottom: 2.5%; padding: 5px 12px; font-size: 12px; } .vault-info-toggle span { width: 15px; height: 15px; font-size: 11px; } .vault-info-toggle:hover { transform: translateX(-50%) translateY(-1px); } } /* ═══════════ توضیحاتِ ایونتِ سی‌پی دوبل ═══════════ */ .cp-dbl-info { max-width: 980px; margin: 34px auto 6px; padding: 20px; border-radius: 20px; background: radial-gradient(120% 100% at 50% 0%, #1a1710, #0f0f0f 72%); border: 1px solid rgba(255, 193, 7, .28); box-shadow: 0 14px 40px rgba(0, 0, 0, .4); } .cp-dbl-info__head { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; } .cp-dbl-info__badge { flex: none; display: grid; place-items: center; width: 58px; height: 58px; border-radius: 16px; font-size: 24px; font-weight: 900; color: #241500; direction: ltr; background: linear-gradient(135deg, var(--cp-gold-2), var(--cp-gold)); box-shadow: 0 8px 20px rgba(255, 179, 0, .4); } .cp-dbl-info__intro h3 { margin: 0 0 4px; font-size: clamp(17px, 2.4vw, 22px); font-weight: 900; color: #fff; } .cp-dbl-info__intro p { margin: 0; font-size: 14px; line-height: 1.7; color: #c7ccd2; } .cp-dbl-info__intro b { color: var(--cp-gold-2); } .cp-dbl-hl { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 18px; } .cp-dbl-hl__card { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 7px; padding: 16px 12px; border-radius: 14px; background: rgba(255, 255, 255, .03); border: 1px solid var(--cp-border); transition: border-color .2s ease, transform .2s ease; } .cp-dbl-hl__card:hover { border-color: rgba(255, 193, 7, .45); transform: translateY(-3px); } .cp-dbl-hl__ic { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; color: var(--cp-gold-2); background: rgba(255, 193, 7, .12); border: 1px solid rgba(255, 193, 7, .3); } .cp-dbl-hl__ic svg { width: 22px; height: 22px; } .cp-dbl-hl__card h4 { margin: 0; font-size: 14.5px; font-weight: 900; color: #fff; } .cp-dbl-hl__card p { margin: 0; font-size: 12px; line-height: 1.55; color: #aeb4ba; } .cp-dbl-hl__card b { color: var(--cp-gold-2); } .cp-dbl-acc { max-width: 100%; } .cp-dbl-acc .cp-acc-q { padding: 15px 18px; font-size: 14.5px; } .cp-dbl-acc .cp-acc-a p { font-size: 13.5px; } .cp-dbl-acc .cp-acc-a b { color: var(--cp-gold-2); } @media (max-width: 720px) { .cp-dbl-info { padding: 16px; margin-bottom: 20px; border-radius: 16px; } .cp-dbl-info__head { gap: 12px; margin-bottom: 14px; } .cp-dbl-info__badge { width: 48px; height: 48px; font-size: 20px; border-radius: 13px; } .cp-dbl-hl { grid-template-columns: 1fr 1fr; gap: 10px; } .cp-dbl-hl__card { padding: 13px 10px; } } /* ═══════════ پاپ‌آپِ گرند فورس (هیرو روی بک‌گراند) ═══════════ */ .gf-modal { position: fixed; inset: 0; z-index: 3000; display: flex; align-items: center; justify-content: center; padding: 18px; } .gf-modal[hidden] { display: none; } .gf-modal__overlay { position: absolute; inset: 0; background: rgba(3, 5, 8, .82); backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px); } .gf-modal__frame { position: relative; direction: ltr; overflow: hidden; border-radius: 16px; container-type: inline-size; width: min(1160px, 96vw, calc(90vh * 1.777)); aspect-ratio: 1672 / 941; background: #0a0d10 url("images/cp/offers/grandforce-bg-desktop.webp") center / cover no-repeat; border: 1px solid rgba(255, 255, 255, .1); box-shadow: 0 30px 90px rgba(0, 0, 0, .7); animation: opPop .3s ease; } /* اسکریمِ سمتِ چپ (فضای متن/جوایز) تا خوانا بماند؛ کاراکتر سمتِ راست دست‌نخورده */ .gf-modal__frame::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, rgba(4, 7, 11, .82) 0%, rgba(4, 7, 11, .5) 40%, rgba(4, 7, 11, 0) 64%); } .gf-modal__x { position: absolute; top: 12px; inset-inline-end: 12px; z-index: 8; width: 34px; height: 34px; border-radius: 9px; cursor: pointer; font-size: 14px; color: var(--cp-gold); background: rgba(0, 0, 0, .5); border: 1px solid rgba(255, 193, 7, .4); transition: background .18s ease; } .gf-modal__x:hover { background: rgba(255, 193, 7, .2); } /* ستونِ محتوا: سربرگ + جوایز + مزیت‌ها — چپِ دسکتاپ */ .gf-stack { position: absolute; z-index: 3; direction: rtl; left: 3.5%; top: 5%; width: 40%; max-height: 90%; display: flex; flex-direction: column; gap: 1.3cqw; } .gf-head { display: flex; flex-direction: column; align-items: flex-start; gap: .3cqw; } .gf-emblem { width: clamp(26px, 4.4cqw, 46px); height: clamp(26px, 4.4cqw, 46px); color: var(--cp-gold-2); filter: drop-shadow(0 2px 8px rgba(255, 179, 0, .5)); animation: gfIn .5s ease both .05s; } .gf-emblem svg { width: 100%; height: 100%; } .gf-title { margin: 0; font-size: clamp(17px, 3.5cqw, 32px); font-weight: 900; line-height: 1.1; letter-spacing: .3px; color: #fff; text-shadow: 0 3px 14px rgba(0, 0, 0, .85); animation: gfIn .5s ease both .12s; } .gf-sub { margin: 0; font-size: clamp(11px, 1.9cqw, 17px); font-weight: 700; color: var(--cp-gold-2); text-shadow: 0 2px 9px rgba(0, 0, 0, .9); animation: gfIn .5s ease both .18s; } .gf-rewards { animation: gfIn .55s ease both .24s; } .gf-rewards img { display: block; width: 100%; height: auto; border-radius: 12px; border: 1px solid rgba(255, 193, 7, .3); box-shadow: 0 14px 34px rgba(0, 0, 0, .55), 0 0 0 1px rgba(0, 0, 0, .3) inset; } /* ۵ مزیتِ فشرده — دو ستون روی دسکتاپ */ .gf-perks { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: .8cqw 1.6cqw; } .gf-perks li { display: flex; align-items: center; gap: 1cqw; font-size: clamp(9px, 1.4cqw, 13px); font-weight: 700; color: #eef2f6; text-shadow: 0 1px 5px rgba(0, 0, 0, .9); animation: gfIn .5s ease both; } .gf-perks li:nth-child(1) { animation-delay: .30s; } .gf-perks li:nth-child(2) { animation-delay: .36s; } .gf-perks li:nth-child(3) { animation-delay: .42s; } .gf-perks li:nth-child(4) { animation-delay: .48s; } .gf-perks li:nth-child(5) { animation-delay: .54s; } .gf-perks b { color: var(--cp-gold-2); } .gf-perk__ic { flex: none; width: clamp(20px, 2.5cqw, 28px); height: clamp(20px, 2.5cqw, 28px); display: grid; place-items: center; border-radius: 8px; color: var(--cp-gold-2); background: rgba(255, 193, 7, .12); border: 1px solid rgba(255, 193, 7, .32); } .gf-perk__ic svg { width: 58%; height: 58%; } /* کلیدِ باز/بستِ مزیت‌ها — فقط موبایل (دسکتاپ همیشه باز) */ .gf-perks-toggle { display: none; } /* دکمهٔ قیمت روی بدنِ کاراکتر (راستِ دسکتاپ) */ .gf-cta { position: absolute; z-index: 4; direction: rtl; right: 5%; bottom: 12%; width: clamp(180px, 26cqw, 300px); display: flex; flex-direction: column; align-items: center; gap: 7px; text-align: center; animation: gfIn .55s ease both .5s; } .gf-cta__tag { font-size: clamp(10px, 1.5cqw, 14px); font-weight: 800; color: #fff; padding: 4px 12px; border-radius: 999px; background: rgba(6, 9, 12, .68); border: 1px solid rgba(255, 193, 7, .45); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } .gf-cta__btn { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; width: 100%; text-decoration: none; padding: 12px 18px; border-radius: 12px; color: #241500; overflow: hidden; background: linear-gradient(180deg, #ffe08a 0%, var(--cp-gold-2) 46%, var(--cp-gold) 55%, #d99a06 100%); border: 1px solid rgba(255, 240, 190, .8); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), 0 10px 26px rgba(255, 168, 0, .45), 0 4px 12px rgba(0, 0, 0, .4); transition: transform .15s ease, filter .15s ease; } .gf-cta__btn::after { content: ""; position: absolute; top: 0; inset-inline-start: -60%; width: 45%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55), transparent); transform: skewX(-18deg); animation: gfShine 3.4s ease-in-out 1.2s infinite; } .gf-cta__btn:hover { transform: translateY(-2px); filter: brightness(1.05); } .gf-cta__btn:active { transform: translateY(1px); } .gf-cta__label { font-size: clamp(12px, 1.75cqw, 16px); font-weight: 900; letter-spacing: .2px; } .gf-cta__price { font-size: clamp(13px, 2.1cqw, 19px); font-weight: 900; letter-spacing: .3px; } .gf-cta__btn.is-ask .gf-cta__price { font-size: clamp(11px, 1.55cqw, 14px); } .gf-cta__renew { font-size: clamp(9px, 1.25cqw, 12px); font-weight: 600; color: #cfd6dd; text-shadow: 0 1px 5px rgba(0, 0, 0, .9); } /* دکمهٔ جزئیات (پایین-چپ) → پنلِ توضیحات */ .gf-info-toggle { position: absolute; z-index: 5; left: 50%; transform: translateX(-50%); bottom: 3.5%; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; padding: 7px 14px; border-radius: 999px; font-weight: 800; font-size: 13px; color: var(--cp-gold-2); background: rgba(6, 9, 12, .72); border: 1px solid rgba(255, 193, 7, .4); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); transition: background .18s ease, transform .15s ease; } .gf-info-toggle span { display: inline-grid; place-items: center; width: 17px; height: 17px; border-radius: 50%; background: var(--cp-gold); color: #241500; font-size: 12px; font-weight: 900; } .gf-info-toggle:hover { background: rgba(255, 193, 7, .18); transform: translateX(-50%) translateY(-1px); } /* پنلِ توضیحاتِ کامل — از راست می‌آید، درونِ فریم */ .gf-info { position: absolute; z-index: 9; direction: rtl; top: 0; right: 0; height: 100%; width: min(400px, 82cqw); display: flex; flex-direction: column; background: linear-gradient(180deg, rgba(14, 18, 24, .97), rgba(9, 12, 16, .98)); border-inline-start: 1px solid rgba(255, 193, 7, .35); box-shadow: -18px 0 44px rgba(0, 0, 0, .55); transform: translateX(100%); transition: transform .3s cubic-bezier(.2, .7, .2, 1); } .gf-info[hidden] { display: none; } .gf-info.is-open { transform: translateX(0); } .gf-info__bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px; background: linear-gradient(180deg, #26303c, #1a222c); border-bottom: 1px solid rgba(0, 0, 0, .4); } .gf-info__bar h3 { margin: 0; font-size: 16px; font-weight: 900; color: #fff; } .gf-info__x { flex: none; width: 32px; height: 32px; border-radius: 8px; cursor: pointer; font-size: 13px; color: var(--cp-gold); background: rgba(255, 193, 7, .08); border: 1px solid rgba(255, 193, 7, .4); transition: background .18s ease; } .gf-info__x:hover { background: rgba(255, 193, 7, .2); } .gf-info__body { flex: 1; overflow-y: auto; padding: 16px 18px 20px; scrollbar-width: thin; scrollbar-color: rgba(255, 193, 7, .5) transparent; } .gf-info__body::-webkit-scrollbar { width: 7px; } .gf-info__body::-webkit-scrollbar-thumb { background: rgba(255, 193, 7, .45); border-radius: 8px; } .gf-info__body p { margin: 0 0 12px; font-size: 13.5px; line-height: 1.85; color: #d3d9df; } .gf-info__body h4 { margin: 6px 0 10px; font-size: 14px; font-weight: 900; color: var(--cp-gold-2); } .gf-info__list { margin: 0 0 14px; padding-inline-start: 18px; display: flex; flex-direction: column; gap: 9px; } .gf-info__list li { font-size: 13px; line-height: 1.7; color: #d3d9df; } .gf-info__list b { color: #fff; } .gf-info__note { padding: 11px 13px; border-radius: 10px; background: rgba(255, 193, 7, .09); border: 1px solid rgba(255, 193, 7, .3); font-size: 12.5px !important; line-height: 1.75 !important; color: #e7ebee !important; } .gf-info__note b { color: var(--cp-gold-2); } @keyframes gfIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } @keyframes gfShine { 0%, 100% { inset-inline-start: -60%; } 22%, 78% { inset-inline-start: 120%; } } /* ── موبایل: بک‌گراندِ عمودی، جوایز بالا، دکمهٔ قیمت وسط-پایین ── */ @media (max-width: 760px) { /* موبایل: چیدمانِ جریانیِ عمودی تا باز شدنِ مزایا روی دکمه‌ها نیفتد و در صورتِ نیاز اسکرول شود */ .gf-modal { padding: 8px; } .gf-modal__frame { aspect-ratio: auto; height: auto; max-height: 94vh; overflow: hidden auto; width: min(94vw, 430px); display: flex; flex-direction: column; gap: 12px; background: #0a0d10 url("images/cp/offers/grandforce-bg-mobile.webp") center / cover no-repeat; padding: 46px 0 16px; } .gf-modal__frame::before { background: linear-gradient(180deg, rgba(4, 7, 11, .5) 0%, rgba(4, 7, 11, .72) 55%, rgba(4, 7, 11, .9) 100%); } .gf-stack, .gf-cta, .gf-info-toggle { position: relative; z-index: 3; } .gf-stack { left: auto; right: auto; top: auto; width: auto; max-height: none; padding: 0 14px; gap: 12px; } .gf-head { align-items: center; text-align: center; gap: 3px; } .gf-title { font-size: clamp(19px, 6.6cqw, 30px); } .gf-sub { font-size: clamp(11px, 3cqw, 15px); } .gf-rewards { width: 100%; max-width: 290px; margin: 0 auto; } .gf-perks-toggle { display: inline-flex; align-self: center; align-items: center; gap: 7px; cursor: pointer; padding: 8px 18px; border-radius: 999px; font-weight: 800; font-size: 13px; color: var(--cp-gold-2); background: rgba(6, 9, 12, .6); border: 1px solid rgba(255, 193, 7, .42); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); animation: gfIn .5s ease both .3s; transition: background .18s ease; } .gf-perks-toggle:hover { background: rgba(255, 193, 7, .16); } .gf-perks-toggle__chev { width: 15px; height: 15px; transition: transform .28s ease; } .gf-perks-toggle[aria-expanded="true"] .gf-perks-toggle__chev { transform: rotate(180deg); } .gf-perks { grid-template-columns: 1fr; gap: 2.2cqw; overflow: hidden; max-height: 0; padding: 0 12px; border-radius: 12px; border: 1px solid transparent; background: transparent; backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); transition: max-height .34s ease, padding .3s ease, border-color .3s ease, background .3s ease; } /* باز که شد: سقفِ ارتفاع + اسکرولِ داخلی تا لیستِ بلند هم جا شود و پایین را نریزد */ .gf-perks.is-open { max-height: 40vh; overflow-y: auto; padding: 10px 12px; border-color: rgba(255, 193, 7, .22); background: rgba(6, 9, 12, .5); scrollbar-width: thin; scrollbar-color: rgba(255, 193, 7, .5) transparent; } .gf-perks.is-open::-webkit-scrollbar { width: 6px; } .gf-perks.is-open::-webkit-scrollbar-thumb { background: rgba(255, 193, 7, .45); border-radius: 8px; } .gf-perks li { font-size: clamp(11px, 3.2cqw, 14px); gap: 2.4cqw; } .gf-perk__ic { width: clamp(24px, 6cqw, 30px); height: clamp(24px, 6cqw, 30px); } .gf-cta { left: auto; right: auto; bottom: auto; margin: 4px auto 0; width: min(88%, 320px); } .gf-cta__tag { font-size: clamp(11px, 3cqw, 13px); } .gf-cta__label { font-size: clamp(13px, 3.6cqw, 16px); } .gf-cta__price { font-size: clamp(15px, 4.4cqw, 19px); } .gf-cta__renew { font-size: clamp(10px, 2.7cqw, 12px); } .gf-info { width: 100%; } /* دکمهٔ توضیحات: کوچیک‌تر و زیرِ دکمهٔ خرید (نه رویش) */ .gf-info-toggle { left: auto; bottom: auto; transform: none; margin: 8px auto 0; padding: 5px 12px; font-size: 12px; } .gf-info-toggle span { width: 15px; height: 15px; font-size: 11px; } .gf-info-toggle:hover { transform: translateY(-1px); } } @media (prefers-reduced-motion: reduce) { .gf-modal *, .gf-cta__btn::after { animation-duration: .01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; } } /* ═══════════ پاپ‌آپِ Low Spend (دو ردیفِ رایگان/ویژه) ═══════════ */ .ls-modal { position: fixed; inset: 0; z-index: 3000; display: flex; align-items: center; justify-content: center; padding: 18px; } .ls-modal[hidden] { display: none; } .ls-modal__overlay { position: absolute; inset: 0; background: rgba(3, 5, 8, .82); backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px); } .ls-modal__frame { position: relative; direction: ltr; overflow: hidden; border-radius: 16px; container-type: inline-size; width: min(1160px, 96vw, calc(90vh * 1.777)); aspect-ratio: 1672 / 941; background: #0a0d10 url("images/cp/offers/ls-bg-desktop.webp") center / cover no-repeat; border: 1px solid rgba(255, 255, 255, .1); box-shadow: 0 30px 90px rgba(0, 0, 0, .7); animation: opPop .3s ease; } .ls-modal__frame::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, rgba(4, 7, 11, .86) 0%, rgba(4, 7, 11, .56) 42%, rgba(4, 7, 11, 0) 66%); } .ls-modal__x { position: absolute; top: 12px; inset-inline-end: 12px; z-index: 8; width: 34px; height: 34px; border-radius: 9px; cursor: pointer; font-size: 14px; color: var(--cp-gold); background: rgba(0, 0, 0, .5); border: 1px solid rgba(255, 193, 7, .4); transition: background .18s ease; } .ls-modal__x:hover { background: rgba(255, 193, 7, .2); } .ls-stack { position: absolute; z-index: 3; direction: rtl; left: 3.5%; top: 5%; width: 46%; max-height: 90%; display: flex; flex-direction: column; gap: 1.5cqw; } .ls-head { display: flex; flex-direction: column; align-items: flex-start; gap: .3cqw; } .ls-emblem { width: clamp(26px, 4.2cqw, 44px); height: clamp(26px, 4.2cqw, 44px); color: var(--cp-gold-2); filter: drop-shadow(0 2px 8px rgba(255, 179, 0, .5)); animation: gfIn .5s ease both .05s; } .ls-emblem svg { width: 100%; height: 100%; } .ls-title { margin: 0; font-size: clamp(17px, 3.5cqw, 32px); font-weight: 900; line-height: 1.1; letter-spacing: .3px; direction: ltr; color: #fff; text-shadow: 0 3px 14px rgba(0, 0, 0, .85); animation: gfIn .5s ease both .12s; } .ls-sub { margin: 0; font-size: clamp(11px, 1.85cqw, 16px); font-weight: 700; color: var(--cp-gold-2); text-shadow: 0 2px 9px rgba(0, 0, 0, .9); animation: gfIn .5s ease both .18s; } .ls-rows { display: flex; flex-direction: column; gap: 1.3cqw; } .ls-row { padding: clamp(9px, 1.5cqw, 15px); border-radius: 14px; background: rgba(6, 9, 12, .55); border: 1px solid rgba(255, 255, 255, .12); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); animation: gfIn .5s ease both; } .ls-row--free { animation-delay: .26s; } .ls-row--prem { animation-delay: .34s; border-color: rgba(255, 193, 7, .5); background: linear-gradient(180deg, rgba(255, 193, 7, .12), rgba(6, 9, 12, .55)); box-shadow: 0 8px 22px rgba(255, 168, 0, .14); } .ls-row__head { display: flex; align-items: center; gap: 1.4cqw; margin-bottom: .8cqw; } .ls-row__ic { flex: none; width: clamp(24px, 3.4cqw, 34px); height: clamp(24px, 3.4cqw, 34px); display: grid; place-items: center; border-radius: 9px; color: #cfd6dd; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .16); } .ls-row__ic--gold { color: var(--cp-gold-2); background: rgba(255, 193, 7, .14); border-color: rgba(255, 193, 7, .4); } .ls-row__ic svg { width: 60%; height: 60%; } .ls-row__head h3 { margin: 0; flex: 1; font-size: clamp(12px, 2cqw, 18px); font-weight: 900; color: #fff; text-shadow: 0 1px 6px rgba(0, 0, 0, .8); } .ls-row__tag { flex: none; font-size: clamp(9px, 1.3cqw, 12px); font-weight: 800; color: #cfd6dd; padding: 3px 10px; border-radius: 999px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .18); } .ls-row__tag--gold { color: #241500; background: linear-gradient(135deg, var(--cp-gold-2), var(--cp-gold)); border-color: transparent; direction: ltr; } .ls-row > p { margin: 0; font-size: clamp(10px, 1.55cqw, 14px); line-height: 1.65; color: #d6dbe1; text-shadow: 0 1px 5px rgba(0, 0, 0, .85); } .ls-prem-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .9cqw; } .ls-prem-list li { display: flex; align-items: center; gap: 1.2cqw; font-size: clamp(10px, 1.5cqw, 14px); font-weight: 700; color: #eef2f6; text-shadow: 0 1px 5px rgba(0, 0, 0, .9); } .ls-prem-list b { color: var(--cp-gold-2); } .ls-prem__ic { flex: none; width: clamp(20px, 2.5cqw, 28px); height: clamp(20px, 2.5cqw, 28px); display: grid; place-items: center; border-radius: 8px; color: var(--cp-gold-2); background: rgba(255, 193, 7, .12); border: 1px solid rgba(255, 193, 7, .32); } .ls-prem__ic svg { width: 58%; height: 58%; } .ls-rows-toggle { display: none; } /* دکمهٔ قیمت (روی کریت‌های راستِ دسکتاپ) */ .ls-cta { position: absolute; z-index: 4; direction: rtl; right: 5.5%; bottom: 13%; width: clamp(190px, 27cqw, 310px); display: flex; flex-direction: column; align-items: center; gap: 7px; text-align: center; animation: gfIn .55s ease both .46s; } .ls-cta__btn { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; width: 100%; text-decoration: none; padding: 12px 18px; border-radius: 12px; color: #241500; overflow: hidden; background: linear-gradient(180deg, #ffe08a 0%, var(--cp-gold-2) 46%, var(--cp-gold) 55%, #d99a06 100%); border: 1px solid rgba(255, 240, 190, .8); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), 0 10px 26px rgba(255, 168, 0, .45), 0 4px 12px rgba(0, 0, 0, .4); transition: transform .15s ease, filter .15s ease; } .ls-cta__btn::after { content: ""; position: absolute; top: 0; inset-inline-start: -60%; width: 45%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55), transparent); transform: skewX(-18deg); animation: gfShine 3.4s ease-in-out 1.2s infinite; } .ls-cta__btn:hover { transform: translateY(-2px); filter: brightness(1.05); } .ls-cta__btn:active { transform: translateY(1px); } .ls-cta__label { font-size: clamp(12px, 1.75cqw, 16px); font-weight: 900; letter-spacing: .2px; } .ls-cta__price { font-size: clamp(13px, 2.1cqw, 19px); font-weight: 900; letter-spacing: .3px; } .ls-cta__btn.is-ask .ls-cta__price { font-size: clamp(11px, 1.55cqw, 14px); } .ls-info-toggle { position: absolute; z-index: 5; left: 50%; transform: translateX(-50%); bottom: 3.5%; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; padding: 7px 14px; border-radius: 999px; font-weight: 800; font-size: 13px; color: var(--cp-gold-2); background: rgba(6, 9, 12, .72); border: 1px solid rgba(255, 193, 7, .4); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); transition: background .18s ease, transform .15s ease; } .ls-info-toggle span { display: inline-grid; place-items: center; width: 17px; height: 17px; border-radius: 50%; background: var(--cp-gold); color: #241500; font-size: 12px; font-weight: 900; } .ls-info-toggle:hover { background: rgba(255, 193, 7, .18); transform: translateX(-50%) translateY(-1px); } .ls-info { position: absolute; z-index: 9; direction: rtl; top: 0; right: 0; height: 100%; width: min(400px, 82cqw); display: flex; flex-direction: column; background: linear-gradient(180deg, rgba(14, 18, 24, .97), rgba(9, 12, 16, .98)); border-inline-start: 1px solid rgba(255, 193, 7, .35); box-shadow: -18px 0 44px rgba(0, 0, 0, .55); transform: translateX(100%); transition: transform .3s cubic-bezier(.2, .7, .2, 1); } .ls-info[hidden] { display: none; } .ls-info.is-open { transform: translateX(0); } .ls-info__bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px; background: linear-gradient(180deg, #26303c, #1a222c); border-bottom: 1px solid rgba(0, 0, 0, .4); } .ls-info__bar h3 { margin: 0; font-size: 16px; font-weight: 900; color: #fff; } .ls-info__x { flex: none; width: 32px; height: 32px; border-radius: 8px; cursor: pointer; font-size: 13px; color: var(--cp-gold); background: rgba(255, 193, 7, .08); border: 1px solid rgba(255, 193, 7, .4); transition: background .18s ease; } .ls-info__x:hover { background: rgba(255, 193, 7, .2); } .ls-info__body { flex: 1; overflow-y: auto; padding: 16px 18px 20px; scrollbar-width: thin; scrollbar-color: rgba(255, 193, 7, .5) transparent; } .ls-info__body::-webkit-scrollbar { width: 7px; } .ls-info__body::-webkit-scrollbar-thumb { background: rgba(255, 193, 7, .45); border-radius: 8px; } .ls-info__body p { margin: 0 0 12px; font-size: 13.5px; line-height: 1.85; color: #d3d9df; } .ls-info__body h4 { margin: 6px 0 10px; font-size: 14px; font-weight: 900; color: var(--cp-gold-2); } .ls-info__list { margin: 0 0 14px; padding-inline-start: 18px; display: flex; flex-direction: column; gap: 9px; } .ls-info__list li { font-size: 13px; line-height: 1.7; color: #d3d9df; } .ls-info__list b { color: #fff; } .ls-info__note { padding: 11px 13px; border-radius: 10px; background: rgba(255, 193, 7, .09); border: 1px solid rgba(255, 193, 7, .3); font-size: 12.5px !important; line-height: 1.75 !important; color: #e7ebee !important; } .ls-info__note b { color: var(--cp-gold-2); } .ls-info__body b { color: var(--cp-gold-2); } /* ── موبایل: بک‌گراندِ عمودی، جوایز تاشو، دکمهٔ قیمت وسط-پایین ── */ @media (max-width: 760px) { .ls-modal { padding: 8px; } .ls-modal__frame { aspect-ratio: 853 / 1844; width: min(94vw, calc(90vh * 0.4626)); background-image: url("images/cp/offers/ls-bg-mobile.webp"); background-position: bottom center; } .ls-modal__frame::before { background: linear-gradient(180deg, rgba(4, 7, 11, .84) 26%, rgba(4, 7, 11, .38) 52%, rgba(4, 7, 11, 0) 74%); } .ls-stack { left: 4%; right: 4%; width: auto; top: 5%; gap: 3cqw; } .ls-head { align-items: center; text-align: center; } .ls-title { font-size: clamp(19px, 6.4cqw, 30px); } .ls-sub { font-size: clamp(11px, 3cqw, 15px); } .ls-rows { gap: 2.6cqw; } .ls-row { padding: 11px 13px; } .ls-row__head h3 { font-size: clamp(13px, 4cqw, 17px); } .ls-row > p { font-size: clamp(11px, 3.1cqw, 14px); } .ls-prem-list li { font-size: clamp(11px, 3.1cqw, 14px); } .ls-cta { left: 0; right: 0; margin-inline: auto; bottom: 13%; width: min(78%, 300px); } .ls-cta__label { font-size: clamp(13px, 3.6cqw, 16px); } .ls-cta__price { font-size: clamp(15px, 4.4cqw, 19px); } .ls-info { width: 100%; } /* دکمهٔ توضیحات: کوچیک‌تر و زیرِ دکمهٔ خرید (نه رویش) */ .ls-info-toggle { bottom: 3.5%; padding: 5px 12px; font-size: 12px; } .ls-info-toggle span { width: 15px; height: 15px; font-size: 11px; } } @media (prefers-reduced-motion: reduce) { .ls-modal *, .ls-cta__btn::after { animation-duration: .01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; } } /* ═══════════ پاپ‌آپِ پک پرایس (استارتر پکِ کاپیتان پرایس) ═══════════ */ .pp-modal { position: fixed; inset: 0; z-index: 3000; display: flex; align-items: center; justify-content: center; padding: 18px; } .pp-modal[hidden] { display: none; } .pp-modal__overlay { position: absolute; inset: 0; background: rgba(3, 5, 8, .82); backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px); } .pp-modal__frame { position: relative; direction: ltr; overflow: hidden; border-radius: 16px; container-type: inline-size; width: min(1000px, 96vw, calc(90vh * 1.5)); aspect-ratio: 1536 / 1024; background: #0a0d10 url("images/cp/offers/pp-bg-desktop.webp") center / cover no-repeat; border: 1px solid rgba(255, 255, 255, .1); box-shadow: 0 30px 90px rgba(0, 0, 0, .7); animation: opPop .3s ease; } .pp-modal__frame::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, rgba(4, 7, 11, .86) 0%, rgba(4, 7, 11, .55) 42%, rgba(4, 7, 11, 0) 66%); } .pp-modal__x { position: absolute; top: 12px; inset-inline-end: 12px; z-index: 8; width: 34px; height: 34px; border-radius: 9px; cursor: pointer; font-size: 14px; color: var(--cp-gold); background: rgba(0, 0, 0, .5); border: 1px solid rgba(255, 193, 7, .4); transition: background .18s ease; } .pp-modal__x:hover { background: rgba(255, 193, 7, .2); } .pp-stack { position: absolute; z-index: 3; direction: rtl; left: 4%; top: 6%; width: 46%; max-height: 88%; display: flex; flex-direction: column; gap: 2.4cqw; } .pp-head { display: flex; flex-direction: column; align-items: flex-start; gap: .4cqw; } .pp-badge { font-size: clamp(9px, 1.5cqw, 13px); font-weight: 900; letter-spacing: 1.5px; direction: ltr; color: #241500; padding: 3px 12px; border-radius: 999px; background: linear-gradient(135deg, var(--cp-gold-2), var(--cp-gold)); animation: gfIn .5s ease both .05s; } .pp-title { margin: 0; font-size: clamp(20px, 4.4cqw, 42px); font-weight: 900; line-height: 1.06; letter-spacing: .3px; color: #fff; text-shadow: 0 3px 14px rgba(0, 0, 0, .85); animation: gfIn .5s ease both .12s; } .pp-sub { margin: 0; font-size: clamp(11px, 1.9cqw, 17px); font-weight: 700; color: var(--cp-gold-2); text-shadow: 0 2px 9px rgba(0, 0, 0, .9); animation: gfIn .5s ease both .18s; } .pp-rewards { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1.6cqw; } .pp-rewards li { display: flex; align-items: center; gap: 1.6cqw; padding: clamp(9px, 1.5cqw, 15px); border-radius: 14px; background: rgba(6, 9, 12, .55); border: 1px solid rgba(255, 193, 7, .28); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); animation: gfIn .5s ease both; } .pp-rewards li:nth-child(1) { animation-delay: .26s; } .pp-rewards li:nth-child(2) { animation-delay: .34s; } .pp-rewards li:nth-child(3) { animation-delay: .42s; } .pp-reward__ic { flex: none; width: clamp(30px, 4.6cqw, 46px); height: clamp(30px, 4.6cqw, 46px); display: grid; place-items: center; border-radius: 11px; color: var(--cp-gold-2); background: rgba(255, 193, 7, .13); border: 1px solid rgba(255, 193, 7, .38); } .pp-reward__ic svg { width: 56%; height: 56%; } .pp-reward__t { display: flex; flex-direction: column; gap: 2px; } .pp-reward__t b { font-size: clamp(11px, 1.85cqw, 16px); font-weight: 900; color: #fff; text-shadow: 0 1px 6px rgba(0, 0, 0, .85); } .pp-reward__t i { font-size: clamp(9.5px, 1.45cqw, 13px); font-style: normal; color: #c7ccd2; text-shadow: 0 1px 5px rgba(0, 0, 0, .85); } /* دکمهٔ قیمت روی بدنِ کاراکتر (راستِ دسکتاپ) */ .pp-cta { position: absolute; z-index: 4; direction: rtl; right: 5.5%; bottom: 12%; width: clamp(190px, 27cqw, 300px); display: flex; flex-direction: column; align-items: center; gap: 7px; text-align: center; animation: gfIn .55s ease both .48s; } .pp-cta__btn { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; width: 100%; text-decoration: none; padding: 12px 18px; border-radius: 12px; color: #241500; overflow: hidden; background: linear-gradient(180deg, #ffe08a 0%, var(--cp-gold-2) 46%, var(--cp-gold) 55%, #d99a06 100%); border: 1px solid rgba(255, 240, 190, .8); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), 0 10px 26px rgba(255, 168, 0, .45), 0 4px 12px rgba(0, 0, 0, .4); transition: transform .15s ease, filter .15s ease; } .pp-cta__btn::after { content: ""; position: absolute; top: 0; inset-inline-start: -60%; width: 45%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55), transparent); transform: skewX(-18deg); animation: gfShine 3.4s ease-in-out 1.2s infinite; } .pp-cta__btn:hover { transform: translateY(-2px); filter: brightness(1.05); } .pp-cta__btn:active { transform: translateY(1px); } .pp-cta__label { font-size: clamp(12px, 1.75cqw, 16px); font-weight: 900; letter-spacing: .2px; } .pp-cta__price { font-size: clamp(13px, 2.1cqw, 19px); font-weight: 900; letter-spacing: .3px; } .pp-cta__btn.is-ask .pp-cta__price { font-size: clamp(11px, 1.55cqw, 14px); } .pp-info-toggle { position: absolute; z-index: 5; left: 50%; transform: translateX(-50%); bottom: 3.5%; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; padding: 7px 14px; border-radius: 999px; font-weight: 800; font-size: 13px; color: var(--cp-gold-2); background: rgba(6, 9, 12, .72); border: 1px solid rgba(255, 193, 7, .4); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); transition: background .18s ease, transform .15s ease; } .pp-info-toggle span { display: inline-grid; place-items: center; width: 17px; height: 17px; border-radius: 50%; background: var(--cp-gold); color: #241500; font-size: 12px; font-weight: 900; } .pp-info-toggle:hover { background: rgba(255, 193, 7, .18); transform: translateX(-50%) translateY(-1px); } .pp-info { position: absolute; z-index: 9; direction: rtl; top: 0; right: 0; height: 100%; width: min(400px, 82cqw); display: flex; flex-direction: column; background: linear-gradient(180deg, rgba(14, 18, 24, .97), rgba(9, 12, 16, .98)); border-inline-start: 1px solid rgba(255, 193, 7, .35); box-shadow: -18px 0 44px rgba(0, 0, 0, .55); transform: translateX(100%); transition: transform .3s cubic-bezier(.2, .7, .2, 1); } .pp-info[hidden] { display: none; } .pp-info.is-open { transform: translateX(0); } .pp-info__bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px; background: linear-gradient(180deg, #26303c, #1a222c); border-bottom: 1px solid rgba(0, 0, 0, .4); } .pp-info__bar h3 { margin: 0; font-size: 16px; font-weight: 900; color: #fff; } .pp-info__x { flex: none; width: 32px; height: 32px; border-radius: 8px; cursor: pointer; font-size: 13px; color: var(--cp-gold); background: rgba(255, 193, 7, .08); border: 1px solid rgba(255, 193, 7, .4); transition: background .18s ease; } .pp-info__x:hover { background: rgba(255, 193, 7, .2); } .pp-info__body { flex: 1; overflow-y: auto; padding: 16px 18px 20px; scrollbar-width: thin; scrollbar-color: rgba(255, 193, 7, .5) transparent; } .pp-info__body::-webkit-scrollbar { width: 7px; } .pp-info__body::-webkit-scrollbar-thumb { background: rgba(255, 193, 7, .45); border-radius: 8px; } .pp-info__body p { margin: 0 0 12px; font-size: 13.5px; line-height: 1.85; color: #d3d9df; } .pp-info__body b { color: var(--cp-gold-2); } .pp-info__list { margin: 0; padding-inline-start: 18px; display: flex; flex-direction: column; gap: 10px; } .pp-info__list li { font-size: 13px; line-height: 1.7; color: #d3d9df; } .pp-info__list b { color: #fff; } /* ── موبایل: متن‌ها همان سمت چپِ روی عکس (فقط کوچک‌تر، مثل بتل‌پس)؛ دکمه‌ها زیرِ عکس ── */ @media (max-width: 760px) { .pp-modal { padding: 8px; } .pp-modal__frame { width: min(96vw, 460px); aspect-ratio: auto; max-height: 94vh; overflow: hidden auto; background: #0a0d10 url("images/cp/offers/pp-bg-desktop.webp") top center / 100% auto no-repeat; padding-top: 66.7cqw; /* ارتفاعِ عکسِ افقی — دکمه‌ها زیرش جریان می‌گیرند */ padding-bottom: 14px; } .pp-modal__frame::before { inset: 0 0 auto 0; height: 66.7cqw; background: linear-gradient(90deg, rgba(4,7,11,.9) 0%, rgba(4,7,11,.55) 46%, rgba(4,7,11,0) 72%); } /* متن‌ها: absolute، سمت چپِ روی عکس، فقط سایزِ کوچک‌تر */ .pp-stack { top: 4cqw; left: 4%; width: 52%; max-height: 60cqw; gap: 1.6cqw; } .pp-title { font-size: clamp(13px, 4.6cqw, 22px); } .pp-sub { font-size: clamp(9px, 2cqw, 13px); } .pp-badge { font-size: clamp(7px, 1.6cqw, 11px); padding: 2px 8px; } .pp-rewards { gap: 1.4cqw; } .pp-rewards li { padding: 1.6cqw; gap: 1.6cqw; border-radius: 10px; } .pp-reward__ic { width: clamp(20px, 5.4cqw, 40px); height: clamp(20px, 5.4cqw, 40px); } .pp-reward__t b { font-size: clamp(10px, 2.4cqw, 15px); } .pp-reward__t i { font-size: clamp(8.5px, 1.9cqw, 12px); } /* دکمه‌ها: static، زیرِ عکس، وسط */ .pp-cta { position: static; right: auto; bottom: auto; width: min(84%, 320px); margin: 12px auto 6px; } .pp-cta__label { font-size: 15px; } .pp-cta__price { font-size: 17px; } .pp-cta__btn.is-ask .pp-cta__price { font-size: 14px; } .pp-info-toggle { position: static; transform: none; left: auto; bottom: auto; margin: 0 auto; } .pp-info { width: 100%; } } @media (prefers-reduced-motion: reduce) { .pp-modal *, .pp-cta__btn::after { animation-duration: .01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; } } /* ═══════════ پاپ‌آپِ پک گوست (تک‌عکسِ افقی برای همهٔ حالت‌ها) ═══════════ */ .gh-modal { position: fixed; inset: 0; z-index: 3000; display: flex; align-items: center; justify-content: center; padding: 18px; } .gh-modal[hidden] { display: none; } .gh-modal__overlay { position: absolute; inset: 0; background: rgba(3, 5, 8, .82); backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px); } .gh-modal__frame { position: relative; direction: ltr; overflow: hidden; border-radius: 16px; container-type: inline-size; width: min(1000px, 96vw, calc(90vh * 1.5)); aspect-ratio: 1536 / 1024; background: #0a0d10 url("images/cp/offers/gh-bg.webp?v=2") center / cover no-repeat; border: 1px solid rgba(255, 255, 255, .1); box-shadow: 0 30px 90px rgba(0, 0, 0, .7); animation: opPop .3s ease; } .gh-modal__frame::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, rgba(4, 7, 11, .86) 0%, rgba(4, 7, 11, .55) 42%, rgba(4, 7, 11, 0) 66%); } .gh-modal__x { position: absolute; top: 12px; inset-inline-end: 12px; z-index: 8; width: 34px; height: 34px; border-radius: 9px; cursor: pointer; font-size: 14px; color: var(--cp-gold); background: rgba(0, 0, 0, .5); border: 1px solid rgba(255, 193, 7, .4); transition: background .18s ease; } .gh-modal__x:hover { background: rgba(255, 193, 7, .2); } .gh-stack { position: absolute; z-index: 3; direction: rtl; left: 4%; top: 6%; width: 46%; max-height: 88%; display: flex; flex-direction: column; gap: 2.4cqw; } .gh-head { display: flex; flex-direction: column; align-items: flex-start; gap: .4cqw; } .gh-badge { font-size: clamp(9px, 1.5cqw, 13px); font-weight: 900; letter-spacing: 1.5px; direction: ltr; color: #241500; padding: 3px 12px; border-radius: 999px; background: linear-gradient(135deg, var(--cp-gold-2), var(--cp-gold)); animation: gfIn .5s ease both .05s; } .gh-title { margin: 0; font-size: clamp(20px, 4.4cqw, 42px); font-weight: 900; line-height: 1.06; letter-spacing: .3px; color: #fff; text-shadow: 0 3px 14px rgba(0, 0, 0, .85); animation: gfIn .5s ease both .12s; } .gh-sub { margin: 0; font-size: clamp(11px, 1.9cqw, 17px); font-weight: 700; color: var(--cp-gold-2); text-shadow: 0 2px 9px rgba(0, 0, 0, .9); animation: gfIn .5s ease both .18s; } .gh-rewards { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1.6cqw; } .gh-rewards li { display: flex; align-items: center; gap: 1.6cqw; padding: clamp(9px, 1.5cqw, 15px); border-radius: 14px; background: rgba(6, 9, 12, .55); border: 1px solid rgba(255, 193, 7, .28); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); animation: gfIn .5s ease both; } .gh-rewards li:nth-child(1) { animation-delay: .26s; } .gh-rewards li:nth-child(2) { animation-delay: .34s; } .gh-rewards li:nth-child(3) { animation-delay: .42s; } .gh-reward__ic { flex: none; width: clamp(30px, 4.6cqw, 46px); height: clamp(30px, 4.6cqw, 46px); display: grid; place-items: center; border-radius: 11px; color: var(--cp-gold-2); background: rgba(255, 193, 7, .13); border: 1px solid rgba(255, 193, 7, .38); } .gh-reward__ic svg { width: 56%; height: 56%; } .gh-reward__t { display: flex; flex-direction: column; gap: 2px; } .gh-reward__t b { font-size: clamp(11px, 1.85cqw, 16px); font-weight: 900; color: #fff; text-shadow: 0 1px 6px rgba(0, 0, 0, .85); } .gh-reward__t i { font-size: clamp(9.5px, 1.45cqw, 13px); font-style: normal; color: #c7ccd2; text-shadow: 0 1px 5px rgba(0, 0, 0, .85); } /* دکمهٔ قیمت روی بدنِ کاراکتر (راستِ افقی) */ .gh-cta { position: absolute; z-index: 4; direction: rtl; right: 5.5%; bottom: 12%; width: clamp(190px, 27cqw, 300px); display: flex; flex-direction: column; align-items: center; gap: 7px; text-align: center; animation: gfIn .55s ease both .48s; } .gh-cta__btn { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; width: 100%; text-decoration: none; padding: 12px 18px; border-radius: 12px; color: #241500; overflow: hidden; background: linear-gradient(180deg, #ffe08a 0%, var(--cp-gold-2) 46%, var(--cp-gold) 55%, #d99a06 100%); border: 1px solid rgba(255, 240, 190, .8); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), 0 10px 26px rgba(255, 168, 0, .45), 0 4px 12px rgba(0, 0, 0, .4); transition: transform .15s ease, filter .15s ease; } .gh-cta__btn::after { content: ""; position: absolute; top: 0; inset-inline-start: -60%; width: 45%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55), transparent); transform: skewX(-18deg); animation: gfShine 3.4s ease-in-out 1.2s infinite; } .gh-cta__btn:hover { transform: translateY(-2px); filter: brightness(1.05); } .gh-cta__btn:active { transform: translateY(1px); } .gh-cta__label { font-size: clamp(12px, 1.75cqw, 16px); font-weight: 900; letter-spacing: .2px; } .gh-cta__price { font-size: clamp(13px, 2.1cqw, 19px); font-weight: 900; letter-spacing: .3px; } .gh-cta__btn.is-ask .gh-cta__price { font-size: clamp(11px, 1.55cqw, 14px); } .gh-info-toggle { position: absolute; z-index: 5; left: 50%; transform: translateX(-50%); bottom: 3.5%; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; padding: 7px 14px; border-radius: 999px; font-weight: 800; font-size: 13px; color: var(--cp-gold-2); background: rgba(6, 9, 12, .72); border: 1px solid rgba(255, 193, 7, .4); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); transition: background .18s ease, transform .15s ease; } .gh-info-toggle span { display: inline-grid; place-items: center; width: 17px; height: 17px; border-radius: 50%; background: var(--cp-gold); color: #241500; font-size: 12px; font-weight: 900; } .gh-info-toggle:hover { background: rgba(255, 193, 7, .18); transform: translateX(-50%) translateY(-1px); } .gh-info { position: absolute; z-index: 9; direction: rtl; top: 0; right: 0; height: 100%; width: min(400px, 82cqw); display: flex; flex-direction: column; background: linear-gradient(180deg, rgba(14, 18, 24, .97), rgba(9, 12, 16, .98)); border-inline-start: 1px solid rgba(255, 193, 7, .35); box-shadow: -18px 0 44px rgba(0, 0, 0, .55); transform: translateX(100%); transition: transform .3s cubic-bezier(.2, .7, .2, 1); } .gh-info[hidden] { display: none; } .gh-info.is-open { transform: translateX(0); } .gh-info__bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px; background: linear-gradient(180deg, #26303c, #1a222c); border-bottom: 1px solid rgba(0, 0, 0, .4); } .gh-info__bar h3 { margin: 0; font-size: 16px; font-weight: 900; color: #fff; } .gh-info__x { flex: none; width: 32px; height: 32px; border-radius: 8px; cursor: pointer; font-size: 13px; color: var(--cp-gold); background: rgba(255, 193, 7, .08); border: 1px solid rgba(255, 193, 7, .4); transition: background .18s ease; } .gh-info__x:hover { background: rgba(255, 193, 7, .2); } .gh-info__body { flex: 1; overflow-y: auto; padding: 16px 18px 20px; scrollbar-width: thin; scrollbar-color: rgba(255, 193, 7, .5) transparent; } .gh-info__body::-webkit-scrollbar { width: 7px; } .gh-info__body::-webkit-scrollbar-thumb { background: rgba(255, 193, 7, .45); border-radius: 8px; } .gh-info__body p { margin: 0 0 12px; font-size: 13.5px; line-height: 1.85; color: #d3d9df; } .gh-info__body b { color: var(--cp-gold-2); } .gh-info__list { margin: 0; padding-inline-start: 18px; display: flex; flex-direction: column; gap: 10px; } .gh-info__list li { font-size: 13px; line-height: 1.7; color: #d3d9df; } .gh-info__list b { color: #fff; } .gh-info__note { margin: 4px 0 0; padding-top: 12px; border-top: 1px solid rgba(255, 193, 7, .18); font-size: 12.5px; line-height: 1.8; color: #c7ccd2; } /* موبایل: متن‌ها همان سمت چپِ روی عکس (فقط کوچک‌تر، مثل بتل‌پس)؛ دکمه‌ها زیرِ عکس */ @media (max-width: 760px) { .gh-modal { padding: 8px; } .gh-modal__frame { width: min(96vw, 460px); aspect-ratio: auto; max-height: 94vh; overflow: hidden auto; background: #0a0d10 url("images/cp/offers/gh-bg.webp?v=2") top center / 100% auto no-repeat; padding-top: 66.7cqw; /* ارتفاعِ عکسِ افقی — دکمه‌ها زیرش جریان می‌گیرند */ padding-bottom: 14px; } .gh-modal__frame::before { inset: 0 0 auto 0; height: 66.7cqw; background: linear-gradient(90deg, rgba(4,7,11,.9) 0%, rgba(4,7,11,.55) 46%, rgba(4,7,11,0) 72%); } /* متن‌ها: absolute، سمت چپِ روی عکس، فقط سایزِ کوچک‌تر */ .gh-stack { top: 4cqw; left: 4%; width: 52%; max-height: 60cqw; gap: 1.6cqw; } .gh-title { font-size: clamp(13px, 4.6cqw, 22px); } .gh-sub { font-size: clamp(9px, 2cqw, 13px); } .gh-badge { font-size: clamp(7px, 1.6cqw, 11px); padding: 2px 8px; } .gh-rewards { gap: 1.4cqw; } .gh-rewards li { padding: 1.6cqw; gap: 1.6cqw; border-radius: 10px; } .gh-reward__ic { width: clamp(20px, 5.4cqw, 40px); height: clamp(20px, 5.4cqw, 40px); } .gh-reward__t b { font-size: clamp(10px, 2.4cqw, 15px); } .gh-reward__t i { font-size: clamp(8.5px, 1.9cqw, 12px); } /* دکمه‌ها: static، زیرِ عکس، وسط */ .gh-cta { position: static; right: auto; bottom: auto; width: min(84%, 320px); margin: 12px auto 6px; } .gh-cta__label { font-size: 15px; } .gh-cta__price { font-size: 17px; } .gh-cta__btn.is-ask .gh-cta__price { font-size: 14px; } .gh-info-toggle { position: static; transform: none; left: auto; bottom: auto; margin: 0 auto; } .gh-info { width: 100%; } } @media (prefers-reduced-motion: reduce) { .gh-modal *, .gh-cta__btn::after { animation-duration: .01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; } } /* ═══════════ پاپ‌آپِ آفرِ لیمیت کارت طلایی (تک‌عکسِ افقی برای همهٔ حالت‌ها) ═══════════ */ .lg-modal { position: fixed; inset: 0; z-index: 3000; display: flex; align-items: center; justify-content: center; padding: 18px; } .lg-modal[hidden] { display: none; } .lg-modal__overlay { position: absolute; inset: 0; background: rgba(3, 5, 8, .82); backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px); } .lg-modal__frame { position: relative; direction: ltr; overflow: hidden; border-radius: 16px; container-type: inline-size; width: min(1000px, 96vw, calc(90vh * 1.777)); aspect-ratio: 1672 / 941; background: #0a0d10 url("images/cp/offers/lg-bg.webp?v=2") center / cover no-repeat; border: 1px solid rgba(255, 255, 255, .1); box-shadow: 0 30px 90px rgba(0, 0, 0, .7); animation: opPop .3s ease; } .lg-modal__frame::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, rgba(4, 7, 11, .86) 0%, rgba(4, 7, 11, .55) 42%, rgba(4, 7, 11, 0) 66%); } .lg-modal__x { position: absolute; top: 12px; inset-inline-end: 12px; z-index: 8; width: 34px; height: 34px; border-radius: 9px; cursor: pointer; font-size: 14px; color: var(--cp-gold); background: rgba(0, 0, 0, .5); border: 1px solid rgba(255, 193, 7, .4); transition: background .18s ease; } .lg-modal__x:hover { background: rgba(255, 193, 7, .2); } .lg-stack { position: absolute; z-index: 3; direction: rtl; left: 4%; top: 6%; width: 46%; max-height: 88%; display: flex; flex-direction: column; gap: 2.4cqw; } .lg-head { display: flex; flex-direction: column; align-items: flex-start; gap: .4cqw; } .lg-badge { font-size: clamp(9px, 1.5cqw, 13px); font-weight: 900; letter-spacing: 1.5px; direction: ltr; color: #241500; padding: 3px 12px; border-radius: 999px; background: linear-gradient(135deg, var(--cp-gold-2), var(--cp-gold)); animation: gfIn .5s ease both .05s; } .lg-title { margin: 0; font-size: clamp(20px, 4.4cqw, 42px); font-weight: 900; line-height: 1.06; letter-spacing: .3px; color: #fff; text-shadow: 0 3px 14px rgba(0, 0, 0, .85); animation: gfIn .5s ease both .12s; } .lg-sub { margin: 0; font-size: clamp(11px, 1.9cqw, 17px); font-weight: 700; color: var(--cp-gold-2); text-shadow: 0 2px 9px rgba(0, 0, 0, .9); animation: gfIn .5s ease both .18s; } .lg-rewards { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1.6cqw; } .lg-rewards li { display: flex; align-items: center; gap: 1.6cqw; padding: clamp(9px, 1.5cqw, 15px); border-radius: 14px; background: rgba(6, 9, 12, .55); border: 1px solid rgba(255, 193, 7, .28); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); animation: gfIn .5s ease both; } .lg-rewards li:nth-child(1) { animation-delay: .26s; } .lg-rewards li:nth-child(2) { animation-delay: .34s; } .lg-rewards li:nth-child(3) { animation-delay: .42s; } .lg-reward__ic { flex: none; width: clamp(30px, 4.6cqw, 46px); height: clamp(30px, 4.6cqw, 46px); display: grid; place-items: center; border-radius: 11px; color: var(--cp-gold-2); background: rgba(255, 193, 7, .13); border: 1px solid rgba(255, 193, 7, .38); } .lg-reward__ic svg { width: 56%; height: 56%; } .lg-reward__t { display: flex; flex-direction: column; gap: 2px; } .lg-reward__t b { font-size: clamp(11px, 1.85cqw, 16px); font-weight: 900; color: #fff; text-shadow: 0 1px 6px rgba(0, 0, 0, .85); } .lg-reward__t i { font-size: clamp(9.5px, 1.45cqw, 13px); font-style: normal; color: #c7ccd2; text-shadow: 0 1px 5px rgba(0, 0, 0, .85); } .lg-cta { position: absolute; z-index: 4; direction: rtl; right: 5.5%; bottom: 12%; width: clamp(190px, 27cqw, 300px); display: flex; flex-direction: column; align-items: center; gap: 7px; text-align: center; animation: gfIn .55s ease both .48s; } .lg-cta__btn { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; width: 100%; text-decoration: none; padding: 12px 18px; border-radius: 12px; color: #241500; overflow: hidden; background: linear-gradient(180deg, #ffe08a 0%, var(--cp-gold-2) 46%, var(--cp-gold) 55%, #d99a06 100%); border: 1px solid rgba(255, 240, 190, .8); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), 0 10px 26px rgba(255, 168, 0, .45), 0 4px 12px rgba(0, 0, 0, .4); transition: transform .15s ease, filter .15s ease; } .lg-cta__btn::after { content: ""; position: absolute; top: 0; inset-inline-start: -60%; width: 45%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55), transparent); transform: skewX(-18deg); animation: gfShine 3.4s ease-in-out 1.2s infinite; } .lg-cta__btn:hover { transform: translateY(-2px); filter: brightness(1.05); } .lg-cta__btn:active { transform: translateY(1px); } .lg-cta__label { font-size: clamp(12px, 1.75cqw, 16px); font-weight: 900; letter-spacing: .2px; } .lg-cta__price { font-size: clamp(13px, 2.1cqw, 19px); font-weight: 900; letter-spacing: .3px; } .lg-cta__btn.is-ask .lg-cta__price { font-size: clamp(11px, 1.55cqw, 14px); } .lg-info-toggle { position: absolute; z-index: 5; left: 50%; transform: translateX(-50%); bottom: 3.5%; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; padding: 7px 14px; border-radius: 999px; font-weight: 800; font-size: 13px; color: var(--cp-gold-2); background: rgba(6, 9, 12, .72); border: 1px solid rgba(255, 193, 7, .4); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); transition: background .18s ease, transform .15s ease; } .lg-info-toggle span { display: inline-grid; place-items: center; width: 17px; height: 17px; border-radius: 50%; background: var(--cp-gold); color: #241500; font-size: 12px; font-weight: 900; } .lg-info-toggle:hover { background: rgba(255, 193, 7, .18); transform: translateX(-50%) translateY(-1px); } .lg-info { position: absolute; z-index: 9; direction: rtl; top: 0; right: 0; height: 100%; width: min(400px, 82cqw); display: flex; flex-direction: column; background: linear-gradient(180deg, rgba(14, 18, 24, .97), rgba(9, 12, 16, .98)); border-inline-start: 1px solid rgba(255, 193, 7, .35); box-shadow: -18px 0 44px rgba(0, 0, 0, .55); transform: translateX(100%); transition: transform .3s cubic-bezier(.2, .7, .2, 1); } .lg-info[hidden] { display: none; } .lg-info.is-open { transform: translateX(0); } .lg-info__bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px; background: linear-gradient(180deg, #26303c, #1a222c); border-bottom: 1px solid rgba(0, 0, 0, .4); } .lg-info__bar h3 { margin: 0; font-size: 16px; font-weight: 900; color: #fff; } .lg-info__x { flex: none; width: 32px; height: 32px; border-radius: 8px; cursor: pointer; font-size: 13px; color: var(--cp-gold); background: rgba(255, 193, 7, .08); border: 1px solid rgba(255, 193, 7, .4); transition: background .18s ease; } .lg-info__x:hover { background: rgba(255, 193, 7, .2); } .lg-info__body { flex: 1; overflow-y: auto; padding: 16px 18px 20px; scrollbar-width: thin; scrollbar-color: rgba(255, 193, 7, .5) transparent; } .lg-info__body::-webkit-scrollbar { width: 7px; } .lg-info__body::-webkit-scrollbar-thumb { background: rgba(255, 193, 7, .45); border-radius: 8px; } .lg-info__body p { margin: 0 0 12px; font-size: 13.5px; line-height: 1.85; color: #d3d9df; } .lg-info__body b { color: var(--cp-gold-2); } .lg-info__body h4 { margin: 14px 0 8px; font-size: 14px; font-weight: 900; color: #fff; } .lg-info__list { margin: 0; padding-inline-start: 18px; display: flex; flex-direction: column; gap: 10px; } .lg-info__list li { font-size: 13px; line-height: 1.7; color: #d3d9df; } .lg-info__list b { color: #fff; } .lg-info__note { margin: 4px 0 0; padding-top: 12px; border-top: 1px solid rgba(255, 193, 7, .18); font-size: 12.5px; line-height: 1.8; color: #c7ccd2; } /* موبایل: متن‌ها همان سمت چپِ روی عکس (فقط کوچک‌تر، مثل بتل‌پس)؛ دکمه‌ها زیرِ عکس */ @media (max-width: 760px) { .lg-modal { padding: 8px; } .lg-modal__frame { width: min(96vw, 460px); aspect-ratio: auto; max-height: 94vh; overflow: hidden auto; background: #0a0d10 url("images/cp/offers/lg-bg.webp?v=2") top center / 100% auto no-repeat; padding-top: calc(56.3cqw + 8px); /* ارتفاعِ عکسِ افقی + بافرِ کوچیک — دکمه‌ها زیرش جریان می‌گیرند */ padding-bottom: 14px; } .lg-modal__frame::before { inset: 0 0 auto 0; height: 56.3cqw; background: linear-gradient(90deg, rgba(4,7,11,.9) 0%, rgba(4,7,11,.55) 46%, rgba(4,7,11,0) 72%); } .lg-stack { top: 2.5cqw; left: 4%; width: 57%; max-height: 54cqw; gap: .8cqw; } .lg-head { gap: 1px; } .lg-title { font-size: clamp(11px, 3.6cqw, 20px); line-height: 1.08; } .lg-sub { font-size: clamp(7.5px, 1.7cqw, 12px); } .lg-badge { font-size: clamp(6.5px, 1.3cqw, 10px); padding: 1px 6px; } .lg-rewards { gap: .8cqw; } .lg-rewards li { padding: 1cqw; gap: 1cqw; border-radius: 9px; } .lg-reward__ic { width: clamp(16px, 4.2cqw, 36px); height: clamp(16px, 4.2cqw, 36px); border-radius: 8px; } .lg-reward__t b { font-size: clamp(8.5px, 1.9cqw, 13px); line-height: 1.15; } .lg-reward__t i { font-size: clamp(7.5px, 1.45cqw, 11px); line-height: 1.2; } .lg-cta { position: static; right: auto; bottom: auto; width: min(72%, 260px); margin: 11px auto 5px; gap: 5px; } .lg-cta__btn { padding: 9px 14px; border-radius: 10px; } .lg-cta__label { font-size: 13px; } .lg-cta__price { font-size: 15px; } .lg-cta__btn.is-ask .lg-cta__price { font-size: 12.5px; } .lg-info-toggle { position: static; transform: none; left: auto; bottom: auto; margin: 0 auto; padding: 5px 12px; font-size: 12px; } .lg-info { width: 100%; } } @media (prefers-reduced-motion: reduce) { .lg-modal *, .lg-cta__btn::after { animation-duration: .01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; } } /* ═══════════ پاپ‌آپِ پک پرایم (Amazon Prime Gaming — تک‌عکسِ افقی برای همهٔ حالت‌ها) ═══════════ */ .pr-modal { position: fixed; inset: 0; z-index: 3000; display: flex; align-items: center; justify-content: center; padding: 18px; } .pr-modal[hidden] { display: none; } .pr-modal__overlay { position: absolute; inset: 0; background: rgba(3, 5, 8, .82); backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px); } .pr-modal__frame { position: relative; direction: ltr; overflow: hidden; border-radius: 16px; container-type: inline-size; width: min(1000px, 96vw, calc(90vh * 1.777)); aspect-ratio: 1672 / 941; background: #0a0d10 url("images/cp/offers/pr-bg.webp?v=2") center / cover no-repeat; border: 1px solid rgba(255, 255, 255, .1); box-shadow: 0 30px 90px rgba(0, 0, 0, .7); animation: opPop .3s ease; } .pr-modal__frame::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, rgba(4, 7, 11, .86) 0%, rgba(4, 7, 11, .55) 42%, rgba(4, 7, 11, 0) 66%); } .pr-modal__x { position: absolute; top: 12px; inset-inline-end: 12px; z-index: 8; width: 34px; height: 34px; border-radius: 9px; cursor: pointer; font-size: 14px; color: var(--cp-gold); background: rgba(0, 0, 0, .5); border: 1px solid rgba(255, 193, 7, .4); transition: background .18s ease; } .pr-modal__x:hover { background: rgba(255, 193, 7, .2); } .pr-stack { position: absolute; z-index: 3; direction: rtl; left: 4%; top: 6%; width: 46%; max-height: 88%; display: flex; flex-direction: column; gap: 2.4cqw; } .pr-head { display: flex; flex-direction: column; align-items: flex-start; gap: .4cqw; } .pr-badge { font-size: clamp(9px, 1.5cqw, 13px); font-weight: 900; letter-spacing: 1.5px; direction: ltr; color: #241500; padding: 3px 12px; border-radius: 999px; background: linear-gradient(135deg, var(--cp-gold-2), var(--cp-gold)); animation: gfIn .5s ease both .05s; } .pr-title { margin: 0; font-size: clamp(20px, 4.4cqw, 42px); font-weight: 900; line-height: 1.06; letter-spacing: .3px; color: #fff; text-shadow: 0 3px 14px rgba(0, 0, 0, .85); animation: gfIn .5s ease both .12s; } .pr-sub { margin: 0; font-size: clamp(11px, 1.9cqw, 17px); font-weight: 700; color: var(--cp-gold-2); text-shadow: 0 2px 9px rgba(0, 0, 0, .9); animation: gfIn .5s ease both .18s; } .pr-rewards { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1.6cqw; } .pr-rewards li { display: flex; align-items: center; gap: 1.6cqw; padding: clamp(9px, 1.5cqw, 15px); border-radius: 14px; background: rgba(6, 9, 12, .55); border: 1px solid rgba(255, 193, 7, .28); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); animation: gfIn .5s ease both; } .pr-rewards li:nth-child(1) { animation-delay: .26s; } .pr-rewards li:nth-child(2) { animation-delay: .34s; } .pr-rewards li:nth-child(3) { animation-delay: .42s; } .pr-reward__ic { flex: none; width: clamp(30px, 4.6cqw, 46px); height: clamp(30px, 4.6cqw, 46px); display: grid; place-items: center; border-radius: 11px; color: var(--cp-gold-2); background: rgba(255, 193, 7, .13); border: 1px solid rgba(255, 193, 7, .38); } .pr-reward__ic svg { width: 56%; height: 56%; } .pr-reward__t { display: flex; flex-direction: column; gap: 2px; } .pr-reward__t b { font-size: clamp(11px, 1.85cqw, 16px); font-weight: 900; color: #fff; text-shadow: 0 1px 6px rgba(0, 0, 0, .85); } .pr-reward__t i { font-size: clamp(9.5px, 1.45cqw, 13px); font-style: normal; color: #c7ccd2; text-shadow: 0 1px 5px rgba(0, 0, 0, .85); } .pr-cta { position: absolute; z-index: 4; direction: rtl; right: 5.5%; bottom: 12%; width: clamp(190px, 27cqw, 300px); display: flex; flex-direction: column; align-items: center; gap: 7px; text-align: center; animation: gfIn .55s ease both .48s; } .pr-cta__btn { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; width: 100%; text-decoration: none; padding: 12px 18px; border-radius: 12px; color: #241500; overflow: hidden; background: linear-gradient(180deg, #ffe08a 0%, var(--cp-gold-2) 46%, var(--cp-gold) 55%, #d99a06 100%); border: 1px solid rgba(255, 240, 190, .8); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), 0 10px 26px rgba(255, 168, 0, .45), 0 4px 12px rgba(0, 0, 0, .4); transition: transform .15s ease, filter .15s ease; } .pr-cta__btn::after { content: ""; position: absolute; top: 0; inset-inline-start: -60%; width: 45%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55), transparent); transform: skewX(-18deg); animation: gfShine 3.4s ease-in-out 1.2s infinite; } .pr-cta__btn:hover { transform: translateY(-2px); filter: brightness(1.05); } .pr-cta__btn:active { transform: translateY(1px); } .pr-cta__label { font-size: clamp(12px, 1.75cqw, 16px); font-weight: 900; letter-spacing: .2px; } .pr-cta__price { font-size: clamp(13px, 2.1cqw, 19px); font-weight: 900; letter-spacing: .3px; } .pr-cta__btn.is-ask .pr-cta__price { font-size: clamp(11px, 1.55cqw, 14px); } .pr-info-toggle { position: absolute; z-index: 5; left: 50%; transform: translateX(-50%); bottom: 3.5%; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; padding: 7px 14px; border-radius: 999px; font-weight: 800; font-size: 13px; color: var(--cp-gold-2); background: rgba(6, 9, 12, .72); border: 1px solid rgba(255, 193, 7, .4); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); transition: background .18s ease, transform .15s ease; } .pr-info-toggle span { display: inline-grid; place-items: center; width: 17px; height: 17px; border-radius: 50%; background: var(--cp-gold); color: #241500; font-size: 12px; font-weight: 900; } .pr-info-toggle:hover { background: rgba(255, 193, 7, .18); transform: translateX(-50%) translateY(-1px); } .pr-info { position: absolute; z-index: 9; direction: rtl; top: 0; right: 0; height: 100%; width: min(400px, 82cqw); display: flex; flex-direction: column; background: linear-gradient(180deg, rgba(14, 18, 24, .97), rgba(9, 12, 16, .98)); border-inline-start: 1px solid rgba(255, 193, 7, .35); box-shadow: -18px 0 44px rgba(0, 0, 0, .55); transform: translateX(100%); transition: transform .3s cubic-bezier(.2, .7, .2, 1); } .pr-info[hidden] { display: none; } .pr-info.is-open { transform: translateX(0); } .pr-info__bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px; background: linear-gradient(180deg, #26303c, #1a222c); border-bottom: 1px solid rgba(0, 0, 0, .4); } .pr-info__bar h3 { margin: 0; font-size: 16px; font-weight: 900; color: #fff; } .pr-info__x { flex: none; width: 32px; height: 32px; border-radius: 8px; cursor: pointer; font-size: 13px; color: var(--cp-gold); background: rgba(255, 193, 7, .08); border: 1px solid rgba(255, 193, 7, .4); transition: background .18s ease; } .pr-info__x:hover { background: rgba(255, 193, 7, .2); } .pr-info__body { flex: 1; overflow-y: auto; padding: 16px 18px 20px; scrollbar-width: thin; scrollbar-color: rgba(255, 193, 7, .5) transparent; } .pr-info__body::-webkit-scrollbar { width: 7px; } .pr-info__body::-webkit-scrollbar-thumb { background: rgba(255, 193, 7, .45); border-radius: 8px; } .pr-info__body p { margin: 0 0 12px; font-size: 13.5px; line-height: 1.85; color: #d3d9df; } .pr-info__body b { color: var(--cp-gold-2); } .pr-info__body h4 { margin: 14px 0 8px; font-size: 14px; font-weight: 900; color: #fff; } .pr-info__list { margin: 0; padding-inline-start: 18px; display: flex; flex-direction: column; gap: 10px; } .pr-info__list li { font-size: 13px; line-height: 1.7; color: #d3d9df; } .pr-info__list b { color: #fff; } .pr-info__note { margin: 4px 0 0; padding-top: 12px; border-top: 1px solid rgba(255, 193, 7, .18); font-size: 12.5px; line-height: 1.8; color: #c7ccd2; } /* موبایل: متن‌ها همان سمت چپِ روی عکس (فقط کوچک‌تر، مثل بتل‌پس)؛ دکمه‌ها زیرِ عکس */ @media (max-width: 760px) { .pr-modal { padding: 8px; } .pr-modal__frame { width: min(96vw, 460px); aspect-ratio: auto; max-height: 94vh; overflow: hidden auto; background: #0a0d10 url("images/cp/offers/pr-bg.webp?v=2") top center / 100% auto no-repeat; padding-top: calc(56.3cqw + 8px); /* ارتفاعِ عکسِ افقی + بافرِ کوچیک — دکمه‌ها زیرش جریان می‌گیرند */ padding-bottom: 14px; } .pr-modal__frame::before { inset: 0 0 auto 0; height: 56.3cqw; background: linear-gradient(90deg, rgba(4,7,11,.9) 0%, rgba(4,7,11,.55) 46%, rgba(4,7,11,0) 72%); } .pr-stack { top: 2.5cqw; left: 4%; width: 50%; max-height: 54cqw; gap: .8cqw; } .pr-head { gap: 1px; } .pr-title { font-size: clamp(11px, 3.6cqw, 20px); line-height: 1.08; } .pr-sub { font-size: clamp(7.5px, 1.7cqw, 12px); } .pr-badge { font-size: clamp(6.5px, 1.3cqw, 10px); padding: 1px 6px; } .pr-rewards { gap: .8cqw; } .pr-rewards li { padding: 1cqw; gap: 1cqw; border-radius: 9px; } .pr-reward__ic { width: clamp(16px, 4.2cqw, 36px); height: clamp(16px, 4.2cqw, 36px); border-radius: 8px; } .pr-reward__t b { font-size: clamp(8.5px, 1.9cqw, 13px); line-height: 1.15; } .pr-reward__t i { font-size: clamp(7.5px, 1.45cqw, 11px); line-height: 1.2; } .pr-cta { position: static; right: auto; bottom: auto; width: min(72%, 260px); margin: 11px auto 5px; gap: 5px; } .pr-cta__btn { padding: 9px 14px; border-radius: 10px; } .pr-cta__label { font-size: 13px; } .pr-cta__price { font-size: 15px; } .pr-cta__btn.is-ask .pr-cta__price { font-size: 12.5px; } .pr-info-toggle { position: static; transform: none; left: auto; bottom: auto; margin: 0 auto; padding: 5px 12px; font-size: 12px; } .pr-info { width: 100%; } } @media (prefers-reduced-motion: reduce) { .pr-modal *, .pr-cta__btn::after { animation-duration: .01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; } } /* ═══════════ پاپ‌آپِ آفرِ ولکام بک (Welcome Back — تک‌عکسِ افقی برای همهٔ حالت‌ها) ═══════════ */ .wb-modal { position: fixed; inset: 0; z-index: 3000; display: flex; align-items: center; justify-content: center; padding: 18px; } .wb-modal[hidden] { display: none; } .wb-modal__overlay { position: absolute; inset: 0; background: rgba(3, 5, 8, .82); backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px); } .wb-modal__frame { position: relative; direction: ltr; overflow: hidden; border-radius: 16px; container-type: inline-size; width: min(1000px, 96vw, calc(90vh * 1.821)); aspect-ratio: 1692 / 929; background: #0a0d10 url("images/cp/offers/wb-bg.webp?v=2") center / cover no-repeat; border: 1px solid rgba(255, 255, 255, .1); box-shadow: 0 30px 90px rgba(0, 0, 0, .7); animation: opPop .3s ease; } .wb-modal__frame::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, rgba(4, 7, 11, .86) 0%, rgba(4, 7, 11, .55) 42%, rgba(4, 7, 11, 0) 66%); } .wb-modal__x { position: absolute; top: 12px; inset-inline-end: 12px; z-index: 8; width: 34px; height: 34px; border-radius: 9px; cursor: pointer; font-size: 14px; color: var(--cp-gold); background: rgba(0, 0, 0, .5); border: 1px solid rgba(255, 193, 7, .4); transition: background .18s ease; } .wb-modal__x:hover { background: rgba(255, 193, 7, .2); } .wb-stack { position: absolute; z-index: 3; direction: rtl; left: 4%; top: 6%; width: 46%; max-height: 88%; display: flex; flex-direction: column; gap: 2.4cqw; } .wb-head { display: flex; flex-direction: column; align-items: flex-start; gap: .4cqw; } .wb-badge { font-size: clamp(9px, 1.5cqw, 13px); font-weight: 900; letter-spacing: 1.5px; direction: ltr; color: #241500; padding: 3px 12px; border-radius: 999px; background: linear-gradient(135deg, var(--cp-gold-2), var(--cp-gold)); animation: gfIn .5s ease both .05s; } .wb-title { margin: 0; font-size: clamp(20px, 4.4cqw, 42px); font-weight: 900; line-height: 1.06; letter-spacing: .3px; color: #fff; text-shadow: 0 3px 14px rgba(0, 0, 0, .85); animation: gfIn .5s ease both .12s; } .wb-sub { margin: 0; font-size: clamp(11px, 1.9cqw, 17px); font-weight: 700; color: var(--cp-gold-2); text-shadow: 0 2px 9px rgba(0, 0, 0, .9); animation: gfIn .5s ease both .18s; } .wb-rewards { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1.6cqw; } .wb-rewards li { display: flex; align-items: center; gap: 1.6cqw; padding: clamp(9px, 1.5cqw, 15px); border-radius: 14px; background: rgba(6, 9, 12, .55); border: 1px solid rgba(255, 193, 7, .28); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); animation: gfIn .5s ease both; } .wb-rewards li:nth-child(1) { animation-delay: .26s; } .wb-rewards li:nth-child(2) { animation-delay: .34s; } .wb-rewards li:nth-child(3) { animation-delay: .42s; } .wb-reward__ic { flex: none; width: clamp(30px, 4.6cqw, 46px); height: clamp(30px, 4.6cqw, 46px); display: grid; place-items: center; border-radius: 11px; color: var(--cp-gold-2); background: rgba(255, 193, 7, .13); border: 1px solid rgba(255, 193, 7, .38); } .wb-reward__ic svg { width: 56%; height: 56%; } .wb-reward__t { display: flex; flex-direction: column; gap: 2px; } .wb-reward__t b { font-size: clamp(11px, 1.85cqw, 16px); font-weight: 900; color: #fff; text-shadow: 0 1px 6px rgba(0, 0, 0, .85); } .wb-reward__t i { font-size: clamp(9.5px, 1.45cqw, 13px); font-style: normal; color: #c7ccd2; text-shadow: 0 1px 5px rgba(0, 0, 0, .85); } .wb-cta { position: absolute; z-index: 4; direction: rtl; right: 5.5%; bottom: 12%; width: clamp(190px, 27cqw, 300px); display: flex; flex-direction: column; align-items: center; gap: 7px; text-align: center; animation: gfIn .55s ease both .48s; } .wb-cta__btn { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; width: 100%; text-decoration: none; padding: 12px 18px; border-radius: 12px; color: #241500; overflow: hidden; background: linear-gradient(180deg, #ffe08a 0%, var(--cp-gold-2) 46%, var(--cp-gold) 55%, #d99a06 100%); border: 1px solid rgba(255, 240, 190, .8); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), 0 10px 26px rgba(255, 168, 0, .45), 0 4px 12px rgba(0, 0, 0, .4); transition: transform .15s ease, filter .15s ease; } .wb-cta__btn::after { content: ""; position: absolute; top: 0; inset-inline-start: -60%; width: 45%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55), transparent); transform: skewX(-18deg); animation: gfShine 3.4s ease-in-out 1.2s infinite; } .wb-cta__btn:hover { transform: translateY(-2px); filter: brightness(1.05); } .wb-cta__btn:active { transform: translateY(1px); } .wb-cta__label { font-size: clamp(12px, 1.75cqw, 16px); font-weight: 900; letter-spacing: .2px; } .wb-cta__price { font-size: clamp(13px, 2.1cqw, 19px); font-weight: 900; letter-spacing: .3px; } .wb-cta__btn.is-ask .wb-cta__price { font-size: clamp(11px, 1.55cqw, 14px); } .wb-info-toggle { position: absolute; z-index: 5; left: 50%; transform: translateX(-50%); bottom: 3.5%; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; padding: 7px 14px; border-radius: 999px; font-weight: 800; font-size: 13px; color: var(--cp-gold-2); background: rgba(6, 9, 12, .72); border: 1px solid rgba(255, 193, 7, .4); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); transition: background .18s ease, transform .15s ease; } .wb-info-toggle span { display: inline-grid; place-items: center; width: 17px; height: 17px; border-radius: 50%; background: var(--cp-gold); color: #241500; font-size: 12px; font-weight: 900; } .wb-info-toggle:hover { background: rgba(255, 193, 7, .18); transform: translateX(-50%) translateY(-1px); } .wb-info { position: absolute; z-index: 9; direction: rtl; top: 0; right: 0; height: 100%; width: min(400px, 82cqw); display: flex; flex-direction: column; background: linear-gradient(180deg, rgba(14, 18, 24, .97), rgba(9, 12, 16, .98)); border-inline-start: 1px solid rgba(255, 193, 7, .35); box-shadow: -18px 0 44px rgba(0, 0, 0, .55); transform: translateX(100%); transition: transform .3s cubic-bezier(.2, .7, .2, 1); } .wb-info[hidden] { display: none; } .wb-info.is-open { transform: translateX(0); } .wb-info__bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px; background: linear-gradient(180deg, #26303c, #1a222c); border-bottom: 1px solid rgba(0, 0, 0, .4); } .wb-info__bar h3 { margin: 0; font-size: 16px; font-weight: 900; color: #fff; } .wb-info__x { flex: none; width: 32px; height: 32px; border-radius: 8px; cursor: pointer; font-size: 13px; color: var(--cp-gold); background: rgba(255, 193, 7, .08); border: 1px solid rgba(255, 193, 7, .4); transition: background .18s ease; } .wb-info__x:hover { background: rgba(255, 193, 7, .2); } .wb-info__body { flex: 1; overflow-y: auto; padding: 16px 18px 20px; scrollbar-width: thin; scrollbar-color: rgba(255, 193, 7, .5) transparent; } .wb-info__body::-webkit-scrollbar { width: 7px; } .wb-info__body::-webkit-scrollbar-thumb { background: rgba(255, 193, 7, .45); border-radius: 8px; } .wb-info__body p { margin: 0 0 12px; font-size: 13.5px; line-height: 1.85; color: #d3d9df; } .wb-info__body b { color: var(--cp-gold-2); } .wb-info__body h4 { margin: 14px 0 8px; font-size: 14px; font-weight: 900; color: #fff; } .wb-info__list { margin: 0; padding-inline-start: 18px; display: flex; flex-direction: column; gap: 10px; } .wb-info__list li { font-size: 13px; line-height: 1.7; color: #d3d9df; } .wb-info__list b { color: #fff; } .wb-info__note { margin: 4px 0 0; padding-top: 12px; border-top: 1px solid rgba(255, 193, 7, .18); font-size: 12.5px; line-height: 1.8; color: #c7ccd2; } /* موبایل: متن‌ها همان سمت چپِ روی عکس (فقط کوچک‌تر)؛ دکمه‌ها زیرِ عکس؛ هر ۳ جایزه */ @media (max-width: 760px) { .wb-modal { padding: 8px; } .wb-modal__frame { width: min(96vw, 460px); aspect-ratio: auto; max-height: 94vh; overflow: hidden auto; background: #0a0d10 url("images/cp/offers/wb-bg.webp?v=2") top center / 100% auto no-repeat; padding-top: calc(54.9cqw + 8px); /* ارتفاعِ عکسِ افقی (929/1692) + بافرِ کوچیک */ padding-bottom: 14px; } .wb-modal__frame::before { inset: 0 0 auto 0; height: 54.9cqw; background: linear-gradient(90deg, rgba(4,7,11,.9) 0%, rgba(4,7,11,.55) 46%, rgba(4,7,11,0) 72%); } .wb-stack { top: 2.5cqw; left: 4%; width: 57%; max-height: 52cqw; gap: .8cqw; } .wb-head { gap: 1px; } .wb-title { font-size: clamp(11px, 3.6cqw, 20px); line-height: 1.08; } .wb-sub { font-size: clamp(7.5px, 1.7cqw, 12px); } .wb-badge { font-size: clamp(6.5px, 1.3cqw, 10px); padding: 1px 6px; } .wb-rewards { gap: .8cqw; } .wb-rewards li { padding: 1cqw; gap: 1cqw; border-radius: 9px; } .wb-reward__ic { width: clamp(16px, 4.2cqw, 36px); height: clamp(16px, 4.2cqw, 36px); border-radius: 8px; } .wb-reward__t b { font-size: clamp(8.5px, 1.9cqw, 13px); line-height: 1.15; } .wb-reward__t i { font-size: clamp(7.5px, 1.45cqw, 11px); line-height: 1.2; } .wb-cta { position: static; right: auto; bottom: auto; width: min(72%, 260px); margin: 11px auto 5px; gap: 5px; } .wb-cta__btn { padding: 9px 14px; border-radius: 10px; } .wb-cta__label { font-size: 13px; } .wb-cta__price { font-size: 15px; } .wb-cta__btn.is-ask .wb-cta__price { font-size: 12.5px; } .wb-info-toggle { position: static; transform: none; left: auto; bottom: auto; margin: 0 auto; padding: 5px 12px; font-size: 12px; } .wb-info { width: 100%; } } @media (prefers-reduced-motion: reduce) { .wb-modal *, .wb-cta__btn::after { animation-duration: .01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; } } /* ═══════════ پاپ‌آپِ آفرِ بونوس دیل (Bonus Deals — تک‌عکسِ افقی برای همهٔ حالت‌ها) ═══════════ */ .bd-modal { position: fixed; inset: 0; z-index: 3000; display: flex; align-items: center; justify-content: center; padding: 18px; } .bd-modal[hidden] { display: none; } .bd-modal__overlay { position: absolute; inset: 0; background: rgba(3, 5, 8, .82); backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px); } .bd-modal__frame { position: relative; direction: ltr; overflow: hidden; border-radius: 16px; container-type: inline-size; width: min(1000px, 96vw, calc(90vh * 1.823)); aspect-ratio: 1693 / 929; background: #0a0d10 url("images/cp/offers/bd-bg.webp") center / cover no-repeat; border: 1px solid rgba(255, 255, 255, .1); box-shadow: 0 30px 90px rgba(0, 0, 0, .7); animation: opPop .3s ease; } .bd-modal__frame::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, rgba(4, 7, 11, .86) 0%, rgba(4, 7, 11, .55) 42%, rgba(4, 7, 11, 0) 66%); } .bd-modal__x { position: absolute; top: 12px; inset-inline-end: 12px; z-index: 8; width: 34px; height: 34px; border-radius: 9px; cursor: pointer; font-size: 14px; color: var(--cp-gold); background: rgba(0, 0, 0, .5); border: 1px solid rgba(255, 193, 7, .4); transition: background .18s ease; } .bd-modal__x:hover { background: rgba(255, 193, 7, .2); } .bd-stack { position: absolute; z-index: 3; direction: rtl; left: 4%; top: 6%; width: 46%; max-height: 88%; display: flex; flex-direction: column; gap: 2.4cqw; } .bd-head { display: flex; flex-direction: column; align-items: flex-start; gap: .4cqw; } .bd-badge { font-size: clamp(9px, 1.5cqw, 13px); font-weight: 900; letter-spacing: 1.5px; direction: ltr; color: #241500; padding: 3px 12px; border-radius: 999px; background: linear-gradient(135deg, var(--cp-gold-2), var(--cp-gold)); animation: gfIn .5s ease both .05s; } .bd-title { margin: 0; font-size: clamp(20px, 4.4cqw, 42px); font-weight: 900; line-height: 1.06; letter-spacing: .3px; color: #fff; text-shadow: 0 3px 14px rgba(0, 0, 0, .85); animation: gfIn .5s ease both .12s; } .bd-sub { margin: 0; font-size: clamp(11px, 1.9cqw, 17px); font-weight: 700; color: var(--cp-gold-2); text-shadow: 0 2px 9px rgba(0, 0, 0, .9); animation: gfIn .5s ease both .18s; } .bd-rewards { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1.6cqw; } .bd-rewards li { display: flex; align-items: center; gap: 1.6cqw; padding: clamp(9px, 1.5cqw, 15px); border-radius: 14px; background: rgba(6, 9, 12, .55); border: 1px solid rgba(255, 193, 7, .28); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); animation: gfIn .5s ease both; } .bd-rewards li:nth-child(1) { animation-delay: .26s; } .bd-rewards li:nth-child(2) { animation-delay: .34s; } .bd-rewards li:nth-child(3) { animation-delay: .42s; } .bd-reward__ic { flex: none; width: clamp(30px, 4.6cqw, 46px); height: clamp(30px, 4.6cqw, 46px); display: grid; place-items: center; border-radius: 11px; color: var(--cp-gold-2); background: rgba(255, 193, 7, .13); border: 1px solid rgba(255, 193, 7, .38); } .bd-reward__ic svg { width: 56%; height: 56%; } .bd-reward__t { display: flex; flex-direction: column; gap: 2px; } .bd-reward__t b { font-size: clamp(11px, 1.85cqw, 16px); font-weight: 900; color: #fff; text-shadow: 0 1px 6px rgba(0, 0, 0, .85); } .bd-reward__t i { font-size: clamp(9.5px, 1.45cqw, 13px); font-style: normal; color: #c7ccd2; text-shadow: 0 1px 5px rgba(0, 0, 0, .85); } .bd-cta { position: absolute; z-index: 4; direction: rtl; right: 5.5%; bottom: 12%; width: clamp(190px, 27cqw, 300px); display: flex; flex-direction: column; align-items: center; gap: 7px; text-align: center; animation: gfIn .55s ease both .48s; } .bd-cta__btn { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; width: 100%; text-decoration: none; padding: 12px 18px; border-radius: 12px; color: #241500; overflow: hidden; background: linear-gradient(180deg, #ffe08a 0%, var(--cp-gold-2) 46%, var(--cp-gold) 55%, #d99a06 100%); border: 1px solid rgba(255, 240, 190, .8); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), 0 10px 26px rgba(255, 168, 0, .45), 0 4px 12px rgba(0, 0, 0, .4); transition: transform .15s ease, filter .15s ease; } .bd-cta__btn::after { content: ""; position: absolute; top: 0; inset-inline-start: -60%; width: 45%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55), transparent); transform: skewX(-18deg); animation: gfShine 3.4s ease-in-out 1.2s infinite; } .bd-cta__btn:hover { transform: translateY(-2px); filter: brightness(1.05); } .bd-cta__btn:active { transform: translateY(1px); } .bd-cta__label { font-size: clamp(12px, 1.75cqw, 16px); font-weight: 900; letter-spacing: .2px; } .bd-cta__price { font-size: clamp(13px, 2.1cqw, 19px); font-weight: 900; letter-spacing: .3px; } .bd-cta__btn.is-ask .bd-cta__price { font-size: clamp(11px, 1.55cqw, 14px); } .bd-info-toggle { position: absolute; z-index: 5; left: 50%; transform: translateX(-50%); bottom: 3.5%; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; padding: 7px 14px; border-radius: 999px; font-weight: 800; font-size: 13px; color: var(--cp-gold-2); background: rgba(6, 9, 12, .72); border: 1px solid rgba(255, 193, 7, .4); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); transition: background .18s ease, transform .15s ease; } .bd-info-toggle span { display: inline-grid; place-items: center; width: 17px; height: 17px; border-radius: 50%; background: var(--cp-gold); color: #241500; font-size: 12px; font-weight: 900; } .bd-info-toggle:hover { background: rgba(255, 193, 7, .18); transform: translateX(-50%) translateY(-1px); } .bd-info { position: absolute; z-index: 9; direction: rtl; top: 0; right: 0; height: 100%; width: min(400px, 82cqw); display: flex; flex-direction: column; background: linear-gradient(180deg, rgba(14, 18, 24, .97), rgba(9, 12, 16, .98)); border-inline-start: 1px solid rgba(255, 193, 7, .35); box-shadow: -18px 0 44px rgba(0, 0, 0, .55); transform: translateX(100%); transition: transform .3s cubic-bezier(.2, .7, .2, 1); } .bd-info[hidden] { display: none; } .bd-info.is-open { transform: translateX(0); } .bd-info__bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px; background: linear-gradient(180deg, #26303c, #1a222c); border-bottom: 1px solid rgba(0, 0, 0, .4); } .bd-info__bar h3 { margin: 0; font-size: 16px; font-weight: 900; color: #fff; } .bd-info__x { flex: none; width: 32px; height: 32px; border-radius: 8px; cursor: pointer; font-size: 13px; color: var(--cp-gold); background: rgba(255, 193, 7, .08); border: 1px solid rgba(255, 193, 7, .4); transition: background .18s ease; } .bd-info__x:hover { background: rgba(255, 193, 7, .2); } .bd-info__body { flex: 1; overflow-y: auto; padding: 16px 18px 20px; scrollbar-width: thin; scrollbar-color: rgba(255, 193, 7, .5) transparent; } .bd-info__body::-webkit-scrollbar { width: 7px; } .bd-info__body::-webkit-scrollbar-thumb { background: rgba(255, 193, 7, .45); border-radius: 8px; } .bd-info__body p { margin: 0 0 12px; font-size: 13.5px; line-height: 1.85; color: #d3d9df; } .bd-info__body b { color: var(--cp-gold-2); } .bd-info__body h4 { margin: 14px 0 8px; font-size: 14px; font-weight: 900; color: #fff; } .bd-info__list { margin: 0; padding-inline-start: 18px; display: flex; flex-direction: column; gap: 10px; } .bd-info__list li { font-size: 13px; line-height: 1.7; color: #d3d9df; } .bd-info__list b { color: #fff; } .bd-info__note { margin: 4px 0 0; padding-top: 12px; border-top: 1px solid rgba(255, 193, 7, .18); font-size: 12.5px; line-height: 1.85; color: #c7ccd2; } .bd-info__note b { color: var(--cp-gold-2); } /* موبایل: متن‌ها همان سمت چپِ روی عکس (کوچک‌تر)؛ دکمه‌ها زیرِ عکس؛ هر ۳ جایزه */ @media (max-width: 760px) { .bd-modal { padding: 8px; } .bd-modal__frame { width: min(96vw, 460px); aspect-ratio: auto; max-height: 94vh; overflow: hidden auto; background: #0a0d10 url("images/cp/offers/bd-bg.webp") top center / 100% auto no-repeat; padding-top: calc(54.9cqw + 8px); /* ارتفاعِ عکسِ افقی (929/1693) + بافرِ کوچیک */ padding-bottom: 14px; } .bd-modal__frame::before { inset: 0 0 auto 0; height: 54.9cqw; background: linear-gradient(90deg, rgba(4,7,11,.9) 0%, rgba(4,7,11,.55) 46%, rgba(4,7,11,0) 72%); } .bd-stack { top: 2.5cqw; left: 4%; width: 57%; max-height: 52cqw; gap: .8cqw; } .bd-head { gap: 1px; } .bd-title { font-size: clamp(11px, 3.6cqw, 20px); line-height: 1.08; } .bd-sub { font-size: clamp(7.5px, 1.7cqw, 12px); } .bd-badge { font-size: clamp(6.5px, 1.3cqw, 10px); padding: 1px 6px; } .bd-rewards { gap: .8cqw; } .bd-rewards li { padding: 1cqw; gap: 1cqw; border-radius: 9px; } .bd-reward__ic { width: clamp(16px, 4.2cqw, 36px); height: clamp(16px, 4.2cqw, 36px); border-radius: 8px; } .bd-reward__t b { font-size: clamp(8.5px, 1.9cqw, 13px); line-height: 1.15; } .bd-reward__t i { font-size: clamp(7.5px, 1.45cqw, 11px); line-height: 1.2; } .bd-cta { position: static; right: auto; bottom: auto; width: min(72%, 260px); margin: 11px auto 5px; gap: 5px; } .bd-cta__btn { padding: 9px 14px; border-radius: 10px; } .bd-cta__label { font-size: 13px; } .bd-cta__price { font-size: 15px; } .bd-cta__btn.is-ask .bd-cta__price { font-size: 12.5px; } .bd-info-toggle { position: static; transform: none; left: auto; bottom: auto; margin: 0 auto; padding: 5px 12px; font-size: 12px; } .bd-info { width: 100%; } } @media (prefers-reduced-motion: reduce) { .bd-modal *, .bd-cta__btn::after { animation-duration: .01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; } } /* ═══════════ پاپ‌آپِ ساپلای پس (Supply Pass — دو ستونه: هفتگی/ماهانه) ═══════════ */ .sp-modal { position: fixed; inset: 0; z-index: 3000; display: flex; align-items: center; justify-content: center; padding: 18px; } .sp-modal[hidden] { display: none; } .sp-modal__overlay { position: absolute; inset: 0; background: rgba(3, 5, 8, .82); backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px); } .sp-modal__frame { position: relative; direction: rtl; overflow: hidden auto; border-radius: 16px; container-type: inline-size; width: min(680px, 96vw); max-height: 94vh; display: flex; flex-direction: column; background: linear-gradient(180deg, #12171d, #0c1015); border: 1px solid rgba(255, 255, 255, .1); box-shadow: 0 30px 90px rgba(0, 0, 0, .7); animation: opPop .3s ease; scrollbar-width: thin; scrollbar-color: rgba(255, 193, 7, .5) transparent; } .sp-modal__x { position: absolute; top: 10px; inset-inline-end: 10px; z-index: 8; width: 32px; height: 32px; border-radius: 9px; cursor: pointer; font-size: 14px; color: var(--cp-gold); background: rgba(0, 0, 0, .55); border: 1px solid rgba(255, 193, 7, .4); transition: background .18s ease; } .sp-modal__x:hover { background: rgba(255, 193, 7, .2); } /* عکسِ دو ستونه + عنوانِ فارسیِ هر ستون روی آن */ .sp-stage { position: relative; width: 100%; aspect-ratio: 1377 / 1142; direction: ltr; background: #0a0d10 url("images/cp/offers/sp-bg.webp?v=2") center / cover no-repeat; } .sp-col-title { position: absolute; z-index: 3; top: 16.5cqw; margin: 0; text-align: center; direction: rtl; font-size: clamp(13px, 3.3cqw, 28px); font-weight: 900; letter-spacing: .3px; line-height: 1.15; text-shadow: 0 2px 12px rgba(0, 0, 0, .95), 0 0 22px rgba(0, 0, 0, .65); animation: gfIn .5s ease both .1s; } .sp-col-title--weekly { left: 2%; width: 46%; color: #d6e9ff; } /* ستونِ آبی */ .sp-col-title--monthly { left: 52%; width: 46%; color: #ffe6ad; } /* ستونِ طلایی */ /* دو دکمهٔ خرید زیرِ هر ستون (هفتگی/ماهانه) */ .sp-foot { direction: ltr; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 12px 14px 4px; } .sp-buy { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; text-decoration: none; overflow: hidden; padding: 11px 12px; border-radius: 12px; transition: transform .15s ease, filter .15s ease; } .sp-buy::after { content: ""; position: absolute; top: 0; left: -60%; width: 45%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .5), transparent); transform: skewX(-18deg); animation: gfShine 3.6s ease-in-out 1.4s infinite; } .sp-buy:hover { transform: translateY(-2px); filter: brightness(1.05); } .sp-buy:active { transform: translateY(1px); } .sp-buy__label { font-size: clamp(12px, 2cqw, 15px); font-weight: 900; letter-spacing: .2px; } .sp-buy__price { font-size: clamp(11px, 2cqw, 15px); font-weight: 900; direction: rtl; } .sp-buy--weekly { color: #06263f; background: linear-gradient(180deg, #d6ecff, #7fbdf0 52%, #4f96d8); border: 1px solid rgba(210, 235, 255, .85); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 8px 22px rgba(70, 150, 225, .42); } .sp-buy--monthly { color: #241500; background: linear-gradient(180deg, #ffe08a, var(--cp-gold-2) 50%, var(--cp-gold)); border: 1px solid rgba(255, 240, 190, .85); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), 0 8px 22px rgba(255, 168, 0, .45); } .sp-info-toggle { align-self: center; margin: 2px auto 12px; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; padding: 6px 14px; border-radius: 999px; font-weight: 800; font-size: 13px; color: var(--cp-gold-2); background: rgba(6, 9, 12, .72); border: 1px solid rgba(255, 193, 7, .4); transition: background .18s ease, transform .15s ease; } .sp-info-toggle span { display: inline-grid; place-items: center; width: 17px; height: 17px; border-radius: 50%; background: var(--cp-gold); color: #241500; font-size: 12px; font-weight: 900; } .sp-info-toggle:hover { background: rgba(255, 193, 7, .18); transform: translateY(-1px); } .sp-info { position: absolute; z-index: 9; direction: rtl; top: 0; right: 0; height: 100%; width: min(400px, 86%); display: flex; flex-direction: column; background: linear-gradient(180deg, rgba(14, 18, 24, .97), rgba(9, 12, 16, .98)); border-inline-start: 1px solid rgba(255, 193, 7, .35); box-shadow: -18px 0 44px rgba(0, 0, 0, .55); transform: translateX(100%); transition: transform .3s cubic-bezier(.2, .7, .2, 1); } .sp-info[hidden] { display: none; } .sp-info.is-open { transform: translateX(0); } .sp-info__bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px; background: linear-gradient(180deg, #26303c, #1a222c); border-bottom: 1px solid rgba(0, 0, 0, .4); } .sp-info__bar h3 { margin: 0; font-size: 16px; font-weight: 900; color: #fff; } .sp-info__x { flex: none; width: 32px; height: 32px; border-radius: 8px; cursor: pointer; font-size: 13px; color: var(--cp-gold); background: rgba(255, 193, 7, .08); border: 1px solid rgba(255, 193, 7, .4); transition: background .18s ease; } .sp-info__x:hover { background: rgba(255, 193, 7, .2); } .sp-info__body { flex: 1; overflow-y: auto; padding: 16px 18px 20px; scrollbar-width: thin; scrollbar-color: rgba(255, 193, 7, .5) transparent; } .sp-info__body::-webkit-scrollbar { width: 7px; } .sp-info__body::-webkit-scrollbar-thumb { background: rgba(255, 193, 7, .45); border-radius: 8px; } .sp-info__body p { margin: 0 0 12px; font-size: 13.5px; line-height: 1.85; color: #d3d9df; } .sp-info__body b { color: var(--cp-gold-2); } .sp-info__body h4 { margin: 14px 0 8px; font-size: 14px; font-weight: 900; color: #fff; } .sp-info__list { margin: 0; padding-inline-start: 18px; display: flex; flex-direction: column; gap: 10px; } .sp-info__list li { font-size: 13px; line-height: 1.7; color: #d3d9df; } .sp-info__list b { color: #fff; } .sp-info__note { margin: 4px 0 0; padding-top: 12px; border-top: 1px solid rgba(255, 193, 7, .18); font-size: 12.5px; line-height: 1.85; color: #c7ccd2; } .sp-info__note b { color: var(--cp-gold-2); } /* موبایل: همان دو ستونه، فقط فریمِ عریض‌تر و دکمه‌ها جمع‌وجورتر */ @media (max-width: 760px) { .sp-modal { padding: 8px; } .sp-modal__frame { width: min(96vw, 520px); } .sp-foot { gap: 8px; padding: 10px 10px 4px; } .sp-buy { padding: 9px 8px; border-radius: 10px; } .sp-info { width: 100%; } } @media (prefers-reduced-motion: reduce) { .sp-modal *, .sp-buy::after { animation-duration: .01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; } } /* ═══════════ قیمت‌های منطقه‌ای (هند/ایران/اروپا) در مودال‌ها ═══════════ */ .rp-list { display: flex; flex-direction: column; gap: 5px; direction: rtl; width: 100%; } .rp-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 11px; border-radius: 9px; background: rgba(6, 9, 12, .62); border: 1px solid rgba(255, 193, 7, .3); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); } .rp-row__reg { font-size: 12px; font-weight: 800; color: #eef2f6; } .rp-row__val { font-size: 13px; font-weight: 900; color: var(--cp-gold-2); letter-spacing: .2px; direction: ltr; } .rp-row__val.is-ask { font-size: 11px; font-weight: 700; color: #cfd6dd; } /* ردیف‌های ریجنِ کلیک‌پذیر (گرند فورس): انتخاب → تغییرِ قیمتِ دکمهٔ پایین */ .rp-row--btn { width: 100%; cursor: pointer; font: inherit; text-align: inherit; transition: border-color .16s ease, background .16s ease, transform .12s ease; } .rp-row--btn:hover { border-color: rgba(255, 193, 7, .6); background: rgba(255, 193, 7, .1); } .rp-row--btn.is-sel { border-color: var(--cp-gold); background: rgba(255, 193, 7, .16); box-shadow: 0 0 0 1px rgba(255, 193, 7, .4) inset; } /* داخلِ فوترِ بتل‌پس: ستونی و تمام‌عرض */ .bp-foot--regional { flex-direction: column; direction: rtl; gap: 10px; } .bp-foot--regional .bp-btn { width: 100%; } /* داخلِ مودالِ عمومی (ساپلای‌پس) */ .rp-list--modal { margin-top: 10px; } .rp-list--modal[hidden] { display: none; } @media (max-width: 620px) { .rp-row { padding: 5px 9px; } .rp-row__reg { font-size: 11px; } .rp-row__val { font-size: 12px; } } .cp-offers-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); gap: 18px; } .cp-offer { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 22px 16px 18px; border-radius: 18px; background: radial-gradient(120% 80% at 50% 0%, #1b1b1b, #101010 72%); border: 1px solid var(--cp-border); transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease; } .cp-offer:hover { border-color: rgba(255, 193, 7, .5); transform: translateY(-4px); box-shadow: 0 20px 44px rgba(0, 0, 0, .5), 0 0 26px rgba(255, 179, 0, .15); } /* آیکونِ اندازه‌ثابت و متعادل، کاملاً داخلِ کارت با هالهٔ گرمِ پشت (وزنِ بصریِ یکسان برای همه) */ .cp-offer__ic { position: relative; width: 100%; max-width: 200px; aspect-ratio: 1 / 1; display: grid; place-items: center; margin: 0 auto; } .cp-offer__ic::before { content: ""; position: absolute; inset: 6%; z-index: 0; pointer-events: none; background: radial-gradient(circle at 50% 48%, rgba(255,170,40,.26), rgba(255,150,30,.06) 48%, transparent 72%); filter: blur(8px); } .cp-offer__ic img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: contain; display: block; filter: drop-shadow(0 6px 14px rgba(0,0,0,.5)); } /* تنها آیکونِ خطیِ باقی‌مانده (Low Spend) */ .cp-offer__ic svg { position: relative; z-index: 1; width: 76px; height: 76px; color: var(--cp-gold); } /* خط دومِ همهٔ کارت‌ها حذف شد */ .cp-offer__event { display: none; } .cp-offer__name { position: relative; z-index: 2; margin: 12px 0 0; font-size: 18px; color: #fff; font-weight: 800; text-shadow: 0 2px 8px rgba(0,0,0,.6); display: flex; align-items: center; justify-content: center; text-align: center; min-height: 2.6em; line-height: 1.3; } .cp-offer__event { margin: 0; font-size: 12.5px; color: var(--cp-muted); line-height: 1.6; min-height: 34px; } .cp-offer__btn { margin-top: auto; width: 100%; padding: 9px; border-radius: 10px; text-decoration: none; text-align: center; font-weight: 800; font-size: 13.5px; color: var(--cp-gold); background: rgba(255, 193, 7, .08); border: 1px solid rgba(255, 193, 7, .4); transition: background .2s ease, color .2s ease; } .cp-offer__btn:hover { background: linear-gradient(135deg, var(--cp-gold-2), var(--cp-gold)); color: #241500; } /* پنل‌های توضیحیِ دوبل / زمان‌بر */ .cp-promo { max-width: 640px; margin: 0 auto; text-align: center; padding: 36px 26px; border-radius: 20px; background: radial-gradient(120% 90% at 50% 0%, #1b1b1b, #101010 74%); border: 1px solid var(--cp-border); } .cp-promo__badge { display: inline-block; padding: 5px 15px; border-radius: 999px; font-weight: 800; font-size: 13px; color: #241500; background: linear-gradient(135deg, var(--cp-gold-2), var(--cp-gold)); margin-bottom: 14px; } .cp-promo__badge--blue { background: linear-gradient(135deg, #a9d5ff, #3b8ef4); color: #04121f; } .cp-promo h3 { margin: 0 0 10px; font-size: 22px; color: #fff; } .cp-promo p { margin: 0 0 20px; color: var(--cp-muted); line-height: 1.95; } .cp-promo p b { color: var(--cp-gold-2); } .cp-promo .cp-btn { display: inline-flex; } /* ── کمی سفید برای شکستنِ حالتِ «همه‌زرد» ── */ .cp-pack__amt { color: #fff !important; text-shadow: 0 0 20px rgba(255, 255, 255, .18); } .cp-pack__amt span { color: var(--cp-gold) !important; } @media (max-width: 560px) { /* تب‌ها همیشه در یک ردیفِ افقی (بدونِ شکستن)؛ اگر جا نشد، افقی اسکرول می‌شود */ .cp-tabs { gap: 4px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .cp-tabs::-webkit-scrollbar { display: none; } /* گوشی: برچسبِ کوتاه (فوری/عادی/…) چون «سی پی» جا نمی‌شود */ .cp-tab { flex: 1 1 0; min-width: 0; font-size: 14px; padding: 9px 6px; } .cp-tab__pre { display: none; } /* گوشی: دقیقاً دو محصول در هر ردیف و آیکونِ بزرگ‌تر (۱.۵ برابر) */ .cp-offers-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; } .cp-offer { padding: 14px 8px 12px; } /* آیکون مربعِ عرضِ کارت (قابِ هم‌ارتفاع در پایه تعریف شده) */ .cp-offer__ic svg { width: 64%; height: auto; } .cp-offer__name { font-size: 14px; margin-top: 8px; } .cp-offer__btn { padding: 8px; font-size: 12.5px; } /* گوشی: دو کارتِ CP کنارِ هم در یک ردیف، جمع‌وجور */ .cp-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; } .cp-pack { padding: 14px 10px 14px; border-radius: 18px; } .cp-pack__amt { font-size: 26px; margin-top: 6px; } .cp-pack__amt span { font-size: 15px; } .cp-pack__coins { min-height: 92px; padding: 6px 4px 2px; margin-bottom: 8px; } .cp-pack__coins img { width: 76%; } .cp-pack__price { font-size: 15px; margin-bottom: 10px; } .cp-pack__stock { font-size: 11px; margin-bottom: 12px; } .cp-buy { padding: 9px; font-size: 12.5px; } } /* ═══════════ تنظیمِ نهاییِ رنگِ کارت‌های CP ═══════════ */ /* قیمت، خطِ زیرِ عنوان و تگ‌ها طلایی می‌مانند (پیش‌فرضِ اصلی). فقط «تومان» سفیدتر می‌شود و دکمهٔ خرید خنثی می‌ماند. */ .cp-pack__price span { color: #f1efe9; font-weight: 600; } /* دکمهٔ خرید: پیش‌فرض خنثی و سفید؛ طلایی فقط هنگامِ hover ظاهر می‌شود (کارتِ «پیشنهاد ویژه» از این قاعده مستثناست و طلایی می‌ماند) */ .cp-buy:not(.cp-buy--featured) { color: #eceaf2; background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.2); } .cp-buy:not(.cp-buy--featured):hover { background: linear-gradient(135deg, var(--cp-gold-2), var(--cp-gold)); color: #241500; border-color: transparent; box-shadow: 0 8px 22px rgba(255,179,0,.35); }