fix: UI/UX consistency audit — sidebar widths, primary colors, accessibility, contrast, reduced-motion

.gitignore

@@ -1,3 +1,4 @@
 .superpowers/
 qModel/.git/
 招标投标AI推广应用政策解读/.git/
+.claude/skills/ui-ux-pro-max/

index.html

@@ -17,7 +17,8 @@
   --border-light: #F0F0F0;
   --text-primary: #141414;
   --text-secondary: #595959;
-  --text-tertiary: #8C8C8C;
+  --text-tertiary: #767676;
+  --z-header: 100; --z-drawer: 200; --z-overlay: 300;
   --radius-sm: 6px;
   --radius-md: 8px;
   --radius-lg: 12px;
@@ -39,7 +40,8 @@
   --border-light: #2C2C2E;
   --text-primary: #D1D1D6;
   --text-secondary: #8E8E93;
-  --text-tertiary: #636366;
+  --text-tertiary: #8E8E93;
+  --z-header: 100; --z-drawer: 200; --z-overlay: 300;
   --shadow-sm: 0 1px 2px rgba(0,0,0,0.15), 0 1px 4px -1px rgba(0,0,0,0.1);
   --shadow-md: 0 2px 4px rgba(0,0,0,0.2), 0 4px 10px -2px rgba(0,0,0,0.15);
   --drawer-bg: #1C1C1E;
@@ -48,10 +50,13 @@
 body {
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif;
   background: var(--bg); color: var(--text-primary);
-  line-height: 1.57; font-size: 14px; min-height: 100vh;
+  line-height: 1.6; font-size: 14px; min-height: 100vh;
   -webkit-tap-highlight-color: transparent;
   transition: background 0.2s ease, color 0.2s ease;
 }
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
+}
 ::-webkit-scrollbar { width: 6px; height: 6px; }
 ::-webkit-scrollbar-track { background: transparent; }
 ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
@@ -114,6 +119,7 @@ body {
   -webkit-tap-highlight-color: transparent; min-height: 36px;
 }
 .chip:active { transform: scale(0.96); }
