/* ========================================================== NepVox – Modern Pricing Section Light & Dark mode via [data-theme="dark"] on / ========================================================== */ /* ── Section ──────────────────────────────────────────────── */ .np-pricing-section { padding: 80px 0 60px; } @media (max-width: 767px) { .np-pricing-section { padding: 52px 0 40px; } } /* ── Header ───────────────────────────────────────────────── */ .np-pricing-header { margin-bottom: 48px; } .np-pricing-badge { display: inline-flex; align-items: center; gap: 6px; background: #eff0ff; color: #4f46e5; font-size: 11px; font-weight: 800; letter-spacing: 1.8px; text-transform: uppercase; padding: 7px 18px; border-radius: 30px; margin-bottom: 18px; border: 1px solid #ddd6fe; } [data-theme="dark"] .np-pricing-badge { background: rgba(99,102,241,.15); border-color: rgba(99,102,241,.3); color: #a5b4fc; } .np-pricing-title { font-size: 44px; font-weight: 800; color: #0f172a; margin: 0 0 14px; line-height: 1.15; } [data-theme="dark"] .np-pricing-title { color: #f1f5f9; } @media (max-width: 991px) { .np-pricing-title { font-size: 32px; } } @media (max-width: 767px) { .np-pricing-title { font-size: 26px; } } .np-pricing-subtitle { font-size: 17px; color: #64748b; margin: 0 0 32px; } [data-theme="dark"] .np-pricing-subtitle { color: #94a3b8; } /* ── Monthly / Yearly Toggle ──────────────────────────────── */ .np-billing-toggle-wrapper { display: inline-flex; align-items: center; gap: 12px; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 40px; padding: 5px 10px 5px 5px; } [data-theme="dark"] .np-billing-toggle-wrapper { background: #1e293b; border-color: #334155; } .np-billing-toggle { display: flex; gap: 2px; } .np-toggle-btn { background: transparent; border: none; padding: 9px 24px; border-radius: 30px; font-size: 14px; font-weight: 600; color: #64748b; cursor: pointer; transition: all .2s ease; white-space: nowrap; } .np-toggle-btn.np-active { background: #4f46e5; color: #fff; box-shadow: 0 2px 10px rgba(79,70,229,.35); } [data-theme="dark"] .np-toggle-btn { color: #94a3b8; } [data-theme="dark"] .np-toggle-btn.np-active { background: #4f46e5; color: #fff; } .np-save-badge { font-size: 12px; font-weight: 700; color: #16a34a; white-space: nowrap; padding-right: 4px; } [data-theme="dark"] .np-save-badge { color: #4ade80; } /* ── Cards Grid ───────────────────────────────────────────── */ .np-plans-row { align-items: stretch; margin-bottom: 40px; } /* ── Single Card ──────────────────────────────────────────── */ .np-pricing-card { background: #fff; border: 1.5px solid #e2e8f0; border-radius: 20px; padding: 32px 26px 28px; height: 100%; position: relative; transition: transform .25s ease, box-shadow .25s ease; display: flex; flex-direction: column; } .np-pricing-card:hover { transform: translateY(-5px); box-shadow: 0 16px 48px rgba(0,0,0,.09); } [data-theme="dark"] .np-pricing-card { background: #1e293b; border-color: #334155; } /* Plan accent colours */ .np-plan-starter { border-top: 3px solid #16a34a; } .np-plan-pro { border: 2px solid #3b82f6; } [data-theme="dark"] .np-plan-pro { border-color: #3b82f6; } /* ── Most Popular Badge ───────────────────────────────────── */ .np-popular-badge { position: absolute; top: -16px; left: 50%; transform: translateX(-50%); background: #3b82f6; color: #fff; font-size: 10px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; padding: 5px 18px; border-radius: 20px; white-space: nowrap; } /* ── Icon Box ─────────────────────────────────────────────── */ .np-plan-icon-box { width: 58px; height: 58px; border-radius: 16px; display: flex; align-items: center; justify-content: center; font-size: 22px; margin-bottom: 16px; flex-shrink: 0; } .np-icon-basic { background: #f3e8ff; color: #7c3aed; } .np-icon-starter { background: #dcfce7; color: #16a34a; } .np-icon-pro { background: #dbeafe; color: #2563eb; } .np-icon-lifetime { background: #ffedd5; color: #f97316; } [data-theme="dark"] .np-icon-basic { background: rgba(124,58,237,.15); color: #a78bfa; } [data-theme="dark"] .np-icon-starter { background: rgba(22,163,74,.15); color: #4ade80; } [data-theme="dark"] .np-icon-pro { background: rgba(37,99,235,.15); color: #60a5fa; } [data-theme="dark"] .np-icon-lifetime { background: rgba(249,115,22,.15); color: #fb923c; } /* ── Plan name / description ──────────────────────────────── */ .np-plan-name { font-size: 22px; font-weight: 700; color: #0f172a; margin: 0 0 4px; line-height: 1.2; } [data-theme="dark"] .np-plan-name { color: #f1f5f9; } .np-plan-desc { font-size: 13px; color: #64748b; margin: 0 0 20px; } [data-theme="dark"] .np-plan-desc { color: #94a3b8; } /* ── Price ────────────────────────────────────────────────── */ .np-price-display { display: flex; align-items: flex-end; gap: 6px; margin-bottom: 22px; } .np-price-amount { font-size: 52px; font-weight: 800; line-height: 1; color: #0f172a; transition: color .2s; } [data-theme="dark"] .np-price-amount { color: #f1f5f9; } .np-plan-starter .np-price-amount { color: #16a34a; } .np-plan-pro .np-price-amount { color: #2563eb; } .np-plan-lifetime .np-price-amount { color: #f97316; } [data-theme="dark"] .np-plan-starter .np-price-amount { color: #4ade80; } [data-theme="dark"] .np-plan-pro .np-price-amount { color: #60a5fa; } [data-theme="dark"] .np-plan-lifetime .np-price-amount { color: #fb923c; } .np-price-meta { display: flex; flex-direction: column; padding-bottom: 8px; line-height: 1.3; } .np-price-period, .np-price-billed { font-size: 13px; font-weight: 500; color: #64748b; } [data-theme="dark"] .np-price-period, [data-theme="dark"] .np-price-billed { color: #94a3b8; } /* ── CTA Buttons ──────────────────────────────────────────── */ .np-btn { display: block; width: 100%; padding: 13px 20px; border-radius: 12px; font-size: 15px; font-weight: 700; text-align: center; text-decoration: none; cursor: pointer; border: 2px solid transparent; transition: all .2s ease; margin-bottom: 26px; line-height: 1.4; } /* Basic – violet outlined */ .np-btn-basic { border-color: #7c3aed; color: #7c3aed; background: transparent; } .np-btn-basic:hover { background: #7c3aed; color: #fff; text-decoration: none; } [data-theme="dark"] .np-btn-basic { border-color: #a78bfa; color: #a78bfa; } [data-theme="dark"] .np-btn-basic:hover { background: #7c3aed; color: #fff; } /* Starter – solid green */ .np-btn-starter { background: #16a34a; color: #fff; border-color: #16a34a; } .np-btn-starter:hover { background: #15803d; border-color: #15803d; color: #fff; text-decoration: none; } /* Pro – solid blue */ .np-btn-pro { background: #2563eb; color: #fff; border-color: #2563eb; padding: 15px 20px; font-size: 16px; } .np-btn-pro:hover { background: #1d4ed8; border-color: #1d4ed8; color: #fff; text-decoration: none; } /* Lifetime – orange outlined */ .np-btn-lifetime { border-color: #f97316; color: #f97316; background: transparent; } .np-btn-lifetime:hover { background: #f97316; color: #fff; text-decoration: none; } [data-theme="dark"] .np-btn-lifetime { border-color: #fb923c; color: #fb923c; } [data-theme="dark"] .np-btn-lifetime:hover { background: #f97316; color: #fff; } /* Manage / current plan */ .np-btn-manage { background: rgba(79,70,229,.1); color: #4f46e5; border-color: rgba(79,70,229,.3); } .np-btn-manage:hover { background: rgba(79,70,229,.18); color: #3730a3; text-decoration: none; } [data-theme="dark"] .np-btn-manage { background: rgba(99,102,241,.15); color: #a5b4fc; border-color: rgba(99,102,241,.3); } [data-theme="dark"] .np-btn-manage:hover { background: rgba(99,102,241,.25); color: #c7d2fe; } /* Disabled */ .np-btn-disabled { opacity: .5; pointer-events: none; cursor: not-allowed; } /* ── Feature List ─────────────────────────────────────────── */ .np-feature-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 11px; flex: 1; } .np-feature-item { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; color: #374151; line-height: 1.5; } [data-theme="dark"] .np-feature-item { color: #cbd5e1; } .np-feature-item.np-feature-no { opacity: .65; } .np-check { flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 9px; margin-top: 2px; } .np-check-basic { background: #f3e8ff; color: #7c3aed; } .np-check-starter { background: #dcfce7; color: #16a34a; } .np-check-pro { background: #dbeafe; color: #2563eb; } .np-check-lifetime { background: #ffedd5; color: #f97316; } .np-check-no { background: #fee2e2; color: #ef4444; } [data-theme="dark"] .np-check-basic { background: rgba(124,58,237,.2); color: #a78bfa; } [data-theme="dark"] .np-check-starter { background: rgba(22,163,74,.2); color: #4ade80; } [data-theme="dark"] .np-check-pro { background: rgba(37,99,235,.2); color: #60a5fa; } [data-theme="dark"] .np-check-lifetime { background: rgba(249,115,22,.2); color: #fb923c; } [data-theme="dark"] .np-check-no { background: rgba(239,68,68,.2); color: #f87171; } /* ── Trust Badges ─────────────────────────────────────────── */ .np-trust-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 48px; padding: 28px 32px; background: #f8fafc; border-radius: 18px; border: 1px solid #e2e8f0; } [data-theme="dark"] .np-trust-row { background: #1e293b; border-color: #334155; } .np-trust-item { display: flex; align-items: flex-start; gap: 12px; } .np-trust-icon { width: 42px; height: 42px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 17px; flex-shrink: 0; } .np-trust-icon-green { background: #dcfce7; color: #16a34a; } .np-trust-icon-blue { background: #dbeafe; color: #2563eb; } .np-trust-icon-purple { background: #f3e8ff; color: #7c3aed; } .np-trust-icon-orange { background: #ffedd5; color: #f97316; } [data-theme="dark"] .np-trust-icon-green { background: rgba(22,163,74,.15); color: #4ade80; } [data-theme="dark"] .np-trust-icon-blue { background: rgba(37,99,235,.15); color: #60a5fa; } [data-theme="dark"] .np-trust-icon-purple { background: rgba(124,58,237,.15); color: #a78bfa; } [data-theme="dark"] .np-trust-icon-orange { background: rgba(249,115,22,.15); color: #fb923c; } .np-trust-text strong { display: block; font-size: 13px; font-weight: 700; color: #0f172a; margin-bottom: 3px; line-height: 1.3; } .np-trust-text span { font-size: 12px; color: #64748b; line-height: 1.45; } [data-theme="dark"] .np-trust-text strong { color: #f1f5f9; } [data-theme="dark"] .np-trust-text span { color: #94a3b8; } /* ── Responsive ───────────────────────────────────────────── */ @media (max-width: 1199px) { .np-trust-row { grid-template-columns: repeat(2, 1fr); } .np-price-amount { font-size: 44px; } } @media (max-width: 767px) { .np-trust-row { grid-template-columns: 1fr; gap: 14px; } .np-billing-toggle-wrapper { flex-wrap: wrap; justify-content: center; } .np-price-amount { font-size: 40px; } .np-plan-name { font-size: 19px; } } @media (max-width: 575px) { .np-pricing-card { padding: 24px 18px 22px; } .np-price-amount { font-size: 36px; } .np-trust-row { padding: 20px; } } /* ── Payment Method Selection Modal ────────────────────────────────── */ .np-pay-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.72); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 16px; opacity: 0; pointer-events: none; transition: opacity 0.22s ease; } .np-pay-overlay.np-pay-open { opacity: 1; pointer-events: all; } .np-pay-card { background: #1e293b; border: 1px solid #334155; border-radius: 20px; width: 100%; max-width: 510px; padding: 34px 30px 26px; position: relative; transform: translateY(18px) scale(0.97); transition: transform 0.22s ease; box-shadow: 0 20px 60px rgba(0,0,0,0.55); } .np-pay-overlay.np-pay-open .np-pay-card { transform: translateY(0) scale(1); } .np-pay-close { position: absolute; top: 14px; right: 16px; width: 30px; height: 30px; border-radius: 50%; border: none; background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.7); font-size: 17px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.18s; } .np-pay-close:hover { background: rgba(255,255,255,0.16); color: #fff; } .np-pay-lock-icon { width: 54px; height: 54px; background: linear-gradient(135deg, #6366f1, #8b5cf6); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 14px; font-size: 20px; color: #fff; box-shadow: 0 4px 18px rgba(99,102,241,0.38); } .np-pay-title { text-align: center; font-size: 21px; font-weight: 700; color: #fff; margin: 0 0 7px; } .np-pay-plan-line { text-align: center; font-size: 14px; color: rgba(255,255,255,0.6); margin: 0 0 6px; } .np-pay-accent { color: #818cf8; font-weight: 600; } .np-pay-trust-line { text-align: center; font-size: 11.5px; color: rgba(255,255,255,0.38); margin: 0 0 22px; } .np-pay-trust-line i { margin-right: 3px; } .np-pay-method-label { font-size: 13px; font-weight: 600; color: rgba(255,255,255,0.75); margin-bottom: 10px; } .np-pay-methods { display: flex; flex-direction: column; gap: 9px; margin-bottom: 14px; } .np-pay-method { display: flex; align-items: center; gap: 12px; padding: 13px 14px; border: 1.5px solid #334155; border-radius: 12px; cursor: pointer; background: rgba(255,255,255,0.03); transition: border-color 0.18s, background 0.18s; } .np-pay-method:hover { border-color: rgba(99,102,241,0.45); background: rgba(99,102,241,0.06); } .np-pay-method.np-pay-active { border-color: #6366f1; background: rgba(99,102,241,0.1); } .np-pay-radio { width: 19px; height: 19px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.28); flex-shrink: 0; display: flex; align-items: center; justify-content: center; transition: border-color 0.18s; } .np-pay-method.np-pay-active .np-pay-radio { border-color: #6366f1; } .np-pay-radio-dot { width: 9px; height: 9px; border-radius: 50%; background: #6366f1; opacity: 0; transform: scale(0); transition: all 0.18s; } .np-pay-method.np-pay-active .np-pay-radio-dot { opacity: 1; transform: scale(1); } .np-pay-method-icon { width: 44px; height: 44px; border-radius: 11px; display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 800; flex-shrink: 0; } .np-pay-icon-stripe { background: linear-gradient(135deg, #635bff, #4a41d0); color: #fff; } .np-pay-icon-esewa { background: linear-gradient(135deg, #00a651, #007a3c); color: #fff; } .np-pay-method-info { flex: 1; min-width: 0; } .np-pay-method-name-row { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-bottom: 2px; } .np-pay-method-name { font-size: 14px; font-weight: 600; color: #fff; } .np-pay-rec-badge { font-size: 9.5px; font-weight: 700; color: #818cf8; background: rgba(99,102,241,0.15); border: 1px solid rgba(99,102,241,0.3); border-radius: 30px; padding: 1px 7px; letter-spacing: .4px; text-transform: uppercase; } .np-pay-method-sub { font-size: 11.5px; color: rgba(255,255,255,0.42); display: block; } .np-pay-card-icons { display: flex; gap: 5px; margin-top: 6px; align-items: center; flex-wrap: wrap; } .np-pay-card-icons i { font-size: 27px; line-height: 1; } .np-ci-visa { color: #93c5fd; } .np-ci-mc { color: #f87171; } .np-ci-amex { color: #67e8f9; } .np-ci-apple { color: rgba(255,255,255,0.65); font-size: 24px; } .np-pay-chevron { color: rgba(255,255,255,0.22); font-size: 12px; flex-shrink: 0; } .np-pay-method.np-pay-active .np-pay-chevron { color: #6366f1; } .np-pay-secure-note { font-size: 11.5px; color: rgba(255,255,255,0.35); text-align: center; margin: 0 0 18px; } .np-pay-secure-note i { margin-right: 4px; } .np-pay-cta { width: 100%; padding: 14px; background: linear-gradient(90deg, #6366f1, #8b5cf6 50%, #ec4899); border: none; border-radius: 12px; color: #fff; font-size: 15.5px; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; transition: opacity 0.18s, transform 0.18s; box-shadow: 0 4px 18px rgba(99,102,241,0.32); } .np-pay-cta:hover { opacity: 0.9; transform: translateY(-1px); } .np-pay-cta:disabled { opacity: 0.55; cursor: not-allowed; transform: none; } @media (max-width: 575px) { .np-pay-card { padding: 26px 18px 22px; border-radius: 16px; } .np-pay-title { font-size: 18px; } .np-pay-lock-icon { width: 46px; height: 46px; font-size: 17px; } }