From b9f776108e118bdb57f9a85540a63a689a4d50e7 Mon Sep 17 00:00:00 2001
From: Ashley Anness <aanness@vitamix.com>
Date: Wed, 8 Jul 2026 10:53:49 -0400
Subject: [PATCH 1/3] Enhance link button styles for sup and sub elements

Added handling for superscript and subscript elements inside links to apply specific button styles.
---
 scripts/scripts.js | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/scripts/scripts.js b/scripts/scripts.js
index 96a3c336..e1a18ad1 100644
--- a/scripts/scripts.js
+++ b/scripts/scripts.js
@@ -805,6 +805,8 @@ function decorateButtons(main) {
       a.className = 'button';
       const strong = a.closest('strong');
       const em = a.closest('em');
+      const hasSup = a.querySelector('sup') !== null;
+      const hasSub = a.querySelector('sub') !== null;
       if (strong && em) {
         a.classList.add('accent');
         const outer = strong.contains(em) ? strong : em;
@@ -815,6 +817,14 @@ function decorateButtons(main) {
       } else if (em) {
         a.classList.add('link');
         em.replaceWith(a);
+        } else if (hasSup) {
+        // superscript inside link, white outline button
+        a.classList.add('outline-white');
+        a.querySelector('sup').replaceWith(...a.querySelector('sup').childNodes);
+      } else if (hasSub) {
+        // subscript inside link, charcoal outline button
+        a.classList.add('outline-charcoal');
+        a.querySelector('sub').replaceWith(...a.querySelector('sub').childNodes);
       }
       p.className = 'button-wrapper';
     }

From 2e9642e0d3eb49ccb56b7c60d24cd91610149c94 Mon Sep 17 00:00:00 2001
From: Ashley Anness <aanness@vitamix.com>
Date: Wed, 8 Jul 2026 10:54:45 -0400
Subject: [PATCH 2/3] Implement outline button styles

Add styles for outline buttons with hover and focus states.
---
 styles/styles.css | 31 +++++++++++++++++++++++++++++++
 1 file changed, 31 insertions(+)

diff --git a/styles/styles.css b/styles/styles.css
index e30c3abb..7327024a 100644
--- a/styles/styles.css
+++ b/styles/styles.css
@@ -610,6 +610,37 @@ button.button.close:focus {
   background-color: var(--color-shadow);
 }
 
+a.button.outline-white,
+button.button.outline-white {
+  border-color: var(--color-white);
+  background-color: transparent;
+  color: var(--color-white);
+}
+
+a.button.outline-white:hover,
+button.button.outline-white:hover,
+button.button.outline-white:focus {
+  border-color: var(--color-white);
+  background-color: rgb(255 255 255 / 15%);
+  color: var(--color-white);
+}
+
+a.button.outline-charcoal,
+button.button.outline-charcoal {
+  border-color: var(--color-charcoal);
+  background-color: transparent;
+  color: var(--color-charcoal);
+}
+
+a.button.outline-charcoal:hover,
+button.button.outline-charcoal:hover,
+button.button.outline-charcoal:focus {
+  border-color: var(--color-charcoal);
+  background-color: rgb(0 0 0 / 8%);
+  color: var(--color-charcoal);
+}
+
+
 .default-content-wrapper .button.link {
   text-align: left;
   line-height: var(--line-height-xl);

From 8fca12fcc011ac006c086c82c2a14db4337b3e15 Mon Sep 17 00:00:00 2001
From: Ashley Anness <aanness@vitamix.com>
Date: Wed, 8 Jul 2026 11:02:16 -0400
Subject: [PATCH 3/3] Fix indentation in conditional statement

---
 scripts/scripts.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/scripts/scripts.js b/scripts/scripts.js
index e1a18ad1..51cb013d 100644
--- a/scripts/scripts.js
+++ b/scripts/scripts.js
@@ -817,7 +817,7 @@ function decorateButtons(main) {
       } else if (em) {
         a.classList.add('link');
         em.replaceWith(a);
-        } else if (hasSup) {
+      } else if (hasSup) {
         // superscript inside link, white outline button
         a.classList.add('outline-white');
         a.querySelector('sup').replaceWith(...a.querySelector('sup').childNodes);