/* ============================================================ * zxcloudai · 骨架层 Scaffold Layer v1 * refine.css 解决的是「卡片和文字」，这一层解决的是「页面骨架」： * 1. 顶栏 —— 从 42px 透明 static 升级为吸顶玻璃导航 + 四级按钮层级 * 2. 分隔 —— 模块之间用渐隐细线 + 呼吸留白，而不是硬 border-top * 3. 页脚 —— 从一行 14px 灰字，重建成有收尾感的版权区 * 4. 滚动反馈 —— 进度条 / 回顶按钮与主题切换同语言 * * 纯 CSS，不改 DOM、不改业务。 * 注意：顶栏按钮的组件 scoped 样式带 !important， * 因此本层对按钮的尺寸/圆角/配色统一用 !important 接管。 * ============================================================ */ /* ------------------------------------------------------------ * 1. 顶栏：吸顶 + 玻璃 + 收敛 * 原 .navBarBox 是 static / 透明 / 42px，滚动后完全裸奔； * polish-v4 的 .pv4-scrolled 效果绑在 display:none 的 .guide-header 上， * 所以一直没生效。这里直接接管真实顶栏。 * ---------------------------------------------------------- */ html.polish-v4.polish-ready .navBarBox { position: sticky; top: 0; z-index: 100; height: 60px !important; padding: 0 26px !important; display: flex; align-items: center; justify-content: space-between; background: rgba(9, 11, 13, .55) !important; border-bottom: 1px solid var(--sys-line) !important; -webkit-backdrop-filter: blur(18px) saturate(170%); backdrop-filter: blur(18px) saturate(170%); box-shadow: 0 1px 0 rgba(255, 255, 255, .03), 0 18px 46px -30px rgba(0, 0, 0, .9) !important; transition: background .45s ease, border-color .45s ease, box-shadow .45s ease, height .45s var(--rf-ease); } /* 滚动后：高度收敛、玻璃加重、描边浮出 */ html.polish-v4.polish-ready.pv4-scrolled .navBarBox { height: 54px !important; background: rgba(8, 10, 12, .84) !important; border-bottom-color: var(--sys-line-strong) !important; box-shadow: 0 1px 0 rgba(255, 255, 255, .05), 0 20px 50px -28px rgba(0, 0, 0, .95) !important; } html.polish-v4.polish-ready:not(.dark) .navBarBox { background: rgba(246, 248, 250, .66) !important; border-bottom-color: rgba(15, 40, 48, .07) !important; box-shadow: 0 1px 0 rgba(255, 255, 255, .7), 0 16px 40px -30px rgba(20, 60, 70, .28) !important; } html.polish-v4.polish-ready:not(.dark).pv4-scrolled .navBarBox { background: rgba(241, 244, 247, .88) !important; border-bottom-color: rgba(15, 40, 48, .10) !important; } /* ------------------------------------------------------------ * 2. 品牌区：真实结构 .navBarLeft > (img + p) * ---------------------------------------------------------- */ html.polish-v4.polish-ready .navBarLeft { display: flex; align-items: center; } html.polish-v4.polish-ready .navBarLeft img { border-radius: 10px !important; box-shadow: 0 2px 12px rgba(0, 0, 0, .4), 0 0 0 1px rgba(255, 255, 255, .08); } /*品牌名垂直居中： 原 line-height:1.2 让 15.5px 字占了 18.6px行盒，多出来的半行距全部落在下方， 实测墨迹中心 24.45px 而顶栏中线只有 22.5px → 视觉偏下约 2px。 改用 flex + 显式 1px 下沉抵消，跨浏览器稳定。 */ html.polish-v4.polish-ready .navBarLeft p { display: flex; align-items: center; height: 56px; margin: 0 !important; font-size: 15.5px !important; font-weight: 700 !important; line-height: 56px !important; letter-spacing: .012em !important; color: #fff !important; white-space: nowrap; transform: translateY(-.5px); } html.polish-v4.polish-ready:not(.dark) .navBarLeft p { color: #0c1b20 !important; } /* ------------------------------------------------------------ * 3. 顶栏右侧按钮 * 2026-10-19：按需求移除了「教程中心 / 通知 / 邀请好友 / * 领取奖励 / 会员特惠」5 个入口（main-a8d65faf.js 模板层 * 已替换为注释节点），此处同步删除对应的失效样式。 * 首页顶栏只剩「登录/注册」一枚主按钮，登录后为用户头像。 * ---------------------------------------------------------- */ html.polish-v4.polish-ready body .navBarBox .navBarUserInfo .vipIconWrap { display: flex; align-items: center; gap: 8px; } /* 登录/注册：顶栏唯一的主操作入口。 *2026-10-19改版原因：原样式是「深灰渐变胶囊 + 一圈 13% 白描边+ 999px 圆角」， * 在深色玻璃顶栏上像贴了一块膏药，描边还把按钮轮廓勾得很硬。 * 改为：品牌橙色实心（与全站强调色一致）+ 小圆角 + 无描边， * hover 只提亮不位移，避免顶栏唯一元素在滚动收敛时跳动。 */ html.polish-v4.polish-ready body .navBarBox .navBarUserInfo .vipIconWrap .guide-login-btn { height: 34px !important; padding: 0 18px !important; border-radius: 10px !important; font-size: 13px !important; font-weight: 600 !important; letter-spacing: .01em; line-height: 1 !important; color: #04191d !important; background: linear-gradient(135deg, #FFB45A 0%, #B5701F 100%) !important; border: 0 !important; box-shadow: 0 6px 16px -8px rgba(181, 112, 31, .55) !important; transition: background .28s ease, box-shadow .28s ease; } /* 按钮内文字居中：组件原版 line-height:normal 会让 13px 字在 34px 按钮里偏上， 实测墨迹中心比按钮中线高约 3.5px。这里拉满行高并微沉1px 抵消。 */ html.polish-v4.polish-ready body .navBarBox .navBarUserInfo .vipIconWrap .guide-login-btn > span { display: flex; align-items: center; height: 34px; line-height: 34px !important; transform: translateY(1px); } html.polish-v4.polish-ready body .navBarBox .navBarUserInfo .vipIconWrap .guide-login-btn:hover { color: #04191d !important; background: linear-gradient(135deg, #FFC880 0%, #CF8C3A 100%) !important; box-shadow: 0 8px 22px -8px rgba(181, 112, 31, .7) !important; } /* 键盘聚焦：橙色底上不能用橙环，改用白色环保证可见 */ html.polish-v4.polish-ready body .navBarBox .navBarUserInfo .vipIconWrap .guide-login-btn:focus-visible { outline: 2px solid rgba(255, 255, 255, .85) !important; outline-offset: 2px !important; border-radius: 10px !important; } /* 顶栏按钮浅色模式 */ html.polish-v4.polish-ready:not(.dark) .vipIconWrap .guide-login-btn { color: #04191d !important; background: linear-gradient(135deg, #CF8C3A, #B5701F) !important; border: 0 !important; box-shadow: 0 6px 16px -8px rgba(181, 112, 31, .45) !important; } html.polish-v4.polish-ready:not(.dark) .vipIconWrap .guide-login-btn:hover { background: linear-gradient(135deg, #FFB45A, #CF8C3A) !important; } /* ------------------------------------------------------------ * 4. 模块分隔：渐隐细线 + 呼吸留白，替掉硬 border-top * ---------------------------------------------------------- */ html.polish-v4.polish-ready .guide-inspiration { border-top: 0 !important; margin-top: 38px; padding-top: 0; position: relative; } html.polish-v4.polish-ready .guide-inspiration::before { content: ""; position: absolute; top: 0; left: 8%; right: 8%; height: 1px; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .13) 22%, rgba(255, 180, 90, .30) 50%, rgba(255, 255, 255, .13) 78%, transparent); } html.polish-v4.polish-ready:not(.dark) .guide-inspiration::before { background: linear-gradient(90deg, transparent, rgba(15, 40, 48, .14) 22%, rgba(207, 140, 58, .26) 50%, rgba(15, 40, 48, .14) 78%, transparent); } /* 工具区与 Hero 之间也补出呼吸 —— 2026-10-19 收窄：原 42px + system.css 强制的 40px padding-top 合计 82px， 视觉上"开始创作"与工具矩阵之间的空隙过大，这里整体压到 ~36px。 */ html.polish-v4.polish-ready .guide-tools { position: relative; margin-top: 16px; } /* system.css 里 `.guide-tools{padding-top:40px!important}` 在文档中更靠后， 同级 !important 会赢；这里用 `.guide-page` 提一级特异性压过去。 */ html.polish-v4.polish-ready .guide-page .guide-tools { padding-top: 20px !important; } html.polish-v4.polish-ready:not(.dark) .guide-tools { margin-top: 14px; } /* ------------------------------------------------------------ * 5. 页脚：一行灰字 → 有收尾感的版权区 * ---------------------------------------------------------- */ html.polish-v4.polish-ready .copyright-info { position: relative; color: #fff !important; margin-top: 46px; padding: 26px 0 32px; /* 2026-10-20 用户反馈：这条 1px 分隔线与最后一行画廊图片只隔 32px，像压在图上。 * 原因：.copy-container 是 position:absolute;top:32px（脱离文档流，见 system.css）， * 间距不受正常布局约束。此线纯装饰、去掉后不留布局副作用，故移除。 * 如需恢复分隔感，把 border-top 打开并把 padding-top 提到 32px 以上。 */ border-top: 0 !important; display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; } html.polish-v4.polish-ready:not(.dark) .copyright-info { border-top-color: rgba(15, 40, 48, .08); } html.polish-v4.polish-ready .copyright-info p { position: relative; margin: 0 !important; padding-left: 0; font-size: 12.5px !important; line-height: 1.7; letter-spacing: .02em; /* 按需求：页脚版权文字统一为纯白 */ color: #fff !important; text-align: center; } html.polish-v4.polish-ready .copyright-info p::before { content: ""; display: block; width: 5px; height: 5px; flex: 0 0 5px; margin-right: 9px; /* p 是 flex 容器（框架设定），伪元素被块级化成 flex item； vertical-align 对 flex item 无效，之前圆点贴顶正是因为少了这一行 */ align-self: center; border-radius: 50%; background: linear-gradient(135deg, #ffb45a, #a78bfa); box-shadow: 0 0 8px rgba(255, 180, 90, .6); } html.polish-v4.polish-ready:not(.dark) .copyright-info p, html.polish-v4.polish-ready:not(.dark) .copyright-info a { color: var(--sys-t2) !important; } /* 页脚顶部一抹品牌辉光，避免长列表后直接"断头"。 * 注意：必须用 top+bottom 撑开（height:auto），不能写死 120px —— * 版权区被 system.css 收缩后盒子只有 ~36px 高，写死高度会让辉光 * 向下溢出 38px，把页面撑高，底部露出 html 的 #0D0D0E → 就是那条"黑条"。 */ html.polish-v4.polish-ready .copyright-info::after { content: ""; position: absolute; left: 50%; top: -46px; bottom: 0; height: auto; width: 440px; margin-left: -220px; pointer-events: none; z-index: -1; background: radial-gradient(50% 60% at 50% 100%, rgba(255, 180, 90, .10), transparent 72%); } /* ------------------------------------------------------------ * 6. 滚动反馈：进度条 + 回顶按钮，与主题切换同语言 * polish-v4.js 已注入 .pv4-progress（宽度由 JS 控制），这里只做视觉 * ---------------------------------------------------------- */ html.polish-v4.polish-ready .pv4-progress { background: linear-gradient(90deg, #ffb45a, #cf8c3a 55%, #a78bfa) !important; box-shadow: 0 0 12px rgba(255, 180, 90, .55); z-index: 200; } html.polish-v4.polish-ready .pv4-top { border-radius: 50% !important; background: rgba(14, 17, 20, .55) !important; border: 1px solid rgba(255, 255, 255, .11) !important; color: rgba(255, 255, 255, .72) !important; -webkit-backdrop-filter: blur(14px) saturate(150%); backdrop-filter: blur(14px) saturate(150%); box-shadow: 0 10px 26px -14px rgba(0, 0, 0, .95) !important; transition: opacity .3s ease, transform .4s var(--rf-ease), border-color .3s ease, color .3s ease, background .3s ease; } html.polish-v4.polish-ready .pv4-top:hover { color: #fff !important; border-color: rgba(255, 180, 90, .38) !important; background: rgba(255, 180, 90, .12) !important; } html.polish-v4.polish-ready:not(.dark) .pv4-top { background: rgba(255, 255, 255, .75) !important; border-color: rgba(15, 40, 48, .12) !important; color: rgba(12, 27, 32, .62) !important; } /* ------------------------------------------------------------ * 7. 响应式 * ---------------------------------------------------------- */ @media (max-width: 920px) { html.polish-v4.polish-ready .navBarBox { height: 54px !important; padding: 0 16px !important; } html.polish-v4.polish-ready .guide-inspiration::before { left: 2%; right: 2%; } html.polish-v4.polish-ready .copyright-info { margin-top: 32px; padding: 22px 0 26px; } html.polish-v4.polish-ready body .navBarBox .navBarUserInfo .vipIconWrap .guide-login-btn { height: 32px !important; padding: 0 15px !important; font-size: 12px !important; } } /* ============================================================ * 8. 2026-10-19 二次微调（用户反馈） * 注意：system.css 用 !important 设了画廊圆角(var(--sys-r-md)) 与 * tab 激活下划线，本文件最后加载，故在此用同级 !important 覆盖。 * ============================================================ */ /* 8.1 画廊卡片：外边框圆角收窄到 10px（覆盖 system.css 的 var(--sys-r-md)） * 用 [data-v-f2ae3d93] 提升特异性，确保压过运行时注入的 system.css */ html.polish-v4.polish-ready .guide-gallery-card[data-v-f2ae3d93] { border-radius: 10px !important; } /* 8.2 灵感分类 tab（绘画灵感/视频灵感/短视频）：激活下划线与整条基线 * 必须"同一条线"——同厚度、同像素行、同为直角。 * * 原状态（用户反馈"线条粗细不一致，上下位置不一致"）： * ① 容器 .guide-tabs 有 padding-bottom:2px，按钮底边比基线上沿高 2px； * ② ::after 用 bottom:-1px 定位，于是橙线悬空在灰线上方约 1~2px， * 中间留出空隙，看起来像两条错开的线； * ③ 橙线用"两端透明"的渐变 + 2px 圆角，端点虚化，视觉上比实心灰线更细。 * * 修法：容器底 padding 归零（按钮底边正好压在基线上沿）， * ::after 用 bottom:-1px 与 1px 基线完全重合；去掉圆角与渐变， * 改纯色，两条线共用同一条像素行 → 粗细、位置完全一致。 */ html.polish-v4.polish-ready .guide-tabs[data-v-f2ae3d93] { padding-bottom: 0 !important; } /* 外层 .guide-tabs-row 也画了一条 1px border-bottom（距 .guide-tabs 的线 0.75px）， * 两条灰线叠在一起 → 基线实际是 ~1.5px，比 1px 的橙色下划线明显更粗。 * 这里去掉外层那条，只留 .guide-tabs 的一条，橙色才能与它共线。 */ html.polish-v4.polish-ready .guide-tabs-row[data-v-f2ae3d93] { border-bottom: 0 !important; } html.polish-v4.polish-ready .guide-tabs[data-v-f2ae3d93] button.active[data-v-f2ae3d93]::after { bottom: -1px !important; height: 1px !important; border-radius: 0 !important; background: var(--sys-accent, #cf8c3a) !important; } /* ============================================================ * 9. 2026-10-19 三次微调（用户反馈） * ① 轮播左右箭头：悬停仍是青色 + 悬停后位置/尺寸变化 * ② 工具矩阵左右箭头：悬停不得位移，且统一为 logo 琥珀橙 * ============================================================ */ /* 9.1 主轮播（首页图片）左右箭头：悬停仅换色，几何位置完全不变。 * 原 polish-v4.css 的 :hover 用 scale(1.1) + 青色 rgba(0,175,193,.28)， * scale 让按钮从 30px 变成 33px（视觉上"跑了"），青底又与原配色冲突。 * 这里用更高特异性兜底一次，避免其它层再叠加 transform。 */ html.polish-v4.polish-ready .guide-page .guide-swiper-prev:hover, html.polish-v4.polish-ready .guide-page .guide-swiper-next:hover { transform: translateY(-50%) !important; background: rgba(255, 180, 90, .16) !important; border-color: rgba(255, 180, 90, .78) !important; box-shadow: 0 0 22px rgba(207, 140, 58, .45) !important; color: #ffb45a !important; } /* 9.2 工具矩阵左右箭头：悬停只换色，锁死 transform（保持 translateY(-50%) 居中）， * 图标是 mask + background-color，需要单独改成琥珀橙 */ html.polish-v4.polish-ready .guide-page .guide-tools .guide-tool-arrow:hover, html.polish-v4.polish-ready .guide-page .guide-tools .guide-tool-arrow:focus-visible { transform: translateY(-50%) !important; border-color: rgba(255, 180, 90, .78) !important; background: rgba(255, 180, 90, .16) !important; box-shadow: 0 0 18px rgba(207, 140, 58, .40) !important; } html.polish-v4.polish-ready .guide-page .guide-tools .guide-tool-arrow:hover i { background-color: #ffb45a !important; } /* 9.3 工具矩阵左右翻页箭头：垂直对齐「卡片行」中心，而不是整个 .guide-tools。 * 容器里除卡片行外还含 eyebrow（01 / AI TOOLKIT · 创作工具矩阵）， * 原 top:50% 落在容器中心，比卡片行中心高 15.4px（1920/1440 实测一致）。 * 只改 top，transform 仍保持 translateY(-50%)，悬停不位移。 */ html.polish-v4.polish-ready .guide-page .guide-tools .guide-tool-arrow { top: calc(50% + 15.5px) !important; }