/* ======================================================================== ZDH 全局交互标准 (ZDH Global Interaction Standards) ======================================================================== 版本: v1.0.0 创建日期: 2025-03-28 说明: 全站统一的折叠/展开组件样式标准 适用: FAQ、功能列表、产品详情等所有展开/收起交互场景 使用方法: 1. 在HTML 中引入: 2. 使用标准类名: .zdh-item, .zdh-trigger, .zdh-chevron-icon等 3. JavaScript会自动处理交互（见zdh-global-standards.js） 更新日志: - v1.0.0 (2025-03-28): 初始版本，定义核心标准 ======================================================================== */ /* ========== 1. 折叠内容区域 (Collapsible Content Area) ========== */ .zdh-collapsible-content { max-height: 0; overflow: hidden; opacity: 0; transition: max-height 0.3s ease-out, opacity 0.3s ease-out; } .zdh-collapsible-content.open { max-height: 500px; opacity: 1; } /* ========== 2. 纤细箭头图标 (Thin Chevron Icon) ========== */ .zdh-chevron-icon { width: 16px; height: 16px; color: #9ca3af; /* 默认中灰色 gray-400 */ flex-shrink: 0; transition: color 0.2s ease, transform 0.3s ease-in-out; } /* 悬停态：亮红色 */ .zdh-trigger:hover .zdh-chevron-icon { color: #dc2626; /* red-600 */ } /* 展开态：品牌红色 + 180度旋转 */ .zdh-item.open .zdh-chevron-icon { color: #C41E3A; /* 品牌红色 */ transform: rotate(180deg); } /* ========== 3. 标准正文排版 (Standard Body Typography) ========== */ .zdh-body-text { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; font-weight: 400; /* Regular字重 */ line-height: 1.75; /* 1.75倍行高 */ color: #4b5563; /* 深灰色 gray-600 */ font-size: 0.875rem; /* 14px text-sm */ } /* ========== 4. 标题排版 (Heading Typography) ========== */ .zdh-heading-text { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; font-weight: 500; /* Medium字重 */ letter-spacing: -0.01em; line-height: 1.4; color: #111827; /* gray-900 */ } /* ========== 5. 可访问性焦点样式 (Accessibility Focus States) ========== */ .zdh-trigger:focus { outline: 2px solid #C41E3A; outline-offset: -2px; } .zdh-trigger:focus-visible { outline: 2px solid #C41E3A; outline-offset: -2px; } /* ========== 6. 向后兼容别名 (Backward Compatibility Aliases) ========== */ /* 这些类名将被自动映射到ZDH标准，便于渐进式迁移 */ /* FAQ组件专用别名 */ .faq-answer { /* 继承 .zdh-collapsible-content */ max-height: 0; overflow: hidden; opacity: 0; transition: max-height 0.3s ease-out, opacity 0.3s ease-out; } .faq-answer.open { max-height: 500px; opacity: 1; } /* 图标别名 */ .faq-icon { color: #9ca3af; transition: color 0.2s ease, transform 0.3s ease-in-out; } .faq-question:hover .faq-icon, .faq-trigger:hover .faq-icon { color: #dc2626; } .faq-item.open .faq-icon, .zdh-item.open .faq-icon { color: #C41E3A; transform: rotate(180deg); } /* ========== 7. 打印样式 (Print Styles) ========== */ @media print { .zdh-collapsible-content, .faq-answer { max-height: none !important; opacity: 1 !important; overflow: visible !important; } .zdh-chevron-icon, .faq-icon { display: none; } } /* ========== 8. 减少动画模式 (Reduced Motion) ========== */ @media (prefers-reduced-motion: reduce) { .zdh-collapsible-content, .faq-answer, .zdh-chevron-icon, .faq-icon { transition: none; } .zdh-item.open .zdh-chevron-icon, .faq-item.open .faq-icon { transform: rotate(180deg); } } /* ========== ZDH 全局交互标准结束 ========== */