之外**，紧跟。放在 main 里的话它最宽只有版心 1920 —— 2560 屏上左右各留 320 的页面底，那就不叫全屏了。想在 main 里做只能靠 100vw + 负 margin，而 100vw **含滚动条**，会稳定横向溢出 15px；挪出去是唯一没有副作用的做法。 --nav-h 是实测值：导航条 52 + 1px 下边框 = 53。移动端顶上还有 48 的 banner，但它是 static、会随页面滚走，贴顶的只有 nav，所以两档共用同一个数。 */ .mkf-sec.mkf-mh--full{padding-top:0} .mkf-mh--full{--nav-h:53px; position:relative;overflow:hidden; min-height:calc(100svh - var(--nav-h)); display:grid;place-items:center} .mkf-mh__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block} .mkf-mh__scrim{position:absolute;inset:0;pointer-events:none; background:color-mix(in srgb, transparent, var(--bg) var(--scrim, 55%))} /* 辉光只做一圈内边，不画描边（通栏形态没有卡片边界）。用 box-shadow 不用渐变。 */ .mkf-mh__glow{position:absolute;inset:0;pointer-events:none; box-shadow:inset 0 0 var(--glow-hero) var(--glow-hero-spread) color-mix(in srgb, transparent, var(--accent) 10%)} /* 每页按自己 hero 素材实测的 scrim 密度 —— 数字后面记的是「最坏帧 → 该密度下 --text 的对比度」。新做一页 hero 就在这里加一条，别复用别页的数字。 */ .mkf-mh--scrim35{--scrim:35%} /* seedance-2-5 最坏帧 #7A695D (L .1503) → 7.90 AAA */ .mkf-mh--scrim55{--scrim:55%} /* wan-3-0 最坏帧 #CD9C71 (L .3795) → 7.25 AAA */ .mkf-mh--scrim68{--scrim:68%} /* image-to-video 最坏帧 #F0DBC5 (L .7322) → 7.50 AAA */ /* ↑ 三页三个值，跨度两倍多。seedance 那条素材本来就暗，30% 就够 AAA（7.36），照 55% 压会把它压成一块黑；image-to-video 那条接近纯白，55% 只有 4.91。 **没有一个通用值**，每做一页 hero 必须重新抽帧量。 */ .mkf-mh__fade{position:absolute;left:0;right:0;bottom:0;height:24%;pointer-events:none} .mkf-mh__body{position:relative;z-index:var(--z-raise);max-width:760px;margin-inline:auto; padding:var(--s-7) var(--gutter) var(--s-8); display:flex;flex-direction:column;align-items:center;gap:var(--s-4);text-align:center} .mkf-mh--full .mkf-mh__t,.mkf-mh--full .mkf-mh__badge{margin:0} .mkf-mh--full .mkf-mh__sub{margin:0;max-width:56ch;color:var(--text)} .mkf-mh--full .mkf-mh__btns{margin-top:var(--s-2)} /* ══════════ 全页新增的第 3 条渐变声明 ══════════ 页头底缘淡出与跑马灯左右两侧共用这一条，方向走自定义属性。写法照共享壳里那条 --fade-to（**每个使用者自己声明方向**，不在 :root 上替换 —— 自定义属性的 var() 在声明它的元素上替换，写 :root 会让所有使用者拿到同一个值且不报错，CLAUDE.md 里 --*-tint 那个坑）。 ⚠ 注意这段注释本身踩过一次：原来写的是「判据从 0/0/2/4 变成 0/0/3/4」，但当时给数字加了星号强调，于是出现 `*` 紧跟 `/` 的组合，**提前关掉了注释**，把紧跟其后的这条渐变规则整个吃掉 —— CSSOM 里查不到它、页面上渐隐层全空，而 CSS 文件看着完全正常。判据现在是 0 / 0 / 3 / 4。 */ .mkf-mh__fade,.mkf-mq__fade{background:linear-gradient(var(--fd, 180deg), transparent, var(--bg))} .mkf-mq__fade--l{--fd:270deg} .mkf-mq__fade--r{--fd:90deg} /* ══════════ 素材跑马灯（.mq）══════════ 骨架照 a2e.com.cn 的 .a2e-showcase：两行反向匀速滚动 + 左右边缘渐隐。两处做法与首页 .tm 一致，都不能省： ① 间距走 set 自己的 margin-right，不用轨道的 gap —— 一份就是 N×(宽+隙)， translateX(-50%) 才是精确的一份，用 gap 会每圈错半个； ② 第二份必须 aria-hidden，否则读屏把素材念两遍。 ⚠ **两行都放全部 9 条**，只是起始顺序不同 + 方向相反。分成 5+4 的话第二行一份宽 4×396=1584 < 版心 1920，接缝处会露空档 —— 首页 .tm 的注释写着同一件事（"一排只放三条的话…接缝处会露出空档"）。 ⚠ 格宽 384 是素材反推的：源 768×432，DPR2 下 384 正好 1:1，与 .wall 同一个数。边缘渐隐用一层 --bg 渐变盖上去，**不用 mask-image** —— 轨道本身是 transform，父级一带 mask 就会把子级提升为独立合成层，圆角裁剪当场失效（a2e 那边踩过）。 */ .mkf-mq{position:relative;margin-inline:calc(-1 * var(--gutter))} .mkf-mq__row{display:flex;overflow:hidden} .mkf-mq__row + .mkf-mq__row{margin-top:var(--s-3)} .mkf-mq__track{display:flex;width:max-content; animation:mqScroll var(--mq-dur, 90s) linear infinite; animation-play-state:var(--mq-play, running)} .mkf-mq__row--rev .mkf-mq__track{animation-direction:reverse} .mkf-mq__row:hover{--mq-play:paused} .mkf-mq__set{display:flex} @keyframes mqScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}} .mkf-mq__tile{flex:none;width:var(--mq-w, 384px);margin-right:var(--s-3); aspect-ratio:16/9;border-radius:var(--r-sm);overflow:hidden;background:var(--surface-2)} .mkf-mq__tile video,.mkf-mq__tile img{width:100%;height:100%;object-fit:cover;display:block} .mkf-mq__fade{position:absolute;top:0;bottom:0;width:120px;pointer-events:none;z-index:var(--z-raise)} .mkf-mq__fade--l{left:0} .mkf-mq__fade--r{right:0} /* ══════════ 文档段的脊（.doc）══════════ 用户 2026-08-23 看了下半页：「排版、布局、分块都堆叠在一起，不整齐」。量出来根因不是间距，是**同一屏里有四个不同的左边缘**：段标题在版心左沿 36、导语居中 960、卡片组通栏 1888、表格居中 1168、 CTA 与清单居中 960 —— 每一段的起止 x 都不一样。解法是给这些段一条统一的脊：左栏放标题+导语，右栏放内容，比例照共享壳里已有的 .faq（1 : 1.9），于是全页只剩两个左边缘。左栏 sticky，长段落滚动时标题跟着走。 */ .mkf-doc{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.9fr);gap:var(--s-6)} .mkf-sec.mkf-sec--doc{padding-top:var(--s-7)} .mkf-doc__hd{position:sticky;top:calc(53px + var(--s-5));align-self:start} /* 脊里的导语左对齐、不再自己收窄 —— 收窄交给左栏本身（1888 下 640）。 */ .mkf-lead--start{text-align:left;margin:var(--s-3) 0 0;max-width:none} /* 右栏里的块一律满栏，取消它们各自的居中收窄 —— 那正是四个左边缘的来源。 */ .mkf-doc__bd .mkf-tbl__wrap,.mkf-doc__bd .mkf-cta,.mkf-doc__bd .mkf-list{max-width:none;margin-inline:0} /* 4 条一组的卡在脊里排 2×2（右栏 1216 → 每张 600），不是挤成 4×292。 */ .mkf-dev--2{grid-template-columns:repeat(2,minmax(0,1fr))} /* 通栏媒体段的段头居中，与脊段的左对齐分成两种明确的模式，不混用。 */ .mkf-sec__hd--center{justify-content:center;text-align:center} /* ══════════ 页头里的促销条与特性行（.mh__promo / .mh__feats）══════════ 线上是 hero 视频下面一张紫描边的小卡：左边一句话、右边一颗按钮，下面一行特性。 ⚠ 线上那颗 Upgrade 按钮**没有 href**（死按钮），这里照原样保留、没有替用户补链接。 ⚠ 特性行在线上是一个

里用多个空格分隔的四段文字，没有任何分隔标记。这里拆成四个排成一行 —— 是排版决定，一个词没改。 */ .mkf-mh__promo{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between; gap:var(--s-3);width:100%;max-width:560px; padding:var(--s-2) var(--s-2) var(--s-2) var(--s-4); border-radius:var(--r-sm);border:1px solid var(--line-strong); background:color-mix(in srgb, transparent, var(--bg) 55%)} .mkf-mh__promo p{margin:0;font-size:var(--fs-md)} .mkf-mh__feats{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--s-2) var(--s-4); margin:0;padding:0;list-style:none;font-size:var(--fs-sm);color:var(--text)} .mkf-mh__feats li{display:inline-flex;align-items:center;gap:7px} .mkf-mh__feats li::before{content:"";width:4px;height:4px;flex:none; border-radius:var(--r-full);background:var(--accent)} /* ══════════ 卡片里的媒体位与内链（.dev__media / .dev__d a）══════════ 卡顶一块 16:9 素材。放在 .dev__card 的第一个子元素，靠负内边距顶到卡边。 */ .mkf-dev__media{display:block;height:auto;aspect-ratio:var(--dev-ar, 16/9);object-fit:cover; /* ⚠ max-width:none 不能省 —— 共享壳里有一条 img{max-width:100%}，会把下面这个「内容宽 + 两侧内边距」的出血宽度卡回内容宽（实测 611.7 被压回 563.7）。 */ width:calc(100% + var(--s-5) * 2);max-width:none; margin:calc(-1 * var(--s-5)) calc(-1 * var(--s-5)) 0; border-radius:var(--r-sm) var(--r-sm) 0 0;background:var(--surface-2)} /* 卡正文里的内链 —— 共享壳那条只挑了 .faq__a a 与 .pr__d a，够不到这里。全局 a 是 color:inherit + 无下划线，不给样式就完全看不出是链接（首页 10.5 节）。 */ /* 图表类素材**保持自身比例**，不裁。 ⚠ 第一版写死成 `--dev-ar:1128/822`，那是 seedance-1.5 那两张雷达图的尺寸；到了 seedream-4.5 的雷达图（1280×1160）就又不对了。写死一个数只能服务一页。改成 `aspect-ratio:auto` + `height:auto`：比例交给图片自己的 width/height 属性，任何画幅都对 —— 前提是**属性必须写**（首页踩过，见 03-reset.css 的注记）。 */ .mkf-dev__media--chart{--dev-ar:auto;height:auto;object-fit:contain;background:var(--surface)} .mkf-dev__d a,.mkf-ex__p a{color:var(--accent);text-decoration:underline;text-underline-offset:2px; text-decoration-thickness:1px; text-decoration-color:color-mix(in srgb, var(--accent) 45%, transparent)} .mkf-dev__d a:hover,.mkf-ex__p a:hover{text-decoration-color:var(--accent)} /* ══════════ 例子行（.ex）══════════ 线上是「输入图 + 提示词」对「结果视频」的四组对照。布局直接复用 .alt__row，只多两条：输入图收在源宽 640 以内（放大就糊了），提示词跟在它下面。 */ .mkf-ex__in{display:block;width:100%;max-width:640px;height:auto;aspect-ratio:16/9; object-fit:cover;border-radius:var(--r-sm);border:1px solid var(--line);background:var(--surface)} .mkf-ex__p{margin:var(--s-3) 0 0;max-width:640px;font-size:var(--fs-md);line-height:var(--lh-relaxed);color:var(--mute)} /* ══════════ .wall / .alt 的两个画幅开关 ══════════ ⚠ 画幅必须跟真实素材对上。image-to-video 的 Effects 那四条是**竖版** （视频 1080×1926，不是 poster 那个 800×1421 —— 差 0.4%，以视频为准），照 16:9 排会把人裁掉一半。 ⚠ 尺寸要按**视频**的分辨率算，不是按 poster：这一页 poster 只有 800 宽，但视频是 1920×1080 / 1080×1926。通栏 1888 下每格 466，DPR2 需 932 < 1080，够清。 */ .mkf-wall--4{grid-template-columns:repeat(4,minmax(0,1fr))} .mkf-wall--full{--band:none} .mkf-wall--v{--wall-ar:1080/1926} .mkf-wall--9x16{--wall-ar:9/16} /* ai-avatars 的 Aa-1..6.mp4 1080×1920 */ .mkf-wall--712x1280{--wall-ar:712/1280} /* talking-video 的 misic/music 712×1280 */ .mkf-wall--480x852{--wall-ar:480/852} /* ai-avatar-api 的四条 talking photo 样片 */ .mkf-wall--6{grid-template-columns:repeat(6,minmax(0,1fr))} /* 非 16:9 的素材：画幅按实测写死，并且不放大过源宽。 ⚠ 别用 `aspect-ratio:auto; width:auto` 来「让它自己决定」—— 的 width/height 属性是**映射成 aspect-ratio** 的，把 aspect-ratio 设成 auto 等于把属性给的那个比例也一起清掉；图片没加载完时就没有任何固有尺寸，盒子塌成 0×0（加 1px 描边后实测 **2×2**）。这和「属性顶掉 aspect-ratio」是同一枚硬币的两面。所以每种画幅在这里写一条，像上面的 scrim 预设一样按素材实测。 */ .mkf-alt__media--api{aspect-ratio:575/528;max-width:575px;margin-inline:auto} /* Api-pic.png 575×528 */ .mkf-alt__media--vc{aspect-ratio:1706/1080} /* VC-1/2.jpg 1706×1080，非 16/9，用原比例免裁切 */ .mkf-alt__media--43{aspect-ratio:4/3;max-width:478px;margin-inline:auto} /* 0807-5.mp4 478×360，源就这么小，不放大 */ .mkf-alt__media--v{aspect-ratio:9/16} /* 竖构图（v2v-why3/3.1.mp4 720×1280） */ /* ══════════ 口碑卡的静态排法（.tm__grid）══════════ 首页那套是无限滚动的跑马灯（.tm__row/__track/__set）。product-avatar 只有四条、且带职位行，滚动没有意义 —— 复用卡壳 .tm__card，只换外层排布。 */ .mkf-tm__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--tm-gap)} .mkf-tm__grid .mkf-tm__card{width:auto;margin-right:0} .mkf-tm__grid--3{grid-template-columns:repeat(3,minmax(0,1fr))} /* ══════════ 品牌资源页（.sw 色卡 / .brand 标志下载）══════════ 媒体资源页只写「怎么用」，不写为什么这么定 —— 推导在 design/ 的规范里。 */ .mkf-sw{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s-4)} .mkf-sw__i{border-radius:var(--r-md);border:1px solid var(--line);background:var(--surface);overflow:hidden} /* 色块高度写死 —— 比例没有意义，要的是一眼可比。 */ .mkf-sw__chip{height:104px;display:block} /* 色块的底色走类不走内联 style —— 全页禁内联 style。 */ .mkf-sw__chip--orange{background:var(--c-orange)} .mkf-sw__chip--blue{background:var(--c-blue)} .mkf-sw__chip--amber{background:var(--c-amber)} .mkf-sw__chip--cream{background:var(--c-cream)} /* 深色三格与页面底几乎同色，不描边就看不出边界在哪。 */ .mkf-sw__chip--void{background:var(--c-void);box-shadow:inset 0 0 0 1px var(--line)} .mkf-sw__chip--night{background:var(--c-night);box-shadow:inset 0 0 0 1px var(--line)} .mkf-sw__chip--text{background:#F5F1EE} .mkf-sw__chip--mute{background:var(--c-mute-dark)} .mkf-sw__bd{padding:var(--s-3) var(--s-4) var(--s-4)} .mkf-sw__n{margin:0;font-size:var(--fs-md);font-weight:600} /* 十六进制值用等宽，且**大写** —— 复制粘贴时肉眼对得上。 */ .mkf-sw__hex{margin:2px 0 0;font-family:var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace); font-size:var(--fs-sm);letter-spacing:.04em;color:var(--mute);text-transform:uppercase} .mkf-sw__use{margin:var(--s-2) 0 0;font-size:var(--fs-sm);line-height:var(--lh-normal);color:var(--faint)} .mkf-brand{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-4)} .mkf-brand__i{display:flex;flex-direction:column;gap:var(--s-3); padding:var(--s-5);border-radius:var(--r-md);border:1px solid var(--line);background:var(--surface)} /* 预览底色跟着变体走：白色标志必须放在深底上、黑色标志放在浅底上，否则「有没有这个文件」根本看不出来。 */ .mkf-brand__pv{display:flex;align-items:center;justify-content:center; min-height:132px;padding:var(--s-5);border-radius:var(--r-sm);background:var(--bg)} .mkf-brand__pv--lite{background:var(--c-cream)} .mkf-brand__logo{width:100%;max-width:180px;height:auto;display:block} .mkf-brand__n{margin:0;font-size:var(--fs-md);font-weight:600} .mkf-brand__dl{display:flex;flex-wrap:wrap;gap:var(--s-2);margin-top:auto} /* ══════════ 数字条（.stat）与 about 的机构徽标 ══════════ */ .mkf-stat{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-5) var(--s-6)} .mkf-stat__n{margin:0;font-family:var(--font-display);font-weight:700; font-size:var(--fs-2xl);line-height:1.1;color:var(--accent)} .mkf-stat__d{margin:var(--s-1) 0 0;font-size:var(--fs-md);line-height:var(--lh-normal);color:var(--mute)} /* 徽标是 300×300 的方图，但画面内容只占中间一条 —— 按线上给的 262 宽排，别铺满整栏。 */ .mkf-about__logo{display:block;width:100%;max-width:262px;height:auto;margin-inline:auto} /* ══════════ 第三方看板嵌入（.embed）══════════ iframe 的 src 与高度原样保留，这一层只负责描边与圆角。 */ .mkf-embed{border-radius:var(--r-md);border:1px solid var(--line);overflow:hidden;background:var(--surface)} .mkf-embed iframe{display:block;width:100%;border:0} /* ══════════ 一排标签式链接（.chips）══════════ FAQ 分类页在线上是一行用「·」分隔的纯文本链接。拆成按钮是排版决定，链接与文字一个字没改 —— 这条写在页面的注释里，别只留在这。 */ .mkf-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--s-3)} /* ══════════ 套餐卡（.plan）══════════ 四档并排。线上是 wp:columns 加一段 12 条 !important 的