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> <style lang="scss" scoped>
.addons-panel { .addons-panel {
border-radius: 16px !important; 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; 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%; width: 100%;
padding: 14px 16px; padding: 14px 16px;
border-radius: 12px; border-radius: 12px;
border: 1.5px solid rgba(var(--v-theme-on-surface), 0.08); border: 1px solid rgba(var(--v-theme-on-surface), 0.08);
background: rgba(var(--v-theme-surface-bright), 0.4); background: rgba(var(--v-theme-on-surface), 0.03);
cursor: pointer; cursor: pointer;
transition: all 0.15s ease; transition: all 0.15s ease;
&:hover { &:hover {
border-color: rgba(var(--v-theme-primary), 0.4); border-color: rgba(var(--v-theme-primary), 0.45);
background: rgba(var(--v-theme-primary), 0.04); background: rgba(var(--v-theme-primary), 0.06);
} }
} }
.backup-selector__option--active { .backup-selector__option--active {
border-color: rgb(var(--v-theme-primary)); border-color: rgb(var(--v-theme-primary));
background: rgba(var(--v-theme-primary), 0.08); background: rgba(var(--v-theme-primary), 0.10);
} }
</style> </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> <style lang="scss" scoped>
.cycle-toggle { .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); border: 1px solid rgba(var(--v-theme-on-surface), 0.08);
gap: 4px; gap: 4px;
backdrop-filter: blur(8px);
} }
.cycle-toggle__option { .cycle-toggle__option {
@@ -76,15 +77,15 @@ function pick(value: EstimatorCycle): void {
.cycle-toggle__badge { .cycle-toggle__badge {
font-size: 11px; font-size: 11px;
font-weight: 600; font-weight: 700;
padding: 2px 8px; padding: 2px 8px;
border-radius: 999px; border-radius: 999px;
background: rgba(255, 255, 255, 0.18); background: rgba(255, 255, 255, 0.22);
letter-spacing: 0.02em; letter-spacing: 0.02em;
} }
.cycle-toggle__option:not(.cycle-toggle__option--active) .cycle-toggle__badge { .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)); color: rgb(var(--v-theme-success));
} }
</style> </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 { .estimator-footer {
padding: 22px 26px; padding: 22px 26px;
border-radius: 18px; border-radius: 18px;
background: linear-gradient(135deg, rgba(var(--v-theme-primary), 0.10), rgba(var(--v-theme-surface-bright), 0.6)); background: rgba(var(--v-theme-surface), 0.85);
border: 1.5px solid rgba(var(--v-theme-primary), 0.2); border: 1px solid rgba(var(--v-theme-primary), 0.22);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
position: sticky; position: sticky;
bottom: 16px; bottom: 16px;
z-index: 5; z-index: 5;
backdrop-filter: blur(10px); backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
@media (max-width: 600px) { @media (max-width: 600px) {
position: relative; position: relative;

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

@@ -240,8 +240,8 @@ watch(
<style lang="scss" scoped> <style lang="scss" scoped>
.estimator-section { .estimator-section {
padding: 60px 0; padding: 80px 0;
background: linear-gradient(180deg, transparent, rgba(var(--v-theme-surface-bright), 0.4)); background-color: rgba(var(--v-theme-on-surface), var(--v-hover-opacity));
} }
.estimator-section__body { .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> <style lang="scss" scoped>
.ipv4-stepper__counter { .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; border-radius: 999px;
padding: 4px; padding: 4px;
gap: 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%; width: 100%;
padding: 14px 16px; padding: 14px 16px;
border-radius: 12px; border-radius: 12px;
border: 1.5px solid rgba(var(--v-theme-on-surface), 0.08); border: 1px solid rgba(var(--v-theme-on-surface), 0.08);
background: rgba(var(--v-theme-surface-bright), 0.4); background: rgba(var(--v-theme-on-surface), 0.03);
cursor: pointer; cursor: pointer;
transition: all 0.15s ease; transition: all 0.15s ease;
&:hover:not(.managed-selector__option--locked) { &:hover:not(.managed-selector__option--locked) {
border-color: rgba(var(--v-theme-primary), 0.4); border-color: rgba(var(--v-theme-primary), 0.45);
background: rgba(var(--v-theme-primary), 0.04); background: rgba(var(--v-theme-primary), 0.06);
} }
} }
.managed-selector__option--active { .managed-selector__option--active {
border-color: rgb(var(--v-theme-primary)); 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 { .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; text-align: center;
padding: 18px 12px; padding: 18px 12px;
border-radius: 12px; border-radius: 12px;
border: 1.5px solid rgba(var(--v-theme-on-surface), 0.1); border: 1px solid rgba(var(--v-theme-on-surface), 0.08);
background: rgba(var(--v-theme-surface-bright), 0.4); background: rgba(var(--v-theme-on-surface), 0.03);
cursor: pointer; cursor: pointer;
transition: all 0.15s ease; transition: all 0.15s ease;
&:hover { &:hover {
border-color: rgba(var(--v-theme-primary), 0.5); border-color: rgba(var(--v-theme-primary), 0.45);
background: rgba(var(--v-theme-primary), 0.05); 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 { .recommended-plan {
padding: 24px; padding: 24px;
border-radius: 16px; border-radius: 16px;
background: linear-gradient(135deg, rgba(var(--v-theme-primary), 0.06), rgba(var(--v-theme-surface-bright), 0.4)); background: rgba(var(--v-theme-surface), 0.6);
border: 1.5px solid rgba(var(--v-theme-primary), 0.18); backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid rgba(var(--v-theme-primary), 0.22);
} }
.recommended-plan__spec { .recommended-plan__spec {
@@ -133,7 +135,8 @@ const features = computed(() => {
gap: 6px; gap: 6px;
padding: 6px 12px; padding: 6px 12px;
border-radius: 999px; 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; font-size: 13px;
color: rgba(var(--v-theme-on-surface), 0.85); 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; gap: 12px;
padding: 14px 16px; padding: 14px 16px;
border-radius: 14px; border-radius: 14px;
border: 1.5px solid rgba(var(--v-theme-on-surface), 0.1); border: 1px solid rgba(var(--v-theme-on-surface), 0.08);
background: rgba(var(--v-theme-surface-bright), 0.5); background: rgba(var(--v-theme-surface), 0.6);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
color: inherit; color: inherit;
text-align: left; text-align: left;
cursor: pointer; cursor: pointer;
transition: all 0.15s ease; transition: all 0.15s ease;
&:hover { &:hover {
border-color: rgba(var(--v-theme-primary), 0.5); border-color: rgba(var(--v-theme-primary), 0.45);
background: rgba(var(--v-theme-primary), 0.05); background: rgba(var(--v-theme-surface), 0.85);
transform: translateY(-1px); transform: translateY(-1px);
} }
} }
.workload-picker__chip--active { .workload-picker__chip--active {
border-color: rgb(var(--v-theme-primary)); 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); box-shadow: 0 4px 16px rgba(var(--v-theme-primary), 0.18);
} }