From de5c2ed86a9efb34b1fbeb2013353e9951d33fac Mon Sep 17 00:00:00 2001
From: Naomi Carrigan <commits@nhcarrigan.com>
Date: Mon, 2 Feb 2026 13:54:53 -0800
Subject: [PATCH] feat: themeing

---
 site/index.html | 84 ++++++++++++++++++++++++++++++-------------------
 1 file changed, 52 insertions(+), 32 deletions(-)

diff --git a/site/index.html b/site/index.html
index 2e5eccd..515e3d7 100644
--- a/site/index.html
+++ b/site/index.html
@@ -8,6 +8,21 @@
         MARK: Styles
     -->
     <style>
+      /* ============================================
+         COLOR VARIABLES - Witchy Purple Rose Palette
+         ============================================ */
+      :root {
+        --witch-purple: #2B1B3D;
+        --witch-plum: #44275A;
+        --witch-rose: #A8577E;
+        --witch-mauve: #D4A5C7;
+        --witch-lavender: #E8D5E8;
+        --witch-black: #0A0009;
+        --witch-silver: #C0C0C0;
+        --witch-moon: #F5F5F5;
+        --witch-shadow: rgba(10, 0, 9, 0.7);
+      }
+
       /* ============================================
          RESET & BASE STYLES
          ============================================ */
@@ -49,16 +64,21 @@
         margin: 0.5rem 0;
       }
 
+      ul li::marker {
+        display: none !important;
+        content: "" !important;
+      }
+
       a {
-        color: #5865F2;
+        color: var(--witch-plum);
         text-decoration: underline;
         transition: color 0.2s ease;
       }
 
       a:hover,
       a:focus {
-        color: #4752C4;
-        outline: 2px solid #5865F2;
+        color: var(--witch-rose);
+        outline: 2px solid var(--witch-plum);
         outline-offset: 2px;
       }
 
