/* ========================================================================== CapCut World — Manifesto 子页 -------------------------------------------------------------------------- 2026-08-17 四稿(客户:字太大、很印刷感、没人味)——照 typeless.com/manifesto 重排。 参考页实测参数(1440 视口): 正文 18px / lh 1.5 / ls +.17 小标 24px / w600 / lh 1.1 / ls -.2 开篇块 bg #f9f9f9 / pad 24 / radius 20 版心 764 行内高亮 pad 0 6px / radius 6px / inline-block / 同字号 / w600 收尾引用 border-left 4px solid #000 / pad 16 16 16 20 / 斜体 28px w600 照抄这套骨架,只把高亮换成 CapCut 品牌青。"人味"来自 小字号 + 行内高亮 (像有人拿荧光笔划过) + 斜体引用收尾,不是大字。 ========================================================================== */ @font-face { font-family:'Albert Sans'; font-weight:400; font-display:swap; src:url(/assets/fonts/AlbertSans-400.woff2) format('woff2'); } @font-face { font-family:'Albert Sans'; font-weight:500; font-display:swap; src:url(/assets/fonts/AlbertSans-500.woff2) format('woff2'); } @font-face { font-family:'Albert Sans'; font-weight:700; font-display:swap; src:url(/assets/fonts/AlbertSans-700.woff2) format('woff2'); } :root { --paper:#f8fcff; --ink:#0d0d0d; --cyan:#12d9f9; --u:calc(100vw / 1920); --uv:min(calc(100vw / 1920), calc(100vh / 1080)); --sf:'SF Pro Display','SF Pro Text',-apple-system,BlinkMacSystemFont,'Inter','Helvetica Neue','Segoe UI',Roboto,Arial,sans-serif; --albert:'Albert Sans',var(--sf); --ease-k:cubic-bezier(.16,1,.3,1); --col:min(88vw, 764px); /* 固定 px 档:参考页字号不随视口放大,这正是"人味"的来源 */ --fs-title:clamp(30px, 3.9vw, 56px); --fs-head:clamp(20px, 1.7vw, 25px); /* 正文字号量化成 16 / 18 两档,中间不做流体插值。 原来的 clamp(16,1.25vw,18) 在 1280-1440 之间会给出 17.08px 这类中间值, 配上固定 764 栏宽正好卡出最难排的行,灰底块两端对齐时词距被拉到 ×1.68。 两档制下同一档内版面完全确定,拉伸量可预测。 */ --fs-body:16px; --fs-quote:clamp(21px, 1.95vw, 28px); --fs-final:var(--fs-head); /* 收尾与 emoji 跟 "For template…" 小标同字号(客户 0817) */ } * { margin:0; padding:0; box-sizing:border-box; } html { background:var(--paper); scroll-behavior:smooth; } html, body { overflow-x:clip; } body { font-family:var(--albert); font-weight:400; color:var(--ink); background:var(--paper); -webkit-font-smoothing:antialiased; } a { color:inherit; } img { display:block; max-width:100%; } /* ---------- 导航(4 项常驻,与主页同一份度量) ---------- */ .nav { position:fixed; inset:0 0 auto 0; z-index:60; display:flex; align-items:center; padding:calc(var(--u) * 41) calc(var(--u) * 81) calc(var(--u) * 30); color:var(--ink); border-bottom:1px solid rgba(0,0,0,.10); background:rgba(248,252,255,.80); backdrop-filter:blur(16px) saturate(1.5); -webkit-backdrop-filter:blur(16px) saturate(1.5); } .nav .brand { display:block; width:calc(var(--u) * 147); aspect-ratio:299.5/61; background:currentColor; -webkit-mask:url(/assets/logo/capcut-only.svg) no-repeat center/contain; mask:url(/assets/logo/capcut-only.svg) no-repeat center/contain; } .nav .spacer { flex:1; } .nav .menu { display:flex; align-items:center; gap:calc(var(--u) * 60); } .nav .menu a { position:relative; display:inline-block; text-decoration:none; font-size:calc(var(--uv) * 32); font-weight:400; letter-spacing:calc(var(--uv) * -0.96); line-height:1.2; transition:font-weight .22s ease; } .nav .menu a::after { content:attr(data-text); display:block; height:0; overflow:hidden; visibility:hidden; font-weight:700; } .nav .menu a:hover, .nav .menu a.on { font-weight:700; } /* ---------- 版心 ---------- */ .mf { width:var(--col); margin:0 auto; padding:clamp(110px, 13vw, 200px) 0 clamp(60px, 7vw, 110px); } .mf-title { font-size:var(--fs-title); font-weight:700; line-height:1.08; letter-spacing:-.025em; margin-bottom:clamp(30px, 3.4vw, 52px); } .mf-title .ln { display:inline; } /* 桌面一行;移动端下面改成分两行 */ /* 行内高亮:参考页同款度量,颜色换 CapCut 品牌青 */ /* inline(不是 inline-block):短语能在行内正常断行;inline-block 会把整段高亮 整块挤到下一行,段落被撕成参差的块 —— 那正是"乱"的根源。 box-decoration-break:clone 让跨行时两截都保留内距和圆角。 */ .hl { display:inline; background:var(--cyan); color:var(--ink); font-weight:700; padding:.06em .3em; border-radius:5px; -webkit-box-decoration-break:clone; box-decoration-break:clone; } /* 开篇块 */ .mf-lede { background:rgba(13,13,13,.038); border-radius:clamp(14px, 1.4vw, 20px); padding:clamp(22px, 2.2vw, 32px) clamp(22px, 2.4vw, 34px); margin-bottom:clamp(34px, 3.6vw, 56px); } .mf-sec { margin-bottom:clamp(34px, 3.6vw, 56px); } .mf-sec h2 { font-size:var(--fs-head); font-weight:700; line-height:1.24; letter-spacing:-.008em; margin-bottom:clamp(14px, 1.4vw, 22px); } /* 排版口径(客户 0817):左对齐,不用 justify、不用 hyphens:auto。 两端对齐在 88vw 的窄栏上把空格拉到自然宽的 2.69 倍(实测),整段散架。 */ .mf p, .mf li, .mf-sec h2 { text-align:left; hyphens:none; -webkit-hyphens:none; overflow-wrap:break-word; } /* balance 与 pretty 分工(客户 0818:灰底块右边空太多)—— balance 为了让各行等长,会把**所有**行都排得比可用宽度短:实测灰底块只填到 83%(最窄的一段 75%),在有可见边界的灰框里就是右侧一条空白,很显眼。 pretty 是贪心填满、只回头避免末行孤字,填充率 88-96%,右缘自然收。 所以:标题(短、无容器、等长才像有意为之)用 balance;正文一律 pretty。 */ .mf p, .mf li { text-wrap:pretty; font-size:var(--fs-body); font-weight:400; line-height:1.5; letter-spacing:.01em; } .mf-sec h2 { text-wrap:balance; } /* 正文 18px 档:栏宽已被 --col 钳在 764,此档内所有视口版面完全一致 */ @media (min-width:1440px) { :root { --fs-body:18px; } } /* 灰底块两端对齐(客户 0817),但只在栏宽撑得住的时候开。 起点定在 840px 而不是 769px:769-830 这一带 --col 还是流体的 88vw(677-722), 实测词距被拉到 ×1.72~1.87(最差 820px),肉眼可见的松;840 往上全程 ≤×1.44。 移动/窄屏(390)更是 ×5.2,加连字符也只降到 ×2.69 且要断四个词,所以一律左对齐 + pretty。 两个坑: 1) 必须同时写 text-wrap:wrap 覆盖掉 pretty/balance —— 这两个都会先把行排短, 再被 justify 拉满栏宽,等于人为制造超大词距; 2) 必须放在上面那条通用左对齐之后 —— `.mf-lede p` 与 `.mf p` 特异性相同(0,1,1), 靠源码顺序决胜,写在前面会被静默压掉(踩过)。 */ @media (min-width:840px) { .mf-lede p { text-align:justify; text-wrap:wrap; } } /* 灰底块手工断行(客户 0818):按客户给的断点逐行落。 text-align:left 是兜底:上面那条 justify 只作用于非末行,而手工行行行都是末行, 等于 justify 在灰框里不再生效;万一某行折成两行,也不会被拉满栏宽。 只在栏宽装得下的时候生效(≥500px,实测 490px 起 0 折行)。 */ .mf-lede .ln { display:block; text-align:left; text-wrap:pretty; } /* 窄屏(≤499)放弃手工断行,回自然排版(客户 0818:"换行太频繁""左右对齐一些, 但词距不能拉大,尽量紧凑")。手工断点是按宽栏定的,窄屏装不下会再折一次, 15 个视觉行、半数行填充率不到 60% —— 那正是"换行太频繁"。 为什么不上 justify:实测 320-480 全程,justify + 连字符最松的那行词距会被拉到 ×2.14~×2.98(一屏里必有一行肉眼可见的松),没有连字符更到 ×5.18;栏宽只有 277-338px、每行才 6-7 个词距,少装一个词就得把这几个空格摊大一倍,这是窄栏 两端对齐的死结,没有 CSS 手段能封顶拉伸量。 改走左对齐 + hyphens:auto + 贪心填满:词距恒为自然宽(×1.00),非末行填充率 88-100%,右缘看上去几乎是齐的,代价是每段一个连字符(peo-ple / edit-ing / direct-ing / tech-nology),都是正确的英文断词点。 两个必写项: 1) text-wrap 必须回 wrap —— pretty 会主动把行排短,与"填满"背道而驰; 2) overflow-wrap 必须回 normal —— 上面通用规则里的 break-word 会在没有连字符 的地方硬切词,和 hyphens:auto 撞车。 若某些浏览器缺英文断词词典,hyphens:auto 静默失效,退回纯贪心(填充率 76-98%), 仍然比手工断点整齐,是安全的降级。 */ @media (max-width:499px) { .mf-lede .ln { display:inline; } .mf-lede p { text-wrap:wrap; hyphens:auto; -webkit-hyphens:auto; overflow-wrap:normal; } } .mf p + p { margin-top:1.35em; } /* Where 排比:与收尾引用同一根竖线语言 */ .mf-where { list-style:none; margin-top:1.35em; border-left:4px solid var(--cyan); padding:2px 0 2px clamp(14px, 1.2vw, 20px); } .mf-where li { text-align:left; } .mf-where li + li { margin-top:1.35em; } /* 与 .mf p + p 同一行距(客户 0818) */ /* 收尾:参考页的引用块(竖线 + 斜体),与正文连成一段,不再另起一个大标题 */ /* 收尾:不加竖线(客户 0817),靠留白与上文分开 */ .mf-end { margin-top:clamp(44px, 4.4vw, 70px); } .mf .mf-final { font-size:var(--fs-final); font-weight:700; line-height:1.25; letter-spacing:-.018em; text-align:left; hyphens:none; } /* 提权:否则被 .mf p 的 --fs-body 压掉 */ .mf .mf-emoji { margin-top:.6em; font-size:var(--fs-final); line-height:1.4; letter-spacing:.04em; text-align:left; white-space:nowrap; } /* 一行放下,不换行 */ /* ---------- 页脚(与主页 .s8-foot 同构:左社媒 / 右返回) ---------- */ .mf-foot { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:calc(var(--u) * 34) calc(var(--u) * 80); border-top:1px solid rgba(0,0,0,.12); } .mf-foot .s8-social { display:flex; align-items:center; gap:calc(var(--u) * 30); } .mf-foot .soc { display:block; width:clamp(18px, calc(var(--u) * 26), 26px); color:rgba(13,13,13,.55); transition:color .25s ease; } .mf-foot .soc:hover { color:var(--ink); } .mf-foot .soc svg { width:100%; height:auto; display:block; } .mf-back { font-size:var(--fs-body); font-weight:400; text-decoration:underline; text-underline-offset:5px; text-decoration-thickness:1px; text-decoration-color:rgba(0,0,0,.28); transition:text-decoration-color .2s ease; } .mf-back:hover { text-decoration-color:var(--ink); } /* ---------- 下滑模糊浮现 ---------- */ .rv { opacity:0; transform:translateY(18px); filter:blur(9px); transition:opacity .9s var(--ease-k), transform .9s var(--ease-k), filter .9s var(--ease-k); transition-delay:var(--d, 0s); will-change:opacity, transform, filter; } .rv.in { opacity:1; transform:none; filter:blur(0); } /* ---------- 移动端 ---------- */ @media (max-width:768px) { /* 字号与主页移动端同口径:正文 15px/1.35、大标题 30px、小标 17px(客户 0817) */ :root { --u:calc(100vw / 768); --col:88vw; --fs-title:36px; --fs-head:17px; --fs-body:15px; --fs-quote:17px; --fs-final:17px; } .nav { padding:16px 5vw 12px; gap:10px; } .nav .brand { width:70px; flex:none; } .nav .menu { gap:13px; } .nav .menu a { font-size:12.5px; letter-spacing:-.02em; white-space:nowrap; } .mf { padding:88px 0 48px; } .mf p, .mf li { line-height:1.35; } .mf-title { line-height:1.06; margin-bottom:26px; } .mf-title .ln { display:block; } /* 在 "Welcome to" 后断行(客户 0817) */ .mf-lede { padding:20px 20px; border-radius:14px; margin-bottom:30px; } .mf-sec { margin-bottom:30px; } .mf-sec h2 { line-height:1.3; margin-bottom:12px; } .mf p + p, .mf-where li + li { margin-top:1.1em; } .mf-end { margin-top:32px; } .mf-where { padding-left:14px; } /* 移动端也保持一行:左社媒 / 右返回,返回不折行(客户 0818) */ .mf-foot { align-items:center; gap:12px; flex-wrap:nowrap; padding:18px 6vw 22px; } .mf-foot .s8-social { gap:14px; flex:0 0 auto; } .mf-foot .soc { width:19px; } .mf-back { white-space:nowrap; flex:0 0 auto; font-size:13.5px; } } @media (prefers-reduced-motion: reduce) { .rv { opacity:1 !important; transform:none !important; filter:none !important; transition:none !important; } }