/* ========================================================================== 沉浸首页（hero 版式）样式表 -------------------------------------------------------------------------- 约束（和 app.js / index.html 的配合方式）： 1. 所有规则都限定在 body[data-layout=hero] 里 —— 切回「经典导航 / 专注起点 / 灵感看板 / 效率清单」时本文件**零影响**； 2. 不改既有节点的结构，只覆盖外观；本版式新增节点在没有 hero 时全部隐藏； 3. 桌面端按参考图排：顶栏(品牌+天气+工具) → 分类胶囊行 → 大图 hero (左上日期/一言、居中标题+搜索+热搜、右上天气卡、右中万年历、右下标语) → 分类图标网格(压在 hero 下沿) → 分组卡片 → 页脚上方双广告 → 页脚； 4. 移动端按参考图排：App 顶栏 → 大图 hero(标题) → 悬浮搜索卡 → 天气/日期条 → 四列图标网格 → 常用推荐列表 → 广告轮播 → 页脚 → 底部标签栏。 移动端**不出万年历**（沿用 responsive.css 的窄屏规则）。 ========================================================================== */ /* ------------------------------------------------------------------ 变量 */ body[data-layout=hero] { /* 🔴 本版式的**全部颜色都派生自 styles.css 的皮肤令牌**，不再写死具体色值。 背景：用户报「皮肤里的其他皮肤切换后还是无法应用沉浸首页整个首页页面」。 根因就是这里以前把绿/白写死了 —— 皮肤（写在 :root 或 body.theme-x 上的 --primary / --bg / --text / --card-bg / --border）根本影响不到本版式， 切了皮肤只有顶栏那几颗按钮变色，hero 主体纹丝不动。 改成引用令牌后：内置主题（浅色/深色/海洋/落日）、后台「样式管理」皮肤库里的 任意皮肤，以及各版式自定义 CSS 注入的变量，都会自动贯穿整个沉浸首页。 默认值在 styles.css 的 :root 里（品牌绿 #00a878，取自设计稿 GLCOGO Spec）。 */ --hg: var(--primary); --hg-deep: var(--primary-hover); --hg-soft: var(--primary-soft); --hg-line: var(--border); --hg-ink: var(--text); --hg-muted: var(--muted); --hg-shell: var(--bg); /* 页面底色 = 全站底色，顶栏与内容区因此天然同色 */ --hg-card: var(--card-bg); /* 搜索框里"用户自己打的字"的颜色。见 styles.css 里 .search-inner input 的说明： 那边有一条 `color: ... !important`，hero 想用白字只能走这个变量。 本版式的搜索药丸是 26% 白 + 模糊，永远压在照片上 → 白字配深描边最稳。 */ --search-ink: #fff; /* 二级面：卡片头 / 输入框底。用 color-mix 由主面推出来，深浅色与任意皮肤下都成立。 */ --hg-card-2: color-mix(in srgb, var(--card-bg) 91%, var(--text)); --hg-radius: 18px; --hg-shadow: 0 6px 26px rgba(15, 51, 42, .07); --hg-shadow-lg: 0 14px 40px rgba(15, 51, 42, .13); background: var(--hg-shell); color: var(--hg-ink); } /* 本版式新增节点：默认隐藏，只有 hero 下按需显示 */ .hero-brand, .hero-pills, .hero-hero-date, .hero-slogan, .hero-cat-grid, .hero-search-head, .hero-hot-words, .hero-footer-brand, .hero-tabbar, .hero-mbar, .hero-sheet, .hero-drawer, .hero-search-pop, .hero-footer-contact { display: none; } /* 后台「首页文案管理」/「首页品牌区管理」把某段关掉时，脚本只加一个 .is-off （不删节点、不改结构）。这些节点本来就只属于本版式，所以规则不加前缀也不会波及其它版式。 */ .hero-title.is-off, .hero-subtitle.is-off, .hero-slogan.is-off, #heroBrand.is-off, #heroFooterBrand.is-off { display: none !important; } /* -------------------------------------------------------------- 页面骨架 */ body[data-layout=hero] #app { display: block; min-height: 100vh; } body[data-layout=hero] .sidebar, body[data-layout=hero] .mobile-overlay { display: none !important; } body[data-layout=hero] .content { display: block; width: 100%; min-width: 0; padding: 0; background: transparent; } /* ==================================================================== 顶栏 */ body[data-layout=hero] .info.top-info { position: sticky; top: 0; z-index: 200; height: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 10px clamp(16px, 2.6vw, 30px) 0; /* 用户要求「顶部栏背景色改成和内容区域统一的背景色，并随皮肤切换， 不要永远是一块白」。—— 顶栏本来就是粘在页面上的，用页面底色加一点透明， 滚动时由 blur 把下层内容虚化，既有层次又不会割裂成"一条白带"。 颜色取 --hg-shell（= styles.css 的 --bg），所以切皮肤/切深色它自动跟着变。 */ background: color-mix(in srgb, var(--hg-shell) 84%, transparent); backdrop-filter: saturate(180%) blur(16px); -webkit-backdrop-filter: saturate(180%) blur(16px); border-bottom: 1px solid var(--hg-line); box-shadow: 0 2px 12px rgba(15, 51, 42, .04); font-size: 13px; } /* hero 下顶栏常驻，不参与「下滑隐藏」 */ body[data-layout=hero] .info.top-info.scroll-down { transform: none !important; opacity: 1 !important; pointer-events: auto !important; } /* 品牌区 */ body[data-layout=hero] .hero-brand { display: flex; align-items: center; gap: 10px; padding: 0; margin: 0 10px 0 0; min-width: 0; flex: 0 1 auto; } body[data-layout=hero] .hero-brand-logo { width: 40px; height: 40px; border-radius: 11px; object-fit: cover; flex: 0 0 40px; box-shadow: 0 2px 8px rgba(15, 51, 42, .1); } body[data-layout=hero] .hero-brand-text { display: flex; flex-direction: column; line-height: 1.22; min-width: 0; } body[data-layout=hero] .hero-brand-text strong { font-size: 19px; font-weight: 800; letter-spacing: .01em; color: var(--hg-ink); } body[data-layout=hero] .hero-brand-text small { font-size: 11.5px; color: var(--hg-muted); } /* 顶栏天气芯片 */ body[data-layout=hero] .info.top-info #weather { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 999px; background: var(--hg-soft); color: var(--hg-deep); font-weight: 600; font-size: 12.5px; white-space: nowrap; max-width: 320px; overflow: hidden; text-overflow: ellipsis; } /* 顶栏其余信息项：用户要求「日期时间星期、每日一言、运行时间等内容使用和顶部栏地点天气 一样的样式」，所以这里不再隐藏，而是统一成与上方 #weather 完全一致的绿色软胶囊。 紧凑策略：都给 min-width:0 + 省略号，窄屏按重要性逐级隐藏（见文件末尾的媒体查询）， 避免把四个下拉控件挤出行外。 */ body[data-layout=hero] .info.top-info #dateTime, body[data-layout=hero] .info.top-info #dateExtra, body[data-layout=hero] .info.top-info #siteUptime, body[data-layout=hero] .info.top-info #quote { display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border-radius: 999px; background: var(--hg-soft); color: var(--hg-deep); font-weight: 600; font-size: 12px; white-space: nowrap; flex: 0 1 auto; min-width: 0; max-width: 260px; overflow: hidden; text-overflow: ellipsis; } /* 日期 + 星期视觉上连成一颗（参考图是「9月5日 周五」一颗胶囊）。 */ body[data-layout=hero] .info.top-info #dateExtra { margin-left: -8px; border-top-left-radius: 0; border-bottom-left-radius: 0; } body[data-layout=hero] .info.top-info #dateTime { padding-right: 6px; border-top-right-radius: 0; border-bottom-right-radius: 0; } /* 桌面 hero 不需要侧栏开关（参考图无汉堡） */ body[data-layout=hero] .info.top-info > #toggleSidebar { display: none !important; } /* 顶栏工具按钮：小号胶囊 */ body[data-layout=hero] .info.top-info > .dropdown > .ghost, body[data-layout=hero] .info.top-info #userBtn { height: 38px !important; width: auto !important; min-width: 0 !important; padding: 0 13px !important; border-radius: 999px !important; border: 1px solid var(--hg-line) !important; background: var(--hg-card) !important; color: var(--hg-ink) !important; font-size: 12.5px !important; box-shadow: none !important; } body[data-layout=hero] .info.top-info > .dropdown > .ghost:hover, body[data-layout=hero] .info.top-info #userBtn:hover { border-color: var(--hg) !important; background: var(--hg-soft) !important; color: var(--hg-deep) !important; } body[data-layout=hero] .info.top-info #langBtn { width: auto !important; min-width: 0 !important; } body[data-layout=hero] .info.top-info #pageBtn { width: auto !important; min-width: 0 !important; } body[data-layout=hero] .info.top-info #themeSwitch { width: auto !important; min-width: 0 !important; } /* 账号区：头像**绝不允许被挤压**（用户报障）。 成因：styles.css 里 `#userMenuWrap #userBtn { min-width:156px }`，而 hero 把内边距 改小后，按钮在拥挤的顶栏里仍会被 flex 压窄 → 圆形头像被压成椭圆/被裁切。 这里给按钮与头像都钉死 flex 基准，并在 icon-only（只显头像）时保持正方形热区。 */ body[data-layout=hero] .info.top-info #userBtn { border-color: transparent !important; background: transparent !important; width: auto !important; min-width: 0 !important; max-width: none !important; padding: 0 4px !important; gap: 8px; flex: 0 0 auto !important; flex-shrink: 0 !important; } body[data-layout=hero] .info.top-info #userBtn.icon-only { width: 44px !important; min-width: 44px !important; max-width: 44px !important; padding: 5px !important; gap: 0; } body[data-layout=hero] .info.top-info #userBtn .avatar { width: 32px; height: 32px; flex: 0 0 32px; min-width: 32px; border-radius: 50%; object-fit: cover; } body[data-layout=hero] .info.top-info #btnAuth { border-radius: 999px; padding: 8px 16px; background: var(--hg); border-color: var(--hg); } body[data-layout=hero] .info.top-info #btnAuth:hover { background: var(--hg-deep); border-color: var(--hg-deep); } body[data-layout=hero] .info.top-info .nine-dots { background: radial-gradient(circle, var(--hg-ink) 2.1px, transparent 2.5px) 0 0/7.5px 7.5px; } /* 顶栏元素顺序对齐参考图：品牌(左) → 天气芯片 → 空白 → 工具下拉 → 账号(右) */ body[data-layout=hero] .info.top-info > #heroBrand { order: 1; } body[data-layout=hero] .info.top-info > #weather { order: 2; } body[data-layout=hero] .info.top-info > div:not([class]) { order: 3; } /* 既有的 flex:1 占位块 */ body[data-layout=hero] .info.top-info > #themeDropdown { order: 4; } /* 皮肤 */ body[data-layout=hero] .info.top-info > #layoutDropdown { order: 5; } /* 主题版式 */ body[data-layout=hero] .info.top-info > #pageDropdown { order: 6; } /* 页面切换 */ body[data-layout=hero] .info.top-info > #langDropdown { order: 7; } /* 语言 */ body[data-layout=hero] .info.top-info > #btnKf, body[data-layout=hero] .info.top-info > #btnAuth, body[data-layout=hero] .info.top-info > #quickAppsWrap, body[data-layout=hero] .info.top-info > #userMenuWrap { order: 8; } /* 顶栏右侧四个控件（皮肤 / 主题版式 / 页面切换 / 语言） —— **完全复用经典导航那一套**：按钮文字、下拉菜单、切换逻辑都走原生实现， hero 这里一个字的覆写都不做。 原因：之前用 `font-size:0 + ::after` 把文字换成「🎨 皮肤」这类功能名， 虽然外观接近参考图，但会让用户以为「菜单切换功能丢了」（实际是标签被替换、 与经典导航不一致）。按用户要求：同一套按钮、同一套效果，不另做一套。 所以这里只保留下面这些「尺寸/圆角/配色」的皮肤级调整。 */ /* 顶栏第二行：分类胶囊 */ body[data-layout=hero] .hero-pills { display: flex; align-items: center; gap: 6px; flex: 1 0 100%; order: 20; padding: 2px 0 11px; margin: 0; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; } body[data-layout=hero] .hero-pills::-webkit-scrollbar { display: none; } body[data-layout=hero] .hero-pill { flex: 0 0 auto; height: 36px; padding: 0 13px; display: inline-flex; align-items: center; gap: 5px; border: 0; border-radius: 10px; background: transparent; color: var(--hg-ink); font-size: 13.5px; font-weight: 600; cursor: pointer; white-space: nowrap; transition: background .16s, color .16s; } /* 参考图的胶囊每个前面都有一个小图标（用分类自己在库里配的 icon） */ body[data-layout=hero] .hero-pill-ico { font-size: 14px; line-height: 1; } body[data-layout=hero] .hero-pill-txt { line-height: 1; } body[data-layout=hero] .hero-pill:hover { background: var(--hg-soft); color: var(--hg-deep); } body[data-layout=hero] .hero-pill.active { background: var(--hg); color: #fff; box-shadow: 0 3px 10px rgba(10, 168, 124, .28); } body[data-layout=hero] .hero-pill-more { color: var(--hg-muted); } /* 打开侧栏的按钮在 hero 桌面隐藏后，侧栏本身也被隐藏， 所以点分类胶囊走的是「点击代理」，不需要侧栏可见。 */ /* ================================================================== Hero */ body[data-layout=hero] .topbar { position: relative; } body[data-layout=hero] .topbar.has-carousel { padding-top: 0 !important; } body[data-layout=hero] .carousel-area { /* 版式需要一块底图区域承载标题 / 搜索 / 天气卡 / 万年历；后台关掉轮播时退化为品牌渐变 */ position: relative; display: block !important; /* 主视觉高度：规范文档给的是「约 300–360px」，同时用户要求 「减小轮播背景区域高度，保证网址卡片最少能显示四行」。 取 1440×900 反推：视口 900 − 顶栏 ≈ 118 − 主视觉 − 分区头/筛选项 ≈ 110 ⇒ 主视觉 ≤ 356 才能露出 4 行卡片（4×118 + 3×12 = 508）。故上限 356。 */ height: clamp(318px, 23.6vw, 356px) !important; margin: 0 !important; padding: 0 !important; border-radius: 0 !important; box-shadow: none !important; /* ⚠️ 不能是 hidden：搜索引擎下拉（#engineOverlay）是绝对定位、 从搜索框往下展开的，父级 overflow:hidden 会把它整个裁掉 —— 这就是用户报障的「搜索引擎下拉列表被遮挡」。 */ overflow: visible; background: linear-gradient(120deg, #0b4f63 0%, #0a8f7f 46%, #0aa87c 100%); } body[data-layout=hero] .carousel-area.hidden { display: block !important; } body[data-layout=hero] .carousel-area::after { /* 参考图那种「上方压暗、底部渐隐」的遮罩，保证白字可读 */ background: linear-gradient(180deg, rgba(5, 28, 34, .42) 0%, rgba(5, 28, 34, .10) 42%, rgba(5, 28, 34, .40) 100%) !important; } body[data-layout=hero] .carousel-bg { background-size: cover; background-position: center; } /* 左上：日期 + 农历 + 每日一言 */ body[data-layout=hero] .hero-hero-date { display: block; position: absolute; left: clamp(20px, 2.6vw, 38px); top: clamp(26px, 3vw, 44px); z-index: 21; max-width: 250px; padding: 16px 18px; border-radius: 16px; background: rgba(9, 38, 44, .34); border: 1px solid rgba(255, 255, 255, .16); backdrop-filter: blur(9px); -webkit-backdrop-filter: blur(9px); color: #fff; } body[data-layout=hero] .hero-hero-date .hd-date { font-size: 22px; font-weight: 800; letter-spacing: .01em; } body[data-layout=hero] .hero-hero-date .hd-lunar { font-size: 12.5px; opacity: .82; margin-top: 3px; } body[data-layout=hero] .hero-hero-date .hd-quote { font-size: 12.5px; line-height: 1.7; opacity: .9; margin-top: 13px; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, .22); } body[data-layout=hero] .hero-hero-date .hd-quote:empty { display: none; } /* 居中：标题 / 搜索 / 热搜 —— 三者都以 hero 为坐标系绝对定位， 互不挤压（搜索块整体铺满 hero，内部元素各自定位） */ body[data-layout=hero] #mainSearchWrap, body[data-layout=hero] #mainSearchWrap.carousel-search-float, body[data-layout=hero] .topbar > .search.carousel-search-float { position: absolute !important; left: 0 !important; right: 0 !important; top: 0 !important; bottom: 0 !important; margin: 0 !important; width: auto !important; transform: none !important; /* 要压过下方 z-index:40 的分类图标网格，否则引擎下拉会被瓦片盖住 */ z-index: 60; background: transparent; pointer-events: none; /* 只让内部控件可点，不挡住版式 */ } body[data-layout=hero] #mainSearchWrap > * { pointer-events: auto; } body[data-layout=hero] .hero-search-head { display: block; text-align: center; position: absolute; left: 0; right: 0; top: clamp(40px, 5.1vw, 72px); margin: 0; } body[data-layout=hero] .hero-title { margin: 0; font-size: clamp(26px, 2.9vw, 40px); font-weight: 700; color: #fff; letter-spacing: .16em; text-shadow: 0 3px 22px rgba(0, 0, 0, .42); font-family: "Source Han Serif SC", "Noto Serif SC", "Songti SC", Georgia, serif; } body[data-layout=hero] .hero-subtitle { margin: 7px 0 0; font-size: clamp(11px, .95vw, 13px); color: rgba(255, 255, 255, .92); letter-spacing: .3em; font-weight: 400; text-shadow: 0 2px 12px rgba(0, 0, 0, .42); } body[data-layout=hero] #mainSearchWrap .search-inner { position: absolute; left: 50%; transform: translateX(-50%); bottom: clamp(50px, 5vw, 70px); width: min(640px, calc(100% - 2 * clamp(240px, 21vw, 320px))); height: 58px; display: flex; align-items: center; gap: 8px; padding: 6px 8px 6px 14px; border: 0; border-radius: 999px; /* 用户要求「搜索输入框的背景修改为透明」。 第一版改成了 rgba(255,255,255,.58) —— 用户复测仍报「透明度还是不够」。 实测：.58 白 + blur(16px) 叠在明亮轮播图上，肉眼就是一块白板。 现在收到 .26、模糊度砍到 9px，并保留一圈很淡的内描边维持「玻璃边」轮廓； 文字可读性改由 #searchInput 的深色 + text-shadow 承担（见下方 input 规则）。 */ background: rgba(255, 255, 255, .26); -webkit-backdrop-filter: blur(9px) saturate(1.2); backdrop-filter: blur(9px) saturate(1.2); box-shadow: 0 10px 34px rgba(6, 32, 38, .18), inset 0 0 0 1px rgba(255, 255, 255, .34); /* ⚠️ 这行 z-index 是必须的，别删 —— 它修的是用户报的「搜索引擎下拉列表被热搜遮挡」。 机制：本元素有 transform（translateX 居中），而 **transform 会创建层叠上下文**； 于是它内部的 #engineOverlay 虽然写了 z-index:90，那个 z-index 只在本上下文内有效， 对外完全不参与比较；而本元素自身 z-index 原本是 auto，于是被同为绝对定位的 #heroHotWords（z-index:72）整块盖住 —— 下拉明明展开了，点下去却点到热搜上。 实测证据：下拉框 rect[448,318,640,320] 与热搜区重叠，重叠点 elementFromPoint 返回 `heroHotWords` 而非下拉层。给它一个高于热搜的 z-index，下拉就真正在最上层了。 */ z-index: 96; } body[data-layout=hero] #mainSearchWrap .search-inner:focus-within { box-shadow: 0 12px 38px rgba(6, 32, 38, .32); } /* 引擎选择器 → 参考图里的「全网 ▾」左芯片 */ body[data-layout=hero] #mainSearchWrap .engine-icon { order: -1; position: static !important; width: auto !important; height: 42px !important; /* 用户要求「引擎图标居中对齐」。 原值 `0 13px 0 4px` 是不对称的：左 4 右 13 是**给已经删掉的下拉小三角留位**， 箭头一去，图标就被这 9px 的差值顶偏了。 实测（1440 视口）：药丸 x=414 宽 41 ⇒ 圆心 434.5，而图标实际中心 430 —— 偏左 4.5px。 改成左右等值时，图标中心 = 药丸中心（下面实测复核过）。 那条 border-right 是「引擎 | 输入框」的分隔线，跟着盒宽走，不受影响。 */ padding: 0 9px; margin: 0 !important; display: inline-flex !important; align-items: center; gap: 7px; border-radius: 999px; border-right: 1px solid var(--hg-line); background: transparent; transform: none !important; } /* 用户要求「搜索引擎下拉列表按钮的下拉箭头去掉，只需要点击搜索引擎图标即可打开下拉列表」。 ::after 就是那颗画出来的小三角。这里不是删规则、而是把 content 置空并保留占位， 便于日后回滚；点击行为本来就在 #engineIcon 上（app.js 的 bindDropdownToggle）， 图标本身一直可点，去掉箭头不影响展开。 */ body[data-layout=hero] #mainSearchWrap .engine-icon::after { content: none; } body[data-layout=hero] #mainSearchWrap .engine-icon img { width: 22px !important; height: 22px !important; } /* ⚠️ 这里以前用 ::before 打了「全网」两个字。 用户要求「去掉移动端和网页版搜索输入框的搜索引擎选择左侧的全网两个字， 只显示切换选择的搜索引擎图标」→ content 设为 none（保留规则占位，便于日后回滚）。 */ body[data-layout=hero] #mainSearchWrap .engine-icon::before { content: none; } body[data-layout=hero] #mainSearchWrap .search-input-stack { flex: 1 1 auto; min-width: 0; } body[data-layout=hero] #mainSearchWrap #searchInput { height: 42px; border: 0; background: transparent; color: #fff; font-size: 14.5px; padding: 0; /* 用户要求「提示文字改成淡白色」。 药丸底色是 26% 白 + 9px 模糊，压在任意轮播图上 —— 白字在**明亮**图片上会糊， 所以用一圈**深色**描边把字从亮底里"挖"出来（压图白字的标准做法， 和之前给深色字配白晕是同一个原理，方向相反而已）。 */ text-shadow: 0 1px 3px rgba(0, 0, 0, .42), 0 0 1px rgba(0, 0, 0, .3); } body[data-layout=hero] #mainSearchWrap #searchInput::placeholder { color: rgba(255, 255, 255, .88); text-shadow: 0 1px 3px rgba(0, 0, 0, .38), 0 0 1px rgba(0, 0, 0, .28); } /* 🔴 三小工具（图片识别 / 语音输入 / 站内搜索）—— 用户 2026-09-15 二次澄清： 「我是让你放到**搜索输入框里**、搜索按钮**左下角**位置，不是让你把它移出搜索输入框； 还有这三个按钮**不需要单独添加背景**」。 所以位置口径 = **框内 + 紧贴搜索键左侧**，且**不自绘背景**。 实现上就是「待在胶囊内容流里」—— DOM 里 `.search-mini-tools` 本就排在 `.search-submit-tools` 之前，flex 顺序自然给出「搜索键左侧」，与参考图一致。 上一版（≥1260px 飘到胶囊左侧外侧 + 深色磨砂药丸）整体删除：那版把按钮移出了输入框， 还多了一层独立背景，正是用户否掉的。 ⚠️ hero 选择器特异性 (1,2,1) 高于 styles.css 的 (0,1,0)，所以「剥掉背景」这件事 必须在 hero 这条里再写一遍（否则 styles.css 的绘制会被 hero 基础规则之外的老规则压回）。 🔴 2026-09-15 **第四次澄清**：「三个按钮位置**还是太高了**，现在是**和搜索按钮平行并排** 显示，需要移动到**搜索按钮左下角**显示」。 ⚠️ 这里踩过「盒子贴底 ≠ 图标贴底」的坑：第一版只加 `align-self: flex-end` → 盒子底边确实与搜索键底边齐平（y=260..292 = 搜索键 246..292），**用户看图仍说太高**。 因为按钮盒 32px 而 SVG 字形只有 16~18px 且**居中**，字形中心落在「盒底 - 16px」， 视觉重心仍在胶囊中部。 ⇒ 第二版再加 `margin-bottom: -6px`（= `#searchInner` 自己的 6px 下内边距）， 盒子越过内容盒下沿落到胶囊外沿（y=298），字形实际 y≈273..291。 **但用户仍未认可**（第四次口径照旧「太高」）。 ⇒ 2026-09-15 第四次定案（**已被第五次覆盖**）：`margin-bottom: -12px`， 「在 -6 基础上再下沉 6px」—— 该版字形实际 y≈279..297。 🔴 2026-09-15 **第五次口径**（用户回看后报：「有些靠下了溢出搜索输入框边框了」）： ⚠️ 第四次错在**零余量** —— 字形底边 298 **正好等于**胶囊底边 298， 再叠加 `.search-tool svg{filter:drop-shadow(0 1px 1.6px)}` 向下外扩 ≈2.6px ⇒ 视觉上就是压线/掉出边框（把用户截图做像素解析也印证了这一点： 绿色搜索键 46×46、图标白描边底边与胶囊底边落在**同一像素行**）。 ✅ 定案判据（两条必须同时满足）：① 字形底边 ≤ 胶囊底边 − 4px； ② 字形底边 ≥ 搜索键底边（仍属"搜索键左下角"）。 ⇒ 取 `margin-bottom: -8px`，即**在第四次基础上回撤 4px**； 实测字形 y275..294、距胶囊底 4px、比搜索键底边低 2px。 ⚠️ **已知项（2026-09-15 实测，不再改动）**：hero 的**按钮盒**底边比胶囊底边低 2px （盒高 32px 而字形 19px 居中）。盒子平时透明无背景 → 不可见； hover 时会临时套上 `rgba(255,255,255,.24)`，该背景块底边因而露出胶囊 2px。 已用 5× 最近邻放大取证（`crop-zoom.mjs`）：24% 白叠在本身半透明的胶囊上， **2px 差异不可辨**，故不为此再改（避免第 6 次口径变动）。 若将来要给它**常驻背景**，必须先把盒高 32→28 或 margin 回撤到 -6px （该组合实测盒底 298 = 胶囊底、字形底 293.5 仍有 4.5px 余量）。 跨断点复核（1023/1024/1180/1200/1250/1400/1600）： 全部 `dGlyphVsPill = -4`、`dGlyphVsSub = +2`、`docOvX = 0`。 ⚠️ 至此这是本条的**第五次**口径（外飘 → 框内居中 → 盒底贴底 → 字形压线 → 留余量）， 改这里之前先确认用户当前口径，别把历史结论当成回归。 （窄屏那条在下面 :1375，margin 是 `-6px` —— 窄屏是白卡片、两行栅格， 实测字形距卡片底 6px，本来就安全，**没有跟着改**。） */ body[data-layout=hero] #mainSearchWrap .search-mini-tools { position: static; left: auto; right: auto; bottom: auto; top: auto; align-self: flex-end; align-items: center; justify-content: flex-end; padding: 0; margin: 0 4px -8px 0; gap: 2px; border: 0; border-radius: 0; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; } /* 用户要求「图片识别 / 语音输入 / 站内搜索三个按钮改成白色，更明显」。 ⚠️ 必须在这个带 id 的选择器上改 —— styles.css:1431 的 `.search-mini-tools .search-tool{color:#fff}` 特异性只有 (0,2,0)， 而本条是 (1,3,2)，灰色 var(--hg-muted) 一直压着它，白色从来没生效过。 */ body[data-layout=hero] #mainSearchWrap .search-tool { color: #fff; width: 32px; height: 32px; background: transparent; } body[data-layout=hero] #mainSearchWrap .search-tool:hover { color: #fff; background: rgba(255, 255, 255, .24); } body[data-layout=hero] #mainSearchWrap .search-tool svg { stroke: currentColor; } /* 站内开关的「小圆点」描边原本是白 90%，在更透明的药丸上会糊掉，加深一档 */ body[data-layout=hero] #mainSearchWrap .site-search-tool .site-search-dot { border-color: rgba(255, 255, 255, .95); } /* 绿色圆形搜索键 */ body[data-layout=hero] #mainSearchWrap .search-submit-tools { min-width: 46px; width: 46px; height: 46px; align-self: center; border-radius: 50%; background: var(--hg); overflow: hidden; flex: 0 0 46px; } body[data-layout=hero] #mainSearchWrap #searchBtn { width: 100%; height: 100%; min-width: 0; min-height: 0; padding: 0; border-radius: 50%; background: transparent; font-size: 0; /* 隐藏文字，只留圆形 */ line-height: 0; /* ⚠️ 必须 position:relative + 块级：原来这里是 `display:grid; place-items:center`， 看着该居中，实测却偏上 2.5px、偏左 0.5px（用户两次报「搜索按钮图标位置偏移/没有居中对齐」）。 原因有两层： ① 按钮里除了 ::before 还有一个「搜索」文本节点，font-size:0 让它变成 0×0 的匿名 grid 项， 于是 grid 里其实是 2 个轨道，align-content 落到 normal(=stretch) 后行盒定位不可预期； ② mask 的 viewBox 是 0 0 24 24，但字形包围盒是 4.4~20.2（中心 12.3 而非 12）， 按 contain 缩放后字形本身就偏左上。 所以这里改成「绝对定位 + translate(-50%,-50%)」用几何保证居中（见下面的 ::before）， 并把 mask 的 viewBox 平移成 0.3 0.3 24 24，让字形包围盒中心正好等于盒子中心。 实测证据（390 与 1536 两个视口，量白色字形 bbox 中心与绿圆圆心之差）： 修复前 dx=+0.5 dy=-6.5；修复后 dx/dy 均在 ±0.5px 内。 */ position: relative; display: block; } body[data-layout=hero] #mainSearchWrap #searchBtn::before { content: ''; position: absolute; left: 50%; top: 50%; width: 19px; height: 19px; margin: 0; transform: translate(-50%, -50%); background: #fff; -webkit-mask: url("data:image/svg+xml;utf8,") center/contain no-repeat; mask: url("data:image/svg+xml;utf8,") center/contain no-repeat; } body[data-layout=hero] #mainSearchWrap .search-submit-tools:hover { background: var(--hg-deep); } /* 搜索历史面板对齐圆角 */ body[data-layout=hero] #mainSearchWrap .search-history { border-radius: 16px; } /* 热搜词：贴着搜索框下方 */ body[data-layout=hero] .hero-hot-words { display: flex; align-items: center; justify-content: center; gap: 8px; position: absolute; left: 0; right: 0; bottom: clamp(12px, 1.4vw, 20px); /* 🔴 2026-09-15 修用户报障「切英文后有些文字描述会错位，例如热搜」。 根因（已用无头 Chrome 量到）：本块是 `position:absolute; bottom:…` 锚定的 —— **下边缘固定、上边缘随内容上移**。而上面 `.search-inner` 的下沿只比这里高 约 14px（见 1944 行与文件末尾的微调块），一旦这一段换成英文，chip 变长 → 触发 `flex-wrap: wrap` 换到第二行 → 容器高度 28→52px，多出来的高度只能**向上长**， 于是「🔥 热搜」那行被搜索框整块压住（实测 `.hw-label` 与 `.search-inner` 重叠 86×10px，且 `elementFromPoint(标签中心)` 命中搜索框而不是标签本身）。 中文下 chip 短、不换行，所以一直没暴露。 修法：① 可用宽度 640 → min(1080px,94vw)，英文一行放得下（1440 下实测内容宽 676px）； ② 容器与列表都锁死单行 + 隐藏溢出 —— 高度恒等于一行， **结构上不可能再向上顶到搜索框**（宁可裁掉排不下的词）。 移动端（≤767px）这一整行本来就是 `display:none`（见下方媒体查询），不受影响。 */ max-width: min(1080px, 94vw); margin: 0 auto; flex-wrap: nowrap; overflow: hidden; } body[data-layout=hero] .hw-label { flex: 0 0 auto; font-size: 12.5px; color: rgba(255, 255, 255, .92); font-weight: 600; display: inline-flex; align-items: center; gap: 3px; text-shadow: 0 2px 10px rgba(0, 0, 0, .45); } body[data-layout=hero] .hw-label::before { content: '🔥'; font-size: 12px; } body[data-layout=hero] .hw-list { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; justify-content: center; } body[data-layout=hero] .hero-hot-words .hw-list { flex-wrap: nowrap; min-width: 0; overflow: hidden; } body[data-layout=hero] .hw-chip { height: 28px; padding: 0 14px; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .2); color: #fff; font-size: 12px; font-weight: 500; cursor: pointer; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); transition: background .16s; } body[data-layout=hero] .hw-chip:hover { background: rgba(255, 255, 255, .38); } /* 英文态的 chip 天然比中文宽（"AI Search" vs "AI搜索"），整行会向右多出约 120px， 于是在 1280 这类窄桌面上就会压到右下角标语的装饰渐隐线（中文下不会，因为整行只有 ~566px）。 这里把英文态的 chip 内边距与间距略收紧，让整行宽度回到与中文相当（约 563px）， 保证「英文不引入中文没有的重叠」。实测见 .chk 记录。 */ html[lang="en"] body[data-layout=hero] .hw-chip { padding: 0 8px; } html[lang="en"] body[data-layout=hero] .hero-hot-words { gap: 5px; } html[lang="en"] body[data-layout=hero] .hero-hot-words .hw-list { gap: 5px; } /* 窄桌面：右下角标语与热搜行**在几何上互斥**，必须让一个。 两者都水平居中/贴右，互不重叠的条件是 vw ≥ 2 × (热搜行半宽 + 标语右边距 + 标语宽) 实测（2026-09-15，无头 Chrome 逐宽度量重叠像素）： ┌────────────┬───────┬────────┬────────┐ │ 语言 │ 768 │ 1024 │ 1280+ │ ├────────────┼───────┼────────┼────────┤ │ 中文(行560)│ 67px ✗│ 0 ✓ │ 0 ✓ │ ← 768 的重叠是**既有问题** │ 英文(行564)│178px ✗│ 63px ✗ │ 0 ✓ │ ← 英文 chip 天然更长，多一档 └────────────┴───────┴────────┴────────┘ （上面已让英文 chip 收紧内边距，把整行从 676 压回 564，与中文齐平； 剩下的差距纯粹来自标语本身英文更长。） 取舍：热搜词是**功能入口**（点一下就能搜），标语只是装饰文案 —— 在「放不下」的区间隐藏标语。移动端 ≤767 本来就是 display:none（见下方媒体查询）。 若站长要求「标语在任何宽度都必须出现」，替代方案是把该区间的热搜行改左对齐 （牺牲居中观感）—— 但别让两者继续叠在一起。 */ @media (min-width: 768px) and (max-width: 1023px) { body[data-layout=hero] .hero-slogan { display: none !important; } } @media (min-width: 1024px) and (max-width: 1279px) { html[lang="en"] body[data-layout=hero] .hero-slogan { display: none !important; } } /* 右上：天气卡 + 万年历卡 —— **两张并排**（用户明确要求，之前是上下堆叠）。 并排后两张卡都不再压到搜索框：卡片顶部 22px、底部约 212px， 搜索框顶边约 228px，纵向错开。 */ body[data-layout=hero] #carouselWeather.carousel-side, body[data-layout=hero] #carouselWeather.carousel-side.left { position: absolute !important; left: auto !important; right: calc(clamp(18px, 2.4vw, 34px) + 214px) !important; /* 让出右边万年历卡的位置 */ top: clamp(14px, 1.6vw, 22px) !important; bottom: auto !important; width: 204px !important; max-width: 204px; height: auto !important; max-height: 136px; overflow: hidden; order: initial; padding: 11px 13px !important; border-radius: 14px; background: rgba(255, 255, 255, .96) !important; backdrop-filter: blur(6px) !important; -webkit-backdrop-filter: blur(6px) !important; box-shadow: 0 12px 32px rgba(6, 32, 38, .2); color: var(--hg-ink) !important; text-shadow: none !important; z-index: 22; } body[data-layout=hero] #carouselWeather .cw-title { font-size: 10.5px; font-weight: 700; color: var(--hg-deep) !important; opacity: 1; margin-bottom: 3px; } body[data-layout=hero] #carouselWeather .cw-now { color: var(--hg-ink) !important; display: flex; flex-direction: column; gap: 0; line-height: 1.15; } body[data-layout=hero] #carouselWeather .cw-now br { display: none; } body[data-layout=hero] #carouselWeather .cw-now small { order: -1; font-size: 10.5px !important; color: var(--hg-muted); opacity: 1 !important; } body[data-layout=hero] #carouselWeather .cw-now span { font-size: 21px !important; font-weight: 800 !important; } body[data-layout=hero] #carouselWeather .cw-forecast { display: flex !important; gap: 4px !important; margin-top: 7px !important; max-width: none; } body[data-layout=hero] #carouselWeather .cw-forecast .day { flex: 1 1 0; min-width: 0; padding: 5px 2px !important; border: 0 !important; border-radius: 8px; background: var(--hg-soft) !important; color: var(--hg-ink) !important; font-size: 9px !important; line-height: 1.4; text-align: center; } body[data-layout=hero] #carouselWeather .cw-forecast .day b { font-weight: 700; display: block; color: inherit !important; } /* 右中：万年历（桌面出、窄屏沿用既有规则不出） */ body[data-layout=hero] #calendarWidget.carousel-side, body[data-layout=hero] #calendarWidget.carousel-side.right { position: absolute !important; left: auto !important; right: clamp(18px, 2.4vw, 34px) !important; top: clamp(14px, 1.6vw, 22px) !important; bottom: auto !important; /* 与天气卡同一行顶部对齐 */ width: 204px !important; max-width: 204px; padding: 10px 12px !important; border-radius: 16px; background: rgba(255, 255, 255, .96) !important; backdrop-filter: blur(6px) !important; -webkit-backdrop-filter: blur(6px) !important; border: 1px solid var(--hg-line); box-shadow: 0 12px 32px rgba(6, 32, 38, .2); color: var(--hg-ink) !important; text-shadow: none !important; justify-content: flex-start; z-index: 22; } /* 参考图的月度视图只有日期数字；农历/节日小字收起来，节奏更干净 */ body[data-layout=hero] #calendarWidget .cw-lunar, body[data-layout=hero] #calendarWidget .cw-fest, body[data-layout=hero] #calendarWidget .cw-term { display: none !important; } body[data-layout=hero] #calendarWidget .cw-cell { min-height: 0 !important; padding: 0 !important; } body[data-layout=hero] #calendarWidget .cw-title { font-size: 11.5px; font-weight: 700; color: var(--hg-deep) !important; opacity: 1; } body[data-layout=hero] #calendarWidget .cw-month-head { margin: 5px 0 5px; } body[data-layout=hero] #calendarWidget .cw-month-title { font-size: 12.5px; font-weight: 700; color: var(--hg-ink); } body[data-layout=hero] #calendarWidget .cw-month-nav { width: 21px; height: 21px; border-radius: 7px; border: 1px solid var(--hg-line); background: var(--hg-card); color: var(--hg-muted); cursor: pointer; line-height: 1; } body[data-layout=hero] #calendarWidget .cw-month-nav:hover { background: var(--hg-soft); color: var(--hg-deep); border-color: var(--hg); } body[data-layout=hero] #calendarWidget .cw-month-dow { display: grid; grid-template-columns: repeat(7, 1fr); font-size: 9.5px; color: var(--hg-muted); text-align: center; margin-bottom: 2px; } body[data-layout=hero] #calendarWidget .cw-month-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; } body[data-layout=hero] #calendarWidget .cw-month-grid > * { font-size: 10.5px; line-height: 18px; height: 18px; text-align: center; border-radius: 6px; color: var(--hg-ink); } body[data-layout=hero] #calendarWidget .cw-day.today, body[data-layout=hero] #calendarWidget .cw-month-grid .today { background: var(--hg); color: #fff !important; font-weight: 700; } body[data-layout=hero] #calendarWidget .cw-day.other-month { color: #b9c7c3; } /* 右下标语：参考图里那行手写感的「探索更大的世界」——斜体衬线、右对齐、 字距拉开，左侧带一小段渐隐的装饰线。 */ body[data-layout=hero] .hero-slogan { display: flex; align-items: center; justify-content: flex-end; gap: 10px; position: absolute; right: clamp(20px, 2.4vw, 34px); bottom: clamp(16px, 1.8vw, 26px); z-index: 21; color: rgba(255, 255, 255, .97); font-size: clamp(13px, 1.1vw, 17px); font-weight: 600; font-style: italic; letter-spacing: .26em; text-shadow: 0 2px 16px rgba(0, 0, 0, .55); font-family: "Source Han Serif SC", "Noto Serif SC", "Songti SC", Georgia, serif; pointer-events: none; } body[data-layout=hero] .hero-slogan::before { content: ''; width: clamp(24px, 3.4vw, 52px); height: 1px; background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .85)); } /* ============================================== 分类图标网格（压在 hero 下沿） */ /* ⚠️ 这里曾经加过一条 `::before` —— 在分类网格顶部铺一层「页面底色 → 透明」的渐隐遮罩， 用来把轮播图的下沿在左右两侧"化开"（当时的需求是"改为渐隐模糊样式"）。 现已按用户要求**撤掉**（原话：「将轮播背景和分类卡片区域接触的两侧接触区域底部 **改回原来接触样式**」）。撤掉的做法就是整段删除：不保留注释掉的选择器， 免得将来有人以为它还在生效、又去找为什么看不到效果。 现在轮播图与分类卡片之间就是**原来的直接压接**：分类网格用负 margin 上提一点点， 盖在轮播图下沿上，形成一条清晰的接触边。 */ body[data-layout=hero] .hero-cat-grid { display: block; position: relative; z-index: 40; /* 只上提一点点：上提太多会盖住 hero 底部那行热搜词（实测 -30px 时重叠 9px） */ margin: calc(-1 * clamp(8px, .9vw, 14px)) auto 0; padding: 0 clamp(12px, 1.7vw, 24px); max-width: 1560px; } body[data-layout=hero] .hcg-list { display: grid; grid-template-columns: repeat(var(--hcg-cols, 10), minmax(0, 1fr)); gap: 6px 4px; padding: 20px clamp(10px, 1.6vw, 22px) 16px; background: var(--hg-card); border-radius: var(--hg-radius); box-shadow: var(--hg-shadow); } body[data-layout=hero] .hcg-item { display: flex; flex-direction: column; align-items: center; gap: 9px; padding: 8px 4px; border: 0; border-radius: 14px; background: transparent; cursor: pointer; transition: background .16s, transform .16s; } body[data-layout=hero] .hcg-item:hover { background: var(--hg-soft); transform: translateY(-2px); } body[data-layout=hero] .hcg-ico { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; font-size: 26px; line-height: 1; background: var(--hcg-bg, var(--hg-soft)); box-shadow: 0 6px 16px rgba(15, 51, 42, .12); } body[data-layout=hero] .hcg-name { font-size: 12.5px; font-weight: 600; color: var(--hg-ink); text-align: center; line-height: 1.25; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } body[data-layout=hero] .hcg-item.active .hcg-name { color: var(--hg-deep); } body[data-layout=hero] .hcg-item.active .hcg-ico { box-shadow: 0 0 0 3px var(--hg-soft), 0 6px 16px rgba(15, 51, 42, .16); } body[data-layout=hero] .hcg-toggle { display: block; margin: 10px auto 2px; border: 0; background: transparent; cursor: pointer; font-size: 12.5px; color: var(--hg-muted); font-weight: 600; } body[data-layout=hero] .hcg-toggle:hover { color: var(--hg-deep); } /* ============================================================ 内容分区 */ /* 内容两侧留白统一由 --hg-side 控制（分类条 / 卡片区 / 广告栏三者共用）， --hg-inset 是「卡片相对区块再内缩多少」——分类图标与网址卡片用同一个值， 这样两边的可视左边缘严格对齐，同时都不贴着区块边界。 历史：这里原本还写着 max-width:1560px（后被 1760px 覆盖）， 在 1920 视口下每侧会空出 80px，而广告栏只有 16px —— 这就是用户 「两侧留白太宽 / 三个区域留白不一致」的根因。现在取消 max-width。 */ body[data-layout=hero] { --hg-side: clamp(10px, 1vw, 16px); --hg-inset: clamp(10px, 1vw, 14px); } body[data-layout=hero] .cards-sections { display: flex; flex-direction: column; gap: 16px; padding: 18px var(--hg-side) 30px; margin: 0; width: 100%; max-width: none; } body[data-layout=hero] .cards-sections > .section, body[data-layout=hero] .cards-sections > section { /* 用户要求「网址卡片区域的背景和网站整体背景融为一体，不要显示白色背景， 但是又要区分两个层级，背景用同一个」。 所以面板底色改成透明（跟页面底色同一个），层级由两层承担： ① 卡片自身仍是白底 + 圆角投影（明显高一层）； ② 相邻分区之间用一条极淡的分隔线。 原来的 `background:#fff` + 投影会让整块卡片区看起来是一张漂浮的大白卡。 */ background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; padding: 12px var(--hg-inset) 14px !important; margin: 0 !important; } body[data-layout=hero] .cards-sections > section + section, body[data-layout=hero] .cards-sections > .section + section, body[data-layout=hero] .cards-sections > section + .section { border-top: 1px solid rgba(15, 80, 70, .07) !important; } body[data-layout=hero] .section-title { display: flex; align-items: center; gap: 9px; font-size: 17px; font-weight: 800; color: var(--hg-ink); margin: 0 0 14px; } body[data-layout=hero] .section-title::before { content: ''; width: 4px; height: 19px; border-radius: 3px; background: var(--hg); flex: 0 0 4px; } body[data-layout=hero] .section-title .icon { display: none; } /* 参考图用左侧绿条代替 emoji */ body[data-layout=hero] .section-title .text { flex: 1 1 auto; min-width: 0; } /* 分区右上角「更多 ›」 */ body[data-layout=hero] .section-more { flex: 0 0 auto; border: 0; background: transparent; cursor: pointer; font-size: 12.5px; color: var(--hg-muted); font-weight: 600; padding: 4px 2px; } body[data-layout=hero] .section-more:hover { color: var(--hg-deep); } /* 子分类 Tab → 参考图的圆角药丸 */ body[data-layout=hero] .cat-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; padding: 0; } body[data-layout=hero] .cat-tab { height: 32px; padding: 0 15px; display: inline-flex; align-items: center; gap: 5px; border: 0; border-radius: 9px; background: #f4f8f7; color: var(--hg-ink); font-size: 12.5px; font-weight: 600; cursor: pointer; transition: background .16s, color .16s; } body[data-layout=hero] .cat-tab:hover { background: var(--hg-soft); color: var(--hg-deep); } body[data-layout=hero] .cat-tab.active { background: var(--hg); color: #fff; box-shadow: 0 3px 10px rgba(10, 168, 124, .26); } body[data-layout=hero] .cat-tab > span:first-child { font-size: 13px; } /* 卡片栅格：**一行最多 5 个**。 用户 2026-09-15 明确拍板「站点卡片一行修改为最多显示五个」—— 覆盖此前「按规范 4 列」的口径（这是同一需求第三次改口径，以最新为准）。 宽屏 5 列，往下依次降列，避免卡片被压到读不清。 */ body[data-layout=hero] #cards .cards { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; padding: 0; } @media (min-width: 1400px) { body[data-layout=hero] #cards .cards { grid-template-columns: repeat(5, minmax(0, 1fr)); } } @media (min-width: 1200px) and (max-width: 1399px) { body[data-layout=hero] #cards .cards { grid-template-columns: repeat(4, minmax(0, 1fr)); } } @media (min-width: 992px) and (max-width: 1199px) { body[data-layout=hero] #cards .cards { grid-template-columns: repeat(4, minmax(0, 1fr)); } } body[data-layout=hero] #cards .card.new-layout { display: grid; grid-template-columns: 42px minmax(0, 1fr); column-gap: 12px; padding: 14px 14px 8px; background: var(--hg-card); border: 1px solid var(--hg-line); border-radius: 14px; box-shadow: none; min-height: 0; transition: border-color .16s, box-shadow .16s, transform .16s; } body[data-layout=hero] #cards .card.new-layout:hover { border-color: color-mix(in srgb, var(--hg) 42%, var(--hg-line)); box-shadow: 0 8px 22px rgba(15, 51, 42, .09); transform: translateY(-2px); } body[data-layout=hero] #cards .card-logo, body[data-layout=hero] #cards .card-logo img { width: 42px; } body[data-layout=hero] #cards .card-logo img { height: 42px; border-radius: 11px; border: 1px solid var(--hg-line); background: var(--hg-card-2); } body[data-layout=hero] #cards .card-title { font-size: 14px; font-weight: 700; color: var(--hg-ink); } body[data-layout=hero] #cards .card-title:hover { color: var(--hg-deep); } /* hero 版式的标签只改「尺寸」，颜色统一交给 styles.css 的 tag-c0~c7 变量 （2026-09-15 用户要求「所有主题版式都要有标签配色」→ 颜色必须只有一处定义， 否则 hero 一套、其它版式一套，日后必然走偏）。 `#e9f8f4 / #0e9c86` 保留为**兜底**：没有色号的历史标签（如别处复用的 .tag）仍是原来的品牌绿。 */ body[data-layout=hero] #cards .card-tags .tag { font-size: 10.5px; padding: 1.5px 7px; border-radius: 5px; background: var(--tag-bg, #e9f8f4); color: var(--tag-fg, #0e9c86); font-weight: 600; } body[data-layout=hero] #cards .card-desc { font-size: 12px; color: var(--hg-muted); margin-top: 3px; } body[data-layout=hero] #cards .card-actions { grid-column: 1 / -1; display: flex; align-items: center; margin-top: 10px; padding-top: 9px; border-top: 1px solid var(--hg-line); } body[data-layout=hero] #cards .card-actions .ghost.small { flex: 1 1 0; min-width: 0; font-size: 11.5px; color: var(--hg-muted); font-weight: 600; border: 0; background: transparent; padding: 4px 2px; } body[data-layout=hero] #cards .card-actions .ghost.small:hover { background: var(--hg-soft); color: var(--hg-deep); } body[data-layout=hero] #cards .card-actions .ghost.small.faved { color: #e8a52c; } body[data-layout=hero] .empty-state { background: var(--hg-card); border-radius: var(--hg-radius); padding: 42px 20px; } /* 公告条 */ body[data-layout=hero] .announcement-banner { max-width: 1360px; margin: 0 auto 12px !important; padding: 0 clamp(16px, 3vw, 34px); background: transparent; border: 0; } /* ================================================================ 广告 */ /* 只接管「页脚上方」这一条（#adRowFooter）；公告下方那条 #adRowHome 保持既有四列样式 */ body[data-layout=hero] #adRowFooter { display: grid; /* 用户要求「最多横向并排显示四个广告」：列数由脚本按实际条数写入 --ad-cols （1→1 列、2→2 列、3→3 列、≥4→4 列），默认按 4 列兜底 */ grid-template-columns: repeat(var(--ad-cols, 4), minmax(0, 1fr)); gap: 12px; padding: 0; margin: 0; } body[data-layout=hero] #adRowFooter { position: relative; } body[data-layout=hero] #adRowFooter.hidden { display: none; } body[data-layout=hero] #adRowFooter .ad-card { position: relative; display: block; height: 88px; border-radius: 12px; overflow: hidden; border: 1px solid var(--hg-line); background: var(--hg-card); box-shadow: none; transition: box-shadow .16s, transform .16s; } body[data-layout=hero] #adRowFooter .ad-card:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(15, 51, 42, .12); } body[data-layout=hero] #adRowFooter .ad-card > img, body[data-layout=hero] #adRowFooter .ad-card > video { position: absolute; inset: 0; width: 100% !important; height: 100% !important; object-fit: cover; max-width: none; max-height: none; } /* 「广告」角标（参考图右上角） */ body[data-layout=hero] #adRowFooter .ad-card::before { content: '广告'; position: absolute; right: 8px; top: 8px; z-index: 3; font-size: 10px; line-height: 1; padding: 3px 6px; border-radius: 4px; background: rgba(255, 255, 255, .82); color: #7a8a86; font-weight: 600; } /* 广告说明浮层（app.js 已渲染 .ad-cap）。 参考图里桌面端与移动端是同一套处理：**整幅图不被遮**，标题/副标题居中压在图上（深色字 + 白色柔光， 保证在任何底图上都读得清），「立即查看」是右侧一颗白色胶囊；桌面端不出左右箭头与指示点。 */ body[data-layout=hero] #adRowFooter .ad-card .ad-cap { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; justify-content: center; gap: 4px; align-items: center; text-align: center; padding: 0 132px; /* 左右等距，标题才是真正在卡片居中（右侧留给 CTA 胶囊） */ background: none; color: var(--hg-ink); /* 参考图的广告底图中心是亮色，所以文案用深色。 但后台可以换任意底图（现在是雪山 / 夜景两张），深字压在暗图上会读不清 —— 用多层白色柔光代替「白色面板」，既保住参考图的「整幅图不被遮」，又保证任何底图都读得清。 */ text-shadow: 0 1px 2px rgba(255, 255, 255, .95), 0 0 10px rgba(255, 255, 255, .9), 0 0 24px rgba(255, 255, 255, .7); } body[data-layout=hero] #adRowFooter .ad-card .ad-cap-title { font-size: 17px; font-weight: 800; letter-spacing: .02em; } body[data-layout=hero] #adRowFooter .ad-card .ad-cap-desc { font-size: 12px; color: #3d504a; letter-spacing: .04em; } body[data-layout=hero] #adRowFooter .ad-card .ad-cap-cta { position: absolute; right: 22px; top: 50%; transform: translateY(-50%); padding: 9px 20px; border-radius: 999px; background: var(--hg-card); color: var(--hg-ink); font-size: 12.5px; font-weight: 700; box-shadow: 0 4px 14px rgba(15, 51, 42, .16); } body[data-layout=hero] #adRowFooter .ad-card:hover .ad-cap-cta { background: var(--hg); color: #fff; } /* 并排 3 条及以上时卡片变窄，文案与 CTA 要一起收紧，否则标题被挤成竖排 */ body[data-layout=hero] #adRowFooter.ad-dense .ad-card .ad-cap { padding: 0 92px 0 74px; gap: 2px; } body[data-layout=hero] #adRowFooter.ad-dense .ad-card .ad-cap-title { font-size: 14.5px; } body[data-layout=hero] #adRowFooter.ad-dense .ad-card .ad-cap-desc { font-size: 11px; } body[data-layout=hero] #adRowFooter.ad-dense .ad-card .ad-cap-cta { right: 12px; padding: 7px 14px; font-size: 11.5px; } body[data-layout=hero] #adRowFooter .ad-card .ad-text-fallback { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; gap: 3px; } /* 广告的「左右箭头 + 指示点」只有移动端用（桌面端并排，不需要翻页）。 ⚠️ 这三条**故意不加 hero 前缀**：它们是本版式用 JS 新建的节点， 如果只在 hero 下隐藏，切到经典导航等版式就会退回 div 默认的 display:block —— 违反「新增节点在没有 hero 时全部隐藏」的隔离原则。 */ .ad-overlay, .ad-nav, .ad-dots { display: none; } /* ================================================================ 底部固定区 */ /* 用户要求： ① 广告栏与页脚栏是**分开的两块**（之前挤在一起）； ② 这两块都**固定在视口底部**，页面滚动只滚内容区，顶部栏也不动。 桌面端：把 .footer 整体 fixed 贴底，广告行是其中第一块（浅色面板 + 与页脚一条实线分隔）。 移动端：底部已经被「标签栏」占了，再固定一整块页脚会把内容压没， 所以**只在 ≥768px 生效**，移动端页脚回到正常文档流（广告轮播在页脚上方）。 内容区留出等高下内边距（--hg-foot-h 由脚本按实际高度写入），不会被压住。 */ body[data-layout=hero] .footer { height: auto !important; overflow: visible !important; margin: 0 !important; padding: 0; background: var(--hg-foot-bg, #fff); /* 后台「页脚栏背景设置」写进这个变量 */ border-top: 1px solid var(--hg-line); display: block; } /* ---------------------------------------------------- 页脚栏背景（后台可配） 后台「页脚栏背景设置」的三种模式（纯色 / 渐变 / 图片）都收敛成 --hg-foot-bg 一个 CSS 变量，由 home-hero.js 写在 body 上，上面 .footer 直接读它。这里只补两件事： ① 配了自定义背景时，广告行不再用自己的浅色渐变把它盖住（两块仍靠分隔线分开）； ② 底色偏深时脚本会加 .foot-bg-dark，把页脚文字整体转白，否则深字压深底看不清。 */ body[data-layout=hero].has-footer-bg .footer > #adRowFooter { background: none; } body[data-layout=hero].foot-bg-dark .footer { border-top-color: rgba(255, 255, 255, .2); } body[data-layout=hero].foot-bg-dark .footer > #adRowFooter { border-bottom-color: rgba(255, 255, 255, .2); } body[data-layout=hero].foot-bg-dark .hfb-text strong { color: #fff; } body[data-layout=hero].foot-bg-dark .hfb-text small { color: rgba(255, 255, 255, .8); } body[data-layout=hero].foot-bg-dark .footer-col p, body[data-layout=hero].foot-bg-dark .footer-col a, body[data-layout=hero].foot-bg-dark .footer-bottom { color: rgba(255, 255, 255, .82); } body[data-layout=hero].foot-bg-dark .footer-col a:hover { color: #fff; } body[data-layout=hero].foot-bg-dark .hfc-btn { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .24); color: #fff; } body[data-layout=hero].foot-bg-dark .hfc-btn:hover { background: rgba(255, 255, 255, .26); border-color: rgba(255, 255, 255, .4); } /* ---------------------------------------------------------- 广告栏（第一块） */ /* ⚠️ 选择器去掉了 `>`：广告栏已经拆出 .footer、成为 .content 的兄弟节点， `.footer > #adRowFooter` 这种写法在拆分后**一条都不再匹配**，于是这块只剩下 styles.css 里 .ad-row 的通用底色（实测 rgb(239,246,247) 灰底）， 既跟内容区不融合、又跟页脚分了家。改成直接命中 #adRowFooter。 */ body[data-layout=hero] #adRowFooter { max-width: 1560px; margin: 0; padding: clamp(9px, .95vw, 14px) clamp(12px, 1.7vw, 24px); display: grid !important; grid-template-columns: repeat(var(--ad-cols, 4), minmax(0, 1fr)); gap: 12px; /* 背景用页面底色 --hg-shell（= #eff6f7）。 这里**不要**改用 --bg(#f6f8fb)：hero 版式的页面底色是 --hg-shell 而不是 --bg， body 的 background-color 实测就是 rgb(239,246,247)，广告栏用它才是真正「和内容区融为一体」。 也**不要**写 transparent —— 广告栏是 fixed 浮层，透明会让滚动上来的卡片从背后穿帮。 */ background: var(--hg-shell); /* 广告栏与页脚的分界交给 .footer 的 border-top（与左侧导航栏底线同一条线）， 这里不重复画线 —— 用户要求「广告栏不显示明显分割线」。 */ border-bottom: 0; } body[data-layout=hero] #adRowFooter.hidden { display: none !important; } /* ---------------------------------------------------------- 页脚栏（第二块） */ /* 页脚主体：不改 DOM 结构（不给 #footerGrid 加外层容器）， 直接用 grid-area 把既有子节点排成参考图那样的「链接在左、联系方式在右」。 */ body[data-layout=hero] .footer { display: grid; /* 与参考图一致：品牌 + 链接 + 联系方式**同一行**， 这样固定底部的总高度才压得住（三行式会占到 290px+，内容区就没剩多少了）。 */ grid-template-columns: auto minmax(0, 1fr) auto; /* ⚠️ 这里**不再**声明 'ad' 那一行。 广告栏（#adRowFooter）已经拆出 .footer、成为 .content 的兄弟节点，但模板还留着 'ad ad ad' —— 声明了却没有对应元素，这一行会白占高度并把下面的行挤扁 （实测页脚内容 117px 被压进 87px、裁掉 30px，就是「页脚被遮挡」的根因）。 广告栏与页脚现在靠 .footer 的 border-top 一条线分开，网格里不再需要 ad 行。 */ grid-template-areas: 'brand links contact' 'bottom bottom bottom'; align-items: center; justify-items: stretch; } @media (max-width: 1023px) { body[data-layout=hero] .footer { grid-template-columns: minmax(0, 1fr); grid-template-areas: 'brand' 'links' 'contact' 'bottom'; align-items: start; } } /* 广告栏已在页脚之外，这两条 grid-area 指派不再有意义（保留 `>` 选择器是为了让 万一 DOM 又合回去时仍然生效，对当前结构无害）。 */ body[data-layout=hero] .footer > #adRowFooter { grid-area: ad; } body[data-layout=hero] .hero-footer-brand { grid-area: brand; } body[data-layout=hero] .footer-grid { grid-area: links; } body[data-layout=hero] .hero-footer-contact { grid-area: contact; } body[data-layout=hero] .footer-bottom { grid-area: bottom; } /* ⚠️ 这些是 grid item，不能用 `margin: 0 auto` 来居中： grid item 上的 auto 外边距会抢走剩余空间，把宽度压成「内容宽」 （实测广告行被压到 64px、两张广告各 2px）。改成 justify-self + width 控制。 */ body[data-layout=hero] .footer > #adRowFooter, body[data-layout=hero] .footer-bottom { justify-self: center; width: min(100%, 1560px); margin: 0; } body[data-layout=hero] .hero-footer-brand, body[data-layout=hero] .footer-grid { justify-self: stretch; width: auto; margin: 0; } body[data-layout=hero] .hero-footer-contact { justify-self: end; margin: 0; } body[data-layout=hero] .hero-footer-brand { display: flex; align-items: center; gap: 10px; width: auto; padding: 10px 0 10px clamp(12px, 1.7vw, 24px); } /* 图标 / 名称 / 描述三个尺寸支持后台配置（「首页品牌区管理」）。 变量由 home-hero.js 的 applyFooterBrandSize() 内联写在 #heroFooterBrand 上， 没配置时用这里的默认值（34 / 15 / 11），配置了就跟着走 —— 两边都不丢。 */ body[data-layout=hero] .hfb-logo { width: var(--hfb-logo, 34px); height: var(--hfb-logo, 34px); border-radius: 10px; object-fit: cover; } body[data-layout=hero] .hfb-text { display: flex; flex-direction: column; line-height: 1.2; } body[data-layout=hero] .hfb-text strong { font-size: var(--hfb-name, 15px); font-weight: 800; color: var(--hg-ink); } body[data-layout=hero] .hfb-text small { font-size: var(--hfb-desc, 11px); color: var(--hg-muted); } body[data-layout=hero] .footer-grid { width: auto; padding: 10px clamp(8px, 1vw, 16px); display: flex; flex-wrap: wrap; gap: 4px 26px; /* ⚠️ 必须是 stretch，不能是 center —— 修的是「页脚分组标题看不见、页脚分布不对」。 机制：外层 .footer 是 grid，行高被写死 58px，而本容器的内容（h4 标题 + 3 行链接） 实测高 91px。写成 align-self:center 时，91px 的内容在一个 58px 的盒子里**上下居中**， 于是上下各溢出 (91-58)/2 ≈ 16.5px；再叠加自身的 overflow:hidden， **顶部的 h4 分组标题被整块裁掉**，只剩下面几行链接 —— 用户看到的就是「没有分组」。 实测证据（1920 视口，修复前）： .footer-grid rect.y = 913，但其子项 .footer-col / h4 的 rect.y = 897（比父级还高 16px）； elementFromPoint 在 h4 中心命中 'ad-card'（标题既被裁、又被上方广告条压住）。 改成 stretch 后容器填满行高、内容从顶部开始排，标题回到可视区。 */ align-self: stretch; } /* 参考图的页脚中段是「分组标题 + 其下若干条链接」的多列布局， 所以这里把分组标题 h4 显示出来（之前为了压成一行把它 display:none 了， 结果用户看到的是没有分组的平铺链接，反馈「页脚分布不对」）。 */ body[data-layout=hero] .footer-col { display: flex; flex-direction: column; gap: 2px; } body[data-layout=hero] .footer-col h4 { display: block; font-size: 12.5px; font-weight: 800; color: var(--hg-ink); margin: 0 0 3px; letter-spacing: .01em; line-height: 1.2; } body[data-layout=hero] .footer-col p { font-size: 12px; color: var(--hg-muted); margin: 0; line-height: 1.5; } body[data-layout=hero] .footer-col a { color: var(--hg-muted); } body[data-layout=hero] .footer-col a:hover { color: var(--hg-deep); } /* 联系方式按钮组：圆形按钮 + 语言/回顶（新增节点，仅 hero 版式） */ body[data-layout=hero] .hero-footer-contact { display: flex; align-items: center; gap: 9px; padding: 0 clamp(12px, 1.7vw, 24px); margin: 0; align-self: center; } body[data-layout=hero] .hfc-btn { width: 34px; height: 34px; flex: 0 0 34px; display: grid; place-items: center; border: 1px solid var(--hg-line); border-radius: 50%; background: var(--hg-card); color: var(--hg-deep); font-size: 15px; line-height: 1; cursor: pointer; text-decoration: none; transition: background .16s, border-color .16s, color .16s; } body[data-layout=hero] .hfc-btn:hover { background: var(--hg-soft); border-color: var(--hg); } body[data-layout=hero] .hfc-btn img { width: 18px; height: 18px; object-fit: contain; border-radius: 50%; } /* 「带文字」的胶囊按钮：必须把上面 .hfc-btn 的 flex: 0 0 34px 放开， 否则 flex-basis 仍是 34px，`width:auto` 只能撑到最小内容宽（实测 47px）， 「联系邮箱」四个字被挤成一列竖排 —— 这正是报障截图里那颗错位的胶囊。 */ body[data-layout=hero] .hfc-btn.hfc-wide { width: auto; flex: 0 0 auto; min-width: 0; padding: 0 14px; border-radius: 999px; font-size: 12.5px; font-weight: 600; white-space: nowrap; } /* ---------------------------------------------------------------- 页脚「手动收起」按钮 用户要求「页脚保留滚动自动收起的同时增加手动收起按钮功能」。 参考图 desktop_home_detail.png 页脚最右侧就是这一颗：白色圆 + 深色「⌃」箭头。 滚动自动收起（bindFooterCollapse）保持不变，这颗按钮只是多一个手动入口； 两者谁说话算数由 home-hero.js 的 footState 状态机仲裁。 */ body[data-layout=hero] .hfc-toggle svg { width: 16px; height: 16px; transition: transform .24s ease; /* 收起后箭头翻转朝下 = 「点它可展开」 */ } body[data-layout=hero] .hfc-toggle.is-collapsed svg { transform: rotate(180deg); } /* 收起效果只在 ≥768px 生效（见上面 min-width:768px 那块里的 .hero-footer-collapsed 规则）， 窄屏（移动端 App 外壳）没有可收起的页脚，留着会是一颗死按钮 → 直接隐藏。 */ @media (max-width: 767px) { body[data-layout=hero] .hfc-toggle { display: none !important; } } body[data-layout=hero] .hero-footer-contact .hfc-lang { display: inline-flex; align-items: center; } body[data-layout=hero] .hero-footer-contact .hfc-lang > .dropdown > .ghost { height: 34px !important; width: auto !important; min-width: 0 !important; padding: 0 13px !important; border: 1px solid var(--hg-line) !important; background: var(--hg-card) !important; font-size: 12.5px !important; border-radius: 999px !important; box-shadow: none !important; } /* 页脚语言胶囊的下拉：**必须向上弹** —— 它在页面最底部，向下弹会整块跑出视口。 （styles.css 的 .dropdown-menu 默认 top:calc(100% + 8px)，即向下。） */ body[data-layout=hero] .hero-footer-contact .hfc-lang > .dropdown > .dropdown-menu { top: auto; bottom: calc(100% + 10px); left: auto; right: 0; min-width: 168px; z-index: 320; animation: none; } body[data-layout=hero].foot-bg-dark .hero-footer-contact .hfc-lang > .dropdown > .ghost { background: rgba(255, 255, 255, .14) !important; border-color: rgba(255, 255, 255, .24) !important; color: #fff !important; } /* ---------------------------------------------- 社交品牌圆按钮（参考图右端那 3 颗） 参考图里是**深色实心圆 + 白色图标**（微信 / 微博 / 抖音）， 与普通联系方式按钮（白底绿字）刻意不同色 —— 所以单独一个 .hfc-social 皮肤。 图标是**内联 SVG + fill:currentColor**（见 home-hero.js 的 SOCIAL_BRANDS）： 用 引外部单色 svg 没法改色，黑图标压深圆等于看不见。 */ body[data-layout=hero] .hfc-btn.hfc-social { background: #23303c; border-color: #23303c; color: #fff; } body[data-layout=hero] .hfc-btn.hfc-social:hover { background: #0f1a24; border-color: #0f1a24; color: #fff; } body[data-layout=hero] .hfc-btn.hfc-social svg { width: 17px; height: 17px; display: block; } /* 深色页脚背景 + 深圆按钮会糊在一起 → 换成半透明白圆，白图标保持不变 */ body[data-layout=hero].foot-bg-dark .hfc-btn.hfc-social { background: rgba(255, 255, 255, .18); border-color: rgba(255, 255, 255, .3); color: #fff; } body[data-layout=hero].foot-bg-dark .hfc-btn.hfc-social:hover { background: rgba(255, 255, 255, .3); } /* 未配置链接时的轻提示（品牌按钮允许先占位、后配链接） */ .hf-social-tip { position: fixed; left: 50%; bottom: calc(var(--hg-footer-h, 82px) + 24px); transform: translate(-50%, 12px); z-index: 400; padding: 9px 16px; border-radius: 999px; background: rgba(20, 32, 30, .92); color: #fff; font-size: 12.5px; font-weight: 600; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; box-shadow: 0 8px 24px rgba(0, 0, 0, .24); white-space: nowrap; } .hf-social-tip.show { opacity: 1; transform: translate(-50%, 0); } body[data-layout=hero] .footer-bottom { max-width: 1560px; width: 100%; margin: 10px 0 0; padding: 9px clamp(12px, 1.7vw, 24px) 11px; border-top: 1px solid var(--hg-line); font-size: 11.5px; color: var(--hg-muted); text-align: center; } /* 桌面端：底部整块固定 + 内容区留白（高度由脚本写入，广告增删也会跟着变） */ @media (min-width: 768px) { body[data-layout=hero] .footer { position: fixed; left: 0; right: 0; bottom: 0; z-index: 150; max-height: 64vh; box-shadow: 0 -8px 28px rgba(15, 51, 42, .07); } body[data-layout=hero] .content { padding-bottom: var(--hg-foot-h, 200px); } } /* 回到顶部 */ body[data-layout=hero] .back-top { background: var(--hg); border-color: var(--hg); } /* =========================================================== 移动端 App */ /* 桌面端不显示移动专属节点 */ body[data-layout=hero] .hero-mbar { display: none; } @media (max-width: 767px) { /* ---------------------------------------------------- App 顶栏 */ body[data-layout=hero] .info.top-info { display: none !important; } body[data-layout=hero] .hero-mbar { display: flex; align-items: center; gap: 8px; position: sticky; top: 0; z-index: 120; height: 54px; padding: 0 8px; /* 与桌面顶栏同一条口径：页面底色 + 一点透明，随皮肤自动变 */ background: color-mix(in srgb, var(--hg-shell) 86%, transparent); backdrop-filter: saturate(180%) blur(16px); -webkit-backdrop-filter: saturate(180%) blur(16px); border-bottom: 1px solid var(--hg-line); } body[data-layout=hero] .hmb-btn { width: 40px; height: 40px; flex: 0 0 40px; display: grid; place-items: center; border: 0; border-radius: 12px; background: transparent; color: var(--hg-ink); cursor: pointer; } body[data-layout=hero] .hmb-btn:active { background: var(--hg-soft); } body[data-layout=hero] .hmb-btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } body[data-layout=hero] .hmb-brand { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; color: inherit; } body[data-layout=hero] .hmb-brand img { width: 30px; height: 30px; border-radius: 9px; object-fit: cover; } body[data-layout=hero] .hmb-brand-text { display: flex; flex-direction: column; line-height: 1.1; text-align: left; } body[data-layout=hero] .hmb-brand-text strong { font-size: 17px; font-weight: 800; color: var(--hg-ink); } body[data-layout=hero] .hmb-brand-text small { font-size: 9px; letter-spacing: .16em; color: var(--hg); font-weight: 700; } /* ------------------------------------------------ 移动端「搜索页」（放大镜 / 底部搜索键展开） 用户报「移动端底部搜索按钮点开后打开搜索页面，按照效果图 mobile_search.png 来做」。 原来这里只是一条 58px 高的页内小搜索条（sticky，展开时把内容往下推）， 现在改成整屏面板：固定在移动端顶栏之下，自身可滚，内容区不跟着动。 仍然复用既有节点 #heroSearchPop / #heroSearchInput / #heroSearchGo， 只新增了图片识别、语音输入两个按钮与 .hsp-body 内容区（纯 append，没有移动任何既有节点）。 */ body[data-layout=hero] .hero-search-pop { display: flex; flex-wrap: wrap; align-content: flex-start; /* gap 必须是 0：第一行要用相邻背景拼成一颗白色药丸，任何列间距都会把它切成碎块。 行与行的间距改由 .hsp-body 的 margin-top 提供。 */ gap: 0; position: fixed; left: 0; right: 0; /* ⚠️ bottom 必须让开底部标签栏（高 60px + 安全区）—— 参考图 mobile_search.png 里搜索页下方**仍然保留**底部标签栏（首页/分类/搜索/收藏/我的）， 写成 bottom:0 会把标签栏整块盖住，与效果图不符。 标签栏自身是 fixed;bottom:0;z-index:130，两条边正好相接，不重叠。 */ top: var(--hg-mbar-h, 54px); bottom: calc(60px + env(safe-area-inset-bottom, 0px)); /* 高于顶栏(60)/分类区(40)/底部导航(150)之下的抽屉与页脚；低于模态。 */ z-index: 190; margin: 0; padding: 12px var(--hg-side) calc(20px + env(safe-area-inset-bottom, 0px)); max-height: none; overflow-y: auto; -webkit-overflow-scrolling: touch; background: var(--hg-shell); border: 0; border-radius: 0; box-shadow: none; visibility: hidden; opacity: 0; transform: translateY(10px); transition: opacity .18s ease, transform .18s ease, visibility .18s; } body[data-layout=hero] .hero-search-pop[aria-hidden="false"] { visibility: visible; opacity: 1; transform: none; padding: 12px var(--hg-side) calc(20px + env(safe-area-inset-bottom, 0px)); margin: 0; max-height: none; } /* 第一行：搜索输入药丸。用 order 把「图片 / 语音」插到输入框与圆形搜索键之间， 这样不用移动 DOM 顺序（新节点是 append 到末尾的）。 */ body[data-layout=hero] .hero-search-pop > .hsp-ico { order: 1; } body[data-layout=hero] .hero-search-pop > input { order: 2; } body[data-layout=hero] .hero-search-pop > .hsp-cam { order: 3; } body[data-layout=hero] .hero-search-pop > .hsp-mic { order: 4; } body[data-layout=hero] .hero-search-pop > .hsp-go { order: 5; } body[data-layout=hero] .hero-search-pop > .hsp-close { order: 6; } body[data-layout=hero] .hero-search-pop > .hsp-body { order: 7; flex: 1 0 100%; min-width: 0; display: flex; flex-direction: column; gap: 14px; margin-top: 14px; } /* 输入药丸内的排版：用一条内嵌的「假药丸」把它包起来做不到（不能加包裹节点）， 所以直接给这一行的元素加背景/圆角，视觉上拼成一颗药丸。 */ body[data-layout=hero] .hsp-ico { flex: 0 0 auto; width: 34px; height: 48px; margin-left: 2px; display: grid; place-items: center; color: var(--hg-muted); background: var(--hg-card); border-radius: 999px 0 0 999px; } body[data-layout=hero] .hsp-ico svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; } body[data-layout=hero] .hero-search-pop input { order: 2; flex: 1 1 auto; min-width: 0; height: 48px; border: 0; background: var(--hg-card); color: var(--hg-ink); font-size: 15px; padding: 0 4px; border-radius: 0; } body[data-layout=hero] .hero-search-pop input::placeholder { color: #9aada7; } body[data-layout=hero] .hsp-tool { flex: 0 0 auto; width: 30px; height: 48px; padding: 0; display: grid; place-items: center; border: 0; background: var(--hg-card); color: var(--hg-muted); cursor: pointer; } body[data-layout=hero] .hsp-tool svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; } body[data-layout=hero] .hsp-tool:active { color: var(--hg-deep); } /* 语音键是白药丸的最后一格，由它给出右侧圆角。 */ body[data-layout=hero] .hsp-mic { border-radius: 0 999px 999px 0; } /* 圆形搜索键：参考图里是独立一颗绿圆，所以不再和药丸拼在一起，留 8px 间隙。 */ body[data-layout=hero] .hsp-go { flex: 0 0 auto; width: 48px; height: 48px; margin-left: 8px; margin-right: 2px; padding: 0; border: 0; border-radius: 50%; background: var(--hg); color: #fff; font-size: 0; line-height: 0; position: relative; cursor: pointer; display: grid; place-items: center; } /* 圆形搜索键里画放大镜（文字「搜索」保留给读屏，视觉上用 font-size:0 隐藏）， 定位方式与桌面端一致：绝对定位 + translate(-50%,-50%)，几何保证居中。 */ body[data-layout=hero] .hsp-go::before { content: ''; position: absolute; left: 50%; top: 50%; width: 19px; height: 19px; transform: translate(-50%, -50%); background: #fff; -webkit-mask: url("data:image/svg+xml;utf8,") center/contain no-repeat; mask: url("data:image/svg+xml;utf8,") center/contain no-repeat; } body[data-layout=hero] .hsp-go:active { background: var(--hg-deep); } body[data-layout=hero] .hsp-close { flex: 0 0 auto; width: 34px; height: 34px; margin-left: 6px; display: grid; place-items: center; border: 0; border-radius: 50%; background: transparent; color: var(--hg-muted); font-size: 14px; cursor: pointer; align-self: center; } /* ---- 搜索页内容区（引擎 / 热搜 / 历史） ---- */ body[data-layout=hero] .hsp-sec { display: flex; flex-direction: column; gap: 9px; } body[data-layout=hero] .hsp-sec-head { display: flex; align-items: center; justify-content: space-between; font-size: 12.5px; font-weight: 700; color: var(--hg-ink); } body[data-layout=hero] .hsp-sec-head button { border: 0; background: transparent; color: var(--hg-muted); font-size: 12px; font-weight: 600; cursor: pointer; padding: 2px 0; } body[data-layout=hero] .hsp-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; padding: 12px; border-radius: 16px; background: var(--hg-card); } body[data-layout=hero] .hsp-cell { display: flex; flex-direction: column; align-items: center; gap: 6px; border: 0; background: transparent; padding: 4px 2px; cursor: pointer; border-radius: 12px; min-width: 0; } body[data-layout=hero] .hsp-cell:active { background: var(--hg-soft); } body[data-layout=hero] .hsp-cell.on { background: var(--hg-soft); } body[data-layout=hero] .hsp-cell img, body[data-layout=hero] .hsp-cell .ph { width: 30px; height: 30px; border-radius: 9px; object-fit: contain; background: var(--hg-soft); display: grid; place-items: center; font-size: 15px; } body[data-layout=hero] .hsp-cell span { font-size: 11px; color: var(--hg-ink); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } body[data-layout=hero] .hsp-chips { display: flex; flex-wrap: wrap; gap: 8px; } body[data-layout=hero] .hsp-chip { border: 0; border-radius: 999px; padding: 8px 14px; background: var(--hg-card); color: var(--hg-ink); font-size: 12.5px; font-weight: 600; cursor: pointer; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } body[data-layout=hero] .hsp-chip:active { background: var(--hg-soft); color: var(--hg-deep); } body[data-layout=hero] .hsp-empty { font-size: 12px; color: var(--hg-muted); padding: 6px 2px; } /* ---------------------------------------------------- Hero */ body[data-layout=hero] .content { padding: 0 0 74px; } body[data-layout=hero] .topbar { padding: 0 !important; } body[data-layout=hero] .carousel-area { height: 352px !important; border-radius: 0 !important; margin: 0 !important; } body[data-layout=hero] .carousel-area::after { background: linear-gradient(180deg, rgba(5, 28, 34, .34) 0%, rgba(5, 28, 34, .06) 38%, rgba(5, 28, 34, .34) 100%) !important; } body[data-layout=hero] .carousel-bg { background-image: var(--hbg, none); } /* 标题：居中压在图上 */ body[data-layout=hero] .hero-search-head { position: absolute; left: 0; right: 0; top: 76px; margin: 0; padding: 0 22px; text-align: center; z-index: 24; } body[data-layout=hero] .hero-title { font-size: 30px; letter-spacing: .05em; } body[data-layout=hero] .hero-subtitle { font-size: 12.5px; letter-spacing: .1em; margin-top: 7px; } /* 悬浮搜索卡：铺满 hero 的定位层，内部元素各自定位 */ body[data-layout=hero] #mainSearchWrap, body[data-layout=hero] #mainSearchWrap.carousel-search-float, body[data-layout=hero] .topbar > .search.carousel-search-float { position: absolute !important; left: 0 !important; right: 0 !important; top: 0 !important; bottom: 0 !important; width: auto !important; margin: 0 !important; transform: none !important; /* ⚠️ 这里必须是 60，不能是 32 —— 修的是用户报的「移动端搜索引擎下拉列表被分类区域遮挡」。 机制：窄屏 .search-inner 是绝对定位、z-index:96，但它被上面这条 z-index:32 关在 #mainSearchWrap 自己的层叠上下文里；而同级的 #heroCatGrid 是 position:relative; z-index:40。 40 > 32，于是整块搜索区（连同弹出到 hero 外面的引擎下拉）都被分类区盖住。 实测证据（修复前，390 视口，点 .engineIcon 展开）：下拉 rect[14,310,362,320]， 前 4 项命中 engine-item，第 5 项起命中 hcg-ico / hcg-item / card new-layout / htb-item； 与分类区重叠 173.5px。修复后全部命中 engine-item（insideOverlay: true）。 60 高于分类区 40、卡片区 auto，又低于底部导航(150)/抽屉(200)/页脚广告(149)，层级正确。 */ z-index: 60; } body[data-layout=hero] #mainSearchWrap .search-inner { position: absolute !important; left: 14px !important; right: 14px !important; bottom: 104px !important; top: auto !important; transform: none !important; width: auto !important; display: grid !important; /* 🔴 2026-09-15 第四次口径：窄屏搜索条改成「引擎 | 输入框 | 工具组 | 圆形搜索键」。 原先工具组（窄屏只剩「站内」）夹在引擎与输入框之间（第 2 列）， 用户要求「**移动端将站内按钮改用图标显示，并把位置修改到搜索按钮左下角**」。 所以把它挪到输入框**右侧**、紧贴搜索键左侧，并贴行底部（`align-self:end`）＝ 搜索键的左下角；同时省下的 18px 宽度全给输入框（46px 文字 chip → 28px 图标）。 */ grid-template-columns: auto minmax(0, 1fr) auto 46px; grid-template-rows: 44px; align-items: center; gap: 0 6px; height: 60px !important; min-height: 0 !important; padding: 8px 8px 8px 12px !important; border: 0 !important; border-radius: 999px !important; /* ⚠️ 这一条与桌面端 .search-inner 是**两份独立声明**（桌面在 287 行、本条在窄屏媒体查询里）， 改透明度必须两边一起改，否则手机端还是老的白板。 用户报「背景透明度还是不够」时，桌面已到 .26 而这里仍是 .58 —— 就是漏改这条。 */ background: rgba(255, 255, 255, .26) !important; -webkit-backdrop-filter: blur(9px) saturate(1.2); backdrop-filter: blur(9px) saturate(1.2); box-shadow: 0 10px 30px rgba(6, 32, 38, .18) !important; overflow: visible; } body[data-layout=hero] #mainSearchWrap .engine-icon { grid-column: 1; grid-row: 1; position: static !important; width: auto !important; height: 40px !important; /* 与桌面同因：左 2 / 右 11 是为已删除的下拉箭头留的位，去掉箭头后图标偏左。 实测（390 视口）：药丸 x=26 宽 36 ⇒ 圆心 44，图标实际中心 39.5 —— 偏左 4.5px。 改成左右等值后图标居中。 */ padding: 0 7px; margin: 0 !important; border-right: 1px solid var(--hg-line); display: inline-flex !important; align-items: center; gap: 6px; transform: none !important; } body[data-layout=hero] #mainSearchWrap .engine-icon img { width: 21px !important; height: 21px !important; } /* 窄屏同样去掉「全网」二字（桌面那条只作用于 min-width:768px 之外的默认块， 窄屏走的是本块，两条都改才一致）。 */ body[data-layout=hero] #mainSearchWrap .engine-icon::before { content: none; } /* 🔴 2026-09-15 第四次口径：「站内」不再是文字 chip，改用**图标**（放大镜+号）， 并移到**搜索键左下角**（输入框右侧、贴行底）。 ⚠️ 下面是 2026-09-15 第三次口径的原文，保留以记录口径演进 —— 现已被第四次覆盖： 「站内开关：参考图里是「站内」两个字，选中态为品牌绿底白字。 图标与语音/图片按钮在窄屏本来就收起，这里保持只显示站内这一段。 ⚠️ 窄屏必须显式还原成静态定位：≥1250px 的「挂到胶囊左侧外侧」一旦在这里生效， 小屏栅格会被撑破（下面 padding/position 三条就是为这个写的）。」 窄屏依旧必须显式还原成静态定位（老规矩，别再让它飘出去）。 */ body[data-layout=hero] #mainSearchWrap .search-mini-tools { grid-column: 3; grid-row: 1; align-self: end; display: flex !important; align-items: center; gap: 0; padding: 0; margin: 0 0 -6px !important; position: static; right: auto; bottom: auto; background: transparent; border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; } body[data-layout=hero] #mainSearchWrap .search-tool:not(.site-search-tool) { display: none !important; } /* 第四次口径：**改成图标**（原来这里把 svg 藏掉、用 ::after 画「站内」两个字）。 `::after{content:none}` 必须显式写，否则那条 content:'站内' 会继续生效。 */ body[data-layout=hero] #mainSearchWrap .site-search-tool::after { content: none; } /* 图标是白描边压在照片上，给一点暗晕才立得住（`text-shadow` 对 SVG 无效，必须用 filter）。 */ body[data-layout=hero] #mainSearchWrap .site-search-tool svg { display: block !important; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .55)); } body[data-layout=hero] #mainSearchWrap .site-search-tool { width: 28px !important; height: 28px !important; padding: 0 !important; display: inline-flex !important; align-items: center; justify-content: center; border: 0; border-radius: 8px; background: transparent; /* 用户报「移动端的站内搜索按钮字体颜色改成白色，现在有些背景图下看不清楚」。 窄屏这条搜索行是 26% 白 + 9px 模糊压在轮播图上（见上面 .search-inner）， --hg-muted 的灰字在明亮图片上基本读不出来 —— 改成纯白 + 深色描边。 */ color: #fff !important; font-size: 13px; font-weight: 600; text-shadow: 0 1px 3px rgba(0, 0, 0, .42); } body[data-layout=hero] #mainSearchWrap .site-search-tool[aria-pressed="true"] { background: var(--hg); color: #fff !important; text-shadow: none; } body[data-layout=hero] #mainSearchWrap .search-input-stack { grid-column: 2; grid-row: 1; } body[data-layout=hero] #mainSearchWrap #searchInput { height: 44px; font-size: 15.5px !important; padding: 0 !important; background: transparent; border: 0; color: #fff !important; text-shadow: 0 1px 3px rgba(0, 0, 0, .42), 0 0 1px rgba(0, 0, 0, .3); } body[data-layout=hero] #mainSearchWrap #searchInput::placeholder { color: rgba(255, 255, 255, .88) !important; text-shadow: 0 1px 3px rgba(0, 0, 0, .38), 0 0 1px rgba(0, 0, 0, .28); } /* 引擎图标在窄屏是一张彩色 favicon，压在图上同样需要一点暗晕才立得住 */ body[data-layout=hero] #mainSearchWrap .engine-icon { color: #fff; filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .4)); } body[data-layout=hero] #mainSearchWrap .search-submit-tools { grid-column: 4; grid-row: 1; min-width: 46px !important; width: 46px !important; height: 46px !important; align-self: center; border-radius: 50% !important; background: var(--hg) !important; } body[data-layout=hero] #mainSearchWrap #searchBtn { min-width: 0 !important; padding: 0 !important; border-radius: 50% !important; } /* 引擎下拉在窄屏会弹出 hero 之外（有 53 个引擎，原本高达 320px）， 参考图只露 2 行 ≈ 6 个，所以这里限高 + 内部滚动，避免整屏被占满、也避免被下方内容干扰。 */ body[data-layout=hero] #mainSearchWrap #engineOverlay, body[data-layout=hero] #mainSearchWrap .overlay { max-height: 44vh !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch; border-radius: 16px !important; box-shadow: 0 18px 44px rgba(6, 32, 38, .26) !important; } /* 天气 + 日期条：黑玻璃横条，贴在 hero 底部 */ body[data-layout=hero] #carouselWeather.carousel-side, body[data-layout=hero] #carouselWeather.carousel-side.left { display: flex !important; position: absolute !important; left: 14px !important; right: 14px !important; top: auto !important; bottom: 14px !important; width: auto !important; max-width: none !important; height: 74px !important; align-items: center; gap: 10px; padding: 0 16px !important; border-radius: 16px; background: rgba(9, 30, 36, .5) !important; border: 1px solid rgba(255, 255, 255, .16); backdrop-filter: blur(10px) !important; -webkit-backdrop-filter: blur(10px) !important; box-shadow: none; color: #fff !important; z-index: 30; } body[data-layout=hero] #carouselWeather .cw-title { display: none; } /* 🔴 用户报「天气和日期没有并排对齐显示」。 根因：左右两块都是 74px 高的玻璃条上的「叠两行」，但**纵向对齐方式不一致**—— · 右块 .hero-hero-date 是 flex 列 + justify-content:center → 两行居中（首行 y=332.5） · 左块 .cw-now 是 flex 列，justify-content 还是默认的 normal(flex-start)， 而它自己 flex:1 1 auto 撑满了 74px → 两行贴顶（首行 y=314） 探针实测两块首行相差 **18.5px**，正好一行高度 → 看着就是「没对齐、各写各的」。 修法：给 .cw-now 也加居中，两块一起垂直居中。 注意：两块字号不同（左 12.5/20，右 16/12），行盒高度本来就不同， 所以只能保证**首行对齐**（修后 Δ≈-1.2px）；参考图 mobile_home.png 也是这个形态。 */ body[data-layout=hero] #carouselWeather .cw-now { flex: 1 1 auto; min-width: 0; gap: 2px; justify-content: center; } body[data-layout=hero] #carouselWeather .cw-now small { order: -1; font-size: 12.5px !important; color: rgba(255, 255, 255, .82); opacity: 1 !important; } body[data-layout=hero] #carouselWeather .cw-now span { font-size: 20px !important; font-weight: 700 !important; color: #fff !important; } body[data-layout=hero] #carouselWeather .cw-forecast { display: none !important; } /* 参考图移动端不展示三日预报 */ /* 日期 / 农历：贴在天气条右侧（与天气条共用同一条玻璃背景） */ body[data-layout=hero] .hero-hero-date { position: absolute !important; left: auto !important; right: 30px !important; top: auto !important; bottom: 14px !important; width: auto !important; max-width: 46%; height: 74px; display: flex !important; flex-direction: column; justify-content: center; align-items: flex-end; padding: 0 !important; margin: 0; border: 0; background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; text-align: right; z-index: 31; pointer-events: none; } body[data-layout=hero] #carouselWeather .cw-now { padding-right: 46%; } body[data-layout=hero] .hero-hero-date .hd-date { font-size: 16px; font-weight: 700; color: #fff; } body[data-layout=hero] .hero-hero-date .hd-lunar { font-size: 12px; color: rgba(255, 255, 255, .82); margin-top: 2px; } body[data-layout=hero] .hero-hero-date .hd-quote { display: none; } /* 标语在移动端不出（参考图移动端没有） */ body[data-layout=hero] .hero-slogan { display: none !important; } /* 热搜词：参考图移动端没有这一行，隐藏（桌面端保留） */ body[data-layout=hero] .hero-hot-words { display: none !important; } /* ------------------------------------------------ 分类图标网格 5 列（对齐参考图） */ body[data-layout=hero] .hero-cat-grid { margin: 10px 0 0; padding: 0 var(--hg-side); max-width: none; } body[data-layout=hero] .hcg-list { grid-template-columns: repeat(var(--hcg-cols-m, 5), minmax(0, 1fr)); gap: 4px 2px; /* 与下面卡片区的内缩量完全一致（--hg-inset），这样窄屏上 「分类图标左边缘 = 网址卡片左边缘」——用户点名要求两侧间隔保持一致。 */ padding: 16px var(--hg-inset) 12px; border-radius: 16px; } body[data-layout=hero] .hcg-item { gap: 7px; padding: 6px 2px; } body[data-layout=hero] .hcg-ico { width: 46px; height: 46px; border-radius: 14px; font-size: 23px; } body[data-layout=hero] .hcg-name { font-size: 11px; } /* ------------------------------------------------ 内容分区 → 列表行 */ /* ⚠️ 必须 !important：responsive.css 第 35 行有 `.cards-sections{padding:0 14px 24px!important}`，而它虽然先加载 （顺序：responsive → layouts → home-hero），但那是 !important 对普通声明 —— 同特异性下 !important 一定赢。所以这里也得带 !important 才能把两侧留白收进 --hg-side。 */ body[data-layout=hero] .cards-sections { padding: 12px var(--hg-side) 18px !important; gap: 12px; max-width: none; } body[data-layout=hero] .cards-sections > .section, body[data-layout=hero] .cards-sections > section { /* 窄屏参考图里每个分区仍是一张白色圆角卡，所以这里保留白底（和桌面端「融合」策略不同， 因为两份参考图本身就是两种处理）。内缩量与分类图标一致。 */ background: var(--hg-card) !important; border-radius: 16px !important; padding: 16px var(--hg-inset) 14px !important; box-shadow: 0 4px 18px rgba(15, 51, 42, .06) !important; margin: 0 !important; } /* 窄屏分区之间是同色白卡 + 间隙，不需要那条淡分隔线。 */ body[data-layout=hero] .cards-sections > section + section, body[data-layout=hero] .cards-sections > .section + section, body[data-layout=hero] .cards-sections > section + .section { border-top: 0 !important; } body[data-layout=hero] .section-title { font-size: 16px; margin-bottom: 12px; } body[data-layout=hero] .section-title::before { height: 17px; } body[data-layout=hero] .cat-tabs { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; gap: 8px; margin-bottom: 12px; padding-bottom: 2px; } body[data-layout=hero] .cat-tabs::-webkit-scrollbar { display: none; } body[data-layout=hero] .cat-tab { flex: 0 0 auto; height: 34px; padding: 0 14px; font-size: 12.5px; } body[data-layout=hero] #cards .cards { grid-template-columns: 1fr !important; gap: 0 !important; } body[data-layout=hero] #cards .card.new-layout { grid-template-columns: 44px minmax(0, 1fr) auto; column-gap: 11px; padding: 13px 4px !important; border: 0 !important; border-bottom: 1px solid var(--hg-line) !important; border-radius: 0 !important; box-shadow: none !important; transform: none !important; align-items: center; } body[data-layout=hero] #cards .cards .card.new-layout:last-child { border-bottom: 0 !important; } body[data-layout=hero] #cards .card-logo, body[data-layout=hero] #cards .card-logo img { width: 44px; } body[data-layout=hero] #cards .card-logo img { height: 44px; border-radius: 12px; } body[data-layout=hero] #cards .card-content { gap: 3px; justify-content: center; } body[data-layout=hero] #cards .card-title { font-size: 14.5px; } body[data-layout=hero] #cards .card-desc { font-size: 12px; -webkit-line-clamp: 1; } /* 操作区收到右侧，只留图标（参考图的 ☆ 与 ⋯） */ body[data-layout=hero] #cards .card-actions { grid-column: 3; grid-row: 1; margin: 0; padding: 0; border: 0; display: flex; align-items: center; gap: 2px; } /* 用户报「移动端的直达按钮和收藏按钮图标没有居中对齐」。 ⚠️ 症状与桌面端 #searchBtn 那颗完全一样，根因也一样： 按钮里除了 ::after 还留着**一个文字节点**（「直达」/「☆收藏」）， font-size:0 只是把它压成 0×0，并没有让它消失 —— grid 里因此有 **2 个轨道**， 图标被放在第二格，视觉上整体偏下/偏右，`place-items:center` 救不回来。 这里改成「display:block + ::after 绝对定位 + translate(-50%,-50%)」， 用几何保证符号落在按钮正中心（与 #searchBtn::before 同一套写法）。 */ body[data-layout=hero] #cards .card-actions .ghost.small { width: 34px; height: 34px; flex: 0 0 34px; position: relative; display: block; font-size: 0 !important; /* 只留图标，文字靠 data-ico 还原成符号 */ color: var(--hg-muted); border-radius: 10px; padding: 0 !important; } body[data-layout=hero] #cards .card-actions .ghost.small::after { content: attr(data-ico); position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: 17px; line-height: 1; /* 星形/箭头的字形包围盒本身略偏，用 1px 的视觉补偿把它压回几何中心 */ display: block; pointer-events: none; } body[data-layout=hero] #cards .card-actions .ghost.small.faved { color: #e8a52c; } /* 「复制链接」在移动端收起（参考图没有），保留「直达」「收藏」 */ body[data-layout=hero] #cards .card-actions .ghost.small[data-act="copy"] { display: none; } /* ------------------------------------------------ 广告：单条轮播（淡入淡出） */ /* 参考图的移动端广告是「整幅图 + 居中文案 + 卡内底边指示点」，没有左右箭头。 所以这里不用横向滚动，而是把卡片绝对堆叠、用透明度切换 —— 这样指示点可以作为广告行的子节点稳定地压在卡片内部，不会随滚动漂走。 */ body[data-layout=hero] #adRowFooter { display: block !important; position: relative; grid-template-columns: none; height: 118px; margin: 0 8px 10px; padding: 0; overflow: visible; } body[data-layout=hero] #adRowFooter.hidden { display: none !important; } body[data-layout=hero] #adRowFooter .ad-card { position: absolute; inset: 0; height: 118px; border-radius: 12px; opacity: 0; visibility: hidden; transition: opacity .38s ease, visibility .38s ease; pointer-events: none; } body[data-layout=hero] #adRowFooter .ad-card.on { opacity: 1; visibility: visible; pointer-events: auto; } /* 窄屏与桌面端同一套处理（整幅图 + 居中深色文案）， 差别只有底部留出指示点的位置、不出「立即查看」 */ body[data-layout=hero] #adRowFooter .ad-cap { padding: 0 74px 18px; } body[data-layout=hero] #adRowFooter .ad-cap-title { font-size: 16px; } body[data-layout=hero] #adRowFooter .ad-cap-desc { font-size: 11.5px; } body[data-layout=hero] #adRowFooter .ad-cap-cta { display: inline-block !important; right: 12px; padding: 7px 14px; font-size: 11.5px; } /* 指示点：压在卡片内部底边居中（绝对定位，行内无滚动 → 不会漂移） */ body[data-layout=hero] #adRowFooter .ad-dots { position: absolute; left: 0; right: 0; bottom: 7px; display: flex; align-items: center; justify-content: center; gap: 5px; margin: 0; z-index: 5; } body[data-layout=hero] #adRowFooter .ad-dots[hidden] { display: none; } body[data-layout=hero] #adRowFooter .ad-dots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, .72); box-shadow: 0 0 0 1px rgba(15, 51, 42, .12); transition: background .2s; cursor: pointer; } /* 参考图的指示点是等大的圆点，选中那颗变深绿（不是胶囊条） */ body[data-layout=hero] .ad-dots i.on { background: #0e9c86; } /* ------------------------------------------------ 页脚（移动端回到文档流，不再固定） */ body[data-layout=hero] .footer { grid-template-columns: minmax(0, 1fr); /* 同桌面：广告栏已在页脚之外，不再声明空的 'ad' 行（否则会多出一段空白） */ grid-template-areas: 'brand' 'links' 'contact' 'bottom'; } body[data-layout=hero] .hero-footer-brand { padding: 16px 14px 0; margin: 0; } /* 窄屏默认比桌面大一档（38px），但后台一旦配了尺寸就以配置为准。 */ body[data-layout=hero] .hfb-logo { width: var(--hfb-logo, 38px); height: var(--hfb-logo, 38px); } body[data-layout=hero] .hfb-text strong { font-size: 15.5px; } body[data-layout=hero] .footer-grid { padding: 0 14px; gap: 5px 18px; margin-top: 10px; } body[data-layout=hero] .footer-col p { font-size: 12px; } body[data-layout=hero] .hero-footer-contact { padding: 12px 14px 0; margin: 0; } body[data-layout=hero] .footer-bottom { font-size: 11.5px; text-align: left; padding: 9px 14px 12px; } /* 内容区给底部标签栏留出空间 */ body[data-layout=hero] .content { padding-bottom: calc(70px + env(safe-area-inset-bottom, 0px)); } /* 用户明确要求「移动端没有底部返回顶部按钮功能需要修复」。 这里原来写的是 `display:none !important`（当时的理由是「会和底部标签栏叠在一起， 且参考图移动端没有」）—— 但用户要它，所以改成**保留并把位置抬到标签栏之上**： 标签栏高 60px，回顶键 bottom 给到 74px + 安全区，绝不再重叠。 */ body[data-layout=hero] .back-top { display: grid !important; /* 🔴 用户报「返回顶部按钮的箭头没有居中对齐」。 根因：基础样式 `.back-top`（styles.css:1372）只有 width/height/font-size， 靠按钮的**默认行盒**把 ↑ 摆在中间 —— 那是 `text-align:center` 的近似。 本版式把它改成 `display: grid` 后，文本节点变成一个**匿名网格项**， 在默认 `align-items:normal/justify-items:normal`（等价 stretch）下 会被拉到格子左上角 → 探针实测箭头中心比圆心**高 9.5px**。 （探针：rect 332,726,44,44；↑ 的 Range 矩形 346.5,728,15,21 → Δy = -9.5） 修法：显式 place-items:center 把匿名网格项真正居中， 并把 padding/line-height 归零，避免行盒高度把视觉重心带偏。 */ place-items: center; padding: 0 !important; line-height: 1; font-size: 19px; right: 14px !important; bottom: calc(74px + env(safe-area-inset-bottom, 0px)) !important; z-index: 140; } /* 搜索页展开时把回顶键一起收起来（整屏面板已占满，留着会压在面板上）。 */ body[data-layout=hero].hsp-open .back-top { display: none !important; } /* ------------------------------------------------ 底部标签栏 */ body[data-layout=hero] .hero-tabbar { display: flex; align-items: flex-end; justify-content: space-around; position: fixed; left: 0; right: 0; bottom: 0; z-index: 200; /* 🔴 用户报「移动端搜索页折叠底部搜索图标按钮」。 根因不是 display 被隐藏（探针实测搜索页展开时 tabbar 仍在 y=784..844、 .htb-fab 的 display 仍是 flex），而是**中间那颗绿圆被上一层的搜索面板切了顶**： · .hero-search-pop z-index 190，bottom = calc(60px + 安全区) → 正好压到 y=784 · .hero-tabbar z-index 130 · .htb-fab 的绿圆顶边在 y≈776 → 顶部 8px 落进搜索面板的绘制区里 搜索面板是不透明的（background: var(--hg-shell)），于是圆被削成「平顶」， 看起来就像「折叠」了。截图 `_ref/now_fab_searchopen.png` 可复现。 修法：把标签栏提到搜索面板之上（200 > 190）。两者几何上本来就不重叠 （面板底边 784 = 标签栏顶边 784），抬高只影响那颗**故意溢出**的绿圆， 正好把它完整露出来。仍低于页内面板(300)/抽屉(310)/模态，层级关系不变。 */ height: calc(60px + env(safe-area-inset-bottom, 0px)); padding: 0 4px env(safe-area-inset-bottom, 0px); background: rgba(255, 255, 255, .97); backdrop-filter: saturate(180%) blur(18px); -webkit-backdrop-filter: saturate(180%) blur(18px); border-top: 1px solid var(--hg-line); } body[data-layout=hero] .htb-item { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; /* 底部对齐 + 固定下内边距：这样中间那颗大圆（比别的图标高）也不会把「搜索」两个字顶下去 —— 之前用 justify-content:center，圆圈一变高文字就跟着往下漂（用户报障的错位）。 */ justify-content: flex-end; gap: 3px; height: 56px; padding: 0 0 8px; border: 0; background: transparent; cursor: pointer; color: #9aa9a5; } body[data-layout=hero] .htb-svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; } body[data-layout=hero] .htb-txt { font-size: 10.5px; font-weight: 600; line-height: 1; } body[data-layout=hero] .htb-item.active { color: var(--hg); } /* 中间那颗绿色搜索圆要比基础项大一圈，且**不能压到下面的文字** —— 之前用整项 top:-16px 上移，导致「搜索」文字跟着上移、和圆圈叠在一起（用户报障的错位）。 现在只给图标负外边距，文字留在正常基线，和其余四个标签齐平。 */ body[data-layout=hero] .htb-fab { flex: 0 0 64px; } body[data-layout=hero] .htb-fab .htb-svg { width: 50px; height: 50px; padding: 13px; /* 🔴 flex-shrink 把圆压扁了：实测 computed height 是 **46.5px**（不是 50）， 于是 border-radius:50% 画出来是**椭圆**（用户会觉得「图标被折叠/压扁」）。 原因：.htb-item 是 height:56px + padding-bottom:8px + gap:3px 的**纵向 flex**， 内容（svg 50 + gap 3 + 文字 10.5）本身就超 56，默认 flex-shrink:1 就削了最高的 svg。 修法：显式 flex: 0 0 50px 禁止收缩。父容器 justify-content 已是 flex-end， 所以溢出的部分只会往上顶（正是参考图里绿圆「悬在栏外」的效果）， 「搜索」两个字仍锚在底部基线，不会被带着漂。 */ flex: 0 0 50px; margin: -12px 0 0; border-radius: 50%; background: var(--hg); stroke: #fff; stroke-width: 2.2; box-shadow: 0 8px 20px rgba(10, 168, 124, .38); } body[data-layout=hero] .htb-fab .htb-txt { color: var(--hg); } body[data-layout=hero] .htb-fab:active .htb-svg { background: var(--hg-deep); } /* ------------------------------------------------ 页内面板 */ body[data-layout=hero] .hero-sheet { display: block; position: fixed; inset: 0; z-index: 300; pointer-events: none; } body[data-layout=hero] .hero-sheet[aria-hidden="true"] { visibility: hidden; } body[data-layout=hero] .hero-sheet[aria-hidden="false"] { pointer-events: auto; } body[data-layout=hero] .hs-mask { position: absolute; inset: 0; background: rgba(6, 28, 26, .42); opacity: 0; transition: opacity .22s ease; } body[data-layout=hero] .hero-sheet[aria-hidden="false"] .hs-mask { opacity: 1; } body[data-layout=hero] .hs-panel { position: absolute; left: 0; right: 0; bottom: 0; max-height: 82dvh; display: flex; flex-direction: column; background: var(--hg-card); border-radius: 22px 22px 0 0; box-shadow: 0 -12px 40px rgba(6, 28, 26, .2); transform: translateY(102%); transition: transform .26s cubic-bezier(.3, .9, .3, 1); overflow: hidden; } body[data-layout=hero] .hero-sheet[aria-hidden="false"] .hs-panel { transform: none; } body[data-layout=hero] .hs-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px 12px; border-bottom: 1px solid var(--hg-line); } body[data-layout=hero] .hs-head strong { font-size: 16.5px; font-weight: 800; color: var(--hg-ink); } body[data-layout=hero] .hs-close { width: 32px; height: 32px; border: 0; border-radius: 10px; background: #f4f8f7; color: var(--hg-muted); font-size: 14px; cursor: pointer; } body[data-layout=hero] .hs-body { flex: 1 1 auto; overflow-y: auto; padding: 14px 16px 24px; } /* 面板：分类九宫格 */ body[data-layout=hero] .hs-cats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px 4px; } body[data-layout=hero] .hs-cat { display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 10px 4px; border: 0; border-radius: 14px; background: transparent; cursor: pointer; } body[data-layout=hero] .hs-cat:active, body[data-layout=hero] .hs-cat.active { background: var(--hg-soft); } body[data-layout=hero] .hs-cat-ico { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; font-size: 22px; background: var(--hcg-bg, var(--hg-soft)); } body[data-layout=hero] .hs-cat-name { font-size: 11.5px; font-weight: 600; color: var(--hg-ink); text-align: center; } /* 面板：列表行（收藏 / 我的） */ body[data-layout=hero] .hs-list { display: flex; flex-direction: column; } body[data-layout=hero] .hs-row { display: flex; align-items: center; gap: 11px; padding: 13px 4px; border-bottom: 1px solid var(--hg-line); color: var(--hg-ink); text-decoration: none; background: transparent; border-left: 0; border-right: 0; border-top: 0; width: 100%; text-align: left; cursor: pointer; } body[data-layout=hero] .hs-row:last-child { border-bottom: 0; } body[data-layout=hero] .hs-row-ico { width: 38px; height: 38px; flex: 0 0 38px; border-radius: 12px; display: grid; place-items: center; font-size: 18px; background: var(--hg-soft); /* 兜底：万一有谁往图标格里塞了长文本，也只压成一行省略， 绝不允许逐字换行撑成一列竖排文字（那就是用户报的「重叠重复显示」的样子）。 */ overflow: hidden; white-space: nowrap; text-overflow: ellipsis; line-height: 1; text-align: center; } body[data-layout=hero] .hs-row img.hs-row-ico { object-fit: cover; background: var(--hg-card-2); } body[data-layout=hero] .hs-row-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; } body[data-layout=hero] .hs-row-main b { font-size: 14px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } body[data-layout=hero] .hs-row-main small { font-size: 11.5px; color: var(--hg-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } body[data-layout=hero] .hs-row-go { flex: 0 0 auto; color: #c2cfcb; font-size: 15px; } body[data-layout=hero] .hs-empty { padding: 40px 10px; text-align: center; color: var(--hg-muted); font-size: 13px; } body[data-layout=hero] .hs-empty .emoji { display: block; font-size: 38px; margin-bottom: 10px; } body[data-layout=hero] .hs-me-card { display: flex; align-items: center; gap: 13px; padding: 16px; margin-bottom: 6px; border-radius: 16px; background: linear-gradient(120deg, var(--hg-soft), #f4fbf8); } body[data-layout=hero] .hs-me-card img { width: 56px; height: 56px; flex: 0 0 56px; border-radius: 50%; object-fit: cover; background: var(--hg-card); /* 参考图 mobile_my.png 的头像外面有一圈品牌色细环 */ box-shadow: 0 0 0 3px rgba(10, 168, 124, .16), 0 0 0 1px rgba(10, 168, 124, .45); } /* 头像右侧的信息列：昵称 / 账号归属 / 绑定邮箱 （用户报「头像右侧没有显示昵称、账号归属、绑定邮箱三项」）。 这三项与桌面端顶栏头像菜单头部 `.user-menu-header`、个人中心 profile.js、 安全中心 security.js 用的是**同一份数据**：昵称 nickname、account_label、email， 所以文案三处天然一致，不需要各写一套。 */ body[data-layout=hero] .hs-me-info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; } body[data-layout=hero] .hs-me-name { font-size: 16.5px; font-weight: 800; color: var(--hg-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } body[data-layout=hero] .hs-me-sub { font-size: 12px; color: var(--hg-muted); margin-top: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* 账号归属（第二行）稍微提一点权重，让它与「绑定邮箱」区分开 */ body[data-layout=hero] .hs-me-affiliation { font-size: 12px; color: var(--hg); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* 面板内的分组小标题（与抽屉的 .hd-group-title 同款，但归属 .hs-* 命名空间， 避免以后抽屉改样式时被连带影响） */ body[data-layout=hero] .hs-group { margin-bottom: 6px; } body[data-layout=hero] .hs-group:last-child { margin-bottom: 0; } body[data-layout=hero] .hs-group-title { font-size: 11.5px; font-weight: 700; letter-spacing: .06em; color: var(--hg-muted); margin: 12px 0 2px 2px; } body[data-layout=hero] .hs-group:first-child .hs-group-title { margin-top: 4px; } /* ------------------------------------------------ 左侧主菜单抽屉（App 顶部 ☰） */ body[data-layout=hero] .hero-drawer { display: block; position: fixed; inset: 0; z-index: 310; pointer-events: none; } body[data-layout=hero] .hero-drawer[aria-hidden="true"] { visibility: hidden; } body[data-layout=hero] .hero-drawer[aria-hidden="false"] { pointer-events: auto; } body[data-layout=hero] .hd-mask { position: absolute; inset: 0; background: rgba(6, 28, 26, .42); opacity: 0; transition: opacity .22s ease; } body[data-layout=hero] .hero-drawer[aria-hidden="false"] .hd-mask { opacity: 1; } body[data-layout=hero] .hd-panel { position: absolute; left: 0; top: 0; bottom: 0; width: min(84vw, 322px); display: flex; flex-direction: column; background: var(--hg-card); border-radius: 0 20px 20px 0; box-shadow: 12px 0 40px rgba(6, 28, 26, .22); transform: translateX(-102%); transition: transform .26s cubic-bezier(.3, .9, .3, 1); overflow: hidden; } body[data-layout=hero] .hero-drawer[aria-hidden="false"] .hd-panel { transform: none; } body[data-layout=hero] .hd-head { display: flex; align-items: center; gap: 11px; padding: 18px 16px 14px; background: linear-gradient(120deg, var(--hg-soft), #f6fbf9); border-bottom: 1px solid var(--hg-line); } body[data-layout=hero] .hd-head img { width: 42px; height: 42px; flex: 0 0 42px; border-radius: 13px; object-fit: cover; background: var(--hg-card-2); border: 1px solid var(--hg-line); } body[data-layout=hero] .hd-head-txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; } body[data-layout=hero] .hd-head-txt strong { font-size: 16px; font-weight: 800; color: var(--hg-ink); } body[data-layout=hero] .hd-head-txt small { font-size: 11.5px; color: var(--hg-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } body[data-layout=hero] .hd-close { width: 30px; height: 30px; flex: 0 0 30px; border: 0; border-radius: 10px; background: rgba(255, 255, 255, .9); color: var(--hg-muted); font-size: 13px; cursor: pointer; } body[data-layout=hero] .hd-body { flex: 1 1 auto; overflow-y: auto; padding: 12px 16px calc(24px + env(safe-area-inset-bottom, 0px)); } body[data-layout=hero] .hd-group { margin-bottom: 14px; } body[data-layout=hero] .hd-group-title { font-size: 11.5px; font-weight: 700; letter-spacing: .06em; color: var(--hg-muted); margin: 0 0 4px 2px; } body[data-layout=hero] .hs-row.active { background: var(--hg-soft); border-radius: 12px; } body[data-layout=hero] .hs-row.active .hs-row-main b { color: var(--hg); } } /* 平板（768–1180）：图标网格 6 列、卡片 3 列 */ @media (min-width: 768px) and (max-width: 1180px) { body[data-layout=hero] .hcg-list { --hcg-cols: 6 !important; } body[data-layout=hero] #cards .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } body[data-layout=hero] .cards-sections { padding: 18px var(--hg-side) 28px; } body[data-layout=hero] .hero-cat-grid { padding: 0 var(--hg-side); } } /* ========================================================================== 2026-09-14 final fidelity pass 广告与页脚已在 DOM 中拆成相邻区域；以下规则统一收紧首屏并修正固定层关系。 ========================================================================== */ /* hero 高度抽成变量：搜索框/热搜的 bottom 要跟着它走，否则两条曲线对不上（见文件末尾的微调块）。 */ body[data-layout=hero] { --hg-hero-h: clamp(226px, 17vw, 252px); } body[data-layout=hero] .carousel-area { height: var(--hg-hero-h) !important; } body[data-layout=hero] .hero-search-head { top: clamp(24px, 3vw, 42px); } body[data-layout=hero] #mainSearchWrap .search-inner { bottom: clamp(40px, 3.8vw, 54px); } body[data-layout=hero] .hero-hot-words { bottom: clamp(7px, .8vw, 12px); z-index: 72; } body[data-layout=hero] #mainSearchWrap #engineOverlay, body[data-layout=hero] #mainSearchWrap .overlay { z-index: 90 !important; } /* ---------------------------------------------------- 日期 / 天气 / 万年历 三张卡 用户要求：三张卡「尺寸完全一样 + 中间有间隔 + 轮播图内垂直居中 + 背景透明」。 ⚠️ 这里必须显式写 `min-width: 0 !important`，这是「三张卡尺寸不一样」的根因： styles.css 底部有一条 `.carousel-side { … min-width: 220px; … }`，而 CSS 规范里 **min-width 无条件赢过 width**（!important 也压不住，min-width 是独立的约束）， 于是天气/万年历卡被顶成 220px，而日期卡没有 .carousel-side 类保持 184px —— 这就是报障截图里「一张窄两张宽、中间还没间隔」的完整机制。 实测修复前：date 184×112 / weather 220×112 / calendar 220×112，且 weather 与 calendar 的右边界重叠 26px。 透明背景是设计原意（styles.css 里那段的注释就写着「完全透明背景（直接看轮播图）」）， 可读性改由文字阴影承担，不再用玻璃底板压住轮播图。 */ body[data-layout=hero] { --hg-card-w: clamp(176px, 12.4vw, 200px); /* 三卡统一宽度 */ /* 三卡统一高度。取 136px 而不是原来的 112px： 万年历的月视图需要「标题 + 月份行 + 星期行 + 6 行日期」，112px 只能放下约 3 行， 实测第 4–6 行被裁掉（月历显示不全 = 日历本身坏掉）。136px 在保持接近效果图 卡片比例（效果图约 120px）的前提下让整月完整可见。 */ --hg-card-h: 136px; --hg-card-gap: 12px; /* 天气卡与万年历卡之间的间隔 */ --hg-card-pad: clamp(18px, 2.2vw, 32px); /* 距轮播左右边缘 */ } body[data-layout=hero] .hero-hero-date, body[data-layout=hero] #carouselWeather.carousel-side, body[data-layout=hero] #carouselWeather.carousel-side.left, body[data-layout=hero] #calendarWidget.carousel-side, body[data-layout=hero] #calendarWidget.carousel-side.right { min-width: 0 !important; width: var(--hg-card-w) !important; max-width: var(--hg-card-w) !important; height: var(--hg-card-h) !important; max-height: var(--hg-card-h) !important; top: 50% !important; bottom: auto !important; transform: translateY(-50%) !important; background: transparent !important; border: 0 !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; color: #fff !important; } body[data-layout=hero] .hero-hero-date { display: flex; flex-direction: column; justify-content: center; left: var(--hg-card-pad) !important; right: auto !important; padding: 0 14px !important; border-radius: 0; } body[data-layout=hero] #carouselWeather.carousel-side, body[data-layout=hero] #carouselWeather.carousel-side.left { left: auto !important; right: calc(var(--hg-card-pad) + var(--hg-card-w) + var(--hg-card-gap)) !important; padding: 0 13px !important; border-radius: 0; } body[data-layout=hero] #calendarWidget.carousel-side, body[data-layout=hero] #calendarWidget.carousel-side.right { left: auto !important; right: var(--hg-card-pad) !important; padding: 0 12px !important; border-radius: 0; } /* 🔴 用户报「关闭万年历卡片显示后实时天气卡片自动靠右显示」。 根因：hero 三卡是**按容器右边缘定位**的 —— 日期卡：left = pad 天气卡：right = pad + 卡宽 + 间隔 ← 给右边的万年历"让位" 万年历：right = pad 万年历被后台关掉（app.js 只把它 display:none）后，天气卡**还停在倒数第二槽**， 于是右边缘空出一整张卡+间隔的宽度，视觉上就是「天气卡缩到中间偏右、右边一大块空的」。 修法：app.js 关掉日历时给 打 `data-calendar-hidden="1"`（只加状态属性，不动 DOM）， 这里把它补到最右槽位。日期卡留在最左不动（左右对称，视觉上更完整）。 ⚠️ 必须限定 min-width:768px：窄屏（≤767px）天气卡是整条通栏玻璃条（left/right 都是 14px）， 而本规则的 (1,3,1) 特异性高于窄屏那条 (1,2,1)，不限定范围会把通栏条一起压窄。 */ @media (min-width: 768px) { body[data-layout=hero][data-calendar-hidden="1"] #carouselWeather.carousel-side, body[data-layout=hero][data-calendar-hidden="1"] #carouselWeather.carousel-side.left { right: var(--hg-card-pad) !important; left: auto !important; } } /* 透明底下的可读性：白字 + 深色柔光阴影，替代原来的玻璃底板 */ body[data-layout=hero] .hero-hero-date .hd-date, body[data-layout=hero] .hero-hero-date .hd-lunar, body[data-layout=hero] .hero-hero-date .hd-quote, body[data-layout=hero] #carouselWeather .cw-title, body[data-layout=hero] #carouselWeather .cw-now, body[data-layout=hero] #carouselWeather .cw-now small, body[data-layout=hero] #carouselWeather .cw-now span, body[data-layout=hero] #calendarWidget .cw-title, body[data-layout=hero] #calendarWidget .cw-month-title, body[data-layout=hero] #calendarWidget .cw-month-grid > *, body[data-layout=hero] #calendarWidget .cw-month-dow { text-shadow: 0 1px 3px rgba(0, 0, 0, .78), 0 0 12px rgba(0, 0, 0, .5) !important; } body[data-layout=hero] .hero-hero-date .hd-quote { border-top-color: rgba(255, 255, 255, .3); } body[data-layout=hero] #carouselWeather .cw-title, body[data-layout=hero] #calendarWidget .cw-title { color: rgba(255, 255, 255, .94) !important; } body[data-layout=hero] #carouselWeather .cw-now, body[data-layout=hero] #carouselWeather .cw-now span, body[data-layout=hero] #calendarWidget .cw-month-title, body[data-layout=hero] #calendarWidget .cw-month-grid > * { color: #fff !important; } body[data-layout=hero] #carouselWeather .cw-now small, body[data-layout=hero] #calendarWidget .cw-month-dow { color: rgba(255, 255, 255, .78) !important; } body[data-layout=hero] #carouselWeather .cw-forecast .day { background: rgba(255, 255, 255, .14) !important; color: #fff !important; } body[data-layout=hero] #calendarWidget .cw-month-nav { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .24); color: #fff; } /* 万年历在 hero 下要「整月可见 + 不超出 136px 卡片」，所以把内部纵向节奏压紧一档。 压缩后实测：标题 ≈12 + 月份行 ≈22 + 星期行 ≈11 + 6 行日期 ≈89 = 134px ≤ 136px ✓ */ body[data-layout=hero] #calendarWidget .cw-title { font-size: 9.5px !important; line-height: 12px; margin: 0; } body[data-layout=hero] #calendarWidget .cw-month-head { margin: 2px 0; } body[data-layout=hero] #calendarWidget .cw-month-title { font-size: 11px; } body[data-layout=hero] #calendarWidget .cw-month-nav { width: 18px; height: 18px; border-radius: 6px; font-size: 11px; } body[data-layout=hero] #calendarWidget .cw-month-dow { font-size: 8.5px !important; line-height: 11px; margin-bottom: 1px; } body[data-layout=hero] #calendarWidget .cw-month-grid { gap: 1px; } body[data-layout=hero] #calendarWidget .cw-month-grid > * { font-size: 9.5px !important; line-height: 14px; height: 14px; border-radius: 4px; } /* 减少内容两侧留白并压缩纵向节奏；宽屏卡片保持最多六列。 ⚠️ 这里**不能**再写 max-width:1760px。1920 视口下它会把 .cards-sections 居中， 每侧空出 80px（实测 alignLeft: cat 96 / grid 96 / adCard 16，三区三种留白）， 正是用户红框标出的那两条「太宽的留白」。改由 --hg-side 统一控制。 */ body[data-layout=hero] .hero-cat-grid, body[data-layout=hero] .cards-sections { max-width: none; } body[data-layout=hero] .hero-cat-grid { padding: 0 var(--hg-side); } /* 分类图标的内缩量 = 卡片的内缩量（--hg-inset），保证两者可视左边缘对齐。 */ body[data-layout=hero] .hcg-list { padding: 12px var(--hg-inset) 10px; } body[data-layout=hero] .hcg-item { padding:4px 3px; gap:6px; } body[data-layout=hero] .hcg-ico { width:46px; height:46px; border-radius:14px; font-size:23px; } body[data-layout=hero] .cards-sections { padding: 9px var(--hg-side) 22px; gap: 11px; } body[data-layout=hero] .cards-sections > .section, body[data-layout=hero] .cards-sections > section { padding: 12px var(--hg-inset) 14px !important; } /* 卡片区两侧留白的三次迭代： ① 一开始卡片网格左边距 31px（内容区 16 + 面板内边距 15.36），比广告栏宽 → 用户报「太宽」； ② 我把面板左右内边距归零，卡片贴到面板圆角边 → 用户报「直接挨着卡片区域边界不美观、需要增加间隔」； ③ 现在：面板背景透明（没有「边界」了），内缩量 --hg-inset 与分类图标完全一致， 既和分类区对齐，又保留一圈呼吸留白。上面 1628 行那条 padding 已合并进基础块，这里不再覆盖左右值。 */ body[data-layout=hero] .section-title { margin-bottom:8px; } body[data-layout=hero] .cat-tabs { margin-bottom:9px; gap:6px; } /* 卡片间距从 8px 放到 12px —— 用户报「网址卡片太紧凑了看着乱」。 与上面 #cards .cards 的基础值（12px）保持一致；六列在 1536 视口下 每张仍有 ≈240px，不会读不清。 */ body[data-layout=hero] #cards .cards { gap: 12px 14px; } body[data-layout=hero] #cards .card.new-layout { padding:9px 9px 5px; } body[data-layout=hero] #cards .card-actions { margin-top:5px; padding-top:5px; } /* 独立广告栏：没有明显区域边界，背景与内容区融为一体。 */ body[data-layout=hero] #adRowFooter { display:grid !important; grid-template-columns:repeat(var(--ad-cols,4),minmax(0,1fr)); gap:8px; padding:7px var(--hg-side); margin:0; background:var(--hg-shell); border:0; max-width:none; } /* ⚠️ 这里**不要**写 `#adRowFooter .ad-card{height:62px}`。 62px 是桌面端「四条并排扁广告」的高度，但它原本被写在媒体查询外面， 而移动端块（@media max-width:767px，约 1209 行）给同一选择器写的是 118px（单条大图轮播）。 两者特异性相同，62px 因位置更靠后而全局胜出 —— 实测移动端卡片只有 62px 高、 行高却仍是 118px，于是图片下面空出 56px、指示点孤零零浮在图片外。 现在把 62px 收进下面的 @media (min-width:768px)，两边各归其位。 */ body[data-layout=hero] #adRowFooter.hidden, body[data-layout=hero] #adRowFooter.session-empty { display:none !important; } /* 广告关闭键只在悬浮/聚焦时显示；刷新后由服务端重新渲染，自动恢复。 */ body[data-layout=hero] .ad-hover-close { position:absolute; right:7px; bottom:7px; z-index:8; width:28px; height:28px; border:0; border-radius:50%; display:grid; place-items:center; background:rgba(12,35,32,.72); color:#fff; font-size:20px; line-height:1; opacity:0; pointer-events:none; cursor:pointer; transition:opacity .16s,background .16s; } body[data-layout=hero] .ad-card:hover .ad-hover-close, body[data-layout=hero] .ad-hover-close:focus-visible { opacity:1; pointer-events:auto; } body[data-layout=hero] .ad-hover-close:hover { background:#df4c4c; } body[data-layout=hero] .ad-card.ad-dismissed { display:none !important; } @media (min-width:768px) { body[data-layout=hero] .info.top-info { position:fixed; left:0; right:0; top:0; } body[data-layout=hero] .topbar { margin-top:var(--hg-head-h,110px); } /* 桌面端：四条并排的扁广告条，高度 62px（移动端是 118px 单条大图轮播，见下面 max-width:767px 块） */ body[data-layout=hero] #adRowFooter .ad-card { height:62px; } body[data-layout=hero] #adRowFooter { position:fixed; left:0; right:0; bottom:var(--hg-footer-h,82px); z-index:149; transition:bottom .24s ease; } body[data-layout=hero] .footer { transition:transform .24s ease,opacity .24s ease; } /* 🔴 用户报「页脚被遮挡」（Clipboard_Screenshot-3.png）。 根因是**页脚内容被自己的 overflow:hidden 裁掉**，不是被别的元素压住： 实测（1920/1440/1280 三档同值）： #footerGrid clientHeight=68 scrollHeight=80 overflow-y=hidden → 裁掉 12px 4 个 .footer-col 的 rect 是 y=899.1 h=77.8（底 976.9）， 而 #footerGrid 的 rect 是 y=903 b=971 → 每个链接列**上溢 3.9px、下溢 5.9px**，h4 标题的顶部与最后一行链接的 底部同时被切掉（截图 _ref/before_footer_left.png 里「隐私政策」明显缺一半）。 这是一个「写死高度」型缺陷：`max-height:98px` + `grid-template-rows:68px 30px` 是按「标题 + 2 行链接」估的，而这个站点配的是「标题 + 3 行链接」→ 正好差一行。 修法：不再钉死高度，改成**内容驱动**（auto）—— .footer 的实测高度由 measureFooter() 的 ResizeObserver 写进 --hg-footer-h， 广告条 bottom 与 .content 的 padding-bottom 都跟着它走，所以自动适配不会错位； 后台以后再加几条链接也不会重新出现裁切。 ⚠️ 同时**不能**把 .footer 收窄到 1560px —— 它的 background 是用户上传的页脚背景图， 必须铺满整幅宽度；水平居中的对齐改由左右 padding 实现（见下）。 */ body[data-layout=hero] .footer { min-height:0; max-height:none; grid-template-rows:auto auto; /* 用户报「页脚内容、页脚社交三连联系方式、页脚栏语言切换按钮没有在页脚栏水平居中」： 底行 .footer-bottom 是 `width:min(100%,1560px)` + justify-self:center（实测 180..1740）， 而 brand/links/contact 那一行是 0..1920 铺满视口 —— 两组内容的左右边界对不上， 视觉上就是「上面一行没居中」。把左右补白做成「剩余宽度的对半」， 三列就落在与底行完全相同的居中容器里（180..1740），品牌 logo / 社交三连 / 语言胶囊与版权行的两端一次对齐。 用 padding 而不是 width，是为了不破坏铺满全宽的页脚背景图。 */ padding-left: max(12px, calc((100% - 1560px) / 2)); padding-right: max(12px, calc((100% - 1560px) / 2)); } body[data-layout=hero] .hero-footer-brand { padding-top:6px; padding-bottom:6px; } body[data-layout=hero] .footer-grid { /* 原来写的是 max-height:68px + overflow:hidden（注释说明它按「标题 + 2 行链接」估的）。 现在交给内容决定高度：--hg-footer-h 由 measureFooter() 用 ResizeObserver 实测后 自动跟随，广告条会自己让位。 */ max-height:none; overflow:visible; padding-top:8px; padding-bottom:8px; gap:2px 18px; } body[data-layout=hero] .footer-col p { font-size:11px; margin:1px 0; line-height:1.45; } /* ⚠️ padding-right 归零：这一组要「右端与版权行右端对齐」，多出 12px 内缩就差了 12px （实测 alignRight = -12）。右侧的呼吸留白改由 .footer 的 padding-right 提供， 这样 ≥1560px 时两者都落在同一个居中容器里，窄屏也不会贴到视口边缘。 */ body[data-layout=hero] .hero-footer-contact { padding-left:8px; padding-right:0; gap:6px; } body[data-layout=hero] .footer-bottom { margin:0; padding:6px 12px 7px; } body[data-layout=hero].hero-footer-collapsed .footer { transform:translateY(100%); opacity:0; pointer-events:none; } body[data-layout=hero].hero-footer-collapsed #adRowFooter { bottom:0; } } @media (min-width:1200px) { body[data-layout=hero] .info.top-info #dateTime, body[data-layout=hero] .info.top-info #dateExtra, body[data-layout=hero] .info.top-info #siteUptime, body[data-layout=hero] .info.top-info #quote { display:inline-flex; align-items:center; min-width:0; max-width:150px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--hg-muted); font-size:10.5px; } body[data-layout=hero] .info.top-info #quote { max-width:190px; } body[data-layout=hero] .info.top-info #dateTime, body[data-layout=hero] .info.top-info #dateExtra, body[data-layout=hero] .info.top-info #siteUptime, body[data-layout=hero] .info.top-info #quote { order:3; } body[data-layout=hero] .info.top-info > div:not([class]) { order:4; } body[data-layout=hero] .info.top-info > #themeDropdown { order:5; } body[data-layout=hero] .info.top-info > #layoutDropdown { order:6; } body[data-layout=hero] .info.top-info > #pageDropdown { order:7; } body[data-layout=hero] .info.top-info > #langDropdown { order:8; } body[data-layout=hero] .info.top-info > #btnKf, body[data-layout=hero] .info.top-info > #btnAuth, body[data-layout=hero] .info.top-info > #quickAppsWrap, body[data-layout=hero] .info.top-info > #userMenuWrap { order:9; } } /* ========================================================================== 🔴 顶栏「桌面顶部工具不换行」收敛 依据：桌面规范 13「≥1440px：4列站点卡片；1200–1439px：3–4列自适应； 桌面顶部工具不换行」+ 验收 8「1440/1920 宽屏与常见笔记本分辨率 无溢出、遮挡、重叠」。 用户报障 ⑬「页面部分按钮位置错位显示了」也是这一条 —— 顶栏第二排的 🤖/🎨/📄/🌐 四个下拉被挤到下一行后，与右侧按钮的垂直中线就对不上了。 实测（修复前，见 .probe-bar.js / .probe-q.js）： 1920 → band1 单行，整条 .info.top-info 高 110px ✓ 1440 → band1 换行，高 158px（langDropdown / btnAuth 被挤到第二排）✗ 1280 → 同样 158px ✗ 1440 第一排的“假想宽度”之和：1191px + 9×10(gap) = 1281，仅余 99px 空档， 而 langDropdown 需要 124px + gap 10px = 134px → 放不下只能换行。 根因两条叠加： (a) client/app.js 渲染「每日一言」时给 #quote 打了**行内样式** （max-width:520px / white-space:normal / overflow:visible， 那是给 classic 版式「长句不要被省略号截断」做的）。 行内样式压过全部普通声明（!important 才压得住）→ 实测 #quote 渲染 299px， 而设计上限只有 190px，第一排直接被它挤爆。 (b) 本文件顶部那条注释里写的「窄屏按重要性逐级隐藏（见文件末尾的媒体查询）」 **媒体查询根本不存在** —— 1200–1439px 这一段从未做过收敛， 于是 12 个控件（品牌 + 天气 + 4 枚信息胶囊 + 4 个下拉 + 登录 + 占位块） 的假想宽度之和必然超宽。 修法：①信息胶囊与品牌区加**随视口收缩的上限**（clamp 下限 = 关键信息不截断 所需的最小宽度）；②1500px 以上给 #quote 补 !important 压掉行内样式； ③1200–1319px 按重要性隐藏「每日一言」（桌面规范第 2 节把每日一言列在 **Hero** 内容里，顶部信息栏条款里没有它 → 它优先级最低）。 ⚠️ !important 只加在 max-width / white-space / overflow / text-overflow 四项上， **绝不动 display** —— 上面 styles.css 的「窄屏隐藏」与 app.js 的显示开关 都靠 display 生效，误加 !important 会让「关掉某信息项」的设置失效。 ⚠️ 不动宽屏下 .info.top-info 的左右 padding(30px)：它与下方内容区的对齐 关系是量过的；只在 <1440px 收窄。 */ @media (min-width:1200px) { /* 天气：参考图里这颗胶囊带「当前位置 + 天气 + 温度 + 风速」，140px 是仍能 读出「天气 + 温度」的下限，窄屏截掉风速尾巴。 */ body[data-layout=hero] .info.top-info #weather { max-width: clamp(140px, 11vw, 320px) !important; } /* 每日一言：**不再用省略号截断**（用户报障：句子过长显示不全）。 旧值是 clamp(110px, 10vw, 320px) + text-overflow:ellipsis —— 1440 下只给到 144px，一句话必然被切掉大半。 为什么宽度上限**保持原值**：这条 clamp 是当初按"band0 必须一行"实测调出来的， 换行判定只看 flex-basis 被 min/max 夹紧后的"假想主尺寸"（flex-shrink 不参与， 见 MEMORY.md 的 CSS 层叠硬规律表）。我实测过：把上限抬到 15vw 时 1440 立刻 掉成两排（顶栏 110→153px），14vw 时 1320 掉成两排（106→145px）。 与其在宽度上冒险，不如把"看不全"交给跑马灯解决 —— 于是这里只把 text-overflow 从 ellipsis 改成 clip，再由 app.js 的 fitQuoteTicker() 按是否溢出决定要不要横向滚动。**零布局风险，且任意宽度都能读全。** */ body[data-layout=hero] .info.top-info #quote { max-width: clamp(110px, 10vw, 320px) !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: clip !important; } /* 日期时间：126px 是「2026-09-14 20:13」的完整宽度，下限取 126 保证不截断。 */ body[data-layout=hero] .info.top-info #dateTime { max-width: clamp(126px, 8vw, 150px) !important; } /* 运行时间：「已运行：4小时41分钟58秒」约 118~180px（位数会变）， 下限取 118 保住「已运行：X分钟」，宽屏给到 200px 完整显示（参考图是完整的）。 */ body[data-layout=hero] .info.top-info #siteUptime { max-width: clamp(118px, 10vw, 200px) !important; } /* 品牌区：图标 40px 是钉死的（.hero-brand-logo flex:0 0 40px）， 被压的只能是右侧文字列 —— 给它 min-width:0 + 省略号。 */ body[data-layout=hero] .info.top-info > #heroBrand { max-width: clamp(104px, 10vw, 260px); } body[data-layout=hero] .info.top-info > #heroBrand .hero-brand-text strong, body[data-layout=hero] .info.top-info > #heroBrand .hero-brand-text small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } } /* ≥1500px：顶栏富余最多（1920 下整条只用到 ~1420px），把每日一言的额度顶到 14vw， 让常见长度的句子**一次显示完整**而不是慢慢滚 —— 实测 1680 拿到 235px、1920 拿到 268px，均 > 常见长句的 221px；顶栏高度保持 110px 不变。 1500 作为起点是实测过的：14vw 在 1440 会踩到换行边界（掉成两排）， 所以这条只在明显有余量的宽屏生效；更长的句子仍由跑马灯兜底。 */ @media (min-width:1500px) { body[data-layout=hero] .info.top-info #quote { max-width: min(320px, 14vw) !important; } } /* 1200–1439px（常见笔记本分辨率）：密度再收一档 —— gap 10→6、左右内边距 30→14~22， 换来 ~60px 富余，保证第一排一定能容下 4 个下拉 + 登录按钮。 */ @media (min-width:1200px) and (max-width:1439px) { body[data-layout=hero] .info.top-info { gap: 6px; padding-left: clamp(14px, 1.4vw, 22px); padding-right: clamp(14px, 1.4vw, 22px); } } /* 1200–1319px：连每日一言也放不下了（再收会把它压成 5 个字 + 省略号，不如不显示）。 按桌面规范第 2 节，每日一言本属 Hero 内容，顶部信息栏条款里没有它 → 最先让位。 */ @media (min-width:1200px) and (max-width:1319px) { body[data-layout=hero] .info.top-info #quote { display: none !important; } } @media (max-width:767px) { body[data-layout=hero] .carousel-area { height:348px !important; } body[data-layout=hero] #carouselWeather.carousel-side, body[data-layout=hero] #carouselWeather.carousel-side.left { left:14px !important; right:14px !important; top:auto !important; bottom:14px !important; min-width:0 !important; width:auto !important; max-width:none !important; height:74px !important; max-height:74px !important; /* 上面「三卡统一」那段给 transform 打了 !important（桌面靠它垂直居中）， 窄屏必须同样用 !important 覆盖成 none，否则整条会往上飘 50%。 */ transform:none !important; padding:0 16px !important; } body[data-layout=hero] #carouselWeather .cw-now { padding-right:46%; } body[data-layout=hero] .hero-hero-date { left:auto !important; right:30px !important; top:auto !important; bottom:14px !important; min-width:0 !important; width:auto !important; max-width:46% !important; height:74px !important; max-height:74px !important; transform:none !important; padding:0 !important; border:0 !important; background:transparent !important; align-items:flex-end !important; text-align:right; pointer-events:none; } body[data-layout=hero] .hero-hero-date .hd-quote { display:none; } body[data-layout=hero] #adRowFooter { display:block !important; padding:0; background:transparent; } body[data-layout=hero] #adRowFooter.hidden, body[data-layout=hero] #adRowFooter.session-empty { display:none !important; } body[data-layout=hero] .ad-hover-close { opacity:1; pointer-events:auto; } /* 移动端卡片只保留直达/收藏，不生成“更多/三个点”。 */ body[data-layout=hero] #cards .card-actions .ghost.small[data-act="copy"] { display:none !important; } } /* ========================================================================== 搜索框 + 热搜的位置微调 用户原话：「沉浸首页的搜索输入框和热搜位置上移现在看着不好看，缩小搜索框和网站名称 以及『让互联网更简单』文字之间的间隔」。 根因（实测 1536×950）：hero 高度是 clamp(226px,17vw,252px)，而搜索框 bottom 是 clamp(40px,3.8vw,54px) —— 两者不是同一条曲线。视口 ≥1482px 后 hero 顶到 252px 不再变， 而 bottom 在 ≥1421px 后就锁死在 54px，于是「副标题底 → 搜索框顶」的间隔 从 1421px 时的 ~8px 一路涨到 1536px 的 18px（实测副标题底 232、搜索框顶 250）， 热搜底距 hero 底又只剩 12px —— 整体重心下坠，字和框之间空一大截。 修法：让 bottom 跟着 hero 高度走（bottom = hero高 − 188px），于是「搜索框顶」被固定在 hero 内 130px 处（= 188 − 58），跟副标题底（hero 内 122px）恒定差 8px； 热搜同理（bottom = hero高 − 230px），与搜索框的间隔保持 14px 不变。 窄屏算出来仍等于原来的值、宽屏自动上提。 ⚠️ 两块必须一起移动 —— 只把搜索框上提而不带上热搜，会让「搜索框→热搜」的间隔 从 14px 拉到 24px，反而更散。 ⚠️ 必须限定 min-width:768px —— 移动端 hero 另有一套 348px 的规则， 套这条公式会把搜索框往下推 14px。 */ @media (min-width: 768px) { body[data-layout=hero] #mainSearchWrap .search-inner { bottom: max(40px, calc(var(--hg-hero-h) - 188px)); } body[data-layout=hero] .hero-hot-words { bottom: max(7px, calc(var(--hg-hero-h) - 230px)); } } /* ========================================================================== 深色模式（body.theme-dark）—— hero 版式的完整暗色适配 -------------------------------------------------------------------------- 🔴 为什么必须单独写这一块： hero 版式用的是**自己的一套变量**（--hg / --hg-shell / --hg-ink / --hg-line …， 见本文件顶部第 18-27 行），而 styles.css 的 `.theme-dark` 只覆盖了**另一套** （--bg / --text / --card-bg / --border / --primary …）。两套变量互不相干， 于是切到深色时：全站的按钮、下拉框、侧栏、表格都会变色， **而 hero 首页一个像素都不动** —— 底色还是 #eff6f7 的浅灰、卡片还是纯白。 用户报的「皮肤切换没有完整应用，深色模式只是按钮变了，整个首页没有变深色」 就是这个原因，不是切换逻辑坏了（切换逻辑本身是对的）。 做法分两步： ① 把 --hg-* 整体对齐到暗色（这一步能自动带好所有**走变量**的规则： 卡片文字、边框、分区线、分类图标底色、页脚文字…）； ② 逐条点名覆盖那些**写死浅色**的表面（#fff / #f4f8f7 / rgba(255,255,255,·)）， 它们不走变量，改不到变量上。 ⚠️ 本块必须放在文件**最后**：里面有几条要压过 @media 里的 !important， 靠的是「多一个 .theme-dark 类 ⇒ 特异性更高」；位置靠后只是双重保险。 ========================================================================== */ body[data-layout=hero].theme-dark { /* 🔴 这里**不再重复写颜色**。 历史：本块以前把 --hg / --hg-ink / --hg-card … 又抄了一遍暗色值 —— 那时 --hg-* 确实是独立的一套写死色值，抄一遍是唯一办法。现在 --hg-* 已全部派生自 styles.css 的皮肤令牌（--primary / --bg / --text / --card-bg / --border，见文件顶部）， 切一下 body 上的主题类颜色就自动对了；多抄一遍反而会让 「后台样式管理里的自定义皮肤」在 hero 上失效（自定义皮肤不加 .theme-dark，本块永不命中）。 只保留与 hero 专属机制有关的少量覆盖：投影在暗底上要更重才看得出层次。 */ --hg-shadow: 0 6px 26px rgba(0, 0, 0, .42); --hg-shadow-lg: 0 14px 40px rgba(0, 0, 0, .52); /* 暗色下搜索药丸是「暗底 .80 玻璃」（见下方 .search-inner 那条）， 所以输入文字要反过来用浅色，不能沿用亮色的白字配黑晕 —— 见下面 text-shadow 那条。 */ --search-ink: #e8f1ef; background: var(--hg-shell); color: var(--hg-ink); /* 让原生控件（滚动条、输入框、日期选择器）跟着变暗 */ color-scheme: dark; } /* ---------------------------------------------------------------- 顶栏 */ body[data-layout=hero].theme-dark .info.top-info, body[data-layout=hero].theme-dark .hero-mbar { background: rgba(11, 17, 23, .94); border-bottom-color: var(--hg-line); box-shadow: 0 2px 12px rgba(0, 0, 0, .40); } /* 顶栏四个下拉按钮 + 九宫格：底色写死 #fff，必须点名覆盖（原规则带 !important） */ body[data-layout=hero].theme-dark .info.top-info > .dropdown > .ghost, body[data-layout=hero].theme-dark .info.top-info #userBtn { background: var(--hg-card-2) !important; border-color: var(--hg-line) !important; color: var(--hg-ink) !important; } body[data-layout=hero].theme-dark .info.top-info > .dropdown > .ghost:hover, body[data-layout=hero].theme-dark .info.top-info #userBtn:hover { border-color: var(--hg) !important; background: var(--hg-soft) !important; color: var(--hg-deep) !important; } /* 账号区按钮在 hero 下本来是透明底，这里保持透明（别被上面那条带进来） */ body[data-layout=hero].theme-dark .info.top-info #userBtn { background: transparent !important; border-color: transparent !important; } /* -------------------------------------------------------------- 搜索框 */ body[data-layout=hero].theme-dark #mainSearchWrap .search-inner { /* 亮色下是「白 .26 玻璃」，暗色下换成「暗底 .80 玻璃」，否则白雾会发灰发脏。 这条要压过窄屏媒体查询里的 !important —— 靠多一个类拿到更高特异性。 */ background: rgba(21, 29, 39, .80) !important; box-shadow: 0 10px 34px rgba(0, 0, 0, .45), inset 0 0 0 1px rgba(255, 255, 255, .12); } /* 亮色下给输入文字加的是**白色**柔光（为了压在亮图上能读清）； 暗色里必须换成黑色柔光，否则浅色字外面套一圈白晕，糊成一团。 */ body[data-layout=hero].theme-dark #mainSearchWrap #searchInput, body[data-layout=hero].theme-dark #mainSearchWrap #searchInput::placeholder { text-shadow: 0 1px 3px rgba(0, 0, 0, .65); } /* 用户要求「提示文字改成淡白色」在暗色下同样成立：#7f938e 是偏灰绿的暗哑色， 压在 rgba(21,29,39,.80) 的暗药丸上、背后还是照片，实际很难读。 提到 .70 白 —— 仍然明显弱于正文（不会喧宾夺主），但一眼看得见。 */ body[data-layout=hero].theme-dark #mainSearchWrap #searchInput::placeholder { color: rgba(255, 255, 255, .70); } body[data-layout=hero].theme-dark #mainSearchWrap .engine-icon { border-right-color: var(--hg-line); } body[data-layout=hero].theme-dark #mainSearchWrap .search-tool { color: #dbe7e4; } /* ------------------------------------------------ 天气卡 / 万年历卡 */ body[data-layout=hero].theme-dark #carouselWeather.carousel-side, body[data-layout=hero].theme-dark #carouselWeather.carousel-side.left, body[data-layout=hero].theme-dark #calendarWidget.carousel-side, body[data-layout=hero].theme-dark #calendarWidget.carousel-side.right { background: rgba(21, 29, 39, .92) !important; box-shadow: 0 12px 32px rgba(0, 0, 0, .50); } body[data-layout=hero].theme-dark #calendarWidget .cw-month-nav { background: var(--hg-card-2); border-color: var(--hg-line); color: var(--hg-muted); } body[data-layout=hero].theme-dark #calendarWidget .cw-day.other-month { color: #55635f; } /* --------------------------------------------------- 分类胶囊 / 图标网格 */ body[data-layout=hero].theme-dark .cat-tab { background: rgba(255, 255, 255, .07); } body[data-layout=hero].theme-dark .hcg-list { background: var(--hg-card); } body[data-layout=hero].theme-dark .hcg-ico { box-shadow: 0 6px 16px rgba(0, 0, 0, .42); } body[data-layout=hero].theme-dark .hcg-item.active .hcg-ico { box-shadow: 0 0 0 3px var(--hg-soft), 0 6px 16px rgba(0, 0, 0, .5); } /* -------------------------------------------------------------- 内容卡片 */ body[data-layout=hero].theme-dark #cards .card.new-layout { background: var(--hg-card); border-color: var(--hg-line); } body[data-layout=hero].theme-dark #cards .card.new-layout:hover { box-shadow: 0 8px 22px rgba(0, 0, 0, .46); } body[data-layout=hero].theme-dark #cards .card-logo img { background: var(--hg-card-2); border-color: var(--hg-line); } body[data-layout=hero].theme-dark #cards .card-tags .tag { background: var(--tag-bg-d, rgba(18, 185, 138, .18)); color: var(--tag-fg-d, #4fd8b0); } body[data-layout=hero].theme-dark .empty-state { background: var(--hg-card); } /* 分区之间的极淡分隔线：亮色是「深绿 7%」，暗色要换成「白 7%」 */ body[data-layout=hero].theme-dark .cards-sections > section + section, body[data-layout=hero].theme-dark .cards-sections > .section + section, body[data-layout=hero].theme-dark .cards-sections > section + .section { border-top-color: rgba(255, 255, 255, .07) !important; } /* ---------------------------------------------------------------- 广告栏 */ /* 注：#adRowFooter 的底色是 var(--hg-shell)，会跟着变量自动变暗。 广告**卡片内的**文案压在广告图上，与配色模式无关，**刻意不动** —— 亮色下那套「深字 + 白柔光」在暗色下同样成立，乱改反而会在亮图上看不清。 */ body[data-layout=hero].theme-dark #adRowFooter .ad-card { background: var(--hg-card); border-color: var(--hg-line); } body[data-layout=hero].theme-dark #adRowFooter .ad-card::before { background: rgba(0, 0, 0, .55); color: #cfdcd8; } /* ---------------------------------------------------------------- 页脚 */ body[data-layout=hero].theme-dark .hfc-btn { background: var(--hg-card-2); border-color: var(--hg-line); color: var(--hg-deep); } body[data-layout=hero].theme-dark .hfc-btn:hover { background: var(--hg-soft); border-color: var(--hg); } body[data-layout=hero].theme-dark .hero-footer-contact .hfc-lang > .dropdown > .ghost { background: var(--hg-card-2) !important; border-color: var(--hg-line) !important; color: var(--hg-ink) !important; } /* 社交圆按钮在亮色下是 #23303c 的深圆；暗底上要略提亮一档才不糊成一个洞 */ body[data-layout=hero].theme-dark .hfc-btn.hfc-social { background: #2b3a48; border-color: #33434f; color: #fff; } body[data-layout=hero].theme-dark .hfc-btn.hfc-social:hover { background: #38495a; border-color: #41525f; } /* --------------------------------------------------- 移动端：搜索页 / 底栏 / 面板 */ body[data-layout=hero].theme-dark .hsp-ico, body[data-layout=hero].theme-dark .hsp-tool { background: var(--hg-card-2); } body[data-layout=hero].theme-dark .hero-search-pop input { background: var(--hg-card-2); color: var(--hg-ink); } body[data-layout=hero].theme-dark .hero-search-pop input::placeholder { color: #7f938e; } body[data-layout=hero].theme-dark .hsp-grid { background: var(--hg-card); } body[data-layout=hero].theme-dark .hsp-chip { background: var(--hg-card-2); color: var(--hg-ink); } body[data-layout=hero].theme-dark .hero-tabbar { background: rgba(13, 20, 28, .96); border-top-color: var(--hg-line); } /* 抽屉 / 底部面板（我的、收藏、分类都在里面） */ body[data-layout=hero].theme-dark .hs-panel, body[data-layout=hero].theme-dark .hd-panel { background: var(--hg-card); } body[data-layout=hero].theme-dark .hs-close { background: var(--hg-card-2); color: var(--hg-muted); } body[data-layout=hero].theme-dark .hs-row img.hs-row-ico, body[data-layout=hero].theme-dark .hd-head img { background: var(--hg-card-2); } body[data-layout=hero].theme-dark .hs-me-card { background: linear-gradient(120deg, var(--hg-soft), var(--hg-card-2)); } body[data-layout=hero].theme-dark .hs-me-card img { background: var(--hg-card-2); } body[data-layout=hero].theme-dark .hd-head { background: linear-gradient(120deg, var(--hg-soft), var(--hg-card-2)); } body[data-layout=hero].theme-dark .hd-close { background: rgba(255, 255, 255, .10); } /* ========================================================================== 个人自定义背景（#personalBackdrop）的可见性修复 -------------------------------------------------------------------------- 用户报「设置自定义背景之后首页背景看不清背景图片、而且模糊、有模糊背景遮挡」。 拆开看是**三个独立成因**，缺一条都不算修好： ① 完全看不见：自定义背景层是 `#personalBackdrop{position:fixed;z-index:-1}` （定义在 layouts.css），而 `body[data-layout=hero]{background:var(--hg-shell)}` 是**不透明**的。两条选择器特异性相同（都是 0,1,1），layouts.css 又先加载， 于是 hero 那条胜出 —— 不透明的 body 底色把 z-index:-1 的图整块盖住。 ② 一大片模糊：`body.has-personal-backdrop .section{backdrop-filter:blur(14px)}` 在 hero 下没有意义 —— hero 的分区面板本来就是透明的（只有卡片自带底色）， 这层 blur 只是在背景图上糊出一大块毛玻璃：「模糊背景遮挡」就是它。 ③ 其余版式的分区面板不透明度 92%，等同把图挡掉 —— 调低让图能透出来。 ========================================================================== */ body[data-layout=hero].has-personal-backdrop { background: transparent; } body[data-layout=hero].has-personal-backdrop .cards-sections, body[data-layout=hero].has-personal-backdrop .cards-sections > section, body[data-layout=hero].has-personal-backdrop .cards-sections > .section, body[data-layout=hero].has-personal-backdrop .section { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } /* 其余版式：磨砂可以留（面板上的文字要能读），但别把图挡死 —— 92% → 70%，模糊 14px → 9px */ body:not([data-layout=hero]).has-personal-backdrop .section { background: color-mix(in srgb, var(--card-bg, #fff) 70%, transparent); backdrop-filter: blur(9px); -webkit-backdrop-filter: blur(9px); } /* 广告栏是 fixed 浮层，**不能**写 transparent：滚动上来的卡片会从它背后穿帮 （见上面广告栏那节的注释）。改成「底色半透明 + 磨砂」—— 背景图能透出来，同时仍压得住后面滚动的内容。 */ body[data-layout=hero].has-personal-backdrop #adRowFooter { background: color-mix(in srgb, var(--hg-shell) 78%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } /* ========================================================================== 首页文案样式：字体类型 / 字体颜色 / 艺术字 （用户第 17 项；后台「首页文案管理」） 数据流：后台只允许**白名单枚举**与 #hex 颜色（server/routes/settings.js 的 HERO_COPY_FONTS / HERO_COPY_ARTS / normHexColor），home-hero.js 把它们写成 元素上的 data-hcfont / data-hcart 与内联 CSS 变量 --hc-color / --hc-art-color， 本段只做「枚举 → 具体 CSS」的映射。整条链路上没有任何自由文本进入样式， 所以不存在 CSS 注入面。 选择器为什么用 :is(...)： `body[data-layout=hero] :is(.hero-title,.hero-subtitle,.hero-slogan)[data-hcfont=x]` 的特异性是 (0,3,1)，高于上面基础规则 `body[data-layout=hero] .hero-title` 的 (0,2,1)，因此能稳定覆盖 —— 不依赖「谁写在文件后面」这种加载顺序约定。 ========================================================================== */ /* 字体颜色：没设置时 fallback 就是各元素原本的颜色，视觉零变化 */ body[data-layout=hero] .hero-title { color: var(--hc-color, #fff); } body[data-layout=hero] .hero-subtitle { color: var(--hc-color, rgba(255, 255, 255, .92)); } body[data-layout=hero] .hero-slogan { color: var(--hc-color, rgba(255, 255, 255, .97)); } /* 标语左侧那段装饰渐隐线也跟着走色，否则换色后会出现「白线配彩字」的割裂感 */ body[data-layout=hero] .hero-slogan::before { background: linear-gradient(90deg, rgba(255, 255, 255, 0), var(--hc-color, rgba(255, 255, 255, .85))); } /* ---------------------------------------------------------------- 字体类型 */ body[data-layout=hero] :is(.hero-title, .hero-subtitle, .hero-slogan)[data-hcfont=auto] { font-family: inherit; } body[data-layout=hero] :is(.hero-title, .hero-subtitle, .hero-slogan)[data-hcfont=song] { font-family: "Source Han Serif SC", "Noto Serif SC", "Songti SC", SimSun, Georgia, serif; } body[data-layout=hero] :is(.hero-title, .hero-subtitle, .hero-slogan)[data-hcfont=hei] { font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", system-ui, -apple-system, sans-serif; } body[data-layout=hero] :is(.hero-title, .hero-subtitle, .hero-slogan)[data-hcfont=kai] { font-family: "Kaiti SC", KaiTi, STKaiti, "KaiTi_GB2312", serif; } body[data-layout=hero] :is(.hero-title, .hero-subtitle, .hero-slogan)[data-hcfont=yuan] { font-family: "Yuanti SC", YouYuan, "Hiragino Sans GB", "Microsoft YaHei", sans-serif; } body[data-layout=hero] :is(.hero-title, .hero-subtitle, .hero-slogan)[data-hcfont=round] { font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, sans-serif; font-weight: 800; } body[data-layout=hero] :is(.hero-title, .hero-subtitle, .hero-slogan)[data-hcfont=serif-en] { font-family: Georgia, "Times New Roman", Cambria, serif; } body[data-layout=hero] :is(.hero-title, .hero-subtitle, .hero-slogan)[data-hcfont=mono] { font-family: "JetBrains Mono", "Fira Code", Consolas, "Courier New", monospace; } body[data-layout=hero] :is(.hero-title, .hero-subtitle, .hero-slogan)[data-hcfont=hand] { font-family: "Xingkai SC", STXingkai, "Ma Shan Zheng", "Kaiti SC", cursive; font-style: italic; } /* ---------------------------------------------------------------- 艺术字 */ body[data-layout=hero] :is(.hero-title, .hero-subtitle, .hero-slogan)[data-hcart=shadow] { text-shadow: 0 2px 10px rgba(0, 0, 0, .5); } body[data-layout=hero] :is(.hero-title, .hero-subtitle, .hero-slogan)[data-hcart=deep] { text-shadow: 0 2px 0 rgba(0, 0, 0, .28), 0 8px 22px rgba(0, 0, 0, .62); } body[data-layout=hero] :is(.hero-title, .hero-subtitle, .hero-slogan)[data-hcart=glow] { text-shadow: 0 0 8px var(--hc-art-color, #ffffff), 0 0 24px var(--hc-art-color, #ffffff); } body[data-layout=hero] :is(.hero-title, .hero-subtitle, .hero-slogan)[data-hcart=outline] { -webkit-text-stroke: 1.4px var(--hc-art-color, #ffffff); paint-order: stroke fill; text-shadow: 0 2px 10px rgba(0, 0, 0, .35); } body[data-layout=hero] :is(.hero-title, .hero-subtitle, .hero-slogan)[data-hcart=neon] { text-shadow: 0 0 6px var(--hc-art-color, #7cf7d4), 0 0 16px var(--hc-art-color, #7cf7d4), 0 0 34px var(--hc-art-color, #7cf7d4); } body[data-layout=hero] :is(.hero-title, .hero-subtitle, .hero-slogan)[data-hcart=gradient] { background-image: linear-gradient(180deg, var(--hc-color, #ffffff) 0%, var(--hc-art-color, #9fe8d2) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; text-shadow: none; } body[data-layout=hero] :is(.hero-title, .hero-subtitle, .hero-slogan)[data-hcart=ink] { text-shadow: 0 0 20px rgba(0, 0, 0, .6), 0 2px 4px rgba(0, 0, 0, .45); filter: drop-shadow(0 3px 8px rgba(0, 0, 0, .35)); } /* ============================================================ 分类入口高度对齐规范（88–110px） ------------------------------------------------------------ 规范要求分类入口高度落在 88–110px；实测当前只有 ~76px （padding 4×2 + 图标 46 + gap 6 + 名称 ≈16）。 做法：图标 46→56、gap 6→8、padding 4→8、名称 12.5→13px， 合计 ≈ 8+56+8+16+8 = 96px，落在规范区间中部。 ⚠️ 必须限定在桌面媒体查询里：上面那条**无媒体查询**的 .hcg-item/.hcg-ico 覆盖 （home-hero.css 里 "分类图标的内缩量" 那一段）会同时命中移动端 —— 无媒体查询 + 位置更靠后 = 后来者胜（媒体查询不加特异性，见 MEMORY.md）。 而移动端是 5 列窄格（每格约 74px），图标放到 56px 会挤成一团， 所以 767px 以下维持原尺寸不动（那是移动端 5 列窄格）。 */ @media (min-width: 768px) { body[data-layout=hero] .hcg-item { padding: 8px 4px; gap: 8px; } body[data-layout=hero] .hcg-ico { width: 56px; height: 56px; border-radius: 18px; font-size: 28px; } body[data-layout=hero] .hcg-name { font-size: 13px; } } /* ============================================================ 沉浸首页（hero）按钮动画交互 ------------------------------------------------------------ 用户要求「沉浸首页主题版式里的按钮增加动画交互」。 原则：只做**位移 / 缩放 / 光环**这类合成层动画（不触发重排）， 时长 80–220ms、缓动 cubic-bezier(.2,.9,.3,1)，与既有 `.hcg-item:hover{translateY(-2px)}`、`.engine-icon:hover{scale(1.05)}` 手感一致。 三段式：悬停上浮 → 按下回弹 → 松开归位；主操作（搜索键）额外给一圈扩散光环。 ⚠️ 放在文件末尾：媒体查询不加特异性，同特异性下后来者胜（见 MEMORY.md）。 ⚠️ `prefers-reduced-motion: reduce` 下必须全部关掉（含既有 hover 位移）。 */ /* ① 统一过渡曲线 —— 覆盖 hero 里所有可点按钮类节点。 （父项过渡不会继承给子项，所以后面单独给 .hcg-ico 也补一条） */ body[data-layout=hero] :is( #mainSearchWrap .search-submit-tools, #mainSearchWrap .search-tool, #mainSearchWrap .engine-icon, .hw-chip, .hero-pill, .cat-tab, .hcg-item, .hcg-toggle, #cards .card.new-layout, #cards .card-actions .ghost, .section-more, .hfc-btn, .hmb-btn, .htb-fab, .hsp-tool, .hsp-go, .hsp-cell, .hsp-chip ) { transition: transform .2s cubic-bezier(.2, .9, .3, 1), box-shadow .22s ease, background .18s ease, color .18s ease, border-color .18s ease; } /* ② 悬停：上浮 / 微放大 + 阴影加深。 只在真的支持 hover 的设备上启用，避免触屏上"粘住"光标态。 */ @media (hover: hover) { body[data-layout=hero] #mainSearchWrap .search-submit-tools:hover { transform: scale(1.07); box-shadow: 0 8px 20px rgba(3, 20, 24, .30), 0 0 0 4px color-mix(in srgb, var(--hg) 24%, transparent); } body[data-layout=hero] #mainSearchWrap .search-tool:hover { transform: translateY(-1px) scale(1.10); } body[data-layout=hero] #mainSearchWrap .engine-icon:hover { transform: scale(1.08); } body[data-layout=hero] .hw-chip:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(3, 20, 24, .18); } body[data-layout=hero] .hero-pill:hover, body[data-layout=hero] .cat-tab:hover { transform: translateY(-1px); } body[data-layout=hero] .hcg-item:hover .hcg-ico { transform: translateY(-2px) scale(1.06); } body[data-layout=hero] .hfc-btn:hover, body[data-layout=hero] .hmb-btn:hover { transform: translateY(-1px); } } body[data-layout=hero] .hcg-ico { transition: transform .22s cubic-bezier(.2, .9, .3, 1), box-shadow .22s ease; } /* ③ 按下：回弹。`:active` 在所有设备都成立（触屏点按同样有反馈）。 */ body[data-layout=hero] #mainSearchWrap .search-submit-tools:active { transform: scale(.92); transition-duration: .08s; animation: hgRing .48s ease-out; } body[data-layout=hero] #mainSearchWrap .search-tool:active { transform: scale(.86); transition-duration: .08s; } body[data-layout=hero] #mainSearchWrap .engine-icon:active { transform: scale(.94); transition-duration: .08s; } body[data-layout=hero] .hw-chip:active { transform: translateY(0) scale(.95); transition-duration: .08s; } body[data-layout=hero] .hero-pill:active, body[data-layout=hero] .cat-tab:active { transform: translateY(0) scale(.97); transition-duration: .08s; } body[data-layout=hero] .hcg-item:active { transform: translateY(0) scale(.96); transition-duration: .08s; } body[data-layout=hero] #cards .card.new-layout:active { transform: translateY(1px) scale(.995); transition-duration: .08s; } /* 主操作（搜索键）按下时向外扩散一圈品牌色光环 —— 「点下去有回应」的关键一笔 */ @keyframes hgRing { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--hg) 55%, transparent); } 100% { box-shadow: 0 0 0 14px color-mix(in srgb, var(--hg) 0%, transparent); } } /* ④ 搜索胶囊获得焦点时，搜索键轻微"醒"一下（提示可点） */ body[data-layout=hero] #mainSearchWrap .search-inner:focus-within .search-submit-tools { transform: scale(1.05); } /* ⑤ 无障碍：系统开启「减少动态效果」时全部关闭 */ @media (prefers-reduced-motion: reduce) { body[data-layout=hero] :is( #mainSearchWrap .search-submit-tools, #mainSearchWrap .search-tool, #mainSearchWrap .engine-icon, .hw-chip, .hero-pill, .cat-tab, .hcg-item, .hcg-ico, #cards .card.new-layout, .hfc-btn, .hmb-btn, .htb-fab, .hsp-tool, .hsp-go ) { transition: none !important; animation: none !important; transform: none !important; } } /* ============================================================ 沉浸首页文字 / 图标墨色：按皮肤 + 底图自适应 ------------------------------------------------------------ 用户要求「沉浸首页里的文字字体颜色增加根据皮肤样式自动适配配色功能， 不同皮肤样式下显示不同配色字体颜色，但要和首页整体配色及 UI 主题完美搭配」。 实测下来**只有一种底图态**（hero 的背底恒为深色，依据见下），墨色收敛到下面 这几个变量，别再往规则里写死白色： ① 「深底」态 —— 有轮播图时底是任意照片（外加 `::after` 压暗遮罩）， 无轮播图时底是品牌深青渐变。两种情况都必须**亮墨 + 深色描边** 才读得出来（这是本项目既有做法：#searchInput 的白字配深描边）。 皮肤适配 = 把纯白**混入 8–10% 的皮肤主色**（--hg）： 深绿皮肤 → 极淡薄荷白，海洋皮肤 → 极淡青白，日落皮肤 → 极淡暖白。 肉眼仍是"白字"，但不再是与皮肤无关的冷白，整体观感更协调。 —— 用 `color-mix` 而不是逐皮肤写死：自定义皮肤（theme_skins 里管理员自建） 也能自动跟着它的 --primary 走，不需要为每个新皮肤再补一条规则。 ⚠️ **没有「浅底」态 —— 别再加回来（2026-09-15 实测纠错）**： `styles.css` 里 `.carousel-area.banner-default{background:var(--bg)}` 的意图是 「后台没配轮播图时 banner 与内容区融为一体」，但**它在 hero 里根本不生效**。 层叠实测（1440×900，注入 .banner-default 前后各量一次）： hero 的 `body[data-layout=hero] .carousel-area`（0,2,1）压过 `.carousel-area.banner-default`（0,2,0）→ `#carouselArea` 的 backgroundImage **前后都是 `linear-gradient(120deg,#0b4f63,#0a8f7f,#0aa87c)`** 这支品牌深青渐变 （hero 站位的注释也写明了：「后台关掉轮播时退化为品牌渐变」）。 而 `#carouselArea` 在 hero 是**全幅背底**（rect = 0,110,1440,245，正好垫在 `#heroTitle`(0,152,1440,57) 底下），所以「无轮播」时文字背后的底色**依然是深的**。 曾经照抄过一版「:has(.banner-default) 切深墨」——那会得到 **深墨压深底 = 看不见**， 属于把「非 hero 的浅底决策」误用到 hero。**hero 的两种子状态都是深底**（有图 = 照片 + `::after` 压暗遮罩，无图 = 品牌渐变），亮墨始终是对的，故此处不再做分支。 ⚠️ 本节在文件末尾：同特异性下后来者胜，所以上方 `.theme-dark ... .search-tool{color:#dbe7e4}`、 `.theme-dark ... ::placeholder{color:rgba(255,255,255,.70)}` 这些历史白值已被本节接管 （保留它们只为记录当时的口径，不要再往回改）。 */ body[data-layout=hero] { --hg-on-ink: color-mix(in srgb, var(--hg) 8%, #fff); --hg-on-ink-soft: color-mix(in srgb, var(--hg) 10%, rgba(255, 255, 255, .92)); --hg-on-shadow: 0 1px 3px rgba(0, 0, 0, .42), 0 0 1px rgba(0, 0, 0, .3); --hg-on-chip: rgba(255, 255, 255, .2); --hg-on-chip-hover: rgba(255, 255, 255, .38); } /* 标题 / 副标题 / 右下角标语 */ body[data-layout=hero] .hero-title { color: var(--hc-color, var(--hg-on-ink)); text-shadow: var(--hg-on-shadow); } body[data-layout=hero] .hero-subtitle { color: var(--hg-on-ink-soft); text-shadow: var(--hg-on-shadow); } body[data-layout=hero] .hero-slogan { color: var(--hg-on-ink-soft); text-shadow: var(--hg-on-shadow); } /* 热搜词标签与胶囊 */ body[data-layout=hero] .hw-label { color: var(--hg-on-ink-soft); text-shadow: var(--hg-on-shadow); } body[data-layout=hero] .hw-chip { color: var(--hg-on-ink); background: var(--hg-on-chip); } body[data-layout=hero] .hw-chip:hover { background: var(--hg-on-chip-hover); } /* 搜索输入框 + 三小工具 + 引擎芯片 */ body[data-layout=hero] #mainSearchWrap #searchInput { color: var(--hg-on-ink); text-shadow: var(--hg-on-shadow); } body[data-layout=hero] #mainSearchWrap #searchInput::placeholder { color: var(--hg-on-ink-soft); text-shadow: var(--hg-on-shadow); } body[data-layout=hero] #mainSearchWrap .search-tool { color: var(--hg-on-ink); }