From 85debd95a92a8c8ff017fab3593e08c7d1c44469 Mon Sep 17 00:00:00 2001 From: 777genius Date: Tue, 5 May 2026 12:28:09 +0300 Subject: [PATCH] fix(landing): improve light theme contrast --- landing/components/layout/AppFooter.vue | 17 ++++++ .../components/sections/DownloadSection.vue | 9 ++- landing/components/sections/HeroSection.vue | 57 +++++++++++++++++++ .../components/sections/PricingSection.vue | 10 ++++ .../product-docs/.vitepress/theme/custom.css | 31 ++++++++-- 5 files changed, 114 insertions(+), 10 deletions(-) diff --git a/landing/components/layout/AppFooter.vue b/landing/components/layout/AppFooter.vue index 76c83732..a94ba7c4 100644 --- a/landing/components/layout/AppFooter.vue +++ b/landing/components/layout/AppFooter.vue @@ -73,6 +73,23 @@ const docsHref = computed(() => { border-top-color: var(--at-c-border); } +.v-theme--light .app-footer__copy { + opacity: 0.72; +} + +.v-theme--light .app-footer__link { + color: #007c8b; + opacity: 1; +} + +.v-theme--light .app-footer__link:hover { + color: #005c66; +} + +.v-theme--light .app-footer__divider { + background: rgba(0, 128, 144, 0.26); +} + @media (max-width: 600px) { .app-footer__inner { flex-direction: column; diff --git a/landing/components/sections/DownloadSection.vue b/landing/components/sections/DownloadSection.vue index b1f4e1c9..023887ac 100644 --- a/landing/components/sections/DownloadSection.vue +++ b/landing/components/sections/DownloadSection.vue @@ -491,6 +491,7 @@ const devBranchNote = computed(() => .download-section__card { flex-direction: row; + flex-wrap: wrap; text-align: left; padding: 24px 28px; gap: 20px; @@ -498,7 +499,6 @@ const devBranchNote = computed(() => .download-section__card--active { transform: scale(1.03); - order: -1; } .download-section__card--active:hover { @@ -519,10 +519,9 @@ const devBranchNote = computed(() => } .download-section__card-indicator { - position: absolute; - top: 12px; - right: 16px; - margin-top: 0; + justify-content: center; + width: 100%; + margin-top: 2px; } .download-section__title { diff --git a/landing/components/sections/HeroSection.vue b/landing/components/sections/HeroSection.vue index 3cf730fb..ecaf4b42 100644 --- a/landing/components/sections/HeroSection.vue +++ b/landing/components/sections/HeroSection.vue @@ -231,6 +231,10 @@ const devBranchNote = computed(() => text-shadow: 0 2px 18px rgba(0, 0, 0, 0.55); } +.v-theme--light .hero-section__content { + text-shadow: 0 1px 16px rgba(255, 255, 255, 0.9); +} + /* ─── Title ─── */ .hero-section__title { font-size: 3rem; @@ -250,6 +254,12 @@ const devBranchNote = computed(() => white-space: nowrap; } +.v-theme--light .hero-section__title { + background: linear-gradient(135deg, #185f73 0%, #009fb0 48%, #6448d8 100%); + -webkit-background-clip: text; + background-clip: text; +} + .hero-section__logo { width: 56px; height: 56px; @@ -274,6 +284,12 @@ const devBranchNote = computed(() => animation-delay: 0.3s; } +.v-theme--light .hero-section__subtitle { + color: #34405e; + opacity: 1; + font-weight: 500; +} + /* ─── Actions ─── */ .hero-section__actions { display: flex; @@ -313,6 +329,15 @@ const devBranchNote = computed(() => opacity: 1; } +.v-theme--light .hero-section__dev-note { + color: #007c8b; + opacity: 1; +} + +.v-theme--light .hero-section__dev-note:hover { + color: #0b6f32; +} + /* ─── Release badge ─── */ .hero-section__release-badge { font-size: 0.78rem; @@ -325,6 +350,13 @@ const devBranchNote = computed(() => animation-delay: 0.45s; } +.v-theme--light .hero-section__release-badge { + color: #34405e; + opacity: 1; + font-weight: 700; + text-shadow: 0 1px 12px rgba(255, 255, 255, 0.95); +} + .hero-section__btn-primary { background: linear-gradient(135deg, #00f0ff, #ff00ff) !important; color: #0a0a0f !important; @@ -351,6 +383,18 @@ const devBranchNote = computed(() => background: rgba(0, 240, 255, 0.06) !important; } +.v-theme--light .hero-section__btn-secondary { + border-color: rgba(0, 128, 144, 0.34) !important; + color: #007c8b !important; + background: rgba(255, 255, 255, 0.5) !important; +} + +.v-theme--light .hero-section__btn-secondary:hover { + border-color: rgba(0, 128, 144, 0.58) !important; + color: #005c66 !important; + background: rgba(255, 255, 255, 0.72) !important; +} + .hero-section__btn-docs { border-color: rgba(57, 255, 20, 0.38) !important; color: #d6ffe1 !important; @@ -403,6 +447,19 @@ const devBranchNote = computed(() => background: rgba(0, 240, 255, 0.2); } +.v-theme--light .hero-section__trust-item { + color: #56617c; +} + +.v-theme--light .hero-section__trust-icon { + color: #008ea0; + opacity: 1; +} + +.v-theme--light .hero-section__trust-divider { + background: rgba(0, 128, 144, 0.26); +} + /* ─── Preview Card ─── */ .hero-section__preview { position: relative; diff --git a/landing/components/sections/PricingSection.vue b/landing/components/sections/PricingSection.vue index dea74ea7..048bba7e 100644 --- a/landing/components/sections/PricingSection.vue +++ b/landing/components/sections/PricingSection.vue @@ -243,6 +243,16 @@ function onGetStarted() { color: #475569; } +.v-theme--light .pricing-section__note { + color: #56617c; + opacity: 1; +} + +.v-theme--light .pricing-section__note-icon { + color: #12a150; + opacity: 1; +} + /* Responsive */ @media (max-width: 960px) { .pricing-section__title { diff --git a/landing/product-docs/.vitepress/theme/custom.css b/landing/product-docs/.vitepress/theme/custom.css index 3bfc5526..34272ee4 100644 --- a/landing/product-docs/.vitepress/theme/custom.css +++ b/landing/product-docs/.vitepress/theme/custom.css @@ -1,10 +1,10 @@ :root { --vp-font-family-base: var(--at-font-sans); --vp-font-family-mono: var(--at-font-mono); - --vp-c-brand-1: var(--at-c-cyan); - --vp-c-brand-2: var(--at-c-cyan-strong); - --vp-c-brand-3: var(--at-c-cyan-deep); - --vp-c-brand-soft: rgba(0, 240, 255, 0.12); + --vp-c-brand-1: #007c8b; + --vp-c-brand-2: #009fb0; + --vp-c-brand-3: #005c66; + --vp-c-brand-soft: rgba(0, 128, 144, 0.12); --vp-c-bg: var(--at-c-light-2); --vp-c-bg-alt: var(--at-c-light-1); --vp-c-bg-elv: var(--at-c-light-0); @@ -17,7 +17,7 @@ --vp-nav-bg-color: rgba(255, 255, 255, 0.82); --vp-home-hero-name-color: transparent; --vp-home-hero-name-background: linear-gradient(135deg, #111827 0%, #047f94 54%, #7c2d8f 100%); - --vp-button-brand-bg: var(--at-c-cyan); + --vp-button-brand-bg: #00d4e6; --vp-button-brand-text: var(--at-c-dark-1); --vp-button-brand-hover-bg: var(--at-c-green); --vp-button-alt-bg: rgba(255, 255, 255, 0.72); @@ -28,6 +28,10 @@ } .dark { + --vp-c-brand-1: var(--at-c-cyan); + --vp-c-brand-2: var(--at-c-cyan-strong); + --vp-c-brand-3: var(--at-c-cyan-deep); + --vp-c-brand-soft: rgba(0, 240, 255, 0.12); --vp-c-bg: var(--at-c-dark-1); --vp-c-bg-alt: var(--at-c-dark-2); --vp-c-bg-elv: rgba(18, 18, 26, 0.96); @@ -41,6 +45,7 @@ --vp-home-hero-name-background: var(--at-gradient-brand-text); --vp-button-alt-bg: rgba(0, 240, 255, 0.08); --vp-button-alt-hover-bg: rgba(0, 240, 255, 0.14); + --vp-button-brand-bg: var(--at-c-cyan); --vp-code-bg: rgba(0, 240, 255, 0.1); --vp-code-color: var(--at-c-cyan); } @@ -198,6 +203,11 @@ body { box-shadow: var(--at-shadow-cyan-sm); } +:root:not(.dark) .VPButton.brand { + border-color: rgba(0, 128, 144, 0.28) !important; + box-shadow: 0 4px 20px rgba(0, 128, 144, 0.18); +} + .VPButton.alt { color: var(--vp-c-text-1) !important; border-color: var(--vp-c-border) !important; @@ -329,6 +339,17 @@ body { background: rgba(0, 240, 255, 0.05); } +:root:not(.dark) .vp-doc th, +:root:not(.dark) .docs-card__icon, +:root:not(.dark) .install-block span { + color: #007c8b; +} + +:root:not(.dark) .VPFeature .box > .icon, +:root:not(.dark) .docs-card__icon { + border-color: rgba(0, 128, 144, 0.18); +} + .vp-doc :not(pre) > code { border: 1px solid rgba(0, 240, 255, 0.1); border-radius: var(--at-radius-xs);