+.chip:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
 .chip.active { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
 .chip .chip-count { font-size: 11px; background: rgba(0,0,0,0.08); border-radius: 10px; padding: 0 5px; }
 .chip.active .chip-count { background: rgba(255,255,255,0.25); }
@@ -135,6 +141,7 @@ body {
   transition: all 0.12s ease; text-decoration: none; min-height: 40px;
 }
 .sidebar .nav-item:hover { background: var(--bg-elevated); color: var(--text-primary); }
+.sidebar .nav-item:focus-visible { outline: 2px solid var(--color-primary); outline-offset: -2px; border-radius: var(--radius-sm); }
 .sidebar .nav-item.active { background: var(--color-primary-bg); color: var(--color-primary); font-weight: 500; }
 .sidebar .nav-item .nav-icon { font-size: 14px; flex-shrink: 0; width: 20px; text-align: center; }
 .sidebar .nav-item .nav-count {
@@ -144,7 +151,7 @@ body {
 .sidebar .nav-item.active .nav-count { background: rgba(22,119,255,0.12); color: var(--color-primary); }
 .sidebar .sub-nav { padding-left: 24px; overflow: hidden; max-height: 0; transition: max-height 0.25s ease; }
 .sidebar .sub-nav.open { max-height: 500px; }
-.sidebar .sub-nav .nav-item { font-size: 12px; padding: 5px 12px; }
+.sidebar .sub-nav .nav-item { font-size: 12px; padding: 8px 12px; min-height: 36px; }
 .sidebar .theme-section {
   padding: 12px 16px; border-top: 1px solid var(--border-light); margin-top: 8px;
 }
@@ -206,6 +213,7 @@ body {
   transition: all 0.2s ease; text-decoration: none; color: var(--text-primary); display: block;
 }
 .all-card:hover { border-color: var(--color-primary); box-shadow: var(--shadow-md); }
+.all-card:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; border-radius: var(--radius-md); }
 .all-card:active { transform: scale(0.99); }
 .all-card .card-title { font-size: 14px; font-weight: 600; margin-bottom: 4px; }
 .all-card .card-desc {
@@ -225,12 +233,13 @@ body {
   cursor: pointer; user-select: none; transition: background 0.12s ease; min-height: 44px;
 }
 .wiki-toc-header:hover { background: var(--color-primary-bg); }
+.wiki-toc-header:focus-visible { outline: 2px solid var(--color-primary); outline-offset: -2px; border-radius: var(--radius-md); }
 .wiki-toc-header .toc-icon { font-size: 16px; transition: transform 0.2s ease; }
 .wiki-toc-header.open .toc-icon { transform: rotate(90deg); }
 .wiki-toc-header .toc-title { font-size: 14px; font-weight: 600; flex: 1; }
 .wiki-toc-header .toc-count { font-size: 12px; color: var(--text-tertiary); }
 .wiki-toc-body { overflow: hidden; max-height: 0; transition: max-height 0.3s ease; }
-.wiki-toc-body.open { max-height: 2000px; }
+.wiki-toc-body.open { max-height: none; }
 .wiki-toc-item {
   display: flex; align-items: center; gap: 10px; padding: 12px 18px 12px 42px;
   border-bottom: 1px solid var(--border-light); transition: background 0.1s ease;

抖音主题/报告/ai-usage-levels-for-software-company.html

@@ -12,7 +12,7 @@
             --color-error: #FF4D4F; --color-error-bg: #FFF2F0; --color-error-border: #FFCCC7;
             --bg: #F5F5F5; --bg-container: #FFFFFF; --bg-elevated: #FAFAFA;
             --border: #D9D9D9; --border-light: #F0F0F0;
-            --text-primary: #141414; --text-secondary: #595959; --text-tertiary: #8C8C8C;
+            --text-primary: #141414; --text-secondary: #595959; --text-tertiary: #767676;
             --radius-sm: 6px; --radius-md: 8px; --radius-lg: 12px;
             --shadow-sm: 0 1px 2px rgba(0,0,0,0.03),0 1px 6px -1px rgba(0,0,0,0.02);
             --shadow-md: 0 2px 4px rgba(0,0,0,0.04),0 4px 12px -2px rgba(0,0,0,0.04);
@@ -108,6 +108,9 @@
         .back-to-top.show{display:flex;align-items:center;justify-content:center;}
 
         @media(max-width:992px){:root{--sidebar-w:220px;}.main{padding:24px 20px 48px;}}
+        @media (prefers-reduced-motion: reduce) {
+            *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
+        }
         @media(max-width:768px){
             .menu-btn{display:flex;align-items:center;justify-content:center;}
             .sidebar{display:block;position:fixed;top:0;left:0;bottom:0;width:280px;max-width:85vw;transform:translateX(-100%);transition:transform .25s ease;z-index:201;padding-top:60px;}

招标投标AI推广应用政策解读/报告/provincial-bidding-smart-supervision-platform.html

@@ -33,7 +33,7 @@
             --shadow-sm: 0 1px 2px rgba(0,0,0,0.03), 0 1px 6px -1px rgba(0,0,0,0.02);
             --shadow-md: 0 2px 4px rgba(0,0,0,0.04), 0 4px 12px -2px rgba(0,0,0,0.04);
             --shadow-lg: 0 4px 8px rgba(0,0,0,0.06), 0 8px 24px -4px rgba(0,0,0,0.08);
-            --sidebar-w: 280px;
+            --sidebar-w: 260px;
             --header-h: 64px;
         }
         * { margin: 0; padding: 0; box-sizing: border-box; }

深国际综合改革方案/index.html

@@ -6,6 +6,7 @@
 <title>深国际综合改革方案 — 系列报告</title>
 <style>
   :root {
+    --color-primary: #1677FF; --color-primary-bg: #E6F4FF; --color-success: #52C41A; --color-success-bg: #F6FFED; --color-warning: #FAAD14; --color-warning-bg: #FFFBE6; --color-error: #FF4D4F; --color-error-bg: #FFF2F0;
     --primary: #1a3a5c; --accent: #c8102e; --bg: #f0f2f5;
     --card: #fff; --text: #2d3436; --muted: #636e72; --border: #dfe6e9;
   }

深国际综合改革方案/报告/深国际改革方案_专家头脑风暴.html

@@ -6,6 +6,7 @@
 <title>深国际综合改革方案 —— 专家头脑风暴：增强可执行性</title>
 <style>
   :root {
+    --color-primary: #1677FF; --color-primary-bg: #E6F4FF; --color-success: #52C41A; --color-success-bg: #F6FFED; --color-warning: #FAAD14; --color-warning-bg: #FFFBE6; --color-error: #FF4D4F; --color-error-bg: #FFF2F0;
     --primary: #1a3a5c; --accent: #c8102e; --bg: #f8f9fa;
     --card: #ffffff; --text: #2d3436; --muted: #636e72;
     --border: #dfe6e9; --highlight: #fff3cd;

深国际综合改革方案/报告/深圳国际综合改革方案.html

@@ -6,6 +6,7 @@
 <title>深圳国际控股有限公司向物流综合服务商转型综合改革方案</title>
 <style>
   :root {
+    --color-primary: #1677FF; --color-primary-bg: #E6F4FF; --color-success: #52C41A; --color-success-bg: #F6FFED; --color-warning: #FAAD14; --color-warning-bg: #FFFBE6; --color-error: #FF4D4F; --color-error-bg: #FFF2F0;
     --primary: #1a3a5c;
     --accent: #c8102e;
     --bg: #f8f9fa;

研发型企业AI转型方案/报告/ai-transformation-plan.html

@@ -37,7 +37,7 @@
             --shadow-md: 0 2px 4px rgba(0,0,0,0.04), 0 4px 12px -2px rgba(0,0,0,0.04);
             --shadow-lg: 0 4px 8px rgba(0,0,0,0.06), 0 8px 24px -4px rgba(0,0,0,0.08);
 
-            --sidebar-w: 272px;
+            --sidebar-w: 260px;
             --header-h: 64px;
         }
 

金鹿商城电商小程序需求分析/报告/jinlu-deer-mall-requirements-analysis.html

@@ -6,7 +6,7 @@
 <title>金鹿商城电商小程序 — 需求分析与差异对比报告</title>
 <style>
 :root {
-  --color-primary: #B8860B;
+  --color-primary: #1677FF;
   --color-primary-hover: #D4A520;
   --color-primary-active: #9A7209;
   --color-primary-bg: #F9F0D8;