From bc5ccf1731e999d3a3ef9c13f127d9781186dba9e6b02404950fd0f5d90298e7 Mon Sep 17 00:00:00 2001
From: Andrew <andrewmurray@ezscale.cloud>
Date: Sun, 26 Apr 2026 16:18:03 -0400
Subject: [PATCH] fix(vps): harmonize estimator palette with rest of marketing
 site

Replaced --v-theme-surface-bright (auto-generated lighter tone that
clashed with the page's dark navy palette) with --v-theme-surface
across all 10 estimator components. Removed gradient backgrounds in
favor of the existing .glass-card / .section-alt-bg patterns from
resources/styles/_marketing.scss. Bumped contrast on the cycle toggle
discount badges and the EstimatorFooter card so the Copy share link
button reads clearly.

Components touched: EstimatorSection, BillingCycleToggle, WorkloadPicker,
MiniQuizDialog, RecommendedPlanCard, AddOnsPanel, IPv4Stepper,
ManagedSupportSelector, BackupTierSelector, EstimatorFooter.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../Components/Marketing/Estimator/AddOnsPanel.vue   |  5 ++++-
 .../Marketing/Estimator/BackupTierSelector.vue       | 10 +++++-----
 .../Marketing/Estimator/BillingCycleToggle.vue       |  9 +++++----
 .../Marketing/Estimator/EstimatorFooter.vue          |  8 +++++---
 .../Marketing/Estimator/EstimatorSection.vue         |  4 ++--
 .../Components/Marketing/Estimator/IPv4Stepper.vue   |  3 ++-
 .../Marketing/Estimator/ManagedSupportSelector.vue   | 10 +++++-----
 .../Marketing/Estimator/MiniQuizDialog.vue           |  8 ++++----
 .../Marketing/Estimator/RecommendedPlanCard.vue      |  9 ++++++---
 .../Marketing/Estimator/WorkloadPicker.vue           | 12 +++++++-----
 10 files changed, 45 insertions(+), 33 deletions(-)

diff --git a/website/resources/ts/Components/Marketing/Estimator/AddOnsPanel.vue b/website/resources/ts/Components/Marketing/Estimator/AddOnsPanel.vue
index 249c65b..266e669 100644
--- a/website/resources/ts/Components/Marketing/Estimator/AddOnsPanel.vue
+++ b/website/resources/ts/Components/Marketing/Estimator/AddOnsPanel.vue
@@ -105,7 +105,10 @@ const expanded = ref<boolean>(false)
 <style lang="scss" scoped>
 .addons-panel {
   border-radius: 16px !important;
-  background: rgba(var(--v-theme-surface-bright), 0.3);
+  background: rgba(var(--v-theme-surface), 0.6) !important;
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+  border-color: rgba(var(--v-theme-on-surface), 0.08) !important;
   transition: border-color 0.2s ease;
 }
 
diff --git a/website/resources/ts/Components/Marketing/Estimator/BackupTierSelector.vue b/website/resources/ts/Components/Marketing/Estimator/BackupTierSelector.vue
index 9115f5a..5a2e7a6 100644
--- a/website/resources/ts/Components/Marketing/Estimator/BackupTierSelector.vue
+++ b/website/resources/ts/Components/Marketing/Estimator/BackupTierSelector.vue
@@ -88,19 +88,19 @@ function priceLabel(t: TierOption): string {
   width: 100%;
   padding: 14px 16px;
   border-radius: 12px;
-  border: 1.5px solid rgba(var(--v-theme-on-surface), 0.08);
-  background: rgba(var(--v-theme-surface-bright), 0.4);
+  border: 1px solid rgba(var(--v-theme-on-surface), 0.08);
+  background: rgba(var(--v-theme-on-surface), 0.03);
   cursor: pointer;
   transition: all 0.15s ease;
 
   &:hover {
-    border-color: rgba(var(--v-theme-primary), 0.4);
-    background: rgba(var(--v-theme-primary), 0.04);
+    border-color: rgba(var(--v-theme-primary), 0.45);
+    background: rgba(var(--v-theme-primary), 0.06);
   }
 }
 
 .backup-selector__option--active {
   border-color: rgb(var(--v-theme-primary));
-  background: rgba(var(--v-theme-primary), 0.08);
+  background: rgba(var(--v-theme-primary), 0.10);
 }
 </style>
diff --git a/website/resources/ts/Components/Marketing/Estimator/BillingCycleToggle.vue b/website/resources/ts/Components/Marketing/Estimator/BillingCycleToggle.vue
index eb44afd..8ccd4fc 100644
--- a/website/resources/ts/Components/Marketing/Estimator/BillingCycleToggle.vue
+++ b/website/resources/ts/Components/Marketing/Estimator/BillingCycleToggle.vue
@@ -42,9 +42,10 @@ function pick(value: EstimatorCycle): void {
 
 <style lang="scss" scoped>
 .cycle-toggle {
-  background: rgba(var(--v-theme-surface-bright), 0.5);
+  background: rgba(var(--v-theme-surface), 0.6);
   border: 1px solid rgba(var(--v-theme-on-surface), 0.08);
   gap: 4px;
+  backdrop-filter: blur(8px);
 }
 
 .cycle-toggle__option {
@@ -76,15 +77,15 @@ function pick(value: EstimatorCycle): void {
 
 .cycle-toggle__badge {
   font-size: 11px;
-  font-weight: 600;
+  font-weight: 700;
   padding: 2px 8px;
   border-radius: 999px;
-  background: rgba(255, 255, 255, 0.18);
+  background: rgba(255, 255, 255, 0.22);
   letter-spacing: 0.02em;
 }
 
 .cycle-toggle__option:not(.cycle-toggle__option--active) .cycle-toggle__badge {
-  background: rgba(var(--v-theme-success), 0.15);
+  background: rgba(var(--v-theme-success), 0.18);
   color: rgb(var(--v-theme-success));
 }
 </style>
diff --git a/website/resources/ts/Components/Marketing/Estimator/EstimatorFooter.vue b/website/resources/ts/Components/Marketing/Estimator/EstimatorFooter.vue
index f1c1d9d..9a59258 100644
--- a/website/resources/ts/Components/Marketing/Estimator/EstimatorFooter.vue
+++ b/website/resources/ts/Components/Marketing/Estimator/EstimatorFooter.vue
@@ -100,12 +100,14 @@ async function copyShareLink(url: string): Promise<void> {
 .estimator-footer {
   padding: 22px 26px;
   border-radius: 18px;
-  background: linear-gradient(135deg, rgba(var(--v-theme-primary), 0.10), rgba(var(--v-theme-surface-bright), 0.6));
-  border: 1.5px solid rgba(var(--v-theme-primary), 0.2);
+  background: rgba(var(--v-theme-surface), 0.85);
+  border: 1px solid rgba(var(--v-theme-primary), 0.22);
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
   position: sticky;
   bottom: 16px;
   z-index: 5;
-  backdrop-filter: blur(10px);
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
 
   @media (max-width: 600px) {
     position: relative;
diff --git a/website/resources/ts/Components/Marketing/Estimator/EstimatorSection.vue b/website/resources/ts/Components/Marketing/Estimator/EstimatorSection.vue
index 4e93806..89ea471 100644
--- a/website/resources/ts/Components/Marketing/Estimator/EstimatorSection.vue
+++ b/website/resources/ts/Components/Marketing/Estimator/EstimatorSection.vue
@@ -240,8 +240,8 @@ watch(
 
 <style lang="scss" scoped>
 .estimator-section {
-  padding: 60px 0;
-  background: linear-gradient(180deg, transparent, rgba(var(--v-theme-surface-bright), 0.4));
+  padding: 80px 0;
+  background-color: rgba(var(--v-theme-on-surface), var(--v-hover-opacity));
 }
 
 .estimator-section__body {
diff --git a/website/resources/ts/Components/Marketing/Estimator/IPv4Stepper.vue b/website/resources/ts/Components/Marketing/Estimator/IPv4Stepper.vue
index fc07f2d..4cf16ca 100644
--- a/website/resources/ts/Components/Marketing/Estimator/IPv4Stepper.vue
+++ b/website/resources/ts/Components/Marketing/Estimator/IPv4Stepper.vue
@@ -78,7 +78,8 @@ function increment(): void {
 
 <style lang="scss" scoped>
 .ipv4-stepper__counter {
-  background: rgba(var(--v-theme-on-surface), 0.04);
+  background: rgba(var(--v-theme-on-surface), 0.06);
+  border: 1px solid rgba(var(--v-theme-on-surface), 0.08);
   border-radius: 999px;
   padding: 4px;
   gap: 4px;
diff --git a/website/resources/ts/Components/Marketing/Estimator/ManagedSupportSelector.vue b/website/resources/ts/Components/Marketing/Estimator/ManagedSupportSelector.vue
index cfe23ce..7864a25 100644
--- a/website/resources/ts/Components/Marketing/Estimator/ManagedSupportSelector.vue
+++ b/website/resources/ts/Components/Marketing/Estimator/ManagedSupportSelector.vue
@@ -134,20 +134,20 @@ function priceLabel(t: TierOption): string {
   width: 100%;
   padding: 14px 16px;
   border-radius: 12px;
-  border: 1.5px solid rgba(var(--v-theme-on-surface), 0.08);
-  background: rgba(var(--v-theme-surface-bright), 0.4);
+  border: 1px solid rgba(var(--v-theme-on-surface), 0.08);
+  background: rgba(var(--v-theme-on-surface), 0.03);
   cursor: pointer;
   transition: all 0.15s ease;
 
   &:hover:not(.managed-selector__option--locked) {
-    border-color: rgba(var(--v-theme-primary), 0.4);
-    background: rgba(var(--v-theme-primary), 0.04);
+    border-color: rgba(var(--v-theme-primary), 0.45);
+    background: rgba(var(--v-theme-primary), 0.06);
   }
 }
 
 .managed-selector__option--active {
   border-color: rgb(var(--v-theme-primary));
-  background: rgba(var(--v-theme-primary), 0.08);
+  background: rgba(var(--v-theme-primary), 0.10);
 }
 
 .managed-selector__option--locked {
diff --git a/website/resources/ts/Components/Marketing/Estimator/MiniQuizDialog.vue b/website/resources/ts/Components/Marketing/Estimator/MiniQuizDialog.vue
index dfa5aea..71990db 100644
--- a/website/resources/ts/Components/Marketing/Estimator/MiniQuizDialog.vue
+++ b/website/resources/ts/Components/Marketing/Estimator/MiniQuizDialog.vue
@@ -192,14 +192,14 @@ function planNameFor(slug: string | null): string {
   text-align: center;
   padding: 18px 12px;
   border-radius: 12px;
-  border: 1.5px solid rgba(var(--v-theme-on-surface), 0.1);
-  background: rgba(var(--v-theme-surface-bright), 0.4);
+  border: 1px solid rgba(var(--v-theme-on-surface), 0.08);
+  background: rgba(var(--v-theme-on-surface), 0.03);
   cursor: pointer;
   transition: all 0.15s ease;
 
   &:hover {
-    border-color: rgba(var(--v-theme-primary), 0.5);
-    background: rgba(var(--v-theme-primary), 0.05);
+    border-color: rgba(var(--v-theme-primary), 0.45);
+    background: rgba(var(--v-theme-primary), 0.06);
   }
 }
 
diff --git a/website/resources/ts/Components/Marketing/Estimator/RecommendedPlanCard.vue b/website/resources/ts/Components/Marketing/Estimator/RecommendedPlanCard.vue
index e5f1c49..406ced2 100644
--- a/website/resources/ts/Components/Marketing/Estimator/RecommendedPlanCard.vue
+++ b/website/resources/ts/Components/Marketing/Estimator/RecommendedPlanCard.vue
@@ -123,8 +123,10 @@ const features = computed(() => {
 .recommended-plan {
   padding: 24px;
   border-radius: 16px;
-  background: linear-gradient(135deg, rgba(var(--v-theme-primary), 0.06), rgba(var(--v-theme-surface-bright), 0.4));
-  border: 1.5px solid rgba(var(--v-theme-primary), 0.18);
+  background: rgba(var(--v-theme-surface), 0.6);
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+  border: 1px solid rgba(var(--v-theme-primary), 0.22);
 }
 
 .recommended-plan__spec {
@@ -133,7 +135,8 @@ const features = computed(() => {
   gap: 6px;
   padding: 6px 12px;
   border-radius: 999px;
-  background: rgba(var(--v-theme-on-surface), 0.05);
+  background: rgba(var(--v-theme-on-surface), 0.06);
+  border: 1px solid rgba(var(--v-theme-on-surface), 0.06);
   font-size: 13px;
   color: rgba(var(--v-theme-on-surface), 0.85);
 }
diff --git a/website/resources/ts/Components/Marketing/Estimator/WorkloadPicker.vue b/website/resources/ts/Components/Marketing/Estimator/WorkloadPicker.vue
index fea2641..9af90fe 100644
--- a/website/resources/ts/Components/Marketing/Estimator/WorkloadPicker.vue
+++ b/website/resources/ts/Components/Marketing/Estimator/WorkloadPicker.vue
@@ -61,23 +61,25 @@ function pick(key: string): void {
   gap: 12px;
   padding: 14px 16px;
   border-radius: 14px;
-  border: 1.5px solid rgba(var(--v-theme-on-surface), 0.1);
-  background: rgba(var(--v-theme-surface-bright), 0.5);
+  border: 1px solid rgba(var(--v-theme-on-surface), 0.08);
+  background: rgba(var(--v-theme-surface), 0.6);
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
   color: inherit;
   text-align: left;
   cursor: pointer;
   transition: all 0.15s ease;
 
   &:hover {
-    border-color: rgba(var(--v-theme-primary), 0.5);
-    background: rgba(var(--v-theme-primary), 0.05);
+    border-color: rgba(var(--v-theme-primary), 0.45);
+    background: rgba(var(--v-theme-surface), 0.85);
     transform: translateY(-1px);
   }
 }
 
 .workload-picker__chip--active {
   border-color: rgb(var(--v-theme-primary));
-  background: rgba(var(--v-theme-primary), 0.12);
+  background: rgba(var(--v-theme-primary), 0.14);
   box-shadow: 0 4px 16px rgba(var(--v-theme-primary), 0.18);
 }