/* ============================================================ laca-ux-overlay.css v=20260929b LACA 全站 UX 缺陷修复覆盖层（多智能体评审收敛：grok/opus/悟空 7 路）用法：在所有页面样式之后引入——本站页面 style 块多写在 body 里，必须注入到之前（footer.php 开头亦可），放会被覆盖：原则：只修缺陷、不改设计意图；不动 DOM；深色 legacy 风格保留；浅色页（body.laca-light-content）与浅色 chrome（data-theme=light）分别处理。 ============================================================ */ /* ---------- 1. 横向溢出封堵（26 页移动 / 8 页桌面实测溢出） ---------- */ html, body { overflow-x: clip; } @supports not (overflow: clip) { html, body { overflow-x: hidden; } } img, svg, canvas, video { max-width: 100%; height: auto; } img, svg, canvas, video { max-inline-size: 100%; } /* 宽表全部已有滚动包装容器（实测：table-scroll / versions-table-wrap / comparison-table-wrapper / dl-tablewrap / bm-table-wrap 等）—— 真正的元凶是 flex 列布局下子项 min-width:auto 把包装容器撑到内容宽，连带 body 被顶破。修法=min-width:0 下放，包装容器恢复视口宽、内部原生横滚。 */ body > *, main > *, section, article, .dl-content, .versions-content, .about-content, .comparison-section, .bm-content, .dl-section, .versions-panel, .mission-section, .timeline-section { min-width: 0; } /* flex 列布局 + margin:auto 的交叉轴陷阱：margin auto 使容器宽度按 max-content 收缩（而非 stretch），移动端整节被内容撑到 ~830px。修法：窄屏下内容容器一律封顶视口宽，内部包装容器接管横滚。 */ @media (max-width: 768px) { .dl-content, .versions-content, .about-content, .comparison-section, .bm-content, .mt-content, .tut-content, .api-content, .sch-main, .ka-page, .kr-page, main > section, .page-content, .content-wrap { max-width: 100%; } } /* 表格包装容器：确保可横滚（部分页包装缺 overflow 声明） */ .dl-tablewrap, .versions-table-wrap, .bm-table-wrap, .table-scroll, .comparison-table-wrapper, .data-table-wrapper, .co-table-wrap, .lg-table-scroll, .li-tablewrap { display: block; width: 100%; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } @media (max-width: 768px) { .dl-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* download 统计卡四并排挤破；minmax(0,) 防 min-content 撑爆 */ .figure-gallery { grid-template-columns: minmax(0, 1fr); } /* analysis 页 minmax(420px) 顶破 */ } /* 长串无断行文本（URL/快照名/代码） */ code, pre, .api-pre, .tut-url, .v-sha, .file-name, .path-code { overflow-wrap: anywhere; word-break: break-word; } /* ---------- 2. 字级下限（167 个字号值失控；8px/10px 实测在案） ---------- */ /* 仅抬升已知过小类，不动整体阶梯；正文基线不动 */ .site-nav-inner, .nav-item > a, .dropdown-links a, .laca-methods-chip, .vis-stat-label, .footer-legal a { font-size: 0.875rem; } .visit-hint, .gene-pathway, .gene-info-label, .viz-subtitle, .tool-tag, .ct-img-tag, .tt-label, .export-subtitle, .fmt-tab, .opt-label, .opt-hint, .file-meta, .progress-text { font-size: 0.75rem; } .dropdown-header { font-size: 0.75rem; } /* ---------- 3. 深色背景文字对比度（WCAG AA 实测计算） ---------- */ /* 依据：#050008 / #1A1A2E 底上，白字 α≤0.5 全部 < 4.5:1；α=0.62 ≈ 5.5:1 */ .footer-copyright, .footer-legal a, .vis-stat-label, .footer-theme-note { color: rgba(255,255,255,0.62); } .newsletter-input::placeholder { color: rgba(255,255,255,0.6); } .page-hero .subtitle, .viz-subtitle, .export-subtitle, .gene-pathway, .gene-info-label, .gene-action-btn, .pathway-chip, .viz-tab, .export-btn, .colorbar, .loading-text, .tt-label, .export-close, .fmt-tab, .opt-label, .opt-radio, .opt-check, .csv-preview, .btn-cancel, .progress-text, .mode-btn { color: rgba(255,255,255,0.62); } .opt-hint, .file-meta { color: rgba(255,255,255,0.6); } /* ---------- 4. 键盘焦点可见性（暗浅双主题） ---------- */ :focus-visible { outline: 2px solid #00F0FF; outline-offset: 2px; border-radius: 2px; } html[data-theme="light"] :focus-visible { outline-color: #007A8A; } :focus:not(:focus-visible) { outline: none; } /* ---------- 5. 触摸目标（移动端） ---------- */ @media (hover: none), (pointer: coarse) { .nav-item > a, .dropdown-links a, .mobile-menu-toggle, .chip, .tab, .viz-tab, .fmt-tab, .mode-btn, .laca-theme-label { min-height: 44px; } .dropdown-links a { display: flex; align-items: center; } } /* ---------- 6. 减少动态（prefers-reduced-motion） ---------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } .dropdown-matrix, .badgePulse, .priority-badge { animation: none !important; } } /* ---------- 7. 首页 CTA 层级微调（视觉权重：1 主 1 次，不移动 DOM） ---------- */ .cta-section .btn-secondary { background: transparent; border-width: 1.5px; } /* 物种卡 hover 提示默认可读（原 color:transparent 仅 hover 出现） */ .visit-hint { color: rgba(255,255,255,0.6); } /* ---------- 8. 装饰降噪（不影响信息） ---------- */ .dropdown-matrix { display: none; } /* 二进制雨：纯装饰、分散注意 */ /* ---------- 9. 浅色页 Hero 渐变标题漏配（实测：versions/download 浅色下仍以 #fff 起始渐变，首字母在浅底上消失；methods/benchmark/tutorial 已有深色起始覆盖，这两页漏了） ---------- */ html[data-theme="light"] .versions-hero h1 { background: linear-gradient(135deg, #3D2A75 0%, #007A8A 55%, #007A4D 100%); -webkit-background-clip: text; background-clip: text; } html[data-theme="light"] .dl-hero h1 { background: linear-gradient(135deg, #3D2A75 0%, #5B2D8E 50%, #C2185B 100%); -webkit-background-clip: text; background-clip: text; } /* ---------- 10. 表格可读性（数据密集页） ---------- */ .laca-table td, .co-table td, .lg-table td, .li-table td, .ab-table td, .lr-table td, .data-table td { line-height: 1.5; } /* 大数字等宽对齐 */ .co-kpi strong, .lob-stat b, .association-metric strong, .dl-stat b, .vis-stat-num { font-variant-numeric: tabular-nums; } /* 宽表横滚时吸住首列保上下文（包装容器内滚动，仅窄屏启用） */ @media (max-width: 768px) { .compare-table td:first-child, .versions-table td:first-child, .bm-table td:first-child, .data-table td:first-child, .co-table td:first-child, .lg-table td:first-child, .dl-table td:first-child, .comparison-table td:first-child { position: sticky; left: 0; background: inherit; z-index: 1; } } /* ---------- 11. 笔记本/浏览器兼容（header 专项，2026-09-29 实测 1366/1280/1440） ---------- */ /* 11a. 笔记本主战场 1341–1700px：全导航在此区间以 0.72rem(11.5px) 挤排，抬字级+松间距（1700px 以上保持原设计） */ @media (min-width: 1341px) and (max-width: 1700px) { .nav-item > a { font-size: 0.8rem; padding-left: 0.45rem; padding-right: 0.45rem; letter-spacing: 0.6px; } .nav-links { gap: clamp(0.4rem, 0.9vw, 1rem); } } /* 11b. 矮屏笔记本（1366×768 / 1280×800 等）：双层 fixed chrome 实测占 124–127px ≈ 16% 屏高。压主导航 padding 与 logo 尺寸，并经 --laca-nav-height 联动副导航 */ @media (max-height: 800px) and (min-width: 1341px) { :root { --laca-nav-height: 62px; } .laca-main-nav { padding-top: 0.4rem; padding-bottom: 0.4rem; } .logo-icon-wrapper { width: 34px; height: 34px; } .logo-icon { font-size: 1.3rem; } .site-nav-inner { min-height: 30px; padding-top: 0.2rem; padding-bottom: 0.2rem; } } /* 11c. Safari backdrop-filter 前缀兜底（审计：全站 16 处 backdrop-filter 仅 1 处带 -webkit- 前缀；Safari 无前缀声明直接丢弃→毛玻璃失效、文字压在花背景上） */ .laca-main-nav { -webkit-backdrop-filter: blur(20px) saturate(180%); } .mega-dropdown { -webkit-backdrop-filter: blur(20px); } .site-footer { -webkit-backdrop-filter: blur(30px) saturate(180%); } /* 11d. clamp() 无回退保护（审计：92 处 clamp；不支持的老浏览器整条声明丢弃）。关键排版点给静态前值：老浏览器忽略 clamp 行、沿用前值 */ .nav-item > a { font-size: 0.8rem; } .logo { font-size: 1.2rem; } .dl-hero h1, .versions-hero h1, .mt-hero h1, .bm-hero h1, .tut-hero h1 { font-size: 2.4rem; } /* 11e. flex gap 兜底说明（审计：64 处 flex+gap）：Safari ≤14.0 / Chrome <84 不支持 flex gap。导航项自身 padding（左右各 0.3–0.45rem）已保证间距不归零；若需精确兜底，在页脚加一行 JS 探测（见部署说明），此处不叠加 margin 防双倍间距 */ /* 11f. flex-gap 精确兜底（需配合部署说明里的一行 JS 探测器写入 html.no-flex-gap） */ html.no-flex-gap .nav-item { margin-right: 0.6rem; } html.no-flex-gap .nav-links { margin-right: -0.6rem; } /* ---------- 12. 表单控件 color-scheme（下拉选项白底白字根治） ---------- */ /* 深色内容（默认+legacy 图谱页）：原生控件按深色渲染（下拉弹出层深底浅字） */ select, input, textarea { color-scheme: dark; } /* 浅色文档页按浅色渲染 */ html[data-theme="light"] body.laca-light-content select, html[data-theme="light"] body.laca-light-content input, html[data-theme="light"] body.laca-light-content textarea { color-scheme: light; }