fix: purple pushbox

js/components/push-box.js

@@ -2,10 +2,11 @@
  * Push Box Component
  * A promotional container with logo, title, and CTA
  * Uses slots for all content to allow easy customization in HTML
+ * Supports variant="purple" for purple background with white content
  */
 class PushBox extends HTMLElement {
   static get observedAttributes() {
-    return ["background-color", "text-color"];
+    return ["background-color", "text-color", "variant"];
   }
 
   constructor() {
@@ -48,7 +49,18 @@ class PushBox extends HTMLElement {
     }
   }
 
+  get variant() {
+    return this.getAttribute("variant") || "default";
+  }
+
+  get isPurple() {
+    return this.variant === "purple";
+  }
+
   get backgroundColor() {
+    if (this.isPurple) {
+      return "#951D51";
+    }
     return (
       this.getAttribute("background-color") ||
       "var(--color-push-box-bg, #EBEEF4)"
@@ -56,9 +68,19 @@ class PushBox extends HTMLElement {
   }
 
   get textColor() {
+    if (this.isPurple) {
+      return "#FFFFFF";
+    }
     return this.getAttribute("text-color") || "#951D51";
   }
 
+  get titleColor() {
+    if (this.isPurple) {
+      return "#FFFFFF";
+    }
+    return "#000000";
+  }
+
   render() {
     this.shadowRoot.innerHTML = `
       <style>
@@ -94,12 +116,12 @@ class PushBox extends HTMLElement {
           font-size: 24px;
           font-weight: 700;
           line-height: 34px;
-          color: #000000;
+          color: ${this.titleColor};
           margin: 0;
         }
 
         .cta-wrapper {
-          color: #951D51;
+          color: ${this.textColor};
           font-family: var(--font-family-outfit, "Outfit", sans-serif);
           font-size: 16px;
           font-weight: 400;