EZSCALE/website
SHA256
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(vps): harmonize estimator palette with rest of marketing site

Browse Source 
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>
This commit is contained in:
Andrew Murray
2026-04-26 16:18:03 -04:00
parent cfa2e4c8d3
commit bc5ccf1731
10 changed files with 45 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
website/resources/ts/Components/Marketing/Estimator/AddOnsPanel.vue
View File

@@ -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;
}

10
website/resources/ts/Components/Marketing/Estimator/BackupTierSelector.vue
View File

@@ -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>

9
website/resources/ts/Components/Marketing/Estimator/BillingCycleToggle.vue
View File

@@ -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>

8
website/resources/ts/Components/Marketing/Estimator/EstimatorFooter.vue
View File

@@ -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;

4
website/resources/ts/Components/Marketing/Estimator/EstimatorSection.vue
View File

@@ -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 {

3
website/resources/ts/Components/Marketing/Estimator/IPv4Stepper.vue
View File

@@ -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;

10
website/resources/ts/Components/Marketing/Estimator/ManagedSupportSelector.vue
View File

@@ -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 {

8
website/resources/ts/Components/Marketing/Estimator/MiniQuizDialog.vue
View File

@@ -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);
}
}

9
website/resources/ts/Components/Marketing/Estimator/RecommendedPlanCard.vue
View File

@@ -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);
}

12
website/resources/ts/Components/Marketing/Estimator/WorkloadPicker.vue
View File

@@ -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);
}