feat: 更新企业官网品牌色系与Logo为天空蓝主题

品牌色从 #FF8C42（暖橙）切换为 #4A9BD7（天空蓝），五维维度色同步更新，Logo替换，JS颜色常量匹配新品牌。

Ultraworked with Sisyphus

Co-authored-by: Sisyphus <clio-agent@sisyphuslabs.ai>

web/css/style.css

@@ -7,10 +7,10 @@
    0. CSS Custom Properties (Design Tokens)
    ---------------------------------------------------------- */
 :root {
-  /* Brand Colors (from DESIGN.md parent palette) */
-  --color-primary: #FF8C42;
-  --color-primary-hover: #FF7A2E;
-  --color-primary-light: #FFF5E6;
+  /* Brand Colors (from logo sky-blue palette) */
+  --color-primary: #4A9BD7;
+  --color-primary-hover: #3993CC;
+  --color-primary-light: #E8F4FA;
   --color-secondary: #4ECDC4;
   --color-accent: #FFD93D;
   --color-accent-light: #FFFBEB;
@@ -21,13 +21,13 @@
   --color-text-muted: #B2BEC3;
 
   /* Surfaces */
-  --bg-body: #FFF9F0;
+  --bg-body: #F5FAFE;
   --bg-surface: #FFFFFF;
-  --bg-section-alt: #FFF9F0;
+  --bg-section-alt: #EEF5FB;
 
   /* Other UI */
-  --color-border: #E8E0D8;
-  --color-border-light: #F0EAE0;
+  --color-border: #D8E5F0;
+  --color-border-light: #E5EEF5;
   --shadow-sm: 0 1px 3px rgba(45, 52, 54, .08);
   --shadow-md: 0 4px 12px rgba(45, 52, 54, .10);
   --shadow-lg: 0 12px 40px rgba(45, 52, 54, .12);
@@ -126,7 +126,7 @@ ul { list-style: none; }
   left: 0;
   right: 0;
   height: var(--header-height);
-  background: rgba(255, 249, 240, .92);
+  background: rgba(245, 250, 254, .92);
   backdrop-filter: blur(16px) saturate(180%);
   -webkit-backdrop-filter: blur(16px) saturate(180%);
   border-bottom: 1px solid var(--color-border-light);
@@ -255,7 +255,7 @@ ul { list-style: none; }
 .nav-login-btn:hover {
   background: var(--color-primary-hover);
   transform: translateY(-1px);
-  box-shadow: 0 4px 12px rgba(255, 140, 66, .3);
+  box-shadow: 0 4px 12px rgba(74, 155, 215, .3);
 }
 
 /* ----------------------------------------------------------
@@ -328,7 +328,7 @@ ul { list-style: none; }
   background: var(--color-primary-hover);
   border-color: var(--color-primary-hover);
   transform: translateY(-2px);
-  box-shadow: 0 8px 24px rgba(255, 140, 66, .35);
+  box-shadow: 0 8px 24px rgba(74, 155, 215, .35);
 }
 
 .btn-outline {
@@ -380,7 +380,7 @@ ul { list-style: none; }
 .role-login-btn:hover {
   background: var(--color-primary);
   transform: translateY(-1px);
-  box-shadow: 0 4px 12px rgba(255, 140, 66, .25);
+  box-shadow: 0 4px 12px rgba(74, 155, 215, .25);
 }
 
 .role-teacher .role-login-btn:hover {
@@ -409,7 +409,7 @@ ul { list-style: none; }
   position: absolute;
   inset: 0;
   background:
-    radial-gradient(ellipse 80% 50% at 50% -10%, rgba(255, 140, 66, .10), transparent),
+    radial-gradient(ellipse 80% 50% at 50% -10%, rgba(74, 155, 215, .10), transparent),
     radial-gradient(ellipse 60% 40% at 80% 80%, rgba(78, 205, 196, .08), transparent),
     radial-gradient(ellipse 50% 50% at 20% 70%, rgba(255, 217, 61, .06), transparent);
   pointer-events: none;
@@ -492,15 +492,15 @@ ul { list-style: none; }
   display: flex;
   align-items: center;
   justify-content: center;
-  box-shadow: 0 0 40px rgba(255, 140, 66, .3);
+  box-shadow: 0 0 40px rgba(74, 155, 215, .3);
   position: relative;
   z-index: 2;
   animation: pulseCenter 3s ease-in-out infinite;
 }
 
 @keyframes pulseCenter {
-  0%, 100% { box-shadow: 0 0 40px rgba(255, 140, 66, .3); transform: scale(1); }
-  50% { box-shadow: 0 0 60px rgba(255, 140, 66, .5); transform: scale(1.05); }
+  0%, 100% { box-shadow: 0 0 40px rgba(74, 155, 215, .3); transform: scale(1); }
+  50% { box-shadow: 0 0 60px rgba(74, 155, 215, .5); transform: scale(1.05); }
 }
 
 .orbit-item {
@@ -755,18 +755,125 @@ ul { list-style: none; }
 }
 
 /* ----------------------------------------------------------
-   9. Dimensions Section
+    9. Core Products Section
+   ---------------------------------------------------------- */
+.section-products {
+  background: linear-gradient(180deg, var(--color-primary-light) 0%, var(--bg-body) 100%);
+}
+
+.products-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: var(--space-xl);
+  max-width: 920px;
+  margin: 0 auto;
+}
+
+.product-card {
+  background: var(--bg-surface);
+  border-radius: var(--radius-lg);
+  padding: var(--space-2xl);
+  border: 1px solid var(--color-border-light);
+  transition: all var(--transition-normal);
+  position: relative;
+  overflow: hidden;
+}
+
+.product-card::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 4px;
+  background: var(--product-color, var(--color-primary));
+}
+
+.product-card:hover {
+  transform: translateY(-4px);
+  box-shadow: var(--shadow-md);
+  border-color: transparent;
+}
+
+.product-card-icon {
+  width: 56px;
+  height: 56px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--radius-md);
+  background: var(--product-bg, var(--color-primary-light));
+  margin-bottom: var(--space-md);
+}
+
+.product-card h3 {
+  font-size: 1.1rem;
+  font-weight: 700;
+  color: var(--color-text-primary);
+  margin-bottom: var(--space-xs);
+}
+
+.product-card .product-sub {
+  font-size: var(--font-size-small);
+  color: var(--product-color, var(--color-primary));
+  font-weight: 600;
+  margin-bottom: var(--space-sm);
+  margin-top: -4px;
+}
+
+.product-card > p {
+  font-size: var(--font-size-small);
+  color: var(--color-text-secondary);
+  line-height: 1.75;
+  margin-bottom: var(--space-md);
+}
+
+.product-tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-xs);
+}
+
+.product-tags span {
+  display: inline-block;
+  padding: 2px 10px;
+  font-size: var(--font-size-tiny);
+  color: var(--product-color, var(--color-text-secondary));
+  background: color-mix(in srgb, var(--product-color, var(--color-primary)) 10%, transparent);
+  border-radius: 100px;
+  font-weight: 500;
+}
+
+.product-plus {
+  color: var(--product-color, var(--color-primary));
+  font-weight: 700;
+}
+
+@media (max-width: 768px) {
+  .products-grid {
+    grid-template-columns: 1fr;
+    gap: var(--space-lg);
+  }
+}
+
+/* ----------------------------------------------------------
+    10. Dimensions Section
    ---------------------------------------------------------- */
 .section-dimensions {
   background: var(--bg-surface);
 }
 
 .dimension-grid {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
   gap: var(--space-xl);
 }
 
