/* * seo-additions.css * 新增内容板块的基础样式，供 12 个详情页使用。 * 部署方式：在 explain/css/style.css 末尾追加，或在每个详情页 单独引入。 * 这些样式独立于原有页面结构，不会影响现有布局。 */ /* ===== Use Cases 板块 ===== */ .use-cases { max-width: 800px; margin: 2rem auto; padding: 1.5rem; background: #f8f9fa; border-radius: 12px; } .use-cases h2 { font-size: 1.4rem; margin-bottom: 1rem; color: #1a1a1a; } .use-cases ul { list-style: none; padding: 0; } .use-cases li { padding: 0.5rem 0; line-height: 1.6; color: #333; } .use-cases strong { color: #0066cc; } /* ===== FAQ 板块 ===== */ .faq { max-width: 800px; margin: 2rem auto; padding: 1.5rem; } .faq h2 { font-size: 1.4rem; margin-bottom: 1rem; color: #1a1a1a; } .faq details { border: 1px solid #e0e0e0; border-radius: 8px; margin-bottom: 0.75rem; overflow: hidden; } .faq summary { padding: 1rem 1.25rem; font-weight: 600; cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; color: #1a1a1a; } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: '+'; font-size: 1.5rem; font-weight: 300; color: #999; transition: transform 0.2s; } .faq details[open] summary::after { transform: rotate(45deg); } .faq details p { padding: 0 1.25rem 1rem; margin: 0; line-height: 1.6; color: #555; } /* ===== Download CTA 按钮 ===== */ .download-cta { text-align: center; margin: 2rem auto; padding: 1.5rem; } .download-cta a { display: inline-block; padding: 0.875rem 2rem; background: #007aff; color: #fff; text-decoration: none; border-radius: 12px; font-weight: 600; font-size: 1.05rem; transition: background 0.2s; } .download-cta a:hover { background: #0056b3; } /* ===== 响应式 ===== */ @media (max-width: 600px) { .use-cases, .faq { margin: 1rem; padding: 1rem; } .use-cases h2, .faq h2 { font-size: 1.2rem; } }