/* Overtitle 官网。视觉跟 App 一致：近黑底、顶部一团冷光、白字。 没有任何外部依赖——App Review 会真的打开这些页面，任何加载失败的资源都是风险。 */ :root { --bg: #08080a; --fg: #f4f4f6; --dim: #8d8d96; --line: rgba(255,255,255,.10); --max: 940px; } * { box-sizing: border-box; margin: 0; padding: 0; } html { -webkit-text-size-adjust: 100%; } body { background: var(--bg); color: var(--fg); font: 16px/1.75 -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Segoe UI", Roboto, sans-serif; /* 跟封面图同一团光：椭圆、偏冷、压在顶部 16% 处 */ background-image: radial-gradient(120% 46% at 50% 12%, rgba(150,160,190,.16), transparent 68%); background-repeat: no-repeat; padding: 0 22px 80px; } .wrap { max-width: var(--max); margin: 0 auto; } header { padding: 76px 0 0; text-align: center; } .logo { font-size: 15px; letter-spacing: .18em; color: var(--dim); text-transform: uppercase; } h1 { font-size: clamp(30px, 6.2vw, 54px); line-height: 1.18; margin: 22px 0 16px; font-weight: 700; letter-spacing: -.01em; } .sub { font-size: clamp(16px, 2.4vw, 20px); color: var(--dim); max-width: 30em; margin: 0 auto; } .shots { display: flex; gap: 20px; justify-content: center; margin: 56px 0 0; flex-wrap: wrap; } /* 手机图是**透明背景**的 PNG，机身自带边框和投影——所以这里不能再加 border 或 border-radius，那会画出一个跟机身对不齐的方框。之前用不透明底图时拼出过三个可见方块。 */ .shots img { width: min(230px, 44vw); height: auto; display: block; } section { margin: 84px 0 0; } h2 { font-size: clamp(21px, 3.4vw, 27px); margin-bottom: 12px; font-weight: 650; } p { color: var(--dim); max-width: 34em; } p + p { margin-top: 12px; } .grid { display: grid; gap: 40px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } .note { border: 1px solid var(--line); border-radius: 16px; padding: 20px 22px; } .note h2 { font-size: 18px; } a { color: #7fb2ff; } footer { margin-top: 92px; padding-top: 26px; border-top: 1px solid var(--line); color: var(--dim); font-size: 13px; } footer a { margin-right: 18px; } .legal { font-size: 12px; line-height: 1.7; margin-top: 18px; max-width: none; } /* 语言切换：纯 CSS，靠 上的 class 决定显示哪一份，不依赖 JS 也能读 */ [data-lang] { display: none; } html.zh [data-lang="zh"], html.en [data-lang="en"] { display: revert; } /* `display: revert` 会把元素退回浏览器默认值——对 是 inline，没问题； 但对 .shots 这种本身是 flex 的容器，revert 会变成 block，三张图就竖着排了。 所以带 data-lang 的**容器**要单独把自己的 display 声明回来。 */ html.zh .shots[data-lang="zh"], html.en .shots[data-lang="en"] { display: flex; } html.zh .grid[data-lang="zh"], html.en .grid[data-lang="en"] { display: grid; } .langbar { text-align: center; margin-top: 30px; font-size: 13px; } .langbar button { background: none; border: 1px solid var(--line); color: var(--dim); border-radius: 999px; padding: 5px 14px; margin: 0 4px; cursor: pointer; font: inherit; font-size: 13px; } .langbar button[aria-pressed="true"] { color: var(--fg); border-color: rgba(255,255,255,.34); } /* 使用场景：比功能栅格更窄的两列，每条都短，扫读为主 */ .cases { display: grid; gap: 30px 44px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); margin-top: 26px; } .cases h3 { font-size: 17px; font-weight: 620; margin-bottom: 6px; } .cases p { font-size: 15px; } .lead { color: var(--dim); max-width: 34em; }