/* ============================================================ 博德赋能官网 · 案例详情页增强层 (case-detail.css) 适用页：人才发展 / 党建品牌 / 管理咨询 / 数字化平台 四类共 25 个 案例详情页（位于各分类子目录，引用路径 ../assets/css/case-detail.css）。 根因：这些详情页只链接了 tokens/base/site-base/components 四个共享 CSS， 而 components.css 引用了一套「旧命名」设计变量（--navy / --navy-2 / --accent / --line / --maxw / --radius / --muted / --primary / --gold-2 / --blue / --red / --text / --text2 / --border / --shadow / --font … 共 26 个）， 它们在本页链路上并未定义，导致 .hero 深蓝渐变背景、.stats 底色、.sec-head 标题色、.card 描边等全部回退失效——典型「详情页样式有问题」。 本文件做两件事： 1) 在 :root 补齐 components.css 所需的全部 26 个变量（值对齐全站 navy / gold 品牌体系，与 cases.css、service-detail.css 的口径保持一致）。 2) 在组件基础上做「精品案例」提质：金色段落编号徽章、卡片 hover 金边上浮、 卡片图标转金色、引文/小结区块强化、统计数字金色、网格节奏与响应式。 加载顺序：本文件置于 所有 link 之后，:root 变量与增强规则优先级最高。 ============================================================ */ :root{ /* 主色（深蓝） */ --navy: #0d1f3c; --navy-2: #163a5f; --navy-light: #163056; --primary: #0a1628; /* 品牌金 / 强调 */ --accent: #e0a93b; /* 段落编号、圆点 */ --accent-soft: rgba(224,169,59,.14); --gold-2: #c8922a; /* 深金（图标 / 编号强调） */ /* 辅助色 */ --blue: #3b82f6; --blue-soft: rgba(59,130,246,.12); --red: #ef4444; --red-2: #dc2626; --red-soft: rgba(239,68,68,.12); --crimson: #e11d48; --sky: #0ea5e9; /* 文字 */ --ink: #1a2744; --text: #1e293b; --text2: #475569; --muted: #6b7280; /* 背景 / 描边 */ --light: #f7f8fa; --bg: #ffffff; --border: #e2e8f0; --line: #e8ebf0; /* 形状 / 阴影 / 布局 */ --radius: 12px; --shadow: 0 4px 16px rgba(0,0,0,.08); --maxw: 1080px; --font: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", "Source Han Sans CN", sans-serif; } /* ---------- Hero 提质：深蓝渐变 + 金色下划线点缀 ---------- */ .hero{ box-shadow: inset 0 -1px 0 rgba(255,255,255,.08); } .hero .h{ position: relative; } .hero .h::after{ content: ""; display: block; width: 64px; height: 4px; margin-top: 18px; border-radius: 3px; background: linear-gradient(90deg, var(--gold), var(--gold-light, #f0c674)); } /* ---------- 统计条：数字金色强调 ---------- */ .stats .num{ font-weight: 900; color: var(--gold); font-size: clamp(26px, 3.4vw, 38px); letter-spacing: .5px; line-height: 1.15; } .stats .lab{ color: rgba(255,255,255,.72); font-size: 13px; margin-top: 4px; } /* ---------- 段落头：编号做成金色徽章 ---------- */ .sec-no{ display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 34px; padding: 0 10px; border-radius: 10px; background: var(--accent-soft); color: var(--gold-2); font-weight: 800; letter-spacing: 1px; } /* ---------- 卡片：hover 金边 + 上浮；图标转金色（统一品牌） ---------- */ .card{ transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; border-left: 3px solid transparent; } .card:hover{ transform: translateY(-4px); box-shadow: 0 18px 40px -18px rgba(13,31,60,.38); border-left-color: var(--gold); } .card h3 .ic{ background: var(--accent-soft); color: var(--gold-2); } /* 其它网格区块项（目标 / 支柱 / 卡片 / 阶段 / 成果 / 评价）统一 hover 反馈 */ .goal, .pillar, .dcard, .stage, .res, .eval{ transition: transform .25s ease, box-shadow .25s ease; } .goal:hover, .pillar:hover, .dcard:hover, .stage:hover, .res:hover, .eval:hover{ transform: translateY(-3px); box-shadow: 0 14px 30px -16px rgba(13,31,60,.30); } /* ---------- 正文导语 ---------- */ .lead{ color: var(--text2); font-size: 16.5px; line-height: 1.85; } /* ---------- 引文 / 评价区块：金边引用卡 ---------- */ .quotes{ background: linear-gradient(180deg, var(--bg-soft, #f7f8fa), #ffffff); border: 1px solid var(--border); border-left: 4px solid var(--gold); border-radius: var(--radius); padding: 28px 30px; } .quote{ font-size: 18px; line-height: 1.9; color: var(--ink); font-style: italic; } /* ---------- 小结区块：金色淡底盒子 ---------- */ .summary{ background: rgba(224,169,59,.08); border: 1px solid rgba(200,146,42,.35); border-radius: var(--radius); padding: 24px 26px; color: var(--ink); line-height: 1.85; } /* ---------- 未定义的网格容器（部分页用到）补为响应式网格 ---------- */ .res-grid{ display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; } .grid-2{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; } /* ---------- 区块节奏：相邻 block 之间加一道极淡分隔线 ---------- */ section.block + section.block{ border-top: 1px solid var(--line); } /* ---------- 响应式 ---------- */ @media (max-width: 640px){ .hero .wrap{ padding: 54px 20px 66px; } .res-grid, .grid-2{ grid-template-columns: 1fr; } .sec-head{ gap: 12px; } }