diff --git a/src/components/CTA.astro b/src/components/CTA.astro index 247c87a..d9427b3 100644 --- a/src/components/CTA.astro +++ b/src/components/CTA.astro @@ -21,40 +21,48 @@ const { title, description, href, variant = 'primary' } = Astro.props; .button { display: inline-block; - padding: 0.75rem 1.5rem; - font-size: 1rem; - font-weight: 500; + padding: 0.75rem 2rem; + font-size: 0.875rem; + font-weight: 600; text-decoration: none; - border-radius: 8px; - transition: all 0.2s ease; + border-radius: 9999px; + transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1); + font-family: var(--font-family-inter); + letter-spacing: 0.03em; } .button.primary { - background: var(--color-accent); + background: linear-gradient(135deg, #4F7CFF 0%, #7861FF 100%); color: #ffffff; border: none; + box-shadow: 0 8px 24px rgba(21, 80, 211, 0.2); } .button.primary:hover { - background: var(--color-accent-hover); + transform: translateY(-2px); + box-shadow: 0 12px 24px rgba(79, 124, 255, 0.3); + filter: brightness(1.1); text-decoration: none; } .button.secondary { - background: transparent; - color: var(--color-accent); - border: 1px solid var(--color-accent); + background: rgba(255, 255, 255, 0.8); + backdrop-filter: blur(12px); + color: #131b2c; + border: 1px solid #e2e8f0; + box-shadow: 0 4px 12px rgba(18, 26, 43, 0.06); } .button.secondary:hover { - background: var(--color-accent); - color: #ffffff; + background: #ffffff; + transform: translateY(-1px); + box-shadow: 0 12px 24px rgba(18, 26, 43, 0.08); text-decoration: none; } .description { margin-top: 0.75rem; font-size: 0.875rem; - color: var(--color-text-secondary); + color: var(--color-on-surface-variant); } \ No newline at end of file diff --git a/src/components/Footer.astro b/src/components/Footer.astro index 9cd365e..bb59db6 100644 --- a/src/components/Footer.astro +++ b/src/components/Footer.astro @@ -14,24 +14,39 @@ const footerLinks = [ 知习 知习 - -
+ +
{footerLinks.map(link => ( - {link.label} + {link.label} ))}
- -

+ +

© {currentYear} 知习 (ZhiXi AI). Structured learning for the digital age.

-

- 冀ICP备2026016484号 +

+ 冀ICP备2026016484号

\ No newline at end of file diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro index bb2c116..c04ea5e 100644 --- a/src/layouts/BaseLayout.astro +++ b/src/layouts/BaseLayout.astro @@ -41,18 +41,25 @@ const ogImageUrl = ogImage || `${siteUrl}/og-default.png`; -
+
diff --git a/src/styles/global.css b/src/styles/global.css index 72bf7f0..a17b2e6 100644 --- a/src/styles/global.css +++ b/src/styles/global.css @@ -1,5 +1,12 @@ @import "tailwindcss"; +/* Z-index scale: z-10 content → z-20 float → z-30 header → z-40 overlay → z-50 progress/toast */ +@custom-variant prefers-reduced-motion { + @media (prefers-reduced-motion: reduce) { + @slot; + } +} + @theme { --color-tech-blue: #4F7CFF; --color-navy: #121A2B; @@ -122,7 +129,7 @@ @layer components { .glass-card-premium { - background: rgba(255, 255, 255, 0.6); + background: rgba(255, 255, 255, 0.8); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); border: 1px solid rgba(255, 255, 255, 0.8); @@ -194,6 +201,26 @@ } } +@media (prefers-reduced-motion: reduce) { + *, *::before, *::after { + animation-duration: 0.01ms !important; + animation-iteration-count: 1 !important; + transition-duration: 0.01ms !important; + } +} + +a:focus-visible, +button:focus-visible, +input:focus-visible, +select:focus-visible, +textarea:focus-visible, +[tabindex]:focus-visible, +.animate-reveal-up:focus-visible { + outline: 2px solid var(--color-tech-blue); + outline-offset: 2px; + border-radius: 4px; +} + body { font-family: var(--font-family-headline); -webkit-font-smoothing: antialiased;