:root { --color-primary: #2b59ff; --color-primary-dark: #13339a; --color-accent: #19c37d; --color-surface: #fff6f0; --color-text: #0f172a; --rgb-primary: 43,89,255; --rgb-accent: 25,195,125; --radius-sm: 3px; --radius-md: 10px; --radius-lg: 14px; --radius-xl: 16px; --shadow-sm: 0 1px 0 rgba(0,0,0,.06); --shadow-md: 0 10px 24px rgba(17,24,39,.10), 0 2px 8px rgba(17,24,39,.06), 0 0 0 1px rgba(255,255,255,.55) inset; --shadow-lg: 0 18px 48px rgba(17,24,39,.14), 0 10px 18px rgba(17,24,39,.10), 0 0 0 1px rgba(255,255,255,.6) inset, 0 0 24px rgba(43,89,255,.18); --space-section: 3rem; --space-card: 1.25rem; --space-gap: 1rem; --transition: 320ms cubic-bezier(0.16, 1, 0.3, 1); --heading-weight: 600; --body-line-height: 1.6; } body { color: var(--color-text); line-height: var(--body-line-height); } h1, h2, h3, h4 { font-weight: var(--heading-weight); } section, .section { padding-top: var(--space-section); padding-bottom: var(--space-section); } .card, [class*="card"] { border-radius: var(--radius-lg); box-shadow: 0 1px 0 rgba(255,255,255,.7) inset, 0 12px 26px rgba(2,6,23,.10), 0 4px 12px rgba(2,6,23,.06), 0 0 0 1px rgba(2,6,23,.08) inset, 0 0 18px rgba(25,195,125,.10); padding: var(--space-card); transition: var(--transition), box-shadow 420ms cubic-bezier(0.16, 1, 0.3, 1), transform 420ms cubic-bezier(0.16, 1, 0.3, 1), filter 420ms cubic-bezier(0.16, 1, 0.3, 1), background-color 420ms cubic-bezier(0.16, 1, 0.3, 1); } .btn, button[class*="btn"], a[class*="btn"] { border-radius: var(--radius-md); transition: var(--transition); } a:not([class]) { color: var(--color-primary); transition: var(--transition); text-shadow: 0 1px 0 rgba(255,255,255,.35); } header, .header, .navbar { background: transparent; } .card:hover, [class*="card"]:hover { transform: translateY(-5px); box-shadow: 0 1px 0 rgba(255,255,255,.75) inset, 0 22px 56px rgba(2,6,23,.16), 0 10px 20px rgba(2,6,23,.10), 0 0 0 1px rgba(2,6,23,.10) inset, 0 0 32px rgba(25,195,125,.45), 0 0 18px rgba(43,89,255,.25); filter: saturate(1.05); } a:not([class]):hover { color: var(--color-accent); } .news-strip, .news, .features-strip, .features, .testimonials-strip, .testimonials, .partners-strip, .partners, .faq-strip, .faq, .stats-strip, .stats, .cta-strip, .cta { padding-top: var(--space-section); padding-bottom: var(--space-section); } section.strip, .section.strip, .news-strip, .features-strip, .testimonials-strip, .partners-strip, .faq-strip, .stats-strip, .cta-strip { border-radius: 0; background: linear-gradient(180deg, rgba(255,255,255,.75), rgba(255,255,255,0)); } section.strip:nth-of-type(odd), .section.strip:nth-of-type(odd), .news-strip, .features-strip, .testimonials-strip, .partners-strip, .faq-strip, .stats-strip, .cta-strip:nth-of-type(odd) { background: radial-gradient(1200px 200px at 20% 0%, rgba(43,89,255,.16), rgba(43,89,255,0) 60%), linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(255,255,255,.92) 45%, rgba(255,247,237,.85) 100%); } section.strip:nth-of-type(even), .section.strip:nth-of-type(even) { background: radial-gradient(1000px 220px at 70% 0%, rgba(25,195,125,.18), rgba(25,195,125,0) 58%), linear-gradient(180deg, rgba(255,247,237,1) 0%, rgba(255,247,237,.86) 55%, rgba(255,255,255,.78) 100%); } @media (prefers-reduced-motion: reduce) { .card, [class*="card"] { transition: box-shadow 200ms ease, transform 200ms ease; } } @keyframes stripGlowPulse { 0% { box-shadow: 0 0 0 rgba(25,195,125,0); } 45% { box-shadow: 0 0 24px rgba(25,195,125,.30); } 100% { box-shadow: 0 0 0 rgba(25,195,125,0); } } @keyframes haloFloat { 0% { transform: translateY(0); } 50% { transform: translateY(-2px); } 100% { transform: translateY(0); } } /* ========== Section Layout Variants ========== */ /* news: list-view */ /* 列表模式 (图左文右) */ .news-grid { display: flex; flex-direction: column; gap: var(--space-gap); } .news-grid .card { display: grid; grid-template-columns: 280px 1fr; background: radial-gradient(900px 240px at 30% 0%, rgba(43,89,255,.14), rgba(43,89,255,0) 55%), radial-gradient(900px 260px at 85% 15%, rgba(25,195,125,.12), rgba(25,195,125,0) 55%), linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,.88)); animation: haloFloat 5.2s ease-in-out infinite; } /* features: grid-3 */ .feature-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-gap); } /* hero: centered */ .hero-content { text-align: center; max-width: 800px; margin: 0 auto; } /* testimonials: grid-3 */ .testimonial-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-gap); } /* partners: centered */ .partner-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 2rem; } /* faq: with-sidebar */ /* FAQ 左 + 联系信息右 */ .faq-wrapper { display: grid; grid-template-columns: 2fr 1fr; gap: 2rem; } /* stats: grid-3 */ .stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-gap); text-align: center; } /* cta: centered */ .cta-inner { text-align: center; max-width: 700px; margin: 0 auto; } /* Responsive */ @media (max-width: 1024px) { .news-grid { grid-template-columns: repeat(2, 1fr) !important; } .feature-list { grid-template-columns: repeat(2, 1fr) !important; } .partner-grid { grid-template-columns: repeat(3, 1fr) !important; } .stats-grid { grid-template-columns: repeat(2, 1fr) !important; } .hero-inner { grid-template-columns: 1fr !important; } } @media (max-width: 640px) { :root { --space-section: 2rem; --space-card: 1rem; --space-gap: 0.75rem; } .news-grid { grid-template-columns: 1fr !important; } .feature-list { grid-template-columns: 1fr !important; } .faq-list { grid-template-columns: 1fr !important; } .testimonial-list { column-count: 1 !important; } .partner-grid { grid-template-columns: repeat(2, 1fr) !important; } .stats-grid { grid-template-columns: repeat(2, 1fr) !important; } .cta-inner { grid-template-columns: 1fr !important; } }