fix(landing): improve light theme contrast
This commit is contained in:
777genius
parent
90205a1548
commit
85debd95a9
5 changed files with 114 additions and 10 deletions
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
Loading…
Reference in a new issue