fix: purple pushbox

js/components/content-tabs.js

@@ -74,6 +74,7 @@ class ContentTabs extends HTMLElement {
       <style>
         :host {
           display: block;
+          margin: var(--spacing-xl, 2rem) 0;
         }
 
         .tabs-container {
@@ -83,15 +84,18 @@ class ContentTabs extends HTMLElement {
 
         .tab-list {
           display: flex;
-          gap: var(--spacing-lg, 1.5rem);
+          gap: var(--spacing-md, 1rem);
+          margin-top: var(--spacing-lg, 1.5rem);
           border-bottom: 1px solid var(--color-border, #e2e8f0);
-          margin-bottom: var(--spacing-md, 1rem);
         }
 
         .tab-button {
-          padding: var(--spacing-sm, 0.5rem) 0;
-          background: none;
+          padding: var(--spacing-sm, 0.5rem) var(--spacing-md, 1rem);
+          background: transparent;
           border: none;
+          border-radius: 4px;
+          border-bottom-left-radius: 0;
+          border-bottom-right-radius: 0;
           font-family: var(--font-family-outfit, "Outfit", sans-serif);
           font-size: 16px;
           font-weight: 400;
@@ -100,28 +104,24 @@ class ContentTabs extends HTMLElement {
           text-decoration: underline;
           text-underline-offset: 3px;
           cursor: pointer;
-          transition: opacity var(--transition-fast, 150ms ease);
-          position: relative;
-        }
-
-        .tab-button:first-child {
-          color: var(--color-text, #1e293b);
-          text-decoration: none;
-          font-weight: 400;
+          transition: all var(--transition-fast, 150ms ease);
         }
 
         .tab-button.active {
+          background: var(--color-border, #e2e8f0);
           color: var(--color-text, #1e293b);
           text-decoration: none;
-          font-weight: 400;
         }
 
-        .tab-button:hover {
+        .tab-button:not(.active):hover {
           opacity: 0.7;
         }
 
         .tab-panels {
           min-height: 100px;
+          background: var(--color-border, #e2e8f0);
+          padding: var(--spacing-lg, 1.5rem) var(--spacing-md, 1rem);
+          border-radius: var(--radius-sm, 0.25rem);
         }
       </style>
       <div class="tabs-container">

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;