/*!
* DSH 前端细节样式
*
* 定位：只补充 theme.json 表达不了的"手感"细节。
* 凡是字号、行高、字重、颜色这类能用 theme.json 表达的，都不写在这里。
*
* 原则：
* · 不改变设计体系（颜色、间距刻度仍用主题预设）
* · 不引入新依赖
* · 每一条都有明确目的，不做"看着好看"的堆砌
*/
/* ═══════════════════════════════════════════
1. 中文排版细节
═══════════════════════════════════════════ */
/* 标题：中文长标题不要出现"孤字"或难看的断行 */
h1, h2, h3, h4 {
text-wrap: balance;
}
/* 正文段落：中文两端对齐会拉开字距显得松散，左对齐更自然 */
p {
text-align: left;
}
/* 段落之间的间距用行高的节奏，不额外加空隙，避免中文页面显得碎 */
.wp-block-post-content > p + p {
margin-block-start: 0;
}
/* 列表项的行高与段落一致，中文列表才不会挤在一起 */
li {
line-height: 1.75;
}
/* 列表标记与文字之间留一点空隙（中文标点占位大） */
.wp-block-list li {
padding-inline-start: 0.15em;
}
/* 数字与英文用 Inter 的等宽数字，数据看起来更整齐 */
.wp-block-post-content strong,
.wp-block-heading {
font-variant-numeric: tabular-nums;
}
/* ═══════════════════════════════════════════
2. 可读性与无障碍
═══════════════════════════════════════════ */
/* 正文链接：下划线更靠近文字，且不盖住中文的下缘 */
.wp-block-post-content a:not(.wp-block-button__link):not(.wp-block-post-title a) {
text-underline-offset: 0.25em;
text-decoration-thickness: 1px;
transition: text-decoration-thickness .15s ease;
}
.wp-block-post-content a:not(.wp-block-button__link):not(.wp-block-post-title a):hover {
text-decoration-thickness: 2px;
}
/* 键盘焦点必须看得见（默认样式在深色底上几乎不可见） */
a:focus-visible,
button:focus-visible,
input:focus-visible,
[tabindex]:focus-visible {
outline: 2px solid currentColor;
outline-offset: 3px;
border-radius: 2px;
}
/* 选中文字：用品牌深色反白，与站点一致 */
::selection {
background-color: #111111;
color: #f9f9f9;
}
/* 尊重"减少动态效果"的系统设置 */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: .01ms !important;
animation-iteration-count: 1 !important;
transition-duration: .01ms !important;
scroll-behavior: auto !important;
}
}
/* ═══════════════════════════════════════════
3. 交互手感
═══════════════════════════════════════════ */
html {
scroll-behavior: smooth;
}
/* 平滑滚动时给顶部留出空间，避免锚点被页头挡住 */
:target {
scroll-margin-block-start: 5rem;
}
/* 按钮：轻微上浮 + 变暗，反馈明确但不夸张 */
.wp-block-button__link {
transition: transform .16s ease, opacity .16s ease, box-shadow .16s ease;
}
.wp-block-button__link:hover {
transform: translateY(-1px);
}
.wp-block-button__link:active {
transform: translateY(0);
}
/* 卡片类容器：hover 时抬起一点点，暗示"可点击/可进入" */
.wp-block-group.has-base-2-background-color,
.wp-block-group.has-base-background-color {
transition: box-shadow .2s ease, transform .2s ease;
}
.wp-block-query .wp-block-group.has-base-2-background-color:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(17, 17, 17, .08);
}
/* ═══════════════════════════════════════════
4. 图片与媒体
═══════════════════════════════════════════ */
/* 圆角统一，与卡片一致 */
.wp-block-image img,
.wp-block-post-featured-image img,
.wp-block-query img {
border-radius: 6px;
}
/* 图片不要因为容器变窄而溢出 */
img {
max-width: 100%;
height: auto;
}
/* ═══════════════════════════════════════════
5. 分节视觉节奏
═══════════════════════════════════════════ */
/* 全宽分节之间的分隔更清晰：给相邻的深浅交替块加一条极细分隔线 */
.wp-block-group.alignfull + .wp-block-group.alignfull {
border-block-start: 1px solid rgba(17, 17, 17, .06);
}
/* 深色分节与浅色分节相接时不需要分隔线（对比已足够） */
.wp-block-group.alignfull.has-contrast-background-color + .wp-block-group.alignfull,
.wp-block-group.alignfull + .wp-block-group.alignfull.has-contrast-background-color {
border-block-start: 0;
}
/* ═══════════════════════════════════════════
6. 移动端微调
═══════════════════════════════════════════ */
@media (max-width: 600px) {
/* 手机上中文行高可略收一点，避免一屏字太少 */
body {
line-height: 1.75;
}
/* 大标题在窄屏不要过大，否则一行放不下几个字 */
h1 {
letter-spacing: 0;
}
}
/* ═══════════════════════════════════════════
7. 服务卡图标（替代 emoji）
═══════════════════════════════════════════
用 CSS mask 绘制，而不是插入 ![]()
或字体图标：
· 单色、跟随文字颜色 —— 深浅分节里都自动适配
· 尺寸用 em —— 跟着标题字号缩放，改字号不用改图标
· 内联 data URI —— 零额外网络请求
· 各系统渲染完全一致 —— 不像 emoji 那样每台机器画得都不一样
图形为手绘几何路径，不依赖任何图标库。
*/
h3[class*="dsh-ico-"]::before {
content: "";
display: inline-block;
width: 1.05em;
height: 1.05em;
margin-inline-end: .5em;
vertical-align: -.14em;
background-color: currentColor;
opacity: .88;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-size: contain;
mask-size: contain;
}
/* 平面图：矩形 + 隔墙 —— 对应"方案设计" */
h3.dsh-ico-plan::before {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4.5' width='18' height='15' rx='1.2'/%3E%3Cpath d='M3 12h8M11 4.5v15M14 8.5h4'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4.5' width='18' height='15' rx='1.2'/%3E%3Cpath d='M3 12h8M11 4.5v15M14 8.5h4'/%3E%3C/svg%3E");
}
/* 插头：两脚 + 外壳 + 线 —— 对应"安装与调试" */
h3.dsh-ico-install::before {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 3v5M15 3v5'/%3E%3Cpath d='M6 8h12v3.5a6 6 0 0 1-12 0z'/%3E%3Cpath d='M12 17.5V21'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 3v5M15 3v5'/%3E%3Cpath d='M6 8h12v3.5a6 6 0 0 1-12 0z'/%3E%3Cpath d='M12 17.5V21'/%3E%3C/svg%3E");
}
/* 节点网络：三个节点相连 —— 对应"有线与融合组网" */
h3.dsh-ico-wired::before {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='4.8' r='2.2'/%3E%3Ccircle cx='5' cy='18.5' r='2.2'/%3E%3Ccircle cx='19' cy='18.5' r='2.2'/%3E%3Cpath d='M10.6 6.7 6.4 16.6M13.4 6.7l4.2 9.9M7.2 18.5h9.6'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='4.8' r='2.2'/%3E%3Ccircle cx='5' cy='18.5' r='2.2'/%3E%3Ccircle cx='19' cy='18.5' r='2.2'/%3E%3Cpath d='M10.6 6.7 6.4 16.6M13.4 6.7l4.2 9.9M7.2 18.5h9.6'/%3E%3C/svg%3E");
}
/* WiFi 信号：三层弧 + 端点 —— 对应"弱电与网络布线" */
h3.dsh-ico-network::before {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.8a13 13 0 0 1 17 0'/%3E%3Cpath d='M6.6 12.4a8.5 8.5 0 0 1 10.8 0'/%3E%3Cpath d='M9.7 16a4 4 0 0 1 4.6 0'/%3E%3Ccircle cx='12' cy='19.4' r='1.1'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.8a13 13 0 0 1 17 0'/%3E%3Cpath d='M6.6 12.4a8.5 8.5 0 0 1 10.8 0'/%3E%3Cpath d='M9.7 16a4 4 0 0 1 4.6 0'/%3E%3Ccircle cx='12' cy='19.4' r='1.1'/%3E%3C/svg%3E");
}
/* 双盘位存储：两格 + 指示灯 —— 对应"NAS 与家庭影音" */
h3.dsh-ico-nas::before {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4.5' width='18' height='6.2' rx='1.5'/%3E%3Crect x='3' y='13.3' width='18' height='6.2' rx='1.5'/%3E%3Cpath d='M7 7.6h.01M7 16.4h.01'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4.5' width='18' height='6.2' rx='1.5'/%3E%3Crect x='3' y='13.3' width='18' height='6.2' rx='1.5'/%3E%3Cpath d='M7 7.6h.01M7 16.4h.01'/%3E%3C/svg%3E");
}
/* ═══════════════════════════════════════════
8. 页脚
═══════════════════════════════════════════
修复：页脚导航原本用 wp:list 区块，而全局样式没有重置项目符号，
结果 6 个页面链接渲染成带圆点的列表，既不像导航也没有点击反馈。
*/
footer .wp-block-list {
list-style: none;
margin: 0;
padding-left: 0;
}
/* 页脚导航链接：占满一行、留出可点区域、hover 有明确反馈 */
footer .wp-block-list li {
margin-block-end: .35em;
}
footer .wp-block-list a {
color: inherit;
opacity: .82;
text-decoration: none;
transition: opacity .15s ease, color .15s ease;
}
footer .wp-block-list a:hover,
footer .wp-block-list a:focus-visible {
opacity: 1;
color: var(--wp--preset--color--accent-2, #c2a990);
}
/* 联系方式：标签弱化、值突出，三行对齐 */
footer .dsh-footer-info li {
display: flex;
gap: .6em;
align-items: baseline;
margin-block-end: .45em;
}
/* 标签（微信/电话/邮箱）弱化，让值成为视觉重点 */
footer .dsh-footer-info li {
color: rgba(249, 249, 249, .62);
}
footer .dsh-footer-info .dsh-footer-val {
font-weight: 500;
letter-spacing: .01em;
color: var(--wp--preset--color--base, #f9f9f9);
text-decoration: none;
border-block-end: 1px solid transparent;
transition: border-color .15s ease, color .15s ease;
}
footer a.dsh-footer-val:hover,
footer a.dsh-footer-val:focus-visible {
color: var(--wp--preset--color--accent-2, #c2a990);
border-block-end-color: currentColor;
}
/* 行动入口：给它一个明确的"按钮感"，而不是裸链接 */
footer .dsh-footer-cta {
display: inline-block;
margin-block-start: .4em;
padding: .5em 1em;
border: 1px solid rgba(249, 249, 249, .35);
border-radius: .33rem;
color: inherit;
text-decoration: none;
transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}
footer .dsh-footer-cta:hover,
footer .dsh-footer-cta:focus-visible {
background-color: var(--wp--preset--color--accent-2, #c2a990);
border-color: var(--wp--preset--color--accent-2, #c2a990);
color: var(--wp--preset--color--contrast, #111);
}
/* 页面最底部（版权、备案）那一行：小字不要挤在一起 */
footer .wp-block-group.is-layout-flex > p {
margin: 0;
}
/* ═══════════════════════════════════════════
9. 色彩层
═══════════════════════════════════════════
反馈："整体太扁平，只有黑白元素"。
站点的调色板里本就有暖色（accent-2 暖褐 / accent-3 暖橙），此前几乎只当背景用。
这里把它用到「需要被看见」的位置，但仍保持克制——不做花哨的渐变与色块堆叠。
对比度依据（WCAG 2.1，浅底 #f9f9f9）：
accent-3 #d8613c = 3.69:1 → 大字（≥18.66px bold）与图形可用，正文不可
accent-2 #c2a990 = 2.24:1 → 仅可用于深色底（对 #111 为 8.43:1）
因此：浅底用 accent-3，深底用 accent-2。
*/
:root {
--dsh-warm: var(--wp--preset--color--accent-3, #d8613c);
--dsh-warm-soft: var(--wp--preset--color--accent-2, #c2a990);
}
/* 服务卡图标：改用暖色，成为视觉锚点 */
h3[class*="dsh-ico-"]::before {
background-color: var(--dsh-warm);
opacity: 1;
}
/* 统计数字：最大的那个 focal point，用暖色 + 略收紧字距 */
h3.wp-block-heading.has-text-align-center.has-x-large-font-size {
color: var(--dsh-warm);
letter-spacing: -.01em;
font-variant-numeric: tabular-nums;
line-height: 1.1;
}
/* 正文里的关键词强调：原本只是加粗，现在给一点暖色 */
.wp-block-post-content strong {
color: var(--wp--preset--color--contrast, #111);
}
/* 站内链接 hover：暖色 + 下划线加粗（原本只有下划线） */
.wp-block-post-content a:not(.wp-block-button__link):hover {
color: var(--dsh-warm);
}
/* 深色分节里的强调色用暖褐（对 #111 为 8.43:1，安全） */
.has-contrast-background-color strong,
.has-contrast-background-color a:hover {
color: var(--dsh-warm-soft);
}
/* 卡片加一条极细的暖色顶边，让平面有层次 */
.wp-block-column > .wp-block-group.has-base-background-color,
.wp-block-column > .wp-block-group.has-base-2-background-color {
position: relative;
overflow: hidden;
box-shadow: 0 1px 2px rgba(17, 17, 17, .04);
}
.wp-block-column > .wp-block-group.has-base-background-color::before,
.wp-block-column > .wp-block-group.has-base-2-background-color::before {
content: "";
position: absolute;
inset-block-start: 0;
inset-inline-start: 0;
width: 100%;
height: 3px;
background: linear-gradient(90deg, var(--dsh-warm) 0%, var(--dsh-warm-soft) 100%);
opacity: 0;
transition: opacity .25s ease;
}
.wp-block-column > .wp-block-group.has-base-background-color:hover::before,
.wp-block-column > .wp-block-group.has-base-2-background-color:hover::before {
opacity: 1;
}
/* ═══════════════════════════════════════════
10. 动效层
═══════════════════════════════════════════
反馈："基本没有动态效果"。
实现要点：
· 入场动画只在 JS 给 加上 .dsh-motion 后才生效 ——
没有 JS 或用户开启"减少动态效果"时，内容【原样完整显示】，绝不被藏起来。
这一点很重要：不能为了动效牺牲可访问性与 SEO。
· 只做三件事：分节滚动入场、统计数字滚动、卡片 hover。
不做视差、不做自动轮播、不做花哨过渡。
*/
.dsh-motion .dsh-reveal {
opacity: 0;
transform: translateY(14px);
transition: opacity .5s cubic-bezier(.22, .61, .36, 1),
transform .5s cubic-bezier(.22, .61, .36, 1);
will-change: opacity, transform;
}
.dsh-motion .dsh-reveal.dsh-in {
opacity: 1;
transform: none;
}
/* 分节之间的入场错开一点，避免整页同时动 */
.dsh-motion .dsh-reveal:nth-child(2) { transition-delay: .06s; }
.dsh-motion .dsh-reveal:nth-child(3) { transition-delay: .12s; }
.dsh-motion .dsh-reveal:nth-child(4) { transition-delay: .18s; }
/* 首屏：不等滚动，直接入场 */
.dsh-motion .dsh-hero-in {
animation: dsh-rise .7s cubic-bezier(.22, .61, .36, 1) both;
}
@keyframes dsh-rise {
from { opacity: 0; transform: translateY(18px); }
to { opacity: 1; transform: none; }
}
/* 统计数字滚动时不要抖动 */
.dsh-counting {
font-variant-numeric: tabular-nums;
}
/* ═══════════════════════════════════════════
11. 版式组件
═══════════════════════════════════════════
反馈："整体框架略显呆板，基本只有标题下面挂载内容这一种形式"。
诊断证实：全站 88% 的区块是 heading + paragraph + list，
图片 0 张、表格 0 个、图文分栏 0 个、重点框 0 个。
这一层提供四种"内容形态"，让形式跟着内容走：
.dsh-figure 图 + 说明（示意图、流程图）
.dsh-compare 并列对比（三选一、方案对照）
.dsh-callout 重点提示（结论、注意事项）
.dsh-steps 顺序步骤（流程类内容）
全部用 class 挂载，不改主题、不引入依赖、响应式自适应。
*/
/* ---------- 图 + 说明 ---------- */
.dsh-figure {
margin-block: clamp(1.5rem, 3.5vw, 2.75rem);
}
.dsh-figure img {
display: block;
width: 100%;
height: auto;
border-radius: 10px;
background-color: var(--wp--preset--color--base-2, #fff);
box-shadow: 0 1px 3px rgba(17, 17, 17, .05);
}
.dsh-figure figcaption {
margin-block-start: .75rem;
font-size: .9rem;
line-height: 1.6;
color: var(--wp--preset--color--contrast-2, #636363);
text-align: center;
}
/* ---------- 并列对比 ---------- */
.dsh-compare .wp-block-column {
background-color: var(--wp--preset--color--base-2, #fff);
border: 1px solid #e6e6e6;
border-radius: 10px;
padding: clamp(1rem, 2vw, 1.4rem);
}
/* 需要突出的一列（例如"我们最常推荐的做法"） */
.dsh-compare .wp-block-column.is-highlight {
border-color: var(--wp--preset--color--accent-3, #d8613c);
box-shadow: 0 6px 22px rgba(216, 97, 60, .12);
}
.dsh-compare .wp-block-column.is-highlight::before {
content: "最常用";
display: inline-block;
margin-block-end: .6rem;
padding: .18em .6em;
font-size: .75rem;
font-weight: 600;
letter-spacing: .04em;
color: #fff;
background-color: var(--wp--preset--color--accent-3, #d8613c);
border-radius: 999px;
}
.dsh-compare h3 {
margin-block-start: 0;
font-size: 1.15rem;
}
.dsh-compare ul {
margin: 0;
padding-inline-start: 1.1em;
}
.dsh-compare li {
font-size: .95rem;
margin-block-end: .35em;
}
/* ---------- 重点提示 ---------- */
.dsh-callout {
background-color: var(--wp--preset--color--base-2, #fff);
border-inline-start: 4px solid var(--wp--preset--color--accent-3, #d8613c);
border-radius: 0 10px 10px 0;
padding: clamp(1rem, 2vw, 1.35rem) clamp(1.1rem, 2.2vw, 1.5rem);
margin-block: clamp(1.25rem, 2.5vw, 1.9rem);
}
.dsh-callout > :first-child { margin-block-start: 0; }
.dsh-callout > :last-child { margin-block-end: 0; }
/* ---------- 顺序步骤 ---------- */
.dsh-steps {
list-style: none;
padding-inline-start: 0;
counter-reset: dshstep;
}
.dsh-steps > li {
position: relative;
padding-inline-start: 3rem;
margin-block-end: 1.1rem;
counter-increment: dshstep;
}
.dsh-steps > li::before {
content: counter(dshstep);
position: absolute;
inset-inline-start: 0;
inset-block-start: .05em;
width: 2rem;
height: 2rem;
display: grid;
place-items: center;
font-size: .95rem;
font-weight: 600;
color: var(--wp--preset--color--contrast, #111);
background-color: transparent;
border: 2px solid var(--wp--preset--color--accent-3, #d8613c);
border-radius: 999px;
}
/* 步骤之间用细线连起来，形成"路径"感 */
.dsh-steps > li:not(:last-child)::after {
content: "";
position: absolute;
inset-inline-start: 1rem;
inset-block-start: 2.35rem;
width: 2px;
height: calc(100% - 1.6rem);
background-color: #e6e6e6;
}
/* ---------- 窄屏适配 ---------- */
@media (max-width: 820px) {
.dsh-compare .wp-block-column { margin-block-end: .75rem; }
.dsh-steps > li { padding-inline-start: 2.6rem; }
}
/* ═══════════════════════════════════════════
12. 列表 → 卡片 / 徽章（首页改造用）
═══════════════════════════════════════════
思路：首页的"服务流程"和"为什么选择我们"本来是纯列表，
竖着读很长、也很单调。这里【不改内容，只加一个 class】，
由 CSS 把列表变成卡片网格 —— 改动最小，风险最低，效果最直接。
*/
/* ---------- 列表 → 卡片网格 ---------- */
.dsh-cards {
list-style: none;
padding-inline-start: 0;
margin-block: clamp(1.25rem, 2.5vw, 2rem);
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: clamp(.75rem, 1.5vw, 1.15rem);
}
.dsh-cards > li {
position: relative;
margin: 0;
padding: clamp(1rem, 1.8vw, 1.35rem) clamp(1.1rem, 2vw, 1.5rem);
background-color: var(--wp--preset--color--base-2, #fff);
border-radius: 10px;
box-shadow: 0 1px 3px rgba(17, 17, 17, .05);
transition: box-shadow .2s ease, transform .2s ease;
}
.dsh-cards > li::before {
content: "";
position: absolute;
inset-block-start: 0;
inset-inline-start: 0;
width: 3px;
height: 100%;
background: linear-gradient(180deg, var(--wp--preset--color--accent-3, #d8613c) 0%, var(--wp--preset--color--accent-2, #c2a990) 100%);
border-start-start-radius: 10px;
border-end-start-radius: 10px;
opacity: .75;
}
.dsh-cards > li:hover {
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(17, 17, 17, .09);
}
/* 卡片里的"小标题"（通常是 开头）单独成行，像卡片标题 */
.dsh-cards > li > strong:first-child,
.dsh-cards > li > b:first-child {
display: block;
margin-block-end: .35rem;
color: var(--wp--preset--color--contrast, #111);
font-size: 1.05rem;
}
@media (max-width: 780px) {
.dsh-cards { grid-template-columns: 1fr; }
}
/* ---------- 短语 → 徽章条 ---------- */
.dsh-badges {
display: flex;
flex-wrap: wrap;
gap: .5rem .6rem;
justify-content: center;
margin-block: clamp(1rem, 2vw, 1.6rem);
padding: 0;
list-style: none;
}
.dsh-badges > li {
margin: 0;
padding: .35em .85em;
font-size: .875rem;
line-height: 1.5;
color: var(--wp--preset--color--contrast, #111);
background-color: rgba(17, 17, 17, .04);
border: 1px solid rgba(17, 17, 17, .08);
border-radius: 999px;
}
.dsh-badges > li.is-accent {
color: var(--wp--preset--color--accent-3, #d8613c);
border-color: rgba(216, 97, 60, .3);
background-color: rgba(216, 97, 60, .06);
font-weight: 600;
}
/* ═══════════════════════════════════════════
13. 页头标识与标题
═══════════════════════════════════════════
反馈："网站标题我觉得有点小"。
实测原字号为 clamp(0.875rem, …, 1.2rem) —— 最小 14px、最大仅 19.2px，
那是"文字链接"的尺寸，不是站标的尺寸。这里放大到 1.5rem 上限（约 24px），
并在其前面挂上标识图形。
标识为什么用 CSS 的 ::before 而不是改模板：
· 不改 header 模板（避免与主题更新冲突）
· 尺寸用 em，跟着标题字号缩放，改字号不用改图
· 图形为纯几何路径，不依赖任何字体，任何设备渲染一致
*/
.wp-block-site-title {
font-size: clamp(1.15rem, 1.05rem + ((100vw - 20rem) * 0.02), 1.5rem) !important;
letter-spacing: -.01em;
line-height: 1.2;
}
.wp-block-site-title a {
display: inline-flex;
align-items: center;
gap: .55em;
text-decoration: none;
}
/* 标识：与文字同高（1.5em），视觉上略高于字面中心 */
.wp-block-site-title a::before {
content: "";
flex: 0 0 auto;
width: 1.5em;
height: 1.5em;
background-image: url("/wp-content/uploads/dsh/logo-b.svg");
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
/* 窄屏：标识略小，给文字留空间 */
@media (max-width: 600px) {
.wp-block-site-title a::before {
width: 1.35em;
height: 1.35em;
}
}
/* ═══════════════════════════════════════════
14. 勾选清单
═══════════════════════════════════════════
用途：交付标准、验收清单这类"逐项核对"的内容。
这些内容读者真的会拿它对着核，所以做成可勾选的样子比圆点列表更贴切，
而且两栏排布，7 条不用占满一屏。
*/
.dsh-checklist {
list-style: none;
padding-inline-start: 0;
margin-block: clamp(1.25rem, 2.5vw, 1.9rem);
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: .7rem clamp(1rem, 2.5vw, 2rem);
}
.dsh-checklist > li {
position: relative;
margin: 0;
padding-inline-start: 1.75em;
line-height: 1.7;
}
/* 勾选标记：用 mask 绘制，跟随强调色，不依赖字体 */
.dsh-checklist > li::before {
content: "";
position: absolute;
inset-inline-start: 0;
inset-block-start: .42em;
width: 1.05em;
height: 1.05em;
background-color: var(--dsh-warm);
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
-webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
-webkit-mask-position: center; mask-position: center;
-webkit-mask-size: contain; mask-size: contain;
}
/* 清单里每一项的"小标题"单独成行 */
.dsh-checklist > li > strong:first-child {
display: block;
margin-block-end: .1rem;
}
/* 窄屏改单栏 */
@media (max-width: 780px) {
.dsh-checklist { grid-template-columns: 1fr; }
}
/* 费用与周期这类"名词 + 说明"的内容：卡片化，便于扫读 */
.dsh-facts {
list-style: none;
padding-inline-start: 0;
margin-block: clamp(1.25rem, 2.5vw, 1.9rem);
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: .8rem clamp(1rem, 2.5vw, 1.5rem);
}
.dsh-facts > li {
margin: 0;
padding: clamp(.85rem, 1.6vw, 1.15rem) clamp(1rem, 1.8vw, 1.3rem);
background-color: var(--wp--preset--color--base-2, #fff);
border-radius: 10px;
box-shadow: 0 1px 3px rgba(17, 17, 17, .05);
line-height: 1.7;
}
.dsh-facts > li > strong:first-child {
display: block;
margin-block-end: .2rem;
color: var(--wp--preset--color--accent-3, #d8613c);
font-size: .95rem;
}
@media (max-width: 780px) {
.dsh-facts { grid-template-columns: 1fr; }
}
/* ═══════════════════════════════════════════
15. 服务图标网格
═══════════════════════════════════════════
首页「我们能做什么」本来是 3×2 的卡片网格，图标与标题排在同一行。
改成图标置顶后，一眼就能分辨六张卡各自管什么 —— 这才是"图标网格"该有的读法。
纯 CSS 实现：不新增标记，只把 h3 的 ::before 从行内改为块级。
*/
.dsh-service-grid h3[class*="dsh-ico-"]::before {
display: block;
width: 2.1em;
height: 2.1em;
margin-inline-end: 0;
margin-block-end: .5em;
}
/* 图标置顶后，卡片高度略有变化，标题与正文的间距收紧一点 */
.dsh-service-grid h3[class*="dsh-ico-"] {
margin-block-end: .35em;
}