@@ -200,8 +220,8 @@
          BUTTONS
          ============================================ */
       .cta-button {
-        background: #5865F2;
-        color: white;
+        background: var(--witch-plum);
+        color: var(--witch-moon);
         padding: 1rem 2rem;
         text-decoration: none;
         border-radius: 8px;
@@ -216,10 +236,10 @@
 
       .cta-button:hover,
       .cta-button:focus {
-        background: #4752C4;
-        color: white;
+        background: var(--witch-rose);
+        color: var(--witch-moon);
         transform: scale(1.05);
-        outline: 3px solid rgba(88, 101, 242, 0.3);
+        outline: 3px solid rgba(168, 87, 126, 0.3);
         outline-offset: 2px;
       }
 
@@ -232,14 +252,14 @@
       }
 
       .cta-button-secondary {
-        background: #333;
-        color: white;
+        background: var(--witch-purple);
+        color: var(--witch-moon);
       }
 
       .cta-button-secondary:hover,
       .cta-button-secondary:focus {
-        background: #222;
-        outline-color: rgba(51, 51, 51, 0.3);
+        background: var(--witch-black);
+        outline-color: var(--witch-shadow);
       }
 
       .cta-button-donate {
@@ -260,29 +280,29 @@
         text-align: center;
         margin: 2rem 0;
         padding: 2rem;
-        background: linear-gradient(135deg, #5865F2 0%, #4752C4 100%) !important;
+        background: linear-gradient(135deg, var(--witch-plum) 0%, var(--witch-purple) 100%) !important;
         border-radius: 16px;
-        color: white;
+        color: var(--witch-moon);
         width: 100%;
         max-width: 100%;
       }
 
       .hero-cta h2 {
         margin-top: 0;
-        color: white;
+        color: var(--witch-moon);
       }
 
       .hero-cta .cta-button {
-        background: white;
-        color: #5865F2;
+        background: var(--witch-lavender);
+        color: var(--witch-purple);
         font-size: 1.2rem;
         padding: 1.2rem 2.5rem;
       }
 
       .hero-cta .cta-button:hover,
       .hero-cta .cta-button:focus {
-        background: #f0f0f0;
-        outline-color: rgba(255, 255, 255, 0.5);
+        background: var(--witch-moon);
+        outline-color: rgba(232, 213, 232, 0.5);
       }
 
       /* ============================================
@@ -291,7 +311,7 @@
       .stat-number {
         font-size: 2.5rem;
         font-weight: bold;
-        color: #5865F2;
+        color: var(--witch-plum);
         margin: 0.5rem 0;
       }
 
@@ -316,7 +336,7 @@
         top: 0;
         bottom: 0;
         width: 3px;
-        background: linear-gradient(to bottom, #5865F2, #4752C4);
+        background: linear-gradient(to bottom, var(--witch-plum), var(--witch-rose));
         transform: translateX(-50%);
       }
 
@@ -390,7 +410,7 @@
 
       .timeline-company {
         font-size: 1rem;
-        color: #5865F2;
+        color: var(--witch-rose);
         font-weight: 600;
         margin-bottom: 0.5rem;
       }
@@ -765,7 +785,7 @@
       <!--
           MARK: How Can We Serve You?
       -->
-      <section class="card fade-in" style="text-align: center; background: linear-gradient(135deg, #5865F2 0%, #4752C4 100%); color: white; position: relative;" role="region" aria-labelledby="serve-you">
+      <section class="card fade-in" style="text-align: center; background: linear-gradient(135deg, var(--witch-plum) 0%, var(--witch-purple) 100%); color: var(--witch-moon); position: relative;" role="region" aria-labelledby="serve-you">
         <h2 id="serve-you" style="margin-top: 0; color: white;">How Can We Best Serve You?</h2>
 
         <div style="margin: 2rem auto; padding: 0 1rem;">
@@ -776,7 +796,7 @@
             <button id="prev-service" aria-label="Previous service" style="background: rgba(255, 255, 255, 0.2); border: none; color: white; width: 40px; height: 40px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.3s ease; font-size: 1.2rem; flex-shrink: 0;">
               <i class="fas fa-chevron-left"></i>
             </button>
-            <span id="rotating-text" style="font-weight: bold; color: #ffd700; display: flex; align-items: center; justify-content: center; min-width: 220px; max-width: 350px; height: 40px; position: relative; cursor: pointer; text-align: center;">
+            <span id="rotating-text" style="font-weight: bold; color: var(--witch-mauve); display: flex; align-items: center; justify-content: center; min-width: 220px; max-width: 350px; height: 40px; position: relative; cursor: pointer; text-align: center;">
               <span class="rotating-option" style="position: absolute; width: 100%; left: 0; opacity: 0; transform: translateY(20px); transition: all 0.5s ease;">Discord bots</span>
             </span>
             <button id="next-service" aria-label="Next service" style="background: rgba(255, 255, 255, 0.2); border: none; color: white; width: 40px; height: 40px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.3s ease; font-size: 1.2rem; flex-shrink: 0;">
@@ -787,14 +807,14 @@
 
         <!-- Service details that change based on selection -->
         <div id="service-details" style="min-height: 150px; margin: 2rem 0; padding: 1.5rem; border-radius: 16px;">
-          <h3 id="service-title" style="color: #ffd700; margin-top: 0; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);">Discord Bot Development</h3>
+          <h3 id="service-title" style="color: var(--witch-mauve); margin-top: 0; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);">Discord Bot Development</h3>
           <p id="service-description" style="font-size: 1.1rem; margin: 1rem 0; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);">
             Custom Discord bots tailored to your community's needs. From moderation tools to interactive games, we build scalable solutions that enhance engagement.
           </p>
           <div id="service-features" style="display: flex; justify-content: center; gap: 2rem; flex-wrap: wrap; margin-top: 1.5rem;">
-            <span style="display: flex; align-items: center; gap: 0.5rem; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);"><i class="fas fa-check-circle" style="color: #ffd700; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2));"></i> Custom Commands</span>
-            <span style="display: flex; align-items: center; gap: 0.5rem; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);"><i class="fas fa-check-circle" style="color: #ffd700; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2));"></i> Auto-moderation</span>
-            <span style="display: flex; align-items: center; gap: 0.5rem; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);"><i class="fas fa-check-circle" style="color: #ffd700; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2));"></i> 24/7 Uptime</span>
+            <span style="display: flex; align-items: center; gap: 0.5rem; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);"><i class="fas fa-check-circle" style="color: var(--witch-mauve); filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2));"></i> Custom Commands</span>
+            <span style="display: flex; align-items: center; gap: 0.5rem; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);"><i class="fas fa-check-circle" style="color: var(--witch-mauve); filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2));"></i> Auto-moderation</span>
+            <span style="display: flex; align-items: center; gap: 0.5rem; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);"><i class="fas fa-check-circle" style="color: var(--witch-mauve); filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2));"></i> 24/7 Uptime</span>
           </div>
         </div>
 
@@ -804,7 +824,7 @@
         </div>
 
         <div style="margin-top: 2rem;">
-          <a href="https://forms.nhcarrigan.com/form/XRlQjeu8CbMrTA-v0IPOxlUPEPitLKXTWg70UUCIORA" target="_blank" class="cta-button" style="background: white; color: #5865F2;" aria-label="Submit a commission inquiry">
+          <a href="https://forms.nhcarrigan.com/form/XRlQjeu8CbMrTA-v0IPOxlUPEPitLKXTWg70UUCIORA" target="_blank" class="cta-button" style="background: var(--witch-lavender); color: var(--witch-purple);" aria-label="Submit a commission inquiry">
             <i class="fas fa-rocket" aria-hidden="true"></i> Let's Work Together
           </a>
         </div>
@@ -832,7 +852,7 @@
         }
 
         .service-dot.active {
-          background: #ffd700;
+          background: var(--witch-mauve);
           transform: scale(1.3);
         }
 
@@ -1035,7 +1055,7 @@
             serviceTitle.textContent = service.title;
             serviceDescription.textContent = service.description;
             serviceFeatures.innerHTML = service.features.map(feature =>
-              `<span style="display: flex; align-items: center; gap: 0.5rem;"><i class="fas fa-check-circle" style="color: #ffd700;"></i> ${feature}</span>`
+              `<span style="display: flex; align-items: center; gap: 0.5rem;"><i class="fas fa-check-circle" style="color: var(--witch-mauve);"></i> ${feature}</span>`
             ).join('');
 
             // Update dots
@@ -1471,7 +1491,7 @@
       <!--
           MARK: Community CTA
       -->
-      <section class="card fade-in" style="background: #f8f9fa; border-color: #5865F2; border-width: 3px;" role="region" aria-labelledby="join-community">
+      <section class="card fade-in" style="background: #f8f9fa; border-color: var(--witch-plum); border-width: 3px;" role="region" aria-labelledby="join-community">
         <h2 id="join-community" style="margin-top: 0;">Join Our Community</h2>
         <img class="hero-image" src="https://cdn.nhcarrigan.com/hero/join-community.png" alt="Naomi Carrigan, founder of NHCarrigan" />
         <p style="font-size: 1.1rem;">