/* ============================================================================ * custom.css — 重建版新增的少量样式 * * site.css 是原站样式表裁剪出来的「设计层」，每次重新构建都会覆盖，不能手改； * 这里只放三类东西，其余一律不碰： * 1. 原站靠服务端/第三方库实现、静态版必须自己做的 UI（站内搜索结果、表单错误态）； * 2. 入场动效（原站用 WOW.js + animate.css，重建版用 CSS 过渡 + IntersectionObserver）； * 3. 移动端抽屉/页脚手风琴的展开态（原站由 jQuery 直接写 inline style）。 * ========================================================================== */ /* ---- 1. 站内搜索结果 ---- */ .sep-header .forms form { position: relative; } .search-results { position: absolute; left: 0; top: calc(100% + 12px); z-index: 120; width: 100%; max-height: 420px; overflow-y: auto; padding: 10px 0; background: #fff; border-radius: 4px; box-shadow: 0 12px 32px rgba(0, 0, 0, .18); text-align: left; } .search-hit { display: block; padding: 10px 22px; border-left: 3px solid transparent; transition: background .2s, border-color .2s; } .search-hit:hover, .search-hit:focus { background: #fafafa; border-left-color: #ff7d1e; } .search-hit-t { display: block; font-size: 15px; line-height: 1.4; color: #191919; font-family: "Poppins-Medium", "Microsoft Yahei", sans-serif; } .search-hit-d { display: block; margin-top: 2px; font-size: 13px; line-height: 1.45; color: #8a8a8a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .search-results .no-hit { padding: 6px 22px; font-size: 14px; color: #666; } .search-results .no-hit a { color: #ff7d1e; text-decoration: underline; } /* 顶部搜索条展开时，让结果面板不被裁掉。 坑：.forms 放开 overflow 还不够，真正的裁切来自内层 .forms-boxs （原站给它 overflow:hidden + 27px 高，用于收起动画）， 搜索结果挂在 form 里，只放开外层的话面板算得出坐标却画不出来。 */ .sep-header .forms.ons, .sep-header .forms.ons .forms-boxs, .sep-header .forms.ons form { overflow: visible; } /* ---- 2. 表单校验态（原站只有 has-success，没有错误提示） ---- */ .form-control.has-error { border-color: #d93025 !important; background: #fff5f5 !important; } .form-group.has-success:after { color: #2e7d32; } /* ---- 3. 入场动效 ---- */ .reveal-ready .wow { opacity: 0; transform: translate3d(40px, 0, 0); transition: opacity .8s cubic-bezier(.22, .61, .36, 1), transform .8s cubic-bezier(.22, .61, .36, 1); will-change: opacity, transform; } .reveal-ready .wow.is-in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .reveal-ready .wow { opacity: 1; transform: none; transition: none; } } /* ---- 4. 移动端抽屉 / 页脚步进展开 ---- */ .sep-menu-box .menu-item > li > ul { display: none; } .sep-menu-box .menu-item > li.active > .box > i { transform: rotate(180deg); } .sep-footer .ul-boxs .ul { display: block; } .sep-footer .ul-boxs .ul-titles i { cursor: pointer; } @media (max-width: 768px) { .sep-footer .ul-boxs .ul { display: none; } .sep-footer .ul-boxs.onss .ul { display: block; } } /* ---- 5. 无障碍：键盘焦点可见 ---- */ a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, [tabindex]:focus-visible { outline: 2px solid #ff7d1e; outline-offset: 2px; } /* ---- 6. 页脚栏目标题行高 ---- 上游主题给 .ul-titles 的 line-height 是 20px，字号却是 24px（fz24）。 英文标题全大写、字面高度小，20px 行高看不出问题；换成中文后汉字撑满 em 框， 上下都溢出 20px 行盒，上端被上方的块压住、看起来像被遮挡。 行高提到 32px，同时把 margin-bottom 从 20 降到 14 —— 标题文字底部到列表的空隙 与英文版的观感接近（汉字比拉丁大写字母更"满"，同样 40px 节奏会显得偏挤）。 */ @media screen and (min-width: 822px) { .sep-footer .footer-lists-boxs .footer-logo-rights .ul-boxs .ul-titles { line-height: 32px; margin-bottom: 14px; } } /* ---- 7. 语言切换（六语） ---- * 桌面端：页头搜索图标左侧的「当前语言 ▾」，hover/focus 展开； * 移动端：桌面页头在断点以下隐藏，切换器随抽屉底部展开为横向按钮组。 */ .sep-langs-boxs { position: relative; flex: 0 0 auto; margin-left: 18px; font-size: 14px; line-height: 1; } .sep-langs-cur { display: inline-flex; align-items: center; gap: 6px; padding: 9px 10px; color: inherit; cursor: default; white-space: nowrap; } .sep-langs-cur i { font-size: 12px; opacity: .55; } .sep-langs-boxs .sep-langs { position: absolute; top: 100%; right: 0; z-index: 60; min-width: 156px; margin: 0; padding: 6px 0; list-style: none; background: #fff; border-radius: 6px; box-shadow: 0 14px 34px rgba(0, 0, 0, .16); opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .18s, transform .18s, visibility .18s; } .sep-langs-boxs:hover .sep-langs, .sep-langs-boxs:focus-within .sep-langs { opacity: 1; visibility: visible; transform: none; } .sep-langs-boxs .sep-langs li { list-style: none; } .sep-langs-boxs .sep-langs li a { display: block; padding: 9px 16px; color: #222; font-size: 14px; line-height: 1.3; text-transform: none; } .sep-langs-boxs .sep-langs li a:hover { background: #f4f5f7; color: #000; } .sep-langs-boxs .sep-langs li.on a { font-weight: 600; } .sep-langs-boxs .sep-langs li.on a::after { content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 8px; border-radius: 50%; background: currentColor; vertical-align: middle; opacity: .5; } .sep-menu-box .sep-langs-boxs { margin: 0; padding: 16px 0 6px; border-top: 1px solid rgba(0, 0, 0, .08); } .sep-menu-box .sep-langs-cur { display: none; } .sep-menu-box .sep-langs { position: static; display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; padding: 0; opacity: 1; visibility: visible; transform: none; background: none; box-shadow: none; } .sep-menu-box .sep-langs li a { padding: 6px 12px; border: 1px solid rgba(0, 0, 0, .14); border-radius: 4px; font-size: 13px; } .sep-menu-box .sep-langs li.on a { border-color: currentColor; } @media screen and (max-width: 821px) { .sep-langs-boxs { display: none; } .sep-menu-box .sep-langs-boxs { display: block; } } /* 首页首屏标题补

：h1 只承载语义，不生成盒子，布局与原来的 完全一致 */ .b-h1 { display: contents; } /* ---- 8. 页眉排版：给菜单与右侧工具区留出呼吸空间 ---- * 起因：导航