/** * AvoAgent v2 · 整站换装共享层：chrome（导航/页脚）+ 通用组件 * * 作用域 body.avo-v2-page —— 每个换装页都会带这个 body class。 * v1 全局样式在这些页上仍会 enqueue，必须用作用域压住。 * 页面私有样式放各自的 css（home.css / tools.css …），这里只放共用的。 */ body.avo-v2-page { margin: 0; background: #f5f7f2; color: #17231d; font-family: "DM Sans", "PingFang SC", system-ui, sans-serif; /** * v1.67.0 · ⚠ 必须显式声明 16px。 * * 换装从头到尾**没写过 body 字号**，于是整套新界面一直在继承 v1 base.css * 的 `--avo-fs-base`（15px）—— 比原型设计的 16px 小 6.7%，全站每一处正文、 * 每一个按钮、每一段说明都偏小一号。 * 这不是当初的设计取舍，是漏了一行；把原型和线上并排量出来才发现。 */ font-size: 16px; -webkit-font-smoothing: antialiased; } body.avo-v2-page a { color: inherit; text-decoration: none; } body.avo-v2-page img { display: block; max-width: 100%; } body.avo-v2-page .skip-link { position: absolute; left: -9999px; top: 0; background: #17231d; color: #fff; padding: 10px 14px; border-radius: 0 0 10px 0; z-index: 100; } body.avo-v2-page .skip-link:focus { left: 0; } .avo-v2-page .v2h-wrap { width: min(1180px, calc(100% - 40px)); margin: auto; } /* ── 导航 ── */ .avo-v2-page .v2h-nav { height: 76px; display: flex; align-items: center; justify-content: space-between; } .avo-v2-page .v2h-brand { display: flex; align-items: center; gap: 10px; font: 700 22px "Space Grotesk", sans-serif; color: #17231d; } .avo-v2-page .v2h-brand-mark { width: 30px; height: 30px; border-radius: 10px 10px 15px 10px; background: #c7f45b; display: grid; place-items: center; transform: rotate(-8deg); } .avo-v2-page .v2h-brand-mark svg { transform: rotate(8deg); } .avo-v2-page .v2h-nav-links { display: flex; gap: 30px; color: #48534c; font-size: 14px; } .avo-v2-page .v2h-nav-links a:hover, .avo-v2-page .v2h-nav-links a.is-active { color: #17231d; font-weight: 600; } .avo-v2-page .v2h-nav-actions { display: flex; gap: 10px; align-items: center; } .avo-v2-page .v2h-btn { border: 0; border-radius: 12px; padding: 12px 18px; cursor: pointer; font: 600 14px/1 "DM Sans", sans-serif; transition: .2s ease; display: inline-flex; align-items: center; gap: 8px; } .avo-v2-page .v2h-btn:hover { transform: translateY(-2px); } .avo-v2-page .v2h-btn--ghost { background: transparent; border: 1px solid #dfe4dc; } .avo-v2-page .v2h-btn--dark { background: #17231d; color: #fff; } .avo-v2-page .v2h-btn--lime { background: #c7f45b; color: #182216; } /* v1 标准语言切换器贴皮 */ .avo-v2-page .avo-lang-switcher { position: relative; } .avo-v2-page .avo-lang-switcher__current { border: 1px solid #dfe4dc; background: transparent; border-radius: 12px; min-height: 46px; padding: 0 14px; cursor: pointer; color: #17231d; font: 600 14px/1 "DM Sans", sans-serif; display: inline-flex; align-items: center; gap: 8px; } .avo-v2-page .avo-lang-switcher__menu { position: absolute; right: 0; top: calc(100% + 8px); min-width: 140px; background: #fff; border: 1px solid #dfe4dc; border-radius: 12px; box-shadow: 0 18px 45px rgba(20, 35, 26, .12); padding: 6px; z-index: 50; display: none; } .avo-v2-page .avo-lang-switcher.is-open .avo-lang-switcher__menu { display: block; } .avo-v2-page .avo-lang-switcher__menu a { display: block; padding: 9px 12px; border-radius: 8px; font-size: 14px; } .avo-v2-page .avo-lang-switcher__menu a:hover { background: #f5f7f2; } .avo-v2-page .avo-lang-switcher__menu a.is-current { background: #eff8d6; font-weight: 600; } /* ── 页首（内页通用 hero）── */ .avo-v2-page .v2h-page-hero { padding: 46px 0 10px; } .avo-v2-page .v2h-eyebrow { display: inline-flex; align-items: center; gap: 9px; border: 1px solid #cdd5ca; border-radius: 99px; padding: 7px 12px 7px 8px; font: 600 12px "Space Grotesk", sans-serif; letter-spacing: .05em; text-transform: uppercase; background: rgba(255, 255, 255, .6); } .avo-v2-page .v2h-eyebrow i { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: #c7f45b; font-style: normal; } .avo-v2-page .v2h-eyebrow svg { width: 12px; height: 12px; fill: none; stroke: #17231d; stroke-width: 2; stroke-linecap: round; } /* v1.69.0 · 对齐原型 avoagent-site.css 的全局 h1：clamp(48px,7vw,86px)/.95、-.06em。 之前压到 64px 是为了躲中文撞行，但那是拿英文的视觉冲击力去换 —— 真正的病根是 行高小于 1（见下方 CJK 护栏），治好了就不必缩字号。 */ .avo-v2-page .v2h-page-hero h1 { font: 600 clamp(48px, 7vw, 86px)/.95 "Space Grotesk", sans-serif; letter-spacing: -.06em; margin: 22px 0 16px; } /* v1.69.0 · CJK 排版护栏。作用于 v2 全站的 h1（.avo-v2-page 每个 v2 页面都有）。 拉丁字母行高可以小于 1 —— 大写高度加降部正好塞得进去；中日韩字形占满整个 em 框， .95 的行高必然让上下两行叠在一起。原型自己就有这个病（它是 lang="zh-CN" 的稿， 首屏标题两行是糊在一起的），所以照抄原型数值必须连这个一起修，否则是把 bug 抄过来。 ⚠ 用 :lang() 而不是 [lang="zh"]：我们输出的是 lang="zh-CN"，属性精确匹配会整条失效， 且不报错 —— 只会表现为「改了没用」。:lang(zh) 按 BCP-47 前缀匹配，zh-CN 能命中。 ⚠ 选择器里的 body 是特意加的，把权重顶到 (0,2,3)。workbench.css 里逐工具的 `body.avo-v2-tool-x .v2-heading h1` 是 (0,2,2) 且加载在本文件之后 —— 不加 body 就会同级后来居上，把行高按原型的 .98/1.02 覆盖回去，中文又撞回来。 */ :is(html:lang(zh), html:lang(ja), html:lang(ko)) body.avo-v2-page h1 { line-height: 1.15; letter-spacing: -.01em; /* -.06em 是给拉丁字母收缝的，汉字会黏成一团 */ } .avo-v2-page .v2h-lead { max-width: 640px; color: #5e6861; font-size: 17px; line-height: 1.65; margin: 0; } /* ── 通用卡 / 角标 / 筛选 ── */ .avo-v2-page .v2h-pill { background: #c7f45b; padding: 4px 8px; border-radius: 6px; color: #283318; font: 700 10px "Space Grotesk", sans-serif; letter-spacing: .04em; align-self: flex-start; } .avo-v2-page .v2h-filters { display: flex; gap: 8px; flex-wrap: wrap; margin: 30px 0; } .avo-v2-page .v2h-filter { min-height: 44px; border: 1px solid #dfe4dc; background: transparent; border-radius: 99px; padding: 0 16px; cursor: pointer; color: #5e6861; font: 500 14px/1 "DM Sans", sans-serif; } .avo-v2-page .v2h-filter.is-active { background: #17231d; color: #fff; border-color: #17231d; } /* ── 页脚 ── */ .avo-v2-page .v2h-footer { padding: 38px 0; border-top: 1px solid #dfe4dc; margin-top: 70px; } .avo-v2-page .v2h-footer-inner { display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: #5e6861; } .avo-v2-page .v2h-footer-links { display: flex; gap: 22px; } /** * v1.56.0 · 触摸目标高度。 * * 实测 375px 下这四个页脚链接只有 23×19 和 47×19 —— 低于 WCAG 2.5.8 的 * 24×24 下限。它们在**全部 16 个换装页**上，所以这一条占了整轮无障碍 * 问题的 64/69：改一处，16 个页面一起好。 * * ⚠ 不是把字调大（那会改版式），是补 padding 撑开可点区域： * 19 + 4×2 = 27px 高，23 + 3×2 = 29px 宽。视觉上字号一点没变。 * 负 margin 抵掉水平 padding，免得 flex 的 gap 看起来变宽。 */ .avo-v2-page .v2h-footer-links a { display: inline-block; padding: 4px 3px; margin: -4px -3px; } .avo-v2-page .v2h-footer-links a:hover { color: #17231d; } /* ── 响应式 ── */ @media (max-width: 900px) { .avo-v2-page .v2h-nav-links { display: none; } } @media (max-width: 600px) { .avo-v2-page .v2h-wrap { width: min(100% - 24px, 1180px); } .avo-v2-page .v2h-nav-actions .v2h-btn--ghost { display: none; } .avo-v2-page .v2h-footer-inner { display: block; } .avo-v2-page .v2h-footer-links { margin-top: 14px; } } @media (prefers-reduced-motion: reduce) { .avo-v2-page * { transition: none !important; } } /* ── v1.53.0 · 应用页（工作台 / 素材中心 / 验收台）────────────── * * 这三页换上新 chrome 之后，正文里还留着 v1 的面包屑组件 .avo-crumbs * —— 刻意不另写一个：BreadcrumbList 的 JSON-LD 和它同源， * 两套面包屑一定会走岔（可见的和结构化数据里的对不上）。 * * 但新 chrome 里没有 v1 的外层容器，不给宽度它会贴到视口最左边。 */ .avo-v2-page .v2h-appmain > .avo-crumbs { width: min(1180px, calc(100% - 40px)); margin: 20px auto 0; font-size: 13px; } @media (max-width: 600px) { .avo-v2-page .v2h-appmain > .avo-crumbs { width: min(100% - 24px, 1180px); } } /* v1.70.0 · 面包屑内部布局。 * * 上面那条只给了外层