@charset "utf-8"; /* ========================================================================== QiuQuan's Blog — PbootCMS 前端模板样式 主题：小清新 · 薄荷奶绿 · 淡雅通透 全站视觉的唯一来源 = 下面的 :root；改主题只改这一块 + 少数组件级派生值。 ========================================================================== */ /* ---------- 1. 设计令牌 ---------- ★ 对比度约定（WCAG 2.2 AA），**别凭好看乱用**： · --c-primary #2E9E86 白底 3.31:1 → **只能用于非文本角色** （色块 / 描边 / 激活图形 / 图标），满足 SC 1.4.11 的非文本 3:1。 · 一切**文字**（链接、强调、实心按钮底）用 --c-primary-dark #1F7A66，白底 5.21:1。 把 --c-primary 拿去写 13~14px 的链接会直接踩 AA 4.5:1 的红线。 · --c-text-body #546560（页底 5.75:1）/ --c-text-muted #64756F（页底 4.54:1）—— 两级都过 AA，muted 承载 12px 的元信息文字，不是「装饰灰」。 ★ 阴影一律用低透明度**薄荷调** rgba(31,122,102,·)，不要用灰色投影 —— 灰投影压在浅薄荷底上会显脏、显重，与「淡雅通透」正相反。 ★ 栅格（--container / --sidebar-w / --gap）保持与参考站一致，动一格全站错位。 */ :root { /* 页面背景 —— 底色并非纯色，而是一层极淡的亚麻纹理（实测 mean=238.7 std=2.10）。 纹理是灰阶低透明度噪声，会自动透出新底色，因此换主题不必重做纹理。 完全不想要纹理时把 --bg-image 置为 none 即可。 */ --bg-image: url(../images/bg-texture.png); /* ---------- 1.1 图标（内联 SVG + mask + currentColor，零字体零图片依赖） ---------- 全站图标必须是同一套「细线条」语言。 ★ 曾经用 emoji（🏠🖥📱💻🎮📄❤）：彩色、由系统字体渲染，与低饱和配色放一起极跳脱， 其中 ℹ️ 在 Windows 下更是渲染成一块实心蓝方块。已全部改为下面的线性 SVG。 */ --ico-cat: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17 3H7a2 2 0 0 0-2 2v16l7-3 7 3V5a2 2 0 0 0-2-2z'/%3E%3C/svg%3E"); --ico-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M16.5 16.5 21 21'/%3E%3C/svg%3E"); --ico-home: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10.5 12 3.5l9 7M5.5 9.5V20h13V9.5M10 20v-5.5h4V20'/%3E%3C/svg%3E"); --ico-monitor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='10.5' rx='1.5'/%3E%3Cpath d='M9.5 20h5M12 15.5V20'/%3E%3C/svg%3E"); --ico-phone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='7' y='2.5' width='10' height='19' rx='2.5'/%3E%3Cpath d='M10.5 18.5h3'/%3E%3C/svg%3E"); --ico-laptop: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4.5' y='4.5' width='15' height='11' rx='1.5'/%3E%3Cpath d='M2 19.5h20l-1.6-3.5H3.6z'/%3E%3C/svg%3E"); --ico-gamepad: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='7.5' width='19' height='10' rx='4.5'/%3E%3Cpath d='M8 10.8v3.4M6.3 12.5h3.4M16 11.6h.01M18 13.6h.01'/%3E%3C/svg%3E"); --ico-doc: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 3h7l4.5 4.5V21h-11.5z'/%3E%3Cpath d='M13.5 3v4.5H18M9.5 12.5h5M9.5 16h5'/%3E%3C/svg%3E"); --ico-heart: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20.5S3.5 15.2 3.5 9.7A4.7 4.7 0 0 1 12 6.9a4.7 4.7 0 0 1 8.5 2.8c0 5.5-8.5 10.8-8.5 10.8z'/%3E%3C/svg%3E"); /* 卡片元信息「赞」/ 内容页按钮 / 404 空状态，同一套 mask 手法 */ --ico-thumb: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 9V5a3 3 0 0 0-3-3l-4 9v11h11.3a2 2 0 0 0 2-1.7l1.4-9a2 2 0 0 0-2-2.3zM7 22H4a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2h3'/%3E%3C/svg%3E"); --ico-star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.8l2.9 5.9 6.5.9-4.7 4.6 1.1 6.5-5.8-3-5.8 3 1.1-6.5-4.7-4.6 6.5-.9z'/%3E%3C/svg%3E"); --ico-compass: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9.2'/%3E%3Cpath d='M16 8l-2.2 6.6L7.2 16.8 9.4 10.2z'/%3E%3C/svg%3E"); /* ---------- 1.2 色彩 ---------- */ --c-primary: #2E9E86; /* 主色（装饰/图形，3.31:1 —— 非文本角色专用） */ --c-primary-bright: #35B79B; /* 再亮一档：标题竖条 / 圆点等纯装饰 */ --c-primary-dark: #1F7A66; /* 深主色：文字级强调 / 链接 / 实心按钮底（5.21:1） */ --c-primary-light: #E4F4EF; /* 浅主色：标签底 / 标题分隔线 / 占位图底 */ --c-primary-soft: #F2FAF7; /* 极浅主色：hover 底 / 区块底 */ --c-btn: #1F7A66; /* 主按钮底（白字 5.21:1） */ --c-btn-hover: #17604F; --c-accent-light: #FDEBE5; /* 暖珊瑚（点缀色）：浅底 */ --c-accent-dark: #A8442A; /* 暖珊瑚：浅底上的深色文字（5.16:1） */ --c-accent: #E8846B; /* 暖珊瑚：纯装饰（图标 / 圆点） */ --c-accent-hover: #FBE0D7; /* 暖珊瑚浅底的 hover：比 --c-accent-light 深一档 */ --c-danger: #C75050; /* 柔玫瑰红：只为「警示」，不做装饰 */ --c-danger-bg: #FDF3F2; /* 刻意不设 --c-success / --c-warning：全站目前没有任何「成功 / 警告」语义的元素， 不预先造空令牌。将来要用，请连同 verify_* 的对比度清单一起加。 */ --c-bg: #F4F8F6; /* 页面底色（极淡薄荷灰） */ /* --c-card = 全站**所有白色表面**的唯一来源：卡片、页头、下拉面板、分页页码、 搜索框、二维码白底…… 组件里一律写 var(--c-card)，**不要再写字面量 #fff** （写了就等于绕开令牌，改主题时这一处会漏掉）。 */ --c-card: #ffffff; /* --c-on-dark = 压在任何**深色实底**上的白色前景（主按钮底 / 深主色块 / 警示块）。 与 --c-card 分开：一个是「白面」，一个是「深底上的白字」，将来把按钮换成浅底时只改这一处。 */ --c-on-dark: #ffffff; --c-border: #E4EDE9; /* 常规描边（极浅薄荷灰 —— 分层靠它，不靠阴影） */ --c-border-light: #EFF4F1; /* 更浅：列表分隔线 */ --c-border-strong: #CFDED8; /* 深一档：需要明确「有框」时（下拉面板 / 输入框） */ --c-text: #2F3E3A; /* 标题（白底 11.2:1） */ /* 正文 / 次要文字 —— 两级都按「正文语义」要求过 WCAG AA 4.5:1。 ★ 约束面取**页面底色 #F4F8F6**（比纯白更暗，是这两个色实际承载的最不利浅底）： --c-text-body #546560 → 页底 5.75:1 / 白底 6.16:1 --c-text-muted #64756F → 页底 4.54:1 / 白底 4.87:1 ★ 为什么 muted 不再更浅：它承载的是 12px 的**信息性文字**（元信息 / 时间 / 页脚 / 面包屑）， 属正文语义，不能拿 3.x:1 蒙混。上一版 #7C8C87（白底 3.52 / 页底 3.29）以及更早的 #999， 都不到线。要更浅的灰只能用于**纯装饰**（分隔线 / 描边），不要拿来写字。 ★ 两级之间用 ΔL≈0.045 拉开层次：正文与次要文字的区分靠**这一档色差 + 字号**， 不要为了「更淡雅」把 muted 调回去 —— 那会直接踩 AA 红线。 */ --c-text-body: #546560; --c-text-muted: #64756F; /* 刻意不设 --c-link：链接色统一取 --c-primary-dark，避免同一件事有两个来源。 */ /* ---------- 1.3 栅格（与参考站一致，不要动） ---------- 参考站：.container{max-width:1250px}（站点自定义 CSS 覆盖了主题的 1240） .content{margin-right:380px} / .sidebar{width:370px} → 主栏 1250-380 = 870，主栏与侧栏的净间隙 = 380-370 = 10 */ --container: 1250px; --sidebar-w: 370px; --gap: 10px; --card-gap: 12px; /* 卡片/模块之间的纵向间距（原 10px，小清新放宽一档） */ --topbar-h: 36px; /* 侧栏卡片内统一水平内边距：栏目标题 / 列表项 / 搜索框 / 卡片体全部对齐到这条线。 ★ 只有这一条基准线 —— 绝不要在同一卡片里给标题和列表项写两个不同的水平内边距。 */ --side-pad: 24px; /* ---------- 1.4 圆角（分层，别到处写死像素） ---------- */ --radius-sm: 6px; /* 小元素：标签 / 缩略图 / 输入框 / 页码 */ --radius: 10px; /* 默认：卡片 / 按钮 / 面板 */ --radius-lg: 14px; /* 大块：正文容器 / 下拉浮层 */ --radius-pill: 999px; /* 胶囊 */ /* ---------- 1.5 字体刻度（中文正文 14px 基准） ---------- */ --fs-xs: 12px; --fs-sm: 13px; --fs-base: 14px; --fs-lg: 16px; --fs-xl: 20px; --fs-2xl: 22px; /* 小清新的「轻」靠行高与留白，不是靠把字号调大。 ★ 标题字重统一 500：微软雅黑只有 Regular/Bold 两档，500 会匹配到 Regular， 比 700 轻一档 —— 这正是要的效果，别改回 700。 */ --fw-title: 500; --lh-base: 1.7; --lh-loose: 1.9; /* ---------- 1.6 动效与阴影 ---------- */ --t-fast: .18s ease; /* 二级下拉的原始时长（参考站 .site-nav .sub-menu 的 transition: all .3s ease-in-out）。 下拉带 25px 位移，比通用微交互慢一档才不显生硬，故单列一个令牌。 */ --t-slow: .3s ease-in-out; --shadow-sm: 0 1px 2px rgba(31, 122, 102, .04); /* 「近乎无阴影」，只给一点点体积感 */ --shadow-md: 0 6px 20px rgba(31, 122, 102, .08); /* 浮层 */ --shadow-lg: 0 10px 30px rgba(31, 122, 102, .10); /* 返回顶部等悬浮件 */ } /* ---------- 2. 基础重置 ---------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background-color: var(--c-bg); background-image: var(--bg-image); background-repeat: repeat; background-attachment: scroll; color: var(--c-text-body); font-family: "Microsoft YaHei", "微软雅黑", "PingFang SC", "Hiragino Sans GB", "Helvetica Neue", Arial, sans-serif; font-size: var(--fs-base); /* 中文正文行高从 1.6 放到 1.7；小清新的「松」主要来自这里 */ line-height: var(--lh-base); /* 中文略微放宽字距，是「清新通透」观感的重要来源 */ letter-spacing: .3px; -webkit-font-smoothing: antialiased; } h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: var(--fw-title); color: var(--c-text); } p { margin: 0; } ul, ol { margin: 0; padding: 0; list-style: none; } img { max-width: 100%; vertical-align: middle; border: 0; } a { color: var(--c-text); text-decoration: none; transition: color var(--t-fast); } a:hover { color: var(--c-primary-dark); } button { font-family: inherit; cursor: pointer; border: 0; background: none; } input, textarea { font-family: inherit; font-size: var(--fs-base); } :focus-visible { outline: 2px solid var(--c-primary); outline-offset: 2px; } /* ---------- 3. 布局容器 ---------- */ /* 参考站 .container 无横向内边距（内容宽 = 1250），窄屏才补上留白 */ .container { width: 100%; max-width: var(--container); margin: 0 auto; } .main-wrap { display: grid; grid-template-columns: minmax(0, 1fr) var(--sidebar-w); gap: var(--gap); align-items: start; margin-top: 10px; padding-bottom: 20px; } .main-content { min-width: 0; } .sidebar { min-width: 0; } /* ---------- 4. 顶部工具条 ---------- */ .top-bar { height: var(--topbar-h); background: var(--c-primary-soft); border-bottom: 1px solid var(--c-border-light); font-size: var(--fs-xs); color: var(--c-text-muted); } .top-bar .container { display: flex; align-items: center; justify-content: space-between; height: 100%; } .tb-left, .tb-right { display: flex; align-items: center; gap: 14px; } .top-bar a { color: var(--c-text-muted); } .top-bar a:hover { color: var(--c-primary-dark); } .tb-hi { color: var(--c-text-muted); } /* ---------- 5. 头部与导航 ---------- */ /* position:relative 是给「全宽搜索面板」当定位锚点的（面板用 top:100% 贴在页头下沿） */ .site-header { position: relative; background: var(--c-card); border-bottom: 1px solid var(--c-border); } .header-inner { display: flex; align-items: center; justify-content: space-between; min-height: 74px; gap: 20px; } .site-logo { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; } .logo-img { width: 42px; height: 42px; display: block; border-radius: var(--radius); } .logo-text { display: flex; flex-direction: column; line-height: 1.25; } .logo-text strong { font-size: 18px; font-weight: var(--fw-title); color: var(--c-text); letter-spacing: .2px; } .logo-text em { font-style: normal; font-size: var(--fs-xs); color: var(--c-text-muted); } .main-nav { display: flex; align-items: center; gap: 4px; position: relative; } .nav-menu { display: flex; align-items: center; } .nav-menu > li { position: relative; } .nav-menu > li > a { display: block; padding: 0 14px; height: 74px; line-height: 74px; font-size: 15px; color: var(--c-text-body); /* 比 --c-text 轻一档，让导航不抢标题的注意力 */ white-space: nowrap; } .nav-menu > li > a:hover { color: var(--c-primary-dark); } .nav-menu > li.active > a { color: var(--c-primary-dark); font-weight: var(--fw-title); } /* ---------- 导航图标 ---------- 参考站是「每个菜单项自带 FontAwesome 类」： 首页 fa-home · 电脑软件 fa-windows · 安卓软件 fa-android · 单机游戏 fa-gamepad · 赞助 fa-heart 本模板没有图标字体，改为**内联 SVG + mask** 的线性图标（与 --ico-search / --ico-cat 同一套手法）： 零字体、零图片依赖，且上色取 currentColor —— 于是**图标会跟着链接颜色一起变**（hover 变主色）。 这是小清新观感提升最大的一步：全站图标共用一套细线条语言。 ★ 配色规则：图标是「非文本角色」，受 WCAG SC 1.4.11 非文本 3:1 约束。 常态跟随链接色 --c-text-body(#546560，白底 6.16:1)，hover 变 --c-primary-dark。 ★ 不要改回 `:nth-child` 按位置匹配 —— 后台增删/排序栏目时图标会整体错位 （实测：在「安卓软件」后插入一个栏目，「单机游戏」就丢掉图标、新栏目反而拿到）。 ★ 用 `*=`（包含）而不是 `=`（全等）匹配：后台栏目名常见的「尾随空格 / 后缀词」 （如「操作系统 」「操作系统教程」）在 `=` 下会静默不命中 → 该栏目裸奔没图标。 ★ **未配图标的栏目必须完全不可见且不占位**。做法是把尺寸也做成变量： --ico-size 缺省为 0 → 盒子 0×0、--ico-gap 缺省 0 → 无外边距，于是「什么都不生成」。 ⚠️ 不要改成「给所有项都画 16×16 再用空 SVG 遮掉」—— 那样未配图标的栏目会在文字前 留出 22px 空档，线上看起来就是「这个栏目莫名缩进了」。 ★ 想给新栏目配图标：只加一行「--ico 指向哪个图形 + 尺寸 + 间距」，不要重复整套 ::before。 */ .nav-menu > li > a::before { content: ""; display: inline-block; width: var(--ico-size, 0); height: var(--ico-size, 0); margin-right: var(--ico-gap, 0); vertical-align: -3px; background-color: var(--ico-color, currentColor); -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat; } .nav-menu > li > a[data-nav*="首页"] { --ico: var(--ico-home); --ico-size: 16px; --ico-gap: 6px; } .nav-menu > li > a[data-nav*="电脑软件"] { --ico: var(--ico-monitor); --ico-size: 16px; --ico-gap: 6px; } .nav-menu > li > a[data-nav*="安卓软件"] { --ico: var(--ico-phone); --ico-size: 16px; --ico-gap: 6px; } .nav-menu > li > a[data-nav*="操作系统"] { --ico: var(--ico-laptop); --ico-size: 16px; --ico-gap: 6px; } .nav-menu > li > a[data-nav*="单机游戏"] { --ico: var(--ico-gamepad); --ico-size: 16px; --ico-gap: 6px; } /* 「关于」同时覆盖后台可能出现的「关于本站 / 关于我们」两种命名。 参考站的「赞助」是非栏目项也给了图标（fa-heart）→ 非栏目项并非不能有图标。 */ .nav-menu > li > a[data-nav*="关于"] { --ico: var(--ico-doc); --ico-size: 16px; --ico-gap: 6px; } /* 唯一保留色彩的图标：暖珊瑚心形，作为整条导航里的一点暖色停顿。 图标是「唯一可见内容」时不许这么干（那时受 3:1 约束），但这里文字才是主要内容， 图标纯装饰 → 允许低对比，与正文色并列反而是点睛。 */ .nav-menu > li > a[data-nav*="赞助"] { --ico: var(--ico-heart); --ico-size: 16px; --ico-gap: 6px; --ico-color: var(--c-accent); } .nav-menu .caret::after { content: ""; display: inline-block; width: 0; height: 0; margin-left: 5px; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid currentColor; vertical-align: middle; /* 展开时翻转 180°（参考站 .site-nav>li.menu-item-has-children:hover a::after 同款） */ transition: transform var(--t-slow); } /* 二级下拉（桌面 ≥992px：hover 展开的绝对定位浮层） ★ 数值有两个来源，**不要混用**： · 布局（定位 / 内边距 / 条目节拍 / 展开动画）沿用参考站线上样式表 （_ref/ref-dux.css 的 `.site-nav .sub-menu`），并与参考站截图交叉校验一致： 条目节拍 33.6px（= 14×1.4 行高 + 7×2 内边距），两处严丝合缝。 · 面板「外观」（描边 / 圆角 / 字色）已改由**小清新主题令牌**接管： --c-border-strong / --radius-lg / --c-text-body。宽度保持 140px（上一轮按用户 给出的参考图实测确定）。 ⚠️ 下拉框是页面的一部分，**全站换主题时不能把它落下** —— 否则浅薄荷底色的页面里 会孤零零飘着一块灰色直角浮层。 ⚠️ 这里曾按那张参考图做过「直角 + #ccc 描边」；「全站统一为小清新」的指令已覆盖它。 量新截图：`python tools/measure_subnav_ref.py <图> --panel-left N --panel-right M` */ .sub-menu { position: absolute; top: 100%; left: 50%; /* 水平居中 + 6.5px 左偏（参考站原式是写死的 `margin-left: -86.5px` = -(160/2) - 6.5）。 拆成「translateX(-50%) 居中 + margin-left 补偏移」：视觉与参考站一致， 面板宽度改过（160 → 140）也不会静默失准。 */ margin-left: -6.5px; width: 140px; padding: 6px 0; background: var(--c-card); /* 全局 `box-sizing: border-box`，所以这 140px 已含左右各 1px 描边，内层 138px */ /* 小清新主题：描边改用浅薄荷灰、圆角放大到 --radius-lg。 上一轮按用户给的参考图做过「直角 + #ccc 描边」，本轮的「全站统一」指令已覆盖它。 */ border: 1px solid var(--c-border-strong); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); font-size: 14px; line-height: 1.4; text-align: center; list-style: none; opacity: 0; visibility: hidden; transform: translate(-50%, -25px); transition: opacity var(--t-slow), transform var(--t-slow), visibility var(--t-slow); z-index: 60; } /* 面板顶部的小尖角：双层伪元素叠出「描边 + 白色填充」的箭头（参考站同款手法，仅换描边色）。 ★ 面板有 1px 描边时，`top:-5px` 是相对 **padding box** 的，于是白色那层正好落在那条描边上、 把描边「切开」—— 参考图实测就是这样（描边行在三角处是纯白 255）。 ★ 三角中心比面板中心偏右约 2px，由 `left:50%; margin-left:-3px` 天然得到，别再手动加偏移。 */ .sub-menu::before, .sub-menu::after { content: ""; position: absolute; top: -5px; left: 50%; margin-left: -3px; border-left: 5px solid transparent; border-right: 5px solid transparent; } .sub-menu::before { border-bottom: 5px solid var(--c-border-strong); } .sub-menu::after { border-bottom: 5px solid var(--c-card); margin-top: 1px; } .sub-menu li { display: block; } .sub-menu li > a { display: block; padding: 7px 10px; font-size: 14px; /* 条目字色 = --c-text-body。实测参考图为 (102,102,102)=#666，本主题统一到 #546560： 白底 6.16:1、薄荷 hover 底上 4.9:1，均满足正文 4.5:1。 */ color: var(--c-text-body); } /* 「当前栏目」高亮 = 参考站 `.site-nav li.current-menu-item > a { color: var(--tb--main) }`。 ★ 必须写在 hover 规则**之前**：参考站里 hover 的选择器权重更高（.site-nav .sub-menu a:hover）， hover 时会把颜色压平，只留浅灰底。顺序反了就会「hover 当前项仍然发蓝」。 */ .sub-menu li.active > a { color: var(--c-primary-dark); } /* hover 只加一层**极浅薄荷底**、文字色不变（参考站原本是 #f4f4f4 灰底 + 文字保持常态色）。 文字变主色是留给「当前栏目」的，不是 hover 态 —— 别顺手改成 hover 变色。 */ .sub-menu li:hover > a, .sub-menu li > a:hover { color: var(--c-text-body); background: var(--c-primary-soft); } /* ★ hover 展开必须限定在 ≥992px。折叠态（≤991px）改走「.sub-toggle 点按展开」， 若不限定，触摸端 tap 会触发 :hover 把 visibility 强制成 visible —— 折叠当场失效。 */ @media (min-width: 992px) { .nav-menu > li:hover > .sub-menu { opacity: 1; visibility: visible; transform: translate(-50%, 0); } /* 展开时触发项的 ▾ 翻上去（参考站同款反馈） */ .nav-menu > li:hover > .caret::after { transform: rotate(180deg); } } /* 折叠态二级栏目的展开按钮：桌面端不出现（那一档用 hover），≤991px 才显示。 隐藏用 display:none 而非 visibility —— 视觉与 Tab 顺序同时移除，不留可聚焦的空按钮。 */ .sub-toggle { display: none; } /* 导航最右侧的搜索入口：一个纯图标按钮（参考站 .navto-search 同款）， 点击展开页头下方的全宽面板 .site-search。 */ .nav-search-toggle { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--radius); /* 图标是按钮唯一可见内容 → 受 WCAG 2.2 SC 1.4.11 非文本对比 3:1 约束。 --c-text-muted 如今也过 AA（页底 4.54:1），但这枚图标是按钮唯一可见内容、 受 SC 1.4.11 非文本 3:1 约束且希望更「实」，故仍取正文色 --c-text-body(#546560) = 6.16:1。 */ color: var(--c-text-body); transition: color var(--t-fast), background-color var(--t-fast); } .nav-search-toggle:hover { color: var(--c-primary-dark); background: var(--c-primary-light); } .nav-search-toggle i { width: 17px; height: 17px; background: currentColor; -webkit-mask: var(--ico-search) center / contain no-repeat; mask: var(--ico-search) center / contain no-repeat; } /* 展开态：图标变主题蓝（颜色对齐参考站 `.search-on .site-navbar li.navto-search a{color:var(--tb--main)}`）； 淡蓝底是本模板额外加的，用来强化「已展开」的状态反馈，与 hover 态同一套视觉语言 */ .search-on .nav-search-toggle { color: var(--c-primary-dark); background: var(--c-primary-light); } /* ---------- 全宽搜索面板 ---------- 参考站 .site-search：绝对定位、left/right 都 0 铺满整宽、白底、整条滑出， 且 **height 是硬编码的 120px**（不是靠 padding 撑出来）。 本模板把它挂在 .site-header 内部并用 top:100% 锚定页头下沿 —— 这样不依赖「页面有没有顶部工具条」，也不用像参考站那样写 top:107px/72px 这类硬编码偏移。 注意：页头自身有 1px 下边框，绝对定位的包含块是页头的 padding box， 所以 top:100% 落在 y = 页头 border-box 底边 - 1px，面板正好盖住那条 1px 分隔线（同为白色，视觉无缝）。 */ .site-search { position: absolute; top: 100%; left: 0; right: 0; height: 120px; /* 参考站原值，三档：120 / 96 / 66 */ background: var(--c-card); border: 0; /* 参考站 .site-search 无边框，高度必须正好 120 */ box-shadow: var(--shadow-lg); z-index: 65; /* 关闭态：透明 + 轻微上移 + visibility:hidden。 visibility 这一项是关键 —— 它让收起时的输入框无法被 Tab 聚焦。 ★ visibility 的过渡只在「关闭」方向延迟到淡出结束后再生效； 打开方向必须瞬时（0s）—— 否则展开瞬间它的计算值仍是 hidden， 脚本里的 focus() 会被浏览器静默忽略（实测踩过这个坑）。 */ opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity var(--t-fast), transform var(--t-fast), visibility 0s var(--t-fast); } .search-on .site-search { opacity: 1; visibility: visible; transform: translateY(0); transition: opacity var(--t-fast), transform var(--t-fast), visibility 0s; } /* 表单：参考站用 float + 85%/15% 宽度，这里改用 flex 拼排，效果一致但更稳。 内缩 20% 是参考站桌面端取值：37×2 + 46 输入框 = 120，正好等于面板高度。 */ .site-search-form { display: flex; padding: 37px 20%; } .site-search-form .search-input { flex: 1 1 auto; min-width: 0; height: 46px; padding: 4px 15px; border: 1px solid var(--c-border-strong); border-right: 0; border-radius: var(--radius-sm) 0 0 var(--radius-sm); background: var(--c-card); /* 参考站此处取 #999（白底 2.85:1，录进去的字偏淡）→ 改为正文色 --c-text-body（6.16:1） */ color: var(--c-text-body); font-size: 15px; outline: none; } .site-search-form .search-input::placeholder { color: var(--c-text-muted); } .site-search-form .search-input:focus { border-color: var(--c-primary-dark); } /* 去掉 WebKit 自带的搜索清除/装饰按钮，避免与自定义图标挤在一起 */ .site-search-form .search-input::-webkit-search-decoration, .site-search-form .search-input::-webkit-search-cancel-button, .site-search-form .search-input::-webkit-search-results-button { -webkit-appearance: none; appearance: none; } /* 提交按钮占 15%，与输入框拼成一条完整控件。 底色用 --c-btn(深薄荷 #1F7A66)：白图标落在上面是 5.21:1，远超非文本 3:1 的要求。 */ .site-search-form .search-btn { flex: 0 0 15%; display: flex; align-items: center; justify-content: center; height: 46px; background: var(--c-btn); color: var(--c-on-dark); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; transition: opacity var(--t-fast); } .site-search-form .search-btn:hover { opacity: .85; } .site-search-form .search-btn i { width: 18px; height: 18px; background: currentColor; -webkit-mask: var(--ico-search) center / contain no-repeat; mask: var(--ico-search) center / contain no-repeat; } /* 屏幕阅读器专用文本：视觉隐藏但仍参与可访问性树（供