style(subscription): update padding and font sizes for offer badges

2026-07-02 15:28:09 +08:00
parent 515fdcaa56
commit fbaf6f9660
4 changed files with 8 additions and 8 deletions
@@ -104,11 +104,11 @@

 .offerBadge {
  justify-self: end;
-  padding: 4px 8px;
+  padding: 5px 9px;
  border-radius: 999px;
  background: linear-gradient(135deg, #ff5fae 0%, #ff8a34 100%);
  color: #ffffff;
-  font-size: 11px;
+  font-size: 14px;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
@@ -34,11 +34,11 @@

 .firstRechargeBadge {
  flex: 0 0 auto;
-  padding: 8px 10px;
+  padding: 9px 12px;
  border-radius: 999px;
  background: linear-gradient(135deg, #ff5fae 0%, #ff8a34 100%);
  color: #ffffff;
-  font-size: 13px;
+  font-size: 20;
  font-weight: 900;
  line-height: 1;
  box-shadow: 0 10px 22px rgba(255, 95, 174, 0.25);
@@ -107,11 +107,11 @@
  top: 8px;
  left: 50%;
  max-width: calc(100% - 12px);
-  padding: 3px 7px;
+  padding: 4px 8px;
  border-radius: 999px;
  background: linear-gradient(135deg, #ff5fae 0%, #ff8a34 100%);
  color: #ffffff;
-  font-size: 10px;
+  font-size: 16px;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
@@ -120,7 +120,7 @@
 }

 .planTitle {
-  margin-top: 12px;
+  margin-top: 20px;
  font-size: 19px;
  font-weight: 800;
  line-height: 1.15;
@@ -53,7 +53,7 @@ export function SubscriptionVipOfferSection({
            >
              {plan.isFirstRechargeOffer ? (
                <span className={styles.offerBadge}>
-                  First recharge {plan.firstRechargeDiscountPercent ?? 50}% OFF
+                  {plan.firstRechargeDiscountPercent ?? 50}% OFF
                </span>
              ) : null}
              <span className={styles.planTitle}>{plan.title}</span>