/* Charity Campaign - Frontend UX */ /* * متغیرهای رنگ افزونه * مقادیر زیر پیش‌فرض‌ها هستند؛ تنظیمات «تب رنگ‌ها» در پنل مدیریت همین * متغیرها را در بازنویسی میکند (استایل #cc-dynamic-colors). */ :root { --cc-primary: #28a745; /* رنگ اصلی: دکمه اهدا و پرشدن نوار پیشرفت */ --cc-secondary: #20c997; /* رنگ دوم: انتهای گرادیان */ --cc-primary-hover: #1c8a3d; /* رنگ هاور/تأکید */ --cc-button-text: #ffffff; /* متن روی دکمه‌ها */ --cc-progress-track: #e9ecef; /* پس‌زمینهٔ نوار پیشرفت */ --cc-progress-text: #28a745; /* درصد پیشرفت */ --cc-milestone: #28a745; /* مراحل محقق‌شده */ --cc-card-bg: #ffffff; /* پس‌زمینهٔ کارت */ --cc-card-border: #e0e0e0; /* حاشیهٔ کارت */ --cc-title: #333333; /* عنوان پویش */ --cc-text: #555555; /* متن توضیحات */ --cc-muted: #6c757d; /* متن کم‌رنگ (تاریخ، برچسب مراحل) */ --cc-timer-from: #667eea; /* تایمر - رنگ اول گرادیان */ --cc-timer-to: #764ba2; /* تایمر - رنگ دوم گرادیان */ --cc-primary-soft: #f0fdf4; /* پس زمینه خیلی کم رنگ مشتق از رنگ اصلی (چیپ توضیحات) */ --cc-primary-soft-border: #b7ebc6; /* حاشیه کم رنگ */ --cc-primary-rgb: 40, 167, 69; /* رنگ اصلی به صورت RGB برای سایه ها */ --cc-grid-max: 1260px; /* عرض شبکهٔ کارت‌ها (۵٪ عریض‌تر از 1200px قبلی) */ } .cc-campaign-card { background: var(--cc-card-bg); border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); padding: 18px; margin: 0; border: 1px solid var(--cc-card-border); } /* Countdown Timer */ .cc-countdown { display: flex; justify-content: center; align-items: center; gap: 8px; /* فاصلهٔ عمودی تایمر کمتر شد: 20px ← 10px (نزدیک‌تر شدن عکس تا درصد پیشرفت) */ margin: 10px 0; padding: 16px; background: linear-gradient(135deg, var(--cc-timer-from) 0%, var(--cc-timer-to) 100%); border-radius: 8px; color: #fff; } .cc-countdown-ended { background: #dc3545; padding: 12px; text-align: center; border-radius: 8px; font-weight: bold; } .cc-countdown-item { display: flex; flex-direction: column; align-items: center; min-width: 60px; } .cc-countdown-value { font-size: 2rem; font-weight: bold; line-height: 1; } .cc-countdown-label { font-size: 0.75rem; opacity: 0.9; margin-top: 4px; } .cc-countdown-separator { font-size: 1.5rem; font-weight: bold; opacity: 0.8; } /* Progress Bar */ .cc-progress-container { /* فاصلهٔ نوار پیشرفت از تایمر/توضیحات کمتر شد: 20px ← 10px */ margin: 10px 0; } .cc-progress-info { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; } .cc-progress-percent { font-size: 1.5rem; font-weight: bold; color: var(--cc-progress-text); } .cc-progress-amounts { color: var(--cc-text, #666); font-size: 0.9rem; } .cc-progress-bar { height: 24px; background: var(--cc-progress-track); border-radius: 12px; overflow: hidden; position: relative; } .cc-progress-fill { height: 100%; background: linear-gradient(90deg, var(--cc-primary) 0%, var(--cc-secondary) 100%); border-radius: 12px; transition: width 1s ease-in-out; position: relative; } .cc-progress-fill::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent); animation: shimmer 2s infinite; } @keyframes shimmer { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } } .cc-progress-goal-reached { text-align: center; margin-top: 12px; padding: 12px; background: linear-gradient(135deg, var(--cc-primary) 0%, var(--cc-secondary) 100%); color: var(--cc-button-text); border-radius: 8px; font-weight: bold; font-size: 1.1rem; animation: pulse 2s infinite; } @keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.02); } } /* Milestones */ .cc-milestones { position: relative; display: flex; justify-content: space-between; align-items: flex-start; margin: 30px 0; padding: 0; } .cc-milestone { position: relative; flex: 1 1 0; min-width: 0; margin: 0; padding: 0 4px; text-align: center; z-index: 1; } /* نشانگر (تیک/دایره) در جریان عادی سند است تا روی محتوای دیگر نیفتد */ .cc-milestone-marker { position: relative; width: 22px; height: 22px; margin: 0 auto 10px; z-index: 2; } .cc-milestone-dot { display: block; box-sizing: border-box; width: 16px; height: 16px; /* وسط‌چین شدن دایره داخل کادر ۲۲ پیکسلی نشانگر */ margin: 3px auto; border-radius: 50%; background: #fff; border: 2px solid #adb5bd; transition: all 0.3s ease; } .cc-milestone.reached .cc-milestone-dot { background: var(--cc-milestone); border-color: var(--cc-milestone); } .cc-milestone-check { display: none; box-sizing: border-box; width: 22px; height: 22px; border-radius: 50%; background: var(--cc-milestone); color: #fff; font-size: 12px; font-weight: bold; line-height: 22px; text-align: center; } .cc-milestone.reached .cc-milestone-check { display: block; } .cc-milestone.reached .cc-milestone-dot { display: none; } .cc-milestone-label { display: block; margin-top: 0; } .cc-milestone-percent { display: block; font-weight: bold; color: var(--cc-text, #495057); } .cc-milestone.reached .cc-milestone-percent { color: var(--cc-milestone); } .cc-milestone-title { display: block; font-size: 0.8rem; color: var(--cc-muted, #6c757d); margin-top: 2px; line-height: 1.4; overflow-wrap: break-word; } /* انیمیشن ورود مراحل محقق‌شده (کلاس animate-in توسط JS اضافه می‌شود) */ .cc-milestone.reached.animate-in { animation: ccMilestonePop 0.5s ease both; } @keyframes ccMilestonePop { from { opacity: 0; transform: translateY(10px) scale(0.85); } to { opacity: 1; transform: translateY(0) scale(1); } } /* Milestone connecting line - دقیقاً از مرکز نشانگرها عبور می‌کند */ .cc-milestones::before { content: ''; position: absolute; top: 11px; /* با ۴ مرحله هم‌عرض، مرکز اولین/آخرین مرحله روی ۱۲.۵٪ قرار می‌گیرد */ left: calc(100% / 8); right: calc(100% / 8); height: 2px; background: var(--cc-progress-track, #e9ecef); z-index: 0; } /* Campaign Card Components */ .cc-campaign-header { /* فاصلهٔ عنوان از تصویر کمتر شد: 16px ← 10px */ margin-bottom: 10px; } .cc-campaign-title { margin: 0; font-size: 1.5rem; color: var(--cc-title); } .cc-campaign-description { margin: 20px 0; color: var(--cc-text); line-height: 1.6; } .cc-campaign-cta { text-align: center; margin-top: 12px; } /* توضیح کمپین + آکاردئون «توضیحات بیشتر» (پیش‌فرض بسته، بازشدن نرم) */ .cc-campaign-description .cc-desc-content { max-height: 0; overflow: hidden; transition: max-height 0.55s ease; text-align: right; } .cc-campaign-description .cc-desc-content p { margin: 0 0 8px; } .cc-campaign-description .cc-desc-content p:last-child { margin-bottom: 0; } .cc-desc-toggle { display: inline-flex; align-items: center; gap: 6px; margin: 4px 0 6px; padding: 6px 14px; background: var(--cc-primary-soft, #f0fdf4); border: 1px solid var(--cc-primary-soft-border, #b7ebc6); border-radius: 20px; color: var(--cc-primary); font-weight: bold; font-size: 0.85rem; cursor: pointer; line-height: 1; transition: background 0.2s ease; } .cc-desc-toggle:hover { color: var(--cc-primary-hover); text-decoration: underline; } .cc-desc-toggle-icon { width: 9px; height: 9px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform 0.3s ease; display: inline-block; margin-top: -4px; } .cc-campaign-description.open .cc-desc-toggle-icon { transform: rotate(-135deg); margin-top: 4px; } .cc-donate-button { display: inline-block; padding: 14px 32px; background: linear-gradient(135deg, var(--cc-primary) 0%, var(--cc-secondary) 100%); color: var(--cc-button-text); text-decoration: none; border-radius: 8px; font-weight: bold; font-size: 1.1rem; transition: all 0.3s ease; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15); } .cc-donate-button:hover { transform: translateY(-2px); box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2); } /* Campaign Image (تصویر کارت پویش) */ .cc-campaign-image { /* فاصلهٔ تصویر تا بخش بعدی (عنوان/نوار پیشرفت) کمتر شد: 16px ← 8px */ margin-bottom: 8px; } .cc-campaign-image img { display: block; width: 100%; height: auto; max-height: 320px; object-fit: cover; background: #f0f2f5; border-radius: 10px; border: 1px solid var(--cc-progress-track, #e9ecef); } /* تعداد حامیان (بازگردانی عنصر کارت قدیمی) */ .cc-campaign-supporters { display: flex; justify-content: center; align-items: center; margin: 14px 0; padding: 10px 12px; font-weight: bold; color: var(--cc-text, #495057); background: #f6f9fc; border: 1px dashed #d0d7de; border-radius: 8px; } /* Grid layout برای شورتکد [charity_campaigns] -- چیدمان چندتایی کارت‌ها */ .cc-campaigns-grid { display: grid; gap: 16px; margin: 0 auto 24px; /* عرض بخش شورتکد: متغیر --cc-grid-max (پیش‌فرض 1260px = ۵٪ عریض‌تر از 1200px قبلی) */ max-width: var(--cc-grid-max, 1260px); width: 100%; } .cc-campaigns-grid .cc-card, .cc-campaigns-grid .cc-campaign-card { margin: 0; display: flex; flex-direction: column; height: 100%; } .cc-campaigns-grid .cc-campaign-cta { margin-top: auto; /* دکمه کمک همه کارت‌ها پایین هم‌تراز شوند */ } /* تعداد ستون بر اساس کلاس تولیدشده توسط شورتکد */ .cc-grid-cols-1 { grid-template-columns: repeat(1, 1fr); } .cc-grid-cols-2 { grid-template-columns: repeat(2, 1fr); } .cc-grid-cols-3 { grid-template-columns: repeat(3, 1fr); } .cc-grid-cols-4 { grid-template-columns: repeat(4, 1fr); } .cc-grid-cols-5 { grid-template-columns: repeat(5, 1fr); } .cc-grid-cols-6 { grid-template-columns: repeat(6, 1fr); } /* Responsive: تبلت → ۲ ستون، موبایل → ۱ ستون */ @media (max-width: 992px) { .cc-grid-cols-3, .cc-grid-cols-4, .cc-grid-cols-5, .cc-grid-cols-6 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 768px) { .cc-grid-cols-2, .cc-grid-cols-3, .cc-grid-cols-4, .cc-grid-cols-5, .cc-grid-cols-6 { grid-template-columns: repeat(1, 1fr); } } /* Responsive Design */ @media (max-width: 768px) { .cc-campaign-card { padding: 16px; margin: 12px 0; } .cc-countdown-value { font-size: 1.5rem; } .cc-countdown-item { min-width: 50px; } .cc-countdown { padding: 12px 8px; } .cc-milestone-title { font-size: 0.7rem; } } @media (max-width: 480px) { .cc-countdown { flex-wrap: wrap; gap: 6px; } .cc-countdown-item { min-width: 45px; } .cc-countdown-value { font-size: 1.2rem; } .cc-countdown-separator { display: none; } .cc-progress-info { flex-direction: column; gap: 8px; } /* در موبایل دو مرحله در هر ردیف */ .cc-milestones { flex-wrap: wrap; justify-content: center; row-gap: 18px; } .cc-milestone { flex: 0 0 calc(50% - 8px); } .cc-milestones::before { display: none; } .cc-donate-button { width: 100%; padding: 12px 24px; } } /* ⬇️ متراکم‌سازی کارت‌های شورتکد چندتایی (فقط داخل .cc-campaign-card) */ .cc-campaign-card .cc-campaign-header { margin-bottom: 12px; } .cc-campaign-card .cc-campaign-title { font-size: 1.3rem; line-height: 1.35; } .cc-campaign-card .cc-campaign-image { margin-bottom: 14px; } .cc-campaign-card .cc-campaign-image img { max-height: 250px; border-radius: 8px; } .cc-campaign-card .cc-timer-wrap, .cc-campaign-card .cc-campaign-timer { margin: 0; } .cc-campaign-card .cc-countdown { margin: 8px 0 12px; padding: 10px 14px; gap: 6px; border-radius: 8px; } .cc-campaign-card .cc-countdown-item { min-width: 44px; } .cc-campaign-card .cc-countdown-value { font-size: 1.3rem; } .cc-campaign-card .cc-countdown-label { font-size: 0.7rem; margin-top: 2px; } .cc-campaign-card .cc-countdown-separator { font-size: 1.1rem; } .cc-campaign-card .cc-progress-container { margin: 12px 0 6px; } .cc-campaign-card .cc-progress-info { margin-bottom: 6px; } .cc-campaign-card .cc-progress-percent { font-size: 1.3rem; } .cc-campaign-card .cc-progress-bar { height: 14px; border-radius: 6px; } .cc-campaign-card .cc-progress-fill { border-radius: 6px; } .cc-campaign-card .cc-desc-toggle { font-size: 0.95rem; padding: 8px 16px; } .cc-campaign-card .cc-desc-content { font-size: 1rem; color: var(--cc-text, #555); line-height: 1.75; } .cc-campaign-card .cc-donate-button { padding: 13px 28px; font-size: 1.05rem; }