+.dimension-grid > .dimension-card {
+  width: calc((100% - var(--space-xl) * 2) / 3);
+}
+
 .dimension-card {
   background: var(--bg-surface);
   border: 1px solid var(--color-border-light);
@@ -838,7 +945,7 @@ ul { list-style: none; }
 /* 5 items in 3-col grid: items 4 & 5 naturally wrap to row 2, cols 1 & 2 */
 
 /* ----------------------------------------------------------
-   10. Features Section
+    11. Features Section
    ---------------------------------------------------------- */
 .section-features {
   background: var(--bg-section-alt);
@@ -890,7 +997,110 @@ ul { list-style: none; }
 }
 
 /* ----------------------------------------------------------
-   11. Roles Section
+    12. AI Technology Section
+   ---------------------------------------------------------- */
+.section-ai-tech {
+  background: linear-gradient(180deg, var(--bg-surface) 0%, var(--bg-section-alt) 100%);
+}
+
+.ai-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: var(--space-xl);
+  max-width: 1000px;
+  margin: 0 auto;
+}
+
+.ai-card {
+  background: var(--bg-surface);
+  border-radius: var(--radius-lg);
+  padding: var(--space-2xl);
+  border: 1px solid var(--color-border-light);
+  transition: all var(--transition-normal);
+  position: relative;
+  overflow: hidden;
+}
+
+.ai-card::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 3px;
+  background: var(--ai-color, var(--color-primary));
+  opacity: .4;
+  transition: opacity var(--transition-normal);
+}
+
+.ai-card:hover {
+  transform: translateY(-4px);
+  box-shadow: var(--shadow-md);
+  border-color: transparent;
+}
+
+.ai-card:hover::before {
+  opacity: 1;
+}
+
+.ai-card-header {
+  display: flex;
+  align-items: center;
+  gap: var(--space-sm);
+  margin-bottom: var(--space-md);
+}
+
+.ai-card-icon {
+  width: 48px;
+  height: 48px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--radius-md);
+  background: var(--ai-bg, var(--color-primary-light));
+  flex-shrink: 0;
+}
+
+.ai-card-badge {
+  display: inline-block;
+  padding: 2px 10px;
+  font-size: var(--font-size-tiny);
+  font-weight: 600;
+  color: var(--ai-color, var(--color-primary));
+  background: color-mix(in srgb, var(--ai-color, var(--color-primary)) 10%, white);
+  border-radius: 100px;
+  white-space: nowrap;
+}
+
+.ai-card h3 {
+  font-size: 1.05rem;
+  font-weight: 700;
+  color: var(--color-text-primary);
+  margin-bottom: var(--space-sm);
+  line-height: 1.4;
+}
+
+.ai-card p {
+  font-size: var(--font-size-small);
+  color: var(--color-text-secondary);
+  line-height: 1.8;
+  margin: 0;
+}
+
+@media (max-width: 900px) {
+  .ai-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+@media (max-width: 600px) {
+  .ai-grid {
+    grid-template-columns: 1fr;
+  }
+}
+
+/* ----------------------------------------------------------
+    13. Roles Section
    ---------------------------------------------------------- */
 .section-roles {
   background: var(--bg-surface);
@@ -960,10 +1170,11 @@ ul { list-style: none; }
   color: var(--color-text-secondary);
   padding: .35em 0;
   display: flex;
-  align-items: center;
+  align-items: flex-start;
   gap: var(--space-xs);
 }
 
+
 .role-perms li::before {
   content: '';
   width: 5px;
@@ -971,6 +1182,7 @@ ul { list-style: none; }
   border-radius: 50%;
   background: var(--color-primary);
   flex-shrink: 0;
+  margin-top: 7px;
 }
 
 .role-teacher .role-perms li::before { background: #3B82F6; }
@@ -1039,7 +1251,7 @@ ul { list-style: none; }
 }
 
 /* ----------------------------------------------------------
-   12. Contact Section
+    14. Contact Section
    ---------------------------------------------------------- */
 .section-contact {
   background: linear-gradient(180deg, var(--bg-surface) 0%, var(--bg-body) 100%);
@@ -1147,7 +1359,7 @@ ul { list-style: none; }
 }
 
 /* ----------------------------------------------------------
-   13. Footer
+    15. Footer
    ---------------------------------------------------------- */
 .site-footer {
   background: var(--color-text-primary);
@@ -1222,7 +1434,7 @@ ul { list-style: none; }
 }
 
 /* ----------------------------------------------------------
-   14. Scroll Animations (AOS-like)
+    16. Scroll Animations (AOS-like)
    ---------------------------------------------------------- */
 .reveal {
   opacity: 0;
@@ -1236,7 +1448,7 @@ ul { list-style: none; }
 }
 
 /* ----------------------------------------------------------
-   15. Responsive - Tablet
+    17. Responsive - Tablet
    ---------------------------------------------------------- */
 @media (max-width: 1024px) {
   .hero-inner {
@@ -1257,21 +1469,8 @@ ul { list-style: none; }
     display: none;
   }
 
-  .dimension-grid {
-    grid-template-columns: repeat(2, 1fr);
-  }
-
-  /* Reset grid centering */
-  .dimension-card:nth-child(4) {
-    grid-column: auto;
-    justify-self: auto;
-    width: auto;
-  }
-
-  .dimension-card:nth-child(5) {
-    grid-column: auto;
-    justify-self: auto;
-    width: auto;
+  .dimension-grid > .dimension-card {
+    width: calc((100% - var(--space-xl)) / 2);
   }
 
   .features-grid {
@@ -1317,7 +1516,7 @@ ul { list-style: none; }
 }
 
 /* ----------------------------------------------------------
-   16. Responsive - Mobile
+    18. Responsive - Mobile
    ---------------------------------------------------------- */
 @media (max-width: 768px) {
   :root {
@@ -1395,8 +1594,8 @@ ul { list-style: none; }
     grid-template-columns: 1fr;
   }
 
-  .dimension-grid {
-    grid-template-columns: 1fr;
+  .dimension-grid > .dimension-card {
+    width: 100%;
   }
 
   .features-grid {
@@ -1507,7 +1706,7 @@ ul { list-style: none; }
 }
 
 /* ----------------------------------------------------------
-   17. Logo
+    19. Logo
    ---------------------------------------------------------- */
 .logo-img {
   display: block;
@@ -1527,7 +1726,7 @@ ul { list-style: none; }
 }
 
 /* ----------------------------------------------------------
-   18. Wuxing Philosophy Section
+    20. Wuxing Philosophy Section
    ---------------------------------------------------------- */
 .section-wuxing {
   background: linear-gradient(180deg, var(--bg-body) 0%, var(--bg-surface) 100%);
@@ -1548,9 +1747,28 @@ ul { list-style: none; }
   height: 100%;
 }
 
+.wuxing-diagram .taiji-center {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  pointer-events: none;
+  z-index: 1;
+  color: var(--color-text-secondary);
+}
+
+.wuxing-diagram .taiji-svg {
+  display: block;
+  animation: taiji-rotate 24s linear infinite;
+}
+
+@keyframes taiji-rotate {
+  to { transform: rotate(360deg); }
+}
+
 /* --- Explanation Cards --- */
 .wuxing-explanations {
-  max-width: 900px;
+  max-width: 960px;
   margin: 0 auto;
 }
 
@@ -1645,8 +1863,42 @@ ul { list-style: none; }
   line-height: 1.6;
 }
 
+@media (max-width: 1024px) {
+  .we-grid {
+    grid-template-columns: repeat(3, 1fr);
+  }
+}
+
+@media (max-width: 600px) {
+  .we-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+@media (max-width: 480px) {
+  .we-grid {
+    grid-template-columns: 1fr;
+  }
+}
+
+/* Mobile: prevent dimension title wrapping */
+@media (max-width: 600px) {
+  .dim-title {
+    font-size: 1rem;
+    flex-wrap: wrap;
+  }
+  .dim-emoji {
+    font-size: 1.2rem;
+  }
+  .dim-element {
+    font-size: 9px;
+  }
+}
+
+
+
 /* ----------------------------------------------------------
-   19. Dimension Energy Tips
+    21. Dimension Energy Tips
    ---------------------------------------------------------- */
 .dim-energy {
   margin-top: var(--space-md);
@@ -1694,6 +1946,12 @@ ul { list-style: none; }
   margin-left: var(--space-xs);
   vertical-align: middle;
   letter-spacing: .04em;
+  white-space: nowrap;
+}
+
+/* Prevent role name (家长/孩子/成长规划师) from breaking across lines */
+.role-perms li strong {
+  white-space: nowrap;
 }
 
 /* Responsive: Wuxing diagram — handled by aspect-ratio and Canvas redraw */
@@ -1703,20 +1961,4 @@ ul { list-style: none; }
   }
 }
 
-@media (max-width: 1024px) {
-  .we-grid {
-    grid-template-columns: repeat(3, 1fr);
-  }
-}
-
-@media (max-width: 600px) {
-  .we-grid {
-    grid-template-columns: repeat(2, 1fr);
-  }
-}
 
-@media (max-width: 480px) {
-  .we-grid {
-    grid-template-columns: 1fr;
-  }
-}

web/js/main.js

@@ -201,11 +201,11 @@ document.addEventListener('DOMContentLoaded', () => {
 
     // dimension data [身, 智, 富, 行, 心] (top clockwise)
     const dims = [
-      { name: '身', element: '土', color: '#FF8C42', bg: '#FFF5E6', desc: '主动健康' },
-      { name: '智', element: '金', color: '#6366F1', bg: '#EEF0FF', desc: '赋能未来' },
-      { name: '富', element: '水', color: '#F59E0B', bg: '#FFFBEB', desc: '利他创富' },
+      { name: '身', element: '土', color: '#5D4037', bg: '#F5EFEB', desc: '主动健康' },
+      { name: '智', element: '金', color: '#C0A060', bg: '#F9F4EC', desc: '赋能未来' },
+      { name: '富', element: '水', color: '#0EA5E9', bg: '#ECFEFF', desc: '利他创富' },
       { name: '行', element: '木', color: '#10B981', bg: '#ECFDF5', desc: '人际和谐' },
-      { name: '心', element: '火', color: '#FF6B9D', bg: '#FFF0F5', desc: '子女传承' }
+      { name: '心', element: '火', color: '#EF4444', bg: '#FEF2F2', desc: '子女传承' }
     ];
 
     // ---- helpers ----
@@ -217,9 +217,9 @@ document.addEventListener('DOMContentLoaded', () => {
     // 1. Background — soft radial glow
     // ================================================================
     var bgGrad = ctx.createRadialGradient(cx, cy, 0, cx, cy, outerR * 1.4);
-    bgGrad.addColorStop(0, 'rgba(255, 140, 66, 0.04)');
-    bgGrad.addColorStop(0.6, 'rgba(255, 140, 66, 0.02)');
-    bgGrad.addColorStop(1, 'rgba(255, 140, 66, 0)');
+    bgGrad.addColorStop(0, 'rgba(74, 155, 215, 0.04)');
+    bgGrad.addColorStop(0.6, 'rgba(74, 155, 215, 0.02)');
+    bgGrad.addColorStop(1, 'rgba(74, 155, 215, 0)');
     ctx.fillStyle = bgGrad;
     ctx.beginPath();
     ctx.arc(cx, cy, outerR * 1.4, 0, Math.PI * 2);
@@ -249,7 +249,7 @@ document.addEventListener('DOMContentLoaded', () => {
     // 3. 相克 (pentagram star) — drawn first so it sits behind
     // ================================================================
     var keOrder = [0, 2, 4, 1, 3]; // 身→富→心→智→行→身
-    var keColor = 'rgba(255, 140, 66, 0.45)';
+    var keColor = 'rgba(74, 155, 215, 0.45)';
     var nodeR = Math.max(24, size * 0.068);
 
     for (var i = 0; i < 5; i++) {
@@ -283,7 +283,7 @@ document.addEventListener('DOMContentLoaded', () => {
       ctx.lineTo(-s * 0.5, -s * 0.6);
       ctx.lineTo(-s * 0.5, s * 0.6);
       ctx.closePath();
-      ctx.fillStyle = 'rgba(255, 140, 66, 0.6)';
+      ctx.fillStyle = 'rgba(74, 155, 215, 0.6)';
       ctx.fill();
       ctx.restore();
     }
@@ -418,80 +418,9 @@ document.addEventListener('DOMContentLoaded', () => {
     }
 
     // ================================================================
-    // 6. Center emblem — "五行平衡" with refined design
+    // 6. Center — Tai Chi overlay (handled by HTML/CSS SVG)
     // ================================================================
-    var centerR = outerR * 0.27;
-
-    // Large soft glow
-    var bigGlow = ctx.createRadialGradient(cx, cy, centerR * 0.2, cx, cy, centerR * 2.5);
-    bigGlow.addColorStop(0, 'rgba(255, 140, 66, 0.1)');
-    bigGlow.addColorStop(1, 'rgba(255, 140, 66, 0)');
-    ctx.fillStyle = bigGlow;
-    ctx.beginPath();
-    ctx.arc(cx, cy, centerR * 2.5, 0, Math.PI * 2);
-    ctx.fill();
-
-    // Outer ring with subtle dash
-    ctx.beginPath();
-    ctx.arc(cx, cy, centerR + 6, 0, Math.PI * 2);
-    ctx.strokeStyle = 'rgba(255, 140, 66, 0.2)';
-    ctx.lineWidth = 1;
-    ctx.setLineDash([2, 3]);
-    ctx.stroke();
-    ctx.setLineDash([]);
-
-    // Main gradient circle
-    ctx.beginPath();
-    ctx.arc(cx, cy, centerR, 0, Math.PI * 2);
-    var cGrad = ctx.createRadialGradient(
-      cx - centerR * 0.25, cy - centerR * 0.25, 0,
-      cx, cy, centerR
-    );
-    cGrad.addColorStop(0, '#FFB366');
-    cGrad.addColorStop(0.5, '#FF994D');
-    cGrad.addColorStop(1, '#E67A2E');
-    ctx.fillStyle = cGrad;
-    ctx.fill();
-
-    // Subtle white inner ring
-    ctx.beginPath();
-    ctx.arc(cx, cy, centerR * 0.78, 0, Math.PI * 2);
-    ctx.strokeStyle = 'rgba(255,255,255,0.12)';
-    ctx.lineWidth = 1;
-    ctx.setLineDash([2, 3]);
-    ctx.stroke();
-    ctx.setLineDash([]);
-
-    // Center line — horizontal subtle divider
-    ctx.beginPath();
-    ctx.moveTo(cx - centerR * 0.6, cy);
-    ctx.lineTo(cx + centerR * 0.6, cy);
-    ctx.strokeStyle = 'rgba(255,255,255,0.08)';
-    ctx.lineWidth = 0.5;
-    ctx.stroke();
-
-    // "五行平衡" text — two lines
-    var ts = Math.max(12, centerR * 0.34);
-    ctx.font = 'bold ' + ts + 'px "PingFang SC","Microsoft YaHei",sans-serif';
-    ctx.textAlign = 'center';
-    ctx.textBaseline = 'middle';
-    ctx.fillStyle = '#fff';
-    ctx.shadowColor = 'rgba(0,0,0,0.15)';
-    ctx.shadowBlur = 4;
-    ctx.fillText('五行', cx, cy - ts * 0.35);
-    ctx.shadowBlur = 0;
-    ctx.fillText('平衡', cx, cy + ts * 0.65);
-
-    // Two yin-yang dots
-    var dotR2 = Math.max(2.5, centerR * 0.055);
-    ctx.beginPath();
-    ctx.arc(cx - centerR * 0.32, cy - centerR * 0.08, dotR2, 0, Math.PI * 2);
-    ctx.fillStyle = 'rgba(255,255,255,0.2)';
-    ctx.fill();
-    ctx.beginPath();
-    ctx.arc(cx + centerR * 0.32, cy + centerR * 0.08, dotR2, 0, Math.PI * 2);
-    ctx.fillStyle = 'rgba(255,255,255,0.15)';
-    ctx.fill();
+    // (The center emblem is replaced by the .taiji-center SVG overlay.)
   }
 
   // Initial draw