/* ========================================================= 闪念贝壳 website 2.0 — Home (zh-CN) Figma: website-2.0 / Home-cn-dev (1440 × 11727) ========================================================= */ /* ========================================================= Roboto Serif（自托管，避免 Google Fonts 在国内不可用） 可变字重 400–600，标题用 500 Medium ========================================================= */ @font-face{ font-family:"Roboto Serif"; font-style:normal; font-weight:400 600; font-stretch:100%; font-display:swap; src:url("font/roboto-serif-latin.woff2") format("woff2"); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC, U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face{ font-family:"Roboto Serif"; font-style:normal; font-weight:400 600; font-stretch:100%; font-display:swap; src:url("font/roboto-serif-latin-ext.woff2") format("woff2"); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308, U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113, U+2C60-2C7F,U+A720-A7FF; } /* ========================================================= Inter（自托管，同样不走 Google Fonts CDN） 可变字重 400–700。只给博客文章的拉丁字形用： 放在字体栈最前面，中文会逐字回退到后面的 PingFang SC —— 浏览器按字形挑字体， 所以同一段中英混排里，英文是 Inter、中文是苹方，这正是 Linear 那种观感 ========================================================= */ @font-face{ font-family:"Inter"; font-style:normal; font-weight:400 700; font-display:swap; src:url("font/inter-latin.woff2") format("woff2"); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC, U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face{ font-family:"Inter"; font-style:normal; font-weight:400 700; font-display:swap; src:url("font/inter-latin-ext.woff2") format("woff2"); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308, U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113, U+2C60-2C7F,U+A720-A7FF; } :root{ --black:#000000; --ink:#1e1e1e; --gray:#808080; --mute:#b8b8b8; --line:#e1e1e1; --bg:#f4f4f4; --bg2:#eaeaea; --white:#ffffff; --red:#ff3d10; --orange:#ff5600; /* 主题色 */ --wrap:1280px; --flow:1280px; /* 跟 --wrap 一致，左栏不再比正文更靠左 */ --rail:300px; /* 博客文章用：拉丁走 Inter，中文逐字回退到 --sans 里的苹方 */ --sans-inter:"Inter","PingFang SC","HarmonyOS Sans SC","SF Pro Display",-apple-system, BlinkMacSystemFont,"Segoe UI","Helvetica Neue","Microsoft YaHei",sans-serif; --sans:"PingFang SC","HarmonyOS Sans SC","SF Pro Display",-apple-system,BlinkMacSystemFont, "Segoe UI","Helvetica Neue","Microsoft YaHei",sans-serif; --serif:"Roboto Serif","寒蝉锦书宋Text","Songti SC","STSong","Source Han Serif SC", "Noto Serif SC",Georgia,"Times New Roman",serif; --block-gap:160px; /* 右侧三段之间的间距；左栏起点和锚点偏移都跟着它走 */ --r:12px; --ease:cubic-bezier(.22,.61,.36,1); } /* 英文页（index-en.html，）把无衬线字体换成 Inter。 --sans 默认是苹方打头 —— 中文页这么排是对的，但英文页里所有字母也会走苹方的西文字形， 那是给中文配套的西文，长句里字距和字重都不如专门的英文字体。 --sans-inter 是 Inter 打头、中文逐字回退到苹方（跟博客文章页 .post 用的是同一套）， 所以中英混排也不会出问题。衬线大标题走 --serif（Roboto Serif），本来就是拉丁字体，不动。 */ html[lang^="en"]{--sans:var(--sans-inter)} html[lang^="es"]{--sans:var(--sans-inter)} /* 日语页。--serif / --sans 里原本一个日文字体都没有，日语会一路回退到 Songti SC（简体宋体） 和 PingFang SC（简体黑体）—— 不缺字，但假名是中文厂商配的、汉字走大陆字形，日本人一眼看出来。 日文衬线叫「明朝体」、无衬线叫「ゴシック体」，各平台内置的是： macOS/iOS Hiragino Mincho ProN（ヒラギノ明朝）/ Hiragino Sans（ヒラギノ角ゴ） Windows Yu Mincho（游明朝）/ Yu Gothic（游ゴシック），老机器 MS Mincho / Meiryo Android Noto Serif JP / Noto Sans JP 拉丁仍旧打头（Roboto Serif / Inter），日文逐字回退到明朝和角ゴ，中英日混排不会串。 */ /* 日文禁则处理。默认的 line-break:auto 允许在長音符「ー」前断行， 于是「パートナー」会被拆成「パートナ」+ 行首一个「ー」—— 在日文排版里这是错的。strict 会连小书き仮名（っゃゅょ）一起管住。 Ping 2026-08-25 在手机上看到 hero 标题被这么拆开才发现。 */ html[lang^="ja"]{line-break:strict} html[lang^="ja"]{ /* 这里故意不放 Roboto Serif 打头。明朝体自带配套的拉丁字形，就是为了跟假名放在 一起时视觉重量一致；换成 Roboto Serif，「ideaShell はあなたを」里的拉丁会比明朝 粗一大截、笔画对比也更强，像贴上去的。中文页不受影响（宋体的拉丁太弱，那边照旧用 Roboto Serif）。 */ --serif:"Hiragino Mincho ProN","Hiragino Mincho Pro","Yu Mincho","YuMincho", "Noto Serif JP","Noto Serif CJK JP","MS Mincho",Georgia,"Times New Roman",serif; --sans:"Inter","Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic","YuGothic", "Noto Sans JP",Meiryo,-apple-system,BlinkMacSystemFont,"Segoe UI","Helvetica Neue",sans-serif; --sans-inter:var(--sans); } /* 繁体页。同一个毛病：Songti SC / PingFang SC 是简体字体，渲染繁体字不缺字但字形按大陆规范 （骨、直、令、次 这些部件跟台港标准不一样）。macOS 自带 Songti TC 和 PingFang TC。 */ html[lang="zh-Hant"]{ --serif:"Roboto Serif","Songti TC","Songti SC","STSong","Source Han Serif TC", "Noto Serif TC",Georgia,"Times New Roman",serif; --sans:"PingFang TC","PingFang HK","PingFang SC","HarmonyOS Sans TC","SF Pro Display", -apple-system,BlinkMacSystemFont,"Segoe UI","Helvetica Neue","Microsoft JhengHei",sans-serif; --sans-inter:"Inter","PingFang TC","PingFang HK","PingFang SC","SF Pro Display", -apple-system,BlinkMacSystemFont,"Segoe UI","Helvetica Neue",sans-serif; } /* 同一个 600，苹方看着比 Inter 重。中文页 hero 用 600 正好，英文页要 700 才压得住。 Inter 是 400–700 的可变字体，700 是现成的，不会多下一个字重文件。 */ html[lang^="en"] .hero__title, html[lang^="es"] .hero__title{font-weight:700} *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:130px} body{ background:var(--white); color:var(--black); font-family:var(--sans); font-size:16px; line-height:1.5; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden; } img{display:block;max-width:100%;height:auto} a{color:inherit;text-decoration:none} button{font:inherit;color:inherit;background:none;border:0;cursor:pointer} input{font:inherit} ul,ol{list-style:none} .wrap{width:min(100% - 40px,var(--wrap));margin-inline:auto} .sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} /* 跟随所在文字的颜色取 40% —— 深色标题上是 40% 黑，白色标题上是 40% 白 */ .tm{color:inherit;opacity:.4;font-size:.7em;vertical-align:.35em} /* 跟主体同色、40% 浓度（Ping 2026-08-25，原来是 50%） */ .dot{color:var(--red)} .skip{ position:absolute;left:-9999px;top:0;z-index:200; background:#000;color:#fff;padding:10px 16px;border-radius:0 0 8px 0; } .skip:focus{left:0} /* ---------- shared type ---------- */ .h2{ font-size:clamp(22px,2.3vw,32px); line-height:1.42; font-weight:600; letter-spacing:.01em; } .display{ font-family:var(--serif); font-size:clamp(30px,3.5vw,50px); line-height:1.4; font-weight:500; letter-spacing:.01em; } .display--center{text-align:center} /* ---------- buttons ---------- */ .btn{ display:inline-flex;align-items:center;justify-content:center; height:32px;padding:0 16px;border-radius:20px; font-size:14px;font-weight:600;white-space:nowrap; transition:background-color .2s var(--ease); } /* hover 一律不位移，只变色 */ .btn--dark{background:var(--black);color:var(--white)} .btn--dark:hover{background:#3d3d3d} /* 纯黑叠 ~24% 白 */ .btn--ghost{background:rgba(0,0,0,.06);color:var(--ink)} .btn--ghost:hover{background:rgba(0,0,0,.12)} .btn--lg{height:40px;padding:0 20px} .iconbtn{ width:32px;height:32px;border-radius:100px; background:rgba(0,0,0,.06); display:inline-flex;align-items:center;justify-content:center; transition:background-color .2s var(--ease); } .iconbtn:hover{background:rgba(0,0,0,.12)} .iconbtn svg{width:20px;height:20px;fill:#1c1b1f} .iconbtn .icon-play{display:none} .iconbtn[aria-pressed="true"] .icon-pause{display:none} .iconbtn[aria-pressed="true"] .icon-play{display:block} .arrows{display:flex;gap:13px;flex:none} .arrowbtn{ width:40px;height:40px;border-radius:50%; background:var(--bg); display:inline-flex;align-items:center;justify-content:center; transition:background-color .2s var(--ease),opacity .2s var(--ease); } .arrowbtn svg{width:18px;height:18px;fill:none;stroke:var(--ink);stroke-width:2;stroke-linecap:round;stroke-linejoin:round} .arrowbtn:hover{background:var(--bg2)} .arrowbtn[disabled]{opacity:.35;cursor:default} /* ========================================================= HEADER ========================================================= */ .top{ position:sticky;top:0;z-index:100; padding-top:8px; /* 胶囊条与视口上边缘的间距（两种状态都留，避免位移） */ transition:background-color .3s var(--ease); /* 页面顶部完全透明，让页面底色透上来（招聘页是 #f4f4f4 灰底，一条白横杠会很扎眼）。 白色只出现在滚动后的胶囊上，见 .top.is-compact .top__inner。 这里能安全透明是因为 is-compact 在滚动 40px 就接管了， 展开态只存在于最上面那 40px，身后还没有正文。 写 rgba(255,255,255,0) 不写 transparent：transparent 是"透明的黑"， 补间到白色会经过深灰、闪一条深色带（见坑 3） */ background:rgba(255,255,255,0); } @media (max-width:900px){ /* ≤900 没有胶囊态，正文会直接滚到顶栏底下，所以这一档保留半透明白 + 模糊 */ .top{ background:rgba(255,255,255,.72); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); } /* 菜单展开时必须把这层 backdrop-filter 撤掉：带 backdrop-filter 的元素会另起一个 backdrop root，铺在它里面的 .navi 就只能采样到顶栏内部（空的），毛玻璃完全不出效果。 顶栏这时被铺满屏的菜单盖住，撤掉不影响观感。 */ body.menu-open .top{ background:transparent; backdrop-filter:none; -webkit-backdrop-filter:none; } body.menu-open{overflow:hidden} /* 菜单铺满屏时锁住背景滚动 */ /* 顶栏上下留白原本不对称：.top 自己有 8px 的 padding-top，加上 .top__inner 的 12px， 上面 20px、下面只有 12px。窄屏没有胶囊态，那 8px 是给胶囊留的，这里去掉，上下都是 12。 */ .top{padding-top:0} /* 向下滑收走、向上滑放出（initTopbar 加的 is-hidden） */ .top{transition:background-color .3s var(--ease),transform .28s var(--ease)} .top.is-hidden{transform:translateY(-100%)} body.menu-open .top.is-hidden{transform:none} /* 双保险：菜单开着绝不带 transform */ } .top__inner{ width:min(100% - 28px,1296px);margin-inline:auto; /* 1280 内容 + 左右各 8 */ display:flex;align-items:center;justify-content:space-between; padding:8px 8px 8px 16px; /* 左侧多 8px，logo 离圆角端头更透气 */ position:relative; /* 底色与阴影两端都写成"透明的白/透明的灰"，只补间 alpha： transparent(=透明的黑) 补间到白会经过深灰，从 none 补间阴影会先出现一条没模糊的硬边 */ background:rgba(255,255,255,0); box-shadow:0 0 0 1px rgba(225,225,225,0),0 6px 20px rgba(0,0,0,0); transition:box-shadow .3s var(--ease),border-radius .3s var(--ease), background-color .3s var(--ease); } /* logo 整体高度只有这一个开关：--logo-h（assets/svg/logo.svg 原始尺寸 121×24） */ .logo{--logo-h:22px;display:flex;align-items:center;flex:none} .logo img{height:var(--logo-h);width:calc(var(--logo-h) * 121 / 24);max-width:none} /* left 172 = 设计稿文字位 188 减去胶囊自身的 16px 内距；gap 12 与右侧两颗按钮一致 */ .navi{ position:absolute;left:172px;top:8px; display:flex;gap:12px; } .navi__col{position:relative;transition:min-width .34s var(--ease)} /* 展开态列宽 = 子菜单最宽的一条 + 16；收起态收到标题胶囊自身宽度。 两个值都是长度，min-width 可以补间 → 收拢过程是平滑的 */ .navi__col:nth-child(1){min-width:82px} .navi__col:nth-child(2){min-width:68px} .navi__col:nth-child(3){min-width:84px} /* 往下滚（>900px 视口）：顶栏收成一条浮在内容之上的白色胶囊， 子菜单收起，hover / 键盘聚焦某一列时那一列的子菜单以下拉面板滑出 */ @media (min-width:901px){ /* 尺寸、内边距、每个元素的位置都不变；只是把顶栏底层换成白色胶囊 （描边用 box-shadow 画，不占布局，避免 1px 位移） */ .top.is-compact .top__inner{ background:var(--white); border-radius:999px; box-shadow:0 0 0 1px var(--line),0 6px 20px rgba(0,0,0,.05); } /* 收起态：三列收到标题胶囊自身宽度 */ .top.is-compact .navi__col:nth-child(1){min-width:58px} .top.is-compact .navi__col:nth-child(2){min-width:58px} .top.is-compact .navi__col:nth-child(3){min-width:84px} /* 标题与下拉面板之间的透明桥，鼠标移过去不会断 */ .top.is-compact .navi__col::after{ content:"";position:absolute;left:-24px;right:-24px;top:100%;height:26px; } /* 面板底色/描边/阴影只在 hover 时才出现——收拢过程中保持透明， 否则子菜单淡出的那 0.2s 会闪一下阴影 */ .top.is-compact .navi__col > ul{ left:50%;top:calc(100% + 14px);min-width:152px; gap:10px;padding:16px 20px;border-radius:16px; background:rgba(255,255,255,0); box-shadow:0 0 0 1px rgba(225,225,225,0),0 10px 28px rgba(0,0,0,0); /* 用 opacity 而不是 visibility 隐藏：链接仍可 Tab 聚焦，:focus-within 才能把面板唤出来 */ opacity:0;pointer-events:none; transform:translate(-50%,-8px); transition:opacity .2s var(--ease),transform .2s var(--ease), background-color .2s var(--ease),box-shadow .2s var(--ease), left .34s var(--ease),top .34s var(--ease); } .top.is-compact .navi__col:hover > ul, .top.is-compact .navi__col:focus-within > ul{ opacity:1;pointer-events:auto;transform:translate(-50%,0); background:var(--white); box-shadow:0 0 0 1px var(--line),0 10px 28px rgba(0,0,0,.12); } } .navi__title{ display:inline-flex;align-items:center;height:32px;padding:0 16px; border-radius:20px; font-size:13px;line-height:1;font-weight:700;color:var(--ink); white-space:nowrap; transition:background-color .2s var(--ease),margin-bottom .28s var(--ease); } .navi__col:hover > .navi__title, .navi__col:focus-within > .navi__title{background:rgba(0,0,0,.06)} /* 子菜单两种状态都是绝对定位：不切换定位方式，收拢时才不会突跳 */ .navi__col > ul{ display:flex;flex-direction:column;gap:8px; position:absolute;left:16px;top:calc(100% + 8px); /* 描边用 box-shadow 画，不用 border：border-color 默认是 currentColor(纯黑)， 且 border-width 0→1px 不参与补间，会在收拢时闪出一圈黑色圆角描边 */ background:rgba(255,255,255,0); box-shadow:0 0 0 1px rgba(225,225,225,0),0 10px 28px rgba(0,0,0,0); transition:opacity .2s var(--ease),transform .2s var(--ease), box-shadow .2s var(--ease),background-color .2s var(--ease), left .34s var(--ease),top .34s var(--ease); } .navi__col a{white-space:nowrap} .navi__col a{font-size:13px;color:var(--gray);transition:color .18s var(--ease)} .navi__store{display:none} /* 只在 ≤900 的手机菜单里出现，桌面导航没有它的位置 */ .navi__col a:hover{color:var(--ink)} .top__actions{display:flex;gap:12px;align-items:center;flex:none;padding-top:0} .top__actions .btn{font-size:13px} /* 热区保持 40×40，线本身缩短加粗 */ .burger{ display:none;width:40px;height:40px; flex-direction:column;align-items:center;justify-content:center;gap:5px; } .burger span{ display:block;width:20px;height:2px;background:var(--ink);border-radius:2px; transition:transform .25s var(--ease),opacity .2s; } .burger[aria-expanded="true"] span:first-child{transform:translateY(3.5px) rotate(45deg)} .burger[aria-expanded="true"] span:last-child{transform:translateY(-3.5px) rotate(-45deg)} /* ========================================================= HERO ========================================================= */ .hero{padding-top:150px} /* 设计稿 110 + 下移 40 */ .hero__head{ display:flex;flex-direction:column;align-items:center;gap:20px; text-align:center; } .hero__eyebrow{font-size:16px;font-weight:600;color:var(--ink)} .hero__title{font-size:clamp(30px,4.2vw,48px);line-height:1.2;font-weight:600;letter-spacing:.01em} /* 仅窄屏生效的换行。桌面上 display:none 的
不产生断行， 窄屏改回 inline 就断 —— 用来指定 CJK 标题在手机上的断点。 */ .br-sp{display:none} .hero__sub{font-size:clamp(17px,2vw,24px);font-weight:600;color:var(--red)} .hero__media{margin-top:40px;display:flex;flex-direction:column;align-items:center;gap:20px} .carousel{width:100%;overflow:hidden;border-radius:4px;touch-action:pan-y} /* touch-action:pan-y —— 明确告诉浏览器纵向归你、横向归我。 不写的话默认 auto，浏览器可能在手势中途自己接管横向平移，preventDefault 就不一定拦得住。 */ .carousel__track{display:flex;transition:transform .5s var(--ease)} /* 切换时的滑动时长 */ .carousel__slide{flex:0 0 100%;min-width:0} .carousel__slide img{ width:100%;aspect-ratio:1280/660;object-fit:cover; } .hero__controls{display:flex;align-items:center;gap:16px} .hero__controls[hidden]{display:none} /* display:flex 的特异性比 UA 的 [hidden] 高，不写这条藏不住 */ /* 三个指示器共用一个底，颜色跟暂停按钮一致 */ .progress{ display:flex;align-items:center;gap:8px; height:32px;padding:0 12px; border-radius:100px;background:rgba(0,0,0,.06); } .progress__seg{ width:8px;height:8px;border-radius:100px;background:rgba(0,0,0,.14); transition:width .35s var(--ease),background-color .35s var(--ease); position:relative;overflow:hidden; } .progress__seg.is-active{width:56px;background:rgba(0,0,0,.14)} .progress__seg.is-active::after{ content:"";position:absolute;inset:0;width:0;border-radius:100px;background:var(--ink); animation:fill var(--dur,6s) linear forwards; } .progress.is-paused .progress__seg.is-active::after{animation-play-state:paused} @keyframes fill{to{width:100%}} /* ========================================================= 产品三卡 ========================================================= */ .products{ margin-top:71px; display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px; } .pcard{ background:var(--bg);border-radius:var(--r); padding:40px;display:flex;flex-direction:column;gap:40px; transition:transform .3s var(--ease); } .pcard:hover{transform:translateY(-4px)} .pcard__media{ height:248px;display:flex;align-items:center;justify-content:center; } .pcard__media img{width:160px;height:160px;object-fit:contain} .pcard__ring{width:153px;height:127px} .pcard__card{width:153px;height:232px} .pcard__body{display:flex;flex-direction:column;gap:24px} .pcard__text{display:flex;flex-direction:column;gap:8px} .pcard__title{font-size:20px;font-weight:600;color:var(--ink);line-height:1.3} .pcard__desc{font-size:16px;font-weight:300;color:var(--gray);line-height:1.35} .pcard__actions{display:flex;gap:12px;justify-content:flex-start} /* ========================================================= FLOW（左侧吸附导航 + 三段内容） ========================================================= */ .flow{margin-top:180px} .flow__grid{ --g:max(20px,(100vw - var(--flow)) / 2); /* 内容列右侧到视口右边的距离 */ width:min(100% - 40px,var(--flow));margin-inline:auto; display:grid;grid-template-columns:var(--rail) minmax(0,1fr); } /* 序言独占第一行右列；左栏和三段内容在第二行 —— 左栏因此和「任何想法，随手记录」齐头 */ .flow__grid > .intro{grid-column:2;grid-row:1} .rail{grid-column:1;grid-row:2} .flow__content{grid-column:2;grid-row:2} /* ---- 左栏 ---- */ .rail{position:relative;padding-top:var(--block-gap)} /* = .block 的上内距，让首项与首个区块标题齐头 */ .rail__inner{ position:sticky;top:130px; /* = html 的 scroll-padding-top，锚点跳转后与区块标题齐平 */ padding-left:20px; /* = 滑块自身的偏移，让滑块左缘对齐内容列左边界 */ } .rail__list{position:relative;display:flex;flex-direction:column;gap:6px} /* 背景细线：只跟三项等高，比原来更轻 */ .rail__list::before{ content:"";position:absolute;left:-18px;top:9px;bottom:9px;width:1px; background:rgba(0,0,0,.07); } /* 黑色滑块：位置由 JS 写入 --mt / --mh，随滚动平滑下移 */ .rail__list::after{ content:"";position:absolute;left:-20px;width:5px;border-radius:4px; background:var(--black); top:var(--mt,9px);height:var(--mh,0px); transition:top .45s var(--ease),height .45s var(--ease); } .rail__item{position:relative;width:224px} .rail__link{ display:flex;flex-direction:column; padding:14px 12px 16px 20px;border-radius:var(--r); transition:background-color .25s var(--ease); } .rail__link:hover{background:rgba(0,0,0,.03)} .rail__step{ font-size:13px;font-weight:600;color:#62616a;line-height:1.8; opacity:1;transition:opacity .35s var(--ease); } .rail__name{ font-size:22px;font-weight:600;line-height:1.45;color:#62616a; transition:color .35s var(--ease); } .rail__desc{font-size:15px;line-height:1.5;color:#62616a;transition:color .35s var(--ease)} .rail__item.is-active .rail__step{opacity:1} .rail__item.is-active .rail__name, .rail__item.is-active .rail__desc{color:var(--black)} /* ---- 右栏 ---- */ .flow__content{min-width:0} .intro{ max-width:820px; /* 右栏是 980，600 太窄、行数被压得多（2026-08-25 放宽）。中英文共用这条 */ padding-bottom:17px; /* 原来这里还有一条 border-bottom 分隔线，2026-08-25 按要求去掉（手机桌面都不要） */ display:flex;flex-direction:column;gap:17px; } .intro__eyebrow{font-size:clamp(18px,1.7vw,24px);font-weight:600;color:var(--orange)} .intro__title{font-family:var(--serif);font-size:clamp(30px,3.5vw,50px);line-height:1.4;font-weight:500} .block{padding-top:var(--block-gap);scroll-margin-top:calc(-1 * var(--block-gap))} /* 抵消自身上内距，点击左栏跳转时标题落在同一条基线上 */ .block__head{display:flex;align-items:flex-start;justify-content:space-between;gap:32px} .block__head--stack{flex-direction:column;gap:22px} .block__sub{font-size:clamp(16px,1.5vw,20px);color:var(--gray)} /* bleed 到视口右边缘（内容列右边界距视口 --g） */ .bleed-r{margin-right:calc(-1 * var(--g))} /* 设备卡片横向轮播：原生横向滚动容器（支持触控板 / 横向滚轮 / 触摸滑动） */ .cards{ margin-top:55px; overflow-x:auto;overflow-y:hidden; scroll-snap-type:x mandatory; overscroll-behavior-x:contain; -webkit-overflow-scrolling:touch; scrollbar-width:none;-ms-overflow-style:none; } .cards::-webkit-scrollbar{display:none} .cards__track{display:flex;gap:20px} /* 末尾垫一个占位项：flex 容器的 padding-right 不计入可滚动溢出，只能这样留白 */ .cards__track::after{content:"";flex:0 0 calc(var(--g) - 20px);align-self:stretch} .devcard{ position:relative;flex:0 0 400px;max-width:400px; aspect-ratio:400/560;border-radius:var(--r);overflow:hidden;background:var(--bg); scroll-snap-align:start; } .devcard img{width:100%;height:100%;object-fit:cover} .devcard::after{ content:"";position:absolute;z-index:0;inset:25% 0 0;pointer-events:none; background:linear-gradient(to top,rgba(0,0,0,.78) 0%,rgba(0,0,0,.42) 45%,rgba(0,0,0,0) 100%); opacity:0;transform:translateY(28%); transition:opacity .38s var(--ease),transform .5s var(--ease); } .devcard figcaption{ position:absolute;z-index:1;left:40px;right:40px;bottom:40px; color:var(--white);display:flex;flex-direction:column;gap:8px; text-shadow:0 1px 20px rgba(0,0,0,.25); } .devcard__tag{font-size:16px;font-weight:400;opacity:.85} .devcard__name{font-size:28px;font-weight:600;line-height:1.35} .devcard__desc{ height:0;overflow:hidden;font-size:15px;font-weight:400;line-height:1.6;color:rgba(255,255,255,.88); opacity:0;transform:translateY(16px); transition:height .5s var(--ease),opacity .28s var(--ease),transform .5s var(--ease); } /* 展开态。三个触发源分开写： 1. .is-open —— 触屏点一下展开、再点收起（initDevCards 加的） 2. :focus-visible —— 键盘 Tab 过来时展开 3. :hover —— 只在真有鼠标的设备上生效，必须包在 @media (hover:hover) 里。 触屏上 :hover 会「粘住」：手指点一下之后状态一直挂着，看起来就是默认展开、再点也收不回去。 */ .devcard.is-open::after,.devcard:focus-visible::after{opacity:1;transform:translateY(0)} .devcard.is-open .devcard__desc,.devcard:focus-visible .devcard__desc{height:96px;opacity:1;transform:translateY(0)} @media (hover:hover){ .devcard:hover::after{opacity:1;transform:translateY(0)} .devcard:hover .devcard__desc{height:96px;opacity:1;transform:translateY(0)} } .devcard:focus-visible{outline:2px solid var(--ink);outline-offset:3px} /* Never miss an idea */ .never{margin-top:145px;display:flex;flex-direction:column;gap:20px;max-width:620px} .never__copy{font-size:18px;line-height:1.7;color:var(--ink)} /* 设备全家福：2x 素材（2640×720），按高 360 显示；左边固定在内容列， 右边一直延伸到视口边缘裁掉 —— 屏幕越宽露出越多，不滚动 */ .devices{margin-top:44px;margin-right:calc(-1 * var(--g));overflow:hidden} .devices img{height:360px;width:auto;max-width:none} /* ---- 一起想 ---- */ /* grid + grid-auto-rows:1fr 让三行等高 —— 高度取「内容最多的那张」，其余两张跟着它。 好处是不用把高度写死：文案改长改短，三张一起变，永远齐平也永远不裁。 （之前是 flex 竖排 + .talk__panel 写死 320，宽屏白留一大截、窄屏又不够。） */ .talks{margin-top:47px;display:grid;grid-auto-rows:1fr;gap:30px} .talk{display:grid;grid-template-columns:180px minmax(0,1fr);gap:18px;align-items:stretch} .talk__thumb{ position:relative;border-radius:var(--r);overflow:hidden; width:180px;height:auto;align-self:stretch; /* 高度跟着这一行走，与右侧面板齐平 */ /* 三色渐变（原图取色），白点交给 canvas 画 */ background: radial-gradient(78% 52% at 50% 46%,rgba(255,255,255,.62) 0%,rgba(255,255,255,0) 72%), radial-gradient(115% 78% at 8% 2%,var(--c1) 0%,rgba(255,255,255,0) 64%), radial-gradient(120% 82% at 98% 100%,var(--c3) 0%,rgba(255,255,255,0) 66%), linear-gradient(146deg,var(--c1) 0%,var(--c2) 46%,var(--c3) 100%); } /* 三组色在原图取色基础上一路往白混：45 → 42 → 40（2026-08-25 分三次调浅）， 累计离原色约 81%，只剩一点点色相。想再调深浅就整组按同一比例往白/往原色推， 别只改其中一个 —— 三色是同一张渐变里的头/中/尾，单独动会让过渡出现色带。 */ .talk:nth-of-type(1) .talk__thumb{--c1:#fef1ed;--c2:#ffeaf1;--c3:#efe5fe} .talk:nth-of-type(2) .talk__thumb{--c1:#e2f1fe;--c2:#e9f6fd;--c3:#e3f8fe} .talk:nth-of-type(3) .talk__thumb{--c1:#fef8df;--c2:#f9fae8;--c3:#e8f5e6} .talk__dots{position:absolute;inset:0;width:100%;height:100%;display:block} .talk__thumb::after{ content:"";position:absolute;inset:0;pointer-events:none; /* 底部压暗一点点，让白点和文字不飘。颜色调浅后这层也跟着从 .14 减到 .07， 不然渐变浅了、暗角却还是原来的重量，看着像脏了一块。 */ background:linear-gradient(180deg,rgba(0,0,0,0) 34%,rgba(0,0,0,.04)); } .talk__label{ position:absolute;inset:0; /* 横向撑满并留 24 的内距，纵向居中 —— 左右边距因此都是确定的 24。 原来是 place-content:center（整组居中），左右边距由文字宽度反推出来（实测 53）， 跟上下的 63 对不上，看着就是"四边不匀"。 */ display:grid;place-content:center stretch;justify-items:start;gap:6px; padding:24px; text-align:left; color:var(--black);font-size:clamp(20px,1.7vw,26px);font-weight:600;line-height:1.3; } .talk__spark{width:28px;height:28px;filter:brightness(0)} .talk__panel{ background:var(--bg);border-radius:var(--r); /* 高度不写死：由 .talks 的 grid-auto-rows:1fr 统一分配，三张一样高且刚好装下内容。 写死过 320px + overflow:hidden，结果 1200 以下的宽度把正文裁掉了（实测最多 78px）。 */ height:auto; padding:30px 38px;overflow:hidden; display:flex;flex-direction:column;justify-content:center;gap:14px; } .bubble{ align-self:flex-end;max-width:530px; background:var(--white);border-radius:16px; padding:12px 16px;font-size:16px;line-height:1.55;color:var(--ink); } .ailog{ display:flex;align-items:center;gap:8px; font-size:14px;color:var(--ink); } /* 直接用闪念贝壳的标志本体，不套黑色圆底（Ping 2026-08-25）。 SVG 里本来就是 fill="#1E1E1E"，所以也不需要 filter —— 原来那句 invert(1) 是为了在黑底上反白。 */ .ailog__mark{ width:20px;height:21px; display:inline-flex;align-items:center;justify-content:center;flex:none; } .ailog__mark img{width:20px;height:21px} .ailog__chev{width:14px;height:14px;fill:none;stroke:var(--mute);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round} .reply{font-size:16px;line-height:1.65;color:var(--ink);max-width:640px} /* ---- 帮你做 ---- */ .makes{margin-top:48px;display:flex;flex-direction:column;gap:18px} .makes__row{display:flex;gap:18px;align-items:stretch} .make--sm{flex:326 1 0} .make--lg{flex:624 1 0} .make{ position:relative;background:var(--bg);border-radius:var(--r); padding:24px 24px 0;overflow:hidden; height:479px;display:flex;flex-direction:column;gap:16px; /* 固定高度，放不下的图直接被卡片裁掉 */ } .chip{ /* 圆角跟卡片同一套语言：卡片是 --r(12)，标签在它内部所以收一档到 8， 不用 100px 的全圆胶囊 —— 那个跟方正的卡片边框对不上（Ping 2026-08-25）。 */ align-self:flex-start;background:var(--white);border-radius:8px; padding:8px 16px;font-size:18px;font-weight:600;color:var(--ink); } /* 描述文字从 --ink(#1e1e1e) 调到 #6f6e77：原来跟标签一样重，两者在打架，标签压不住。 #6f6e77 是站内已有的三级灰（博客正文在用），在 #f4f4f4 卡底上对比度约 4.6:1，仍达 WCAG AA。 */ .make__desc{font-size:16px;line-height:1.5;color:#6f6e77;max-width:360px} .make__shot{margin-top:auto;flex:none;display:flex;justify-content:center} /* flex:none：别被压缩，超出部分交给卡片裁 */ .make__shot img{ --sx:0px;--sy:20px; /* 每张卡可单独微调图片位置；--sy 是四张统一的下移量 */ width:100%;max-width:100%;object-fit:contain;object-position:top center; transform:translate(var(--sx),var(--sy)) rotate(-1.5deg); /* 常态：轻微左倾 */ transform-origin:50% 100%; transition:transform .45s var(--ease); } /* hover：摆正并轻轻上浮 */ .make:hover .make__shot img{transform:translate(var(--sx),calc(var(--sy) - 10px)) rotate(0deg)} .make--todo .make__shot img{--sx:20px;--sy:40px} /* ========================================================= 记忆 ========================================================= */ /* 设计稿 9:1020：标题 → 输入框 → 一张整图 → MCP，全部居中，间距照搬 */ .memory{ margin-top:190px; background:#ececee; padding:134px 0 162px; /* 与设计稿上下留白一致 */ display:flex;flex-direction:column;align-items:center; } .memory__title{ width:min(100% - 40px,640px);text-align:center; /* 设计稿 551 刚好一行，字体渲染略宽，放宽避免掉字 */ display:flex;flex-direction:column;gap:17px; } .memory__eyebrow{font-size:clamp(17px,1.7vw,24px);font-weight:600;color:var(--orange)} /* 输入框：按 Figma 9:1206 用 UI 写，不再用图片 容器 581×160 / 圆角 36.9 / 内距 12.3 / 行距 12.3；文字 24.6 PingFang Medium 行高 36.9；按钮 61.5 */ /* 外层只负责视差位移，内层负责进场动画 —— 分开写，两个 transform 才不会互相覆盖 */ /* 舞台：给 sticky 一个边界。卡片在这里面钉住，底图在下面照常滚， 舞台底（= 图片底）到了才把卡片带走。 */ .memory__stage{ position:relative; /* width:100% 不能省。舞台自己也是 .memory 这个 flex 容器的子项， 而 .memory 是 align-items:center —— 不给宽度的话舞台会收缩到内容宽， 里面的图再写 min(100% - 40px,1452) 也只能拿到收缩后的那点宽度（实测塌成 542）。 */ width:100%; display:flex;flex-direction:column;align-items:center; } .aibox-wrap{ margin-top:80px; width:min(100% - 40px,581px); position:sticky;top:320px;z-index:2; /* top 由 initAskDemo 按「灰底顶到卡片顶」的实测距离改写，这里只是 JS 没跑时的兜底 */ } /* ---- Liquid Glass ---- 参数取自设计系统的 Liquid Glass 变量： Frost 6 / Opacity 25 / Depth 30 / Splay 20 / Dispersion 20 / Refraction 70 / Light Angle 0 分四层叠出来：磨砂底 + 高光边 + 内壁厚度 + 外投影；折射用 SVG 位移滤镜（见 index.html） */ .aibox{ position:relative; width:100%; /* 提问区淡出到第一条步骤出现之间，卡片里一度没有内容，会塌成一条。 给一个等于初始高度的下限，卡片只涨不缩。数值是实测的初始高度。 */ min-height:120px; border-radius:24px; padding:12.3px; display:flex;flex-direction:column;gap:12.3px; /* 玻璃本体：25% 白 + 磨砂，saturate 让透过来的颜色更"活"，是玻璃感的关键 */ background: linear-gradient(180deg,rgba(255,255,255,.82),rgba(255,255,255,.66)) padding-box; -webkit-backdrop-filter:blur(40px) saturate(180%) brightness(1.06); backdrop-filter:blur(40px) saturate(180%) brightness(1.06); box-shadow: 0 10px 30px rgba(0,0,0,.10), /* Depth 30：外投影 */ 0 1px 2px rgba(0,0,0,.05), inset 0 1px 0.5px rgba(255,255,255,.95), /* Light Angle 0：顶部高光棱 */ inset 0 -1px 0.5px rgba(255,255,255,.42), /* 底部回光 */ inset 0 0 22px rgba(255,255,255,.30); /* Splay 20：内壁散光，撑出厚度 */ } /* 高光描边：单靠 border 画不出"上亮下暗"的玻璃棱，用渐变边框 + mask 挖空 */ .aibox::before{ content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none; padding:1px; background:linear-gradient(160deg, rgba(255,255,255,.95) 0%, rgba(255,255,255,.25) 34%, rgba(255,255,255,.10) 62%, rgba(255,255,255,.70) 100%); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor;mask-composite:exclude; z-index:1; } /* 斜向掠过的一道镜面反光，让平面看起来是曲面 */ .aibox::after{ content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none; background:linear-gradient(105deg, rgba(255,255,255,0) 30%, rgba(255,255,255,.30) 46%, rgba(255,255,255,0) 58%); opacity:.85;z-index:1; } .aibox > *{position:relative;z-index:2} /* 注意：不要把 SVG 滤镜（url(#...)）塞进 backdrop-filter。 Safari 会谎报支持，拿到链子却解析不了 url()，于是把整条 backdrop-filter 丢弃 —— 模糊和饱和度会一起消失，只剩背景色。玻璃感靠下面的高光边和内壁阴影来撑。 */ .aibox__text{ padding:12.3px; font-size:18px;line-height:27px;font-weight:500;color:var(--black); } .aibox__row{display:flex;align-items:center;gap:6.15px} .aibox__gap{flex:1} .aibox__btn{width:32px;height:32px;flex:none;display:block} /* margin-bottom:-40px 把舞台的 content box 收短 40px —— sticky 的活动范围就是包含块的 content box，收短多少，卡片就提前多少像素跟着页面滚走。想再提前就把这个负值调大。 它会连带把下面的 .memory__mcp 也拉上来 60px，所以那边的 margin-top 从 60 补到了 120， 两个数要一起改，不然图和「让你的每一份记忆」之间的间距会跟着变。 */ .memory__shot{margin-top:-80px;margin-bottom:-60px;width:min(100% - 40px,1452px);height:auto;position:relative;z-index:1} /* 负的 margin-top 把图垫到输入框下面，改这个数调重叠量 */ .memory__mcp{ /* 图标列 392，文案列 420，列间距 40 → 容器 852。 392 是算出来的：图标图 942×736，392 宽时正好 306 高，跟右边文案块齐平。 换图换文案都会打破这个平衡，重算一下：图标列宽 = 文案块高 × 图宽 ÷ 图高， 容器宽 = 图标列宽 + 420 + 40。这三个数（列宽 / 容器宽 / img 的 max-width）要一起改。 （原设计稿是 262 / 722，配的是那张 305×374 的竖图。） */ margin-top:120px;width:min(100% - 40px,852px); /* 60 的设计间距 + 60 补回 .memory__shot 的负 margin-bottom */ display:grid;grid-template-columns:392fr 420fr;gap:40px;align-items:center; } .memory__icons img{width:100%;max-width:392px} .memory__copy{display:flex;flex-direction:column;gap:16px;padding-top:10px} .memory__copy p{font-size:18px;line-height:1.6;color:var(--gray)} /* ========================================================= 用户 ========================================================= */ .users{ margin-top:150px; display:grid;grid-template-columns:576fr 707fr;gap:0;align-items:center; } .users__intro{display:flex;flex-direction:column;gap:17px;align-items:flex-start;max-width:523px} /* 这条标题不用衬线，跟 hero 的「你的 AI 思维伙伴」同一套字 */ .users__intro .display{ font-family:var(--sans); font-size:clamp(30px,4.2vw,48px); line-height:1.2; font-weight:600; } .users__intro p{font-size:clamp(16px,1.5vw,20px);line-height:1.7;color:var(--gray);max-width:501px} .users__intro .btn{margin-top:17px} .users__wall{ position:relative;height:1058px;overflow:hidden; display:grid;grid-template-columns:repeat(3,223px);gap:19px;justify-content:end; -webkit-mask-image:linear-gradient(180deg,transparent,#000 12%,#000 88%,transparent); mask-image:linear-gradient(180deg,transparent,#000 12%,#000 88%,transparent); } .wall__col{display:flex;flex-direction:column;gap:16px;will-change:transform} .wall__col[data-dir="up"]{animation:scrollUp var(--speed,60s) linear infinite} .wall__col[data-dir="down"]{animation:scrollDown var(--speed,72s) linear infinite} .users__wall:hover .wall__col{animation-play-state:paused} @keyframes scrollUp{from{transform:translateY(0)}to{transform:translateY(-50%)}} @keyframes scrollDown{from{transform:translateY(-50%)}to{transform:translateY(0)}} /* 标题和说明都压在卡片底部的黑色渐变上（2026-08-25 改，原来是标题在顶、说明在底的白色渐变）。 做法：figure 本身变成 flex column + justify-content:flex-end，图片和渐变都绝对定位垫在下面， 标题和说明按 DOM 顺序自然堆在底部 —— 说明高度是 1 行还是 2 行都能自适应，不用算位置。 */ .qcard{ position:relative;flex:none;width:223px;height:293px; border-radius:10px;overflow:hidden;background:var(--bg); display:flex;flex-direction:column;justify-content:flex-end; } .qcard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} /* 黑色渐变遮罩。高度给 66% 是为了让最上面那截完全透明，图不会整体发暗。 pointer-events:none 免得它挡住卡片本身的交互。 */ .qcard::after{ content:"";position:absolute;left:0;right:0;bottom:0;height:66%; background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.55) 46%,rgba(0,0,0,.86)); pointer-events:none; } .qcard__head{position:relative;z-index:1;padding:0 14px;color:var(--white)} .qcard__name{display:block;font-size:14px;font-weight:600;line-height:1.35} .qcard__desc{ position:relative;z-index:1; padding:5px 14px 14px; font-size:12px;line-height:1.55;color:rgba(255,255,255,.86); } /* 整张卡是 ，点进对应的 Playbook 用法页。 墙一直在自动滚动，所以只给一点点亮度反馈，不做位移 —— 位移会跟滚动打架。 */ .qcard{text-decoration:none;transition:filter .25s var(--ease)} .qcard:hover{filter:brightness(1.06)} .qcard:focus-visible{outline:2px solid var(--ink);outline-offset:3px} /* ========================================================= 底部三联 ========================================================= */ .banner{ margin-top:150px; width:min(100%,1280px);margin-inline:auto; /* 最大 1280，不跟着屏幕一起长 */ display:grid;grid-template-columns:repeat(3,1fr); border-radius:4px;overflow:hidden; /* 圆角挂在整组上，只圆外面四角，中间接缝不圆 */ } /* 三张等宽、比例固定 480:846，高度随屏宽缩放；文案是 HTML，压在图上 */ .panel{ position:relative;overflow:hidden;display:block; aspect-ratio:480/846;background:#bbb; } .panel__img{ position:absolute;inset:0; width:100%;height:100%;max-width:none;object-fit:cover; transition:transform .6s var(--ease); } .panel:hover .panel__img{transform:scale(1.03)} .panel__head{ position:absolute;left:0;right:0;top:80px;z-index:2; padding-inline:clamp(16px,3vw,44px); display:flex;flex-direction:column;gap:6px; } .panel__title{font-size:clamp(18px,2.1vw,30px);font-weight:600;line-height:1.2;color:var(--ink)} .panel__cta{ display:inline-flex;align-items:center;gap:6px; font-size:clamp(14px,1.4vw,18px);color:var(--ink); } .panel__cta svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s var(--ease)} .panel:hover .panel__cta svg{transform:translateX(4px)} /* ========================================================= FOOTER ========================================================= */ .foot{ margin-top:80px;padding:40px 0 72px; background:var(--black);color:var(--white); /* 页面总高带小数（clamp+vw 算出的字号让行盒高度成为小数，逐层累加）， 最后不到 1px 的那行会漏出 body 的白底。用 0 模糊的实色投影往下补一段， 不占布局，也不会在顶部回弹时露出黑边 */ box-shadow:0 60px 0 0 var(--black); } .foot__top{display:flex;justify-content:space-between;gap:60px;flex-wrap:wrap} .foot__links{display:grid;grid-template-columns:repeat(4,minmax(88px,100px));gap:16px} .foot__title{font-size:13px;font-weight:600;color:var(--white);margin-bottom:14px} .foot__links ul{display:flex;flex-direction:column;gap:3px} .foot__links a{font-size:13px;color:rgba(255,255,255,.55);transition:color .18s var(--ease)} .foot__links a:hover{color:var(--white)} .coming-soon{position:relative;display:inline-block;font-size:13px;color:rgba(255,255,255,.55);cursor:default} .coming-soon::after{ content:attr(data-label);position:absolute;left:0;bottom:calc(100% + 7px);z-index:2; padding:5px 8px;border-radius:6px;background:rgba(255,255,255,.94);color:#111; font-size:11px;line-height:1;white-space:nowrap;pointer-events:none; opacity:0;transform:translateY(3px);transition:opacity .15s var(--ease),transform .15s var(--ease); } .coming-soon:hover,.coming-soon:focus-visible{color:var(--white);outline:none} .coming-soon:hover::after,.coming-soon:focus-visible::after{opacity:1;transform:translateY(0)} .foot__bottom{ margin-top:88px; display:flex;justify-content:flex-start;align-items:flex-end;gap:32px;flex-wrap:wrap; } .foot__brand{display:flex;flex-direction:column;gap:2px} /* ---- 语言切换 ---- */ .lang{position:relative;flex:none} .lang__btn{ display:inline-flex;align-items:center;gap:8px; height:36px;padding:0 14px;border-radius:100px; background:rgba(255,255,255,.1);color:var(--white); font-size:14px;font-weight:500; transition:background-color .2s var(--ease); } .lang__btn:hover{background:rgba(255,255,255,.18)} .lang__globe{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6} .lang__chev{ width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.2; stroke-linecap:round;stroke-linejoin:round; transition:transform .25s var(--ease); } .lang.is-open .lang__chev{transform:rotate(180deg)} /* 在页面最底部，菜单往上弹 */ .lang__menu{ position:absolute;right:0;bottom:calc(100% + 8px);min-width:100%; padding:6px;border-radius:12px; background:#1c1c1c;box-shadow:0 0 0 1px rgba(255,255,255,.1),0 12px 32px rgba(0,0,0,.5); display:flex;flex-direction:column;gap:2px; opacity:0;visibility:hidden;transform:translateY(6px); transition:opacity .2s var(--ease),transform .2s var(--ease),visibility 0s linear .2s; } .lang.is-open .lang__menu{ opacity:1;visibility:visible;transform:none; transition:opacity .2s var(--ease),transform .2s var(--ease),visibility 0s linear 0s; } .lang__menu button{ display:block;width:100%;text-align:left;white-space:nowrap; padding:8px 14px;border-radius:8px; font-size:14px;color:rgba(255,255,255,.6); transition:background-color .18s var(--ease),color .18s var(--ease); } .lang__menu button:hover{background:rgba(255,255,255,.08);color:var(--white)} .lang__menu button[aria-selected="true"]{color:var(--white)} .foot__logo{width:107px;height:32px;margin-bottom:10px} .foot__legal{font-size:13px;color:rgba(255,255,255,.72)} .foot__legal strong{font-weight:600;color:var(--white)} /* RoundRedDot Inc. → roundreddot.com。不加下划线，只在 hover 时把 strong 变橙 */ .foot__corp{transition:color .2s var(--ease)} /* 公司名那条外面套着 ，备案号那条没有 —— 只写 :hover strong 的话 备案号链接就完全没有 hover 反馈。两条都要给。 */ .foot__corp:hover, .foot__corp:hover strong{color:var(--orange)} /* ========================================================= 进场动画 ========================================================= */ /* 进场动画「失败可见」：只有在 时才把内容藏起来。 JS 没跑、IntersectionObserver 没触发、或脚本 404 —— 任何一种情况下内容都照常显示。 之前 .reveal 无条件 opacity:0，一旦 IO 不触发整页就是空白，已经踩过一次。 */ .js .reveal{opacity:0;transform:translateY(24px)} .js .reveal.is-in{opacity:1;transform:none;transition:opacity .7s var(--ease),transform .7s var(--ease)} /* ========================================================= 响应式 ========================================================= */ @media (max-width:1420px){ .navi{position:static;margin-left:48px;flex:1} .top__inner{align-items:flex-start} } @media (min-width:901px) and (max-width:1420px){ .top.is-compact .top__inner{align-items:center} } /* 右侧评价墙固定 3×223+间距 = 707px；装不下就降成两列 */ @media (max-width:1300px){ .users{grid-template-columns:minmax(0,1fr) 465px} .users__wall{grid-template-columns:repeat(2,223px)} .users__wall .wall__col:nth-child(3){display:none} } @media (max-width:1180px){ .rail__item{width:220px} .devcard{flex-basis:400px;max-width:400px} .talk__panel{padding:26px 28px} .memory__mcp{left:18%} } @media (max-width:1024px){ :root{--rail:240px} .flow__grid{grid-template-columns:var(--rail) minmax(0,1fr)} .rail__inner{padding-left:20px} .rail__item{width:196px} .rail__link{padding:12px 10px 14px 16px} .rail__step{font-size:12px} .rail__name{font-size:20px} .rail__desc{font-size:14px} .users{grid-template-columns:1fr;gap:48px} .users__wall{justify-content:center;height:760px} .products{grid-template-columns:1fr;gap:20px} .pcard{padding:32px} .memory__mcp{position:static;width:min(100% - 40px,702px);margin:60px auto 0;padding-top:24px} /* 上边距补回 .memory__shot 的负 margin-bottom */ } @media (max-width:900px){ .br-sp{display:inline} /* 仅窄屏生效的换行，见上面 .br-sp 定义处 */ html{scroll-padding-top:80px} .top__inner{align-items:center;padding:12px} .burger{display:flex} .top__actions{display:none} /* 展开的菜单铺满整屏（fixed inset:0），不再是吊在顶栏下面的一块面板。 铺到 top:0 才没有「顶栏一层白 + 面板另一层白」的浓度差；代价是它会盖住 logo 和汉堡键， 所以下面给这两个提了 z-index。padding-top 78 = 顶栏实际高度(54) + 24 的呼吸位， 顶栏高度变了要跟着改这个数。 */ .navi{ /* 不能写 inset:0 —— .top 自己带 backdrop-filter，带这个属性的元素会成为 fixed 后代的 「包含块」，inset:0 会被框在顶栏那 70 来像素里（实测只铺到 y=110）。 所以显式给 height:100dvh；dvh 比 vh 好，手机地址栏收放时不会露出一条边。 */ position:fixed;left:0;right:0;top:0;height:100dvh;margin:0; /* 毛玻璃：白色浓度 .88 + blur 30（Ping 2026-08-25 要「增加高斯模糊」）。 两个数必须一起调 —— .96 的白几乎盖死了背景，单独把 blur 拉大肉眼看不出任何区别。 嫌背后透太多就把 .88 往回提，嫌不够朦胧就加大 30。 */ background:rgba(255,255,255,.88); backdrop-filter:blur(30px) saturate(180%); -webkit-backdrop-filter:blur(30px) saturate(180%); flex-direction:column;gap:22px;padding:78px 20px 32px; overflow-y:auto; /* 菜单比屏幕高时（横屏/小屏）能滚 */ border-bottom:0; display:none; } .logo,.burger{position:relative;z-index:1} /* 浮在铺满屏的菜单之上 */ .navi.is-open{display:flex} .top.is-compact{background:rgba(255,255,255,.96)} .top.is-compact .top__inner{border-radius:0;box-shadow:none;background:none} /* is-compact 时也保持铺满，别再退回 absolute（会变回吊在顶栏下的小面板） */ .navi__col{min-width:0 !important} .navi__col > ul, .top.is-compact .navi__col > ul{ position:static;left:auto;top:auto; opacity:1;visibility:visible;pointer-events:auto;transform:none; gap:8px;padding:0 0 0 16px;border:0;border-radius:0;background:none;box-shadow:none; } .top.is-compact .navi__col::after{display:none} /* 手机菜单是全屏铺开的，桌面那套 13px 在这里太小（Ping 2026-08-25）： 标题和链接都放大 50% → 19.5px。height 改 auto，不然 19.5 的字塞在 32px 高的胶囊里会顶满； 胶囊的 hover 底色在触屏上本来也用不到。子菜单行距跟着从 8 提到 14，不然行挨得太紧。 */ .navi__title{font-size:19.5px;height:auto;padding:6px 16px} .navi__col a{font-size:19.5px} .navi__col > ul, .top.is-compact .navi__col > ul{gap:9px;margin-top:16px} /* gap 是子菜单各项之间，margin-top 是「产品」到「Apps」 */ /* 应用商店徽章钉在菜单最底部。margin-top:auto 是关键 —— .navi 是 flex column， auto 会把剩余空间全塞到它上面，不管菜单项有几条都贴着底。 两个徽章共 274px，375 宽的屏正好放得下；再窄就靠 flex-wrap 换行。 */ .navi__store{ display:flex;flex-wrap:wrap;gap:12px; margin-top:auto;padding:40px 0 0 16px; /* padding-left 16 是为了跟菜单文字左对齐：.navi__title 自己带 16px 的左内距 （胶囊态留的），子菜单 ul 也缩进 16 —— 徽章不缩进就会比文字左出去 16px。 */ } .navi__store img{display:block;height:40px;width:auto} /* 三个渠道徽章按需显隐：给 加 hidden 属性即可。 必须显式写这条 —— .navi__store a 参与 flex 布局，UA 自带的 [hidden]{display:none} 压不过它。 */ .navi__store a[hidden]{display:none} .hero{padding-top:56px} .hero__media{margin-top:28px} .carousel__slide img{aspect-ratio:4/3} .flow{margin-top:96px} /* 序言那条分隔线下面的留白翻倍：原本只有 .block 自带的 72（= --block-gap）， 手机上单栏排版显得挤。再补一个 --block-gap，总共 144。 写 var 不写 72，是为了跟着 --block-gap 一起变。 */ .intro{margin-bottom:var(--block-gap)} /* ---- 手机版：左侧竖排导航改成横向吸顶 tab ---- 关键是把 .flow__grid 从 grid 退回普通块流。grid 布局下 .rail 只占自己那一格， sticky 的活动范围就只有那一格那么高，滚两屏就被甩掉了； 退成块流之后 sticky 的包含块是整个 .flow__grid，tab 才能一路吸到区域结束。 */ .flow__grid{display:block} .flow__grid > .intro{max-width:none} .rail{ display:block;padding-top:0; position:sticky;top:64px;z-index:60; /* 64 = 顶栏实测高度 */ margin:0 -20px;padding:10px 20px; /* 负边距让底色通栏，内距把胶囊推回原位并留出上下呼吸 */ /* 纯白不透明（Ping 2026-08-25）。既然不透了，backdrop-filter 也一并去掉 —— 它在白底下看不出任何效果，还会让 .rail 变成 fixed 后代的包含块，白白多一层合成。 */ background:var(--white); transition:top .28s var(--ease); } body.topbar-hidden .rail{top:0} /* 顶栏收走了，tab 补到最上面（initTopbar 打的标记） */ .rail__inner{position:static;padding-left:0} /* 设备卡在手机上本来就能用手指横滑，那两颗左右箭头是多余的（Ping 2026-08-25） */ .arrows{display:none} .rail__step,.rail__desc{display:none} /* 横向放不下三行，只留主名称 */ /* ---- 分段控件（iOS segmented control 那种）---- 外层是浅灰胶囊，里面一颗白胶囊跟着高亮滑。白胶囊就是原来那个黑滑块（.rail__list::after）， 位置照旧来自 JS 写的 --ml/--mw，只是把桌面的竖向参数（top/height）全覆盖成横向的。 */ .rail__list{ flex-direction:row;gap:0; background:rgba(0,0,0,.06);border-radius:999px;padding:3px; } .rail__list::before{display:none} /* 竖排时那条背景细线，胶囊态用不上 */ .rail__list::after{ left:var(--ml,3px);width:var(--mw,0); top:3px;bottom:3px;height:auto; /* 覆盖掉桌面的 top:var(--mt)/height:var(--mh) */ border-radius:999px;background:var(--white); box-shadow:0 1px 3px rgba(0,0,0,.1),0 0 0 .5px rgba(0,0,0,.04); transition:left .32s var(--ease),width .32s var(--ease); } .rail__item{width:auto;flex:1} .rail__link{ position:relative;z-index:1; /* 压在白胶囊上面，否则文字会被盖住 */ padding:8px 4px;align-items:center;border-radius:999px; } .rail__link:hover{background:none} /* 胶囊态下未选中的字不能用 --mute(#b8b8b8)：那是给竖排大字用的， 放在浅灰胶囊上太淡、几乎读不出来。选中的字走全局那条 .is-active 规则，是纯黑。 */ .rail__name{font-size:15px;font-weight:600;line-height:1.5;color:#5a5a5f} /* 胶囊下方到标题文字，原来是 146（10 rail内距 + 40 rail外距 + 72 block内距 + 24 行盒余量）。 那 24 是标题 line-height 撑出来的上沿空隙，肉眼也算留白，所以得一起计入。 现在去掉 rail 的 40，block 上内距收到 38 → 10+38+24 = 72，正好一个 --block-gap， 也差不多是原来的一半。只改首个区块，区块之间的 72 节奏不动。 */ .flow__content > .block:first-child{padding-top:38px} :root{--block-gap:72px} .cards{margin-top:32px} .devcard{flex-basis:270px;max-width:270px} /* 滑到最后一张会贴着屏幕右边缘：轨道末尾那个占位伪元素本来宽 calc(--g - 20)=0， 加上 gap 的 20 正好被 .bleed-r 的 margin-right:-20px 抵消掉，净留白为 0。 这里把占位加宽 20，净出 20px 收尾留白，跟左边距对称。 （别改成 padding-right —— flex 滚动容器的 padding-right 不计入滚动区域，实测 scrollWidth 一点没变。） */ .cards__track::after{flex-basis:10px} .devcard figcaption{left:24px;right:24px;bottom:24px} .devcard__name{font-size:20px} .never{margin-top:72px} /* 窄屏放不下，允许左右滑动查看 */ .devices{ overflow-x:auto;overflow-y:hidden; overscroll-behavior-x:contain; -webkit-overflow-scrolling:touch; scrollbar-width:none;-ms-overflow-style:none; } .devices::-webkit-scrollbar{display:none} .devices img{height:300px} .talk{grid-template-columns:1fr;gap:12px} .talk__thumb{width:100%;height:auto;aspect-ratio:5/1} /* 高度由这个比例控制：375 屏下约 67px（原 32/9 是 94px） */ .talk__label br{display:none} /* 卡片被压成横长条之后，图标和文字上下排就很空。改成一行： grid-auto-flow:column 让它们并排，align-items:center 让星星跟文字中线对齐。 外面那层 place-content:center 不动，整组仍然在卡片里居中。 */ .talk__label{ grid-auto-flow:column;align-items:center;gap:10px; /* 横条卡里星星和文字并排一行，整组靠左、上下居中。 左右 20 比桌面的 24 小一档，是因为卡只有 67 高，24 会显得挤。 */ place-content:center start;padding:0 20px; } /* 手机上三张各自自适应，不再等高 —— 内容长短差得多，强行等高会让短的那张空一大块 */ .talks{grid-auto-rows:auto} .talk__panel{height:auto;padding:24px 20px} .bubble,.reply,.ailog{font-size:15px} /* 手机端：四张卡直接上下排开，各自完整展示，不裁不叠 */ .makes__row{flex-direction:column} .make--sm,.make--lg{flex:none} /* 列方向下 flex-basis:0 会把高度压成 0 */ /* 固定高度 340，图只露一截、底部由卡片 overflow 裁掉 —— 跟桌面同一个手法。 原来是 height:auto，卡片高度跟着图走（报告那张能长到 560），一屏放不下几张。 文字区最高的一张（描述 3 行）约 200px，340 留得下，不会裁到字。 */ .make{height:340px;min-height:0;padding:20px 20px 0} .make__shot{margin-top:16px} .make__shot img, .make--todo .make__shot img{--sx:0px;--sy:0px;transform:none} /* 手机上没有 hover，不要常态倾斜 */ /* 灰底区块的上下留白：桌面是 134/162，手机上太空。收到 72/88 —— 上方量到标题文字是 96（72 + 标题行盒自带的 24），跟其他区块 96 的节奏一致。 */ .memory{margin-top:96px;padding:72px 0 88px} /* 窄屏也吸顶。之前这里是 position:relative，卡片跟着页面滚 —— 四条步骤要滚好几百像素， 卡片早出屏了，演示根本看不完。top 由 initAskDemo 写成 140（手机固定值，不用桌面那套实测距离）。 */ .aibox-wrap{margin-top:32px;position:sticky;z-index:2} .aibox{border-radius:20px;padding:10px;min-height:104px} .aibox__text{padding:10px;font-size:16px;line-height:24px} .aibox__btn{width:28px;height:28px} /* 手机上把这张图放大 50%：335 → 503，比屏幕(375)还宽，两侧出血。 stage 是 flex + align-items:center，图会自己居中，多出来的部分左右均分。 必须解掉全局 img 的 max-width:100%，否则会被夹回 375。 .memory 加 overflow-x:clip 挡住横向滚动条 —— 用 clip 不用 hidden： hidden 会创建滚动容器，把里面那张 sticky 卡片的吸顶基准也一起改掉。 */ .memory{overflow-x:clip} .memory__shot{margin-top:40px;margin-bottom:0;width:calc((100% - 40px) * 1.5);max-width:none} .memory__mcp{margin-top:56px;grid-template-columns:1fr;gap:24px;justify-items:center;text-align:center} /* 「让你的每一份记忆，都连接起来。」手机上要跟桌面一样大。 .h2 是 clamp(22px,2.3vw,32px)，375 屏下 2.3vw 只有 8.6px，会掉到下限 22 —— 这里直接钉成上限 32。 只作用于记忆区这一处，其他区块标题仍走 clamp。 */ .memory__copy .h2{font-size:32px} .memory__copy{align-items:center} .memory__copy p{max-width:none} .users{margin-top:96px} .users__wall{height:620px;grid-template-columns:repeat(2,minmax(0,1fr))} .users__wall .wall__col:last-child{display:none} .qcard{width:100%} .banner{margin-top:96px;grid-template-columns:1fr} /* 手机上三联直接接住黑色页脚，中间那 80px 白缝去掉（Ping 2026-08-25）。 那 80 是 .foot 的 margin-top，桌面保留 —— 桌面三联是圆角卡片，需要留白托住。 */ .foot{margin-top:0} .panel{aspect-ratio:16/13} /* 单列时改成横构图，避免一屏只放得下一张 */ .panel__head{top:8%} .foot__top{gap:40px} .foot__bottom{margin-top:56px} /* 页脚菜单在手机上 15px（桌面 13px；顶部导航是 19.5，那么大放这里会太抢眼）。 行距和标题下边距跟着提一点，不然字大了行会挨在一起。 列宽上限从 100 放开到 auto，给「帮助中心」「Instagram」这类长条目留余地。 */ .foot__title{font-size:15px;margin-bottom:16px} .foot__links a,.coming-soon{font-size:15px} .foot__links ul{gap:6px} /* flex:1 1 100% 是关键：.foot__top 是 flex + wrap，菜单换行之后宽度是「收缩到内容」， 实测只有 181px，两列全挤在左边、右侧白白空掉 154px。占满整行之后各列才会均分。 列间距 24、行间距 36 也一并拉开 —— 原来的 16 是给桌面四列小字用的。 */ .foot__links{flex:1 1 100%;grid-template-columns:repeat(4,minmax(88px,auto));column-gap:24px;row-gap:36px} /* 品牌那块只放大 logo（107×32 → 134×40），版权字维持 13px 不动。 行高提到 1.7 —— 只是把两行拉开一点，不影响字号。桌面维持原尺寸。 */ .foot__logo{width:134px;height:40px;margin-bottom:14px} .foot__legal{line-height:1.7} } @media (max-width:560px){ .hero__controls{gap:12px} .devcard{flex-basis:78vw;max-width:78vw} .foot__links{grid-template-columns:repeat(2,1fr)} /* 卡片高度 +20%：1/1(375×375) → 5/6(375×450)。 标题也跟着放大：.panel__title 是 clamp(18px,2.1vw,30px)，375 屏下 2.1vw 才 7.9px， 直接落到下限 18 —— 在这么大一张卡上偏小，钉成 24。 */ .panel{aspect-ratio:5/6} .panel__title{font-size:24px} } @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important} .js .reveal{opacity:1;transform:none} /* 特异性要跟 .js .reveal 一致，否则压不住 */ } /* ========================================================= 下载页（download.html） 头尾复用首页样式，这里只加正文部分 ========================================================= */ .dlhero{padding-top:112px} /* 比 .hero 的 150 收一档：这页要让下载卡片进首屏（2026-08-25） */ .dlhero__head{ display:flex;flex-direction:column;align-items:center;gap:16px; text-align:center; } .dlhero__sub{font-size:clamp(17px,2vw,24px);font-weight:600;color:var(--red)} .dlhero__note{font-size:16px;font-weight:300;color:var(--gray)} /* ---- 三设备合照（Figma 18:5131，932 × 484） ---- */ .dlhero__shot{ margin:28px auto 0; width:min(100% - 40px,932px); } .dlhero__shot img{width:100%;height:auto;display:block} .dl{margin-top:56px;padding-bottom:120px} .dl__grid{ list-style:none;margin:0;padding:0; /* auto-fit：列数跟着卡片数量走 —— 隐藏/恢复一张卡不用再改这里。 1280 容器下最多排 5 列（(1280+20)/(220+20)=5.4），空轨道会被 auto-fit 收掉 */ display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px; } .dlcard[hidden]{display:none} /* .dlcard 的 display:flex 比 UA 的 [hidden] 特异性高，得显式压回去 */ .dlcard{ background:var(--bg);border-radius:var(--r); padding:32px 28px 28px; display:flex;flex-direction:column;align-items:flex-start;gap:20px; transition:transform .3s var(--ease); } .dlcard:hover{transform:translateY(-4px)} .dlcard__icon{ width:56px;height:56px;border-radius:14px;background:var(--white); display:flex;align-items:center;justify-content:center;flex:none; } .dlcard__icon svg{width:28px;height:28px;fill:var(--ink)} .dlcard__body{display:flex;flex-direction:column;gap:8px} .dlcard__title{font-size:20px;font-weight:600;color:var(--ink);line-height:1.3} .dlcard__meta{font-size:15px;font-weight:300;color:var(--gray);line-height:1.4} .dlcard .btn{margin-top:auto} /* 二维码：margin-top:auto 挂在它身上，让「二维码 + 按钮」一起沉到卡片底部； 否则 auto 留在按钮上，二维码会被顶到正文下面、跟按钮分家 */ .dlcard__qr{ margin-top:auto;flex:none; width:104px;height:104px;padding:6px; background:var(--white);border-radius:12px; } .dlcard__qr img{width:100%;height:100%;display:block} .dlcard__qr + .btn{margin-top:0} @media (max-width:640px){ .dlhero{padding-top:120px} .dlhero__shot{margin-top:32px;width:min(100% - 32px,932px)} .dl{margin-top:56px} .dl__grid{grid-template-columns:1fr} /* 纵向排列后 flex-basis 不能留 0，否则卡片塌成一条 */ .dlcard{flex:none} } /* ========================================================= 关于页（about.html） 文案与版式都照老站 https://ideashell.cn/about/ ， 下面的字号/行高/间距都是在老站 1440 视口上量出来的真实值： 页头块 1040×480（老站是灰底上的白卡，我们改成全白无卡，见下） 标题 22/700 · lede 22/600 lh1.4 · 正文 15/400 lh1.6 左栏大标题老站是 32/700，我们改成 22（跟 lede 齐），见下第 5 条 左右两栏各 500、gap 40；页头到第一段 80 两处有意偏离（见 README 第八章）： 1. 容器用站内 --wrap 1280 而不是老站的 1040，否则正文左基线会跟头尾差 120px 2. 红字用 var(--red) #ff3d10 而不是老站的 #ff0100，跟站内其它红保持一致 3. 页面全白（老站是 #f4f5f6 灰底 + 白卡），所以白卡整个去掉、只留构图 4. 左边大标题加了 position:sticky（老站没有），Ping 要的滚动停留效果 5. 左栏大标题 32 → 22，跟页头 lede 同字号 6. 页头去掉了老站那行 About us eyebrow ========================================================= */ .em{font-style:normal;color:var(--red)} .abhero{padding-top:150px} /* 与 .hero / .dlhero 一致 */ /* 老站这块是灰底上的一张白卡；Ping 要求页面继续用全白，白卡就没有对比度了， 于是去掉卡片本身（底色/圆角/内距），只保留它的上下分栏构图 */ .abcard{ min-height:400px; display:flex;flex-direction:column;justify-content:space-between;gap:56px; } /* 字号跟品牌素材页的 .brandhero__title 一致（48 / 窄屏 34），Ping 2026-08-25 要求对齐。 「创造者」那张手写体图是 1.9em，会自动跟着这个字号缩放，改这里不用另调图。 */ .abcard__title{font-size:48px;font-weight:700;line-height:1.2;color:var(--black)} /* 手写体的「创造者」。图本身上下各带约 10% 留白，所以 height 要比文字高不少才配得上， 1.9em ≈ 42px，视觉字高约 34px。vertical-align 负值把它压回文字基线上。 两个数是配对调的：改 height 就要重调 vertical-align。 */ /* display 必须写回 inline-block：全局有一条 img{display:block}， 块级 img 会脱离行内流 —— vertical-align 失效、宽度还会被算成 0（实测就是 0×42）。 */ .abcard__word{display:inline-block;height:1.55em;width:auto;vertical-align:-.4em;margin-left:.1em} /* 日语是「創造者になる。」—— 手写图在句首，左边的 .1em 会把整行往右推， 右边反而需要留白，否则「に」贴着笔画。 ⚠️ 别用 :first-child —— 它只认元素子节点，「Conviértete en」里的 img 同样算首个子元素， 会把西/英/中三种语言本来需要的左边距一起抹掉。按语言限定才准。 */ html[lang^="ja"] .abcard__word{margin-left:0;margin-right:.12em} /* 三个可调的数：height 控制图多大、vertical-align 控制上下对齐、margin-left 控制离「成为」多近。 HTML 里「成为」和 之间**没有空格**（48px 字号下一个空格就有 16px，太远）， 间距全靠 margin-left。改 height 之后 vertical-align 要跟着重调，两个是配对的。 */ .abcard__bottom{display:flex;align-items:flex-end;justify-content:space-between;gap:40px} .abcard__lede{ max-width:586px; font-size:22px;font-weight:600;line-height:1.4;color:var(--ink); } .abcard__mac{width:86px;height:112px;flex:none;display:block} /* 左大标题 + 右正文两栏。右栏写死宽度（老站是 500，2026-08-24 Ping 改成 600）， 容器 1280 里多出来的宽度全给左栏吃掉，正文每行字数不随窗口变化。 600 / 15px = 每行 40 个汉字 */ .creed{ /* 段与段之间一条 1px / 10% 黑的细线，上下各留 80 让它落在正中。 用 rgba(0,0,0,.1) 而不是 var(--line)：Ping 指定的就是 10% 黑， 跟站内 #e1e1e1 那条实色线不是一回事 */ margin-top:80px;border-top:1px solid rgba(0,0,0,.1);padding-top:80px; display:grid;grid-template-columns:minmax(0,1fr) 600px;gap:40px; /* align-items:start 是 .creed__title 的 sticky 能生效的前提： sticky 网格项的包含块是「网格区域」（整行高），项目自身必须矮于它才有余量可走。 写成 stretch（或不写 align-items）会让格子撑满整行，余量为 0，停留效果直接失效。 */ align-items:start; } .creed__title{ /* 字号跟页头那段 lede 一致（22），Ping 2026-08-24 要求；老站这里是 32 */ font-size:22px;font-weight:700;line-height:1.2;color:var(--ink); /* 右栏正文长，左标题跟着滚一段再走。120 = 吸顶栏收起后的高度(56) + 呼吸 */ position:sticky;top:120px; } .creed__body{display:flex;flex-direction:column;gap:24px} .creed__body p{font-size:15px;font-weight:400;line-height:1.6;color:var(--black)} /* ⚠️ 这三条必须带上 .creed__body p 前缀。 .creed__body p 的特异性是 (0,1,1)，光写 .creed__lead 是 (0,1,0)，会被它压掉、 加粗静默失效 —— 我在这上面栽过一次，改这里前先想清楚特异性。 */ .creed__body p.creed__lead{font-weight:600} /* 「让 AI 放大人的差异…」这句：只加粗，字号跟正文一致（Ping 要求不放大） */ .creed__body p.creed__pull{font-weight:700} .creed__body p.creed__sign{font-weight:500;margin-top:24px} .creed__mail{ color:var(--black);text-decoration:underline;text-underline-offset:3px; transition:color .2s var(--ease); } .creed__mail:hover{color:var(--orange)} .creed:last-of-type{padding-bottom:120px} @media (max-width:900px){ .creed{grid-template-columns:1fr;gap:20px;margin-top:56px;padding-top:56px} .creed__title{position:static} /* 单栏后标题在正文上方，吸顶会挡住正文 */ .abcard__bottom{flex-direction:column;align-items:flex-start;gap:32px} .abcard__lede{max-width:none;font-size:19px} .abcard__title{font-size:34px} /* 同 .brandhero__title 的窄屏值 */ .abcard{min-height:0} } @media (max-width:640px){ .abhero{padding-top:120px} .creed:last-of-type{padding-bottom:88px} } /* ========================================================= 招聘页（join.html） 照 https://join.roundreddot.cn 的实测值来（1440 视口 getComputedStyle）： 页面底色 #f4f4f4 灰 · 正文栏 720 · 图标 100 h1 48/700 #111 · 正文 17/400 lh30.6(1.8) #333 · 落款 13/400 #999 小节标签 12/600 #ff5600 字距 1.2 · 报道行 14/400 lh21 #333 padding 12/0 职位卡 白底 · radius 16 · padding 24 · 标题 16/600 标签胶囊 12/400 #777 底 #f4f4f4 radius 999 padding 3/10 · 箭头 18px #bbb 有意不同：源站底部那个 position:fixed 的「加入我们」悬浮按钮没有做， 2026-08-24 Ping 明确说不要（连同「Everything starts from a Dot.」那行一起去掉）。 投递邮箱在信里和每个职位详情末尾都有。 ========================================================= */ .page-join{background:var(--bg)} .jcol{width:min(100% - 40px,720px);margin-inline:auto} .jhero{padding-top:150px;display:flex;flex-direction:column;align-items:center;gap:24px;text-align:center} .jhero__mark{width:100px;height:100px;object-fit:contain;border-radius:27.27%; box-shadow:0 2px 16px rgba(0,0,0,.10)} .jhero__title{font-size:48px;font-weight:bold;line-height:1.2;color:#111;letter-spacing:-.01em} /* ---- 创始人的信 ---- */ .letter{margin-top:80px;display:flex;flex-direction:column;gap:20px} .letter p{font-size:16px;font-weight:400;line-height:1.8;color:#333} .letter__mail{color:#111;font-weight:500;text-decoration:underline;text-underline-offset:3px; transition:color .2s var(--ease)} .letter__mail:hover{color:var(--orange)} .letter__sign{margin-top:8px;display:flex;flex-direction:column;align-items:flex-end} .letter__sign img{display:block;width:62px;height:36px} .letter__sign span{margin-top:4px;font-size:13px;color:#999} /* ---- 小节标签：源站是 12px 橙色 + 字距的 eyebrow，不是大标题 ---- */ .jlabel{ font-size:12px;font-weight:600;line-height:1.5; color:var(--orange);letter-spacing:1.2px;margin-bottom:24px; } .press{margin-top:56px} .jobs{margin-top:56px} /* ---- 媒体报道：源站是纯文字行，没有卡片 ---- */ .press__list{list-style:none;margin:0;padding:0} .press__item{ display:flex;flex-direction:column;gap:4px;padding:12px 0; transition:opacity .2s var(--ease); } .press__item:hover{opacity:.6} .press__headline{font-size:14px;font-weight:400;line-height:1.5;color:#333} .press__from{font-size:13px;font-weight:400;color:#999} /* ---- 职位：灰底上的白卡 ---- */ .jobs__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px} .jobitem[hidden]{display:none} /* li 的 display:block 会压过 UA 的 [hidden] */ .job{background:var(--white);border-radius:16px} .job__head{ display:flex;align-items:center;gap:12px; padding:24px;cursor:pointer;list-style:none; } .job__head::-webkit-details-marker{display:none} /* Safari 的默认三角 */ .job__name{font-size:16px;font-weight:600;color:#111;line-height:1.4;flex:none} .job__tags{display:flex;flex-wrap:wrap;gap:8px;flex:1;min-width:0} .job__tags span{ font-size:12px;font-weight:400;color:#777; background:var(--bg);border-radius:999px;padding:3px 10px;white-space:nowrap; } .job__arrow{font-size:18px;line-height:1;color:#bbb;flex:none; transition:transform .25s var(--ease),color .2s var(--ease)} .job[open] .job__arrow{transform:rotate(90deg)} .job__head:hover .job__arrow{color:#777} .job__body{padding:0 24px 24px;display:flex;flex-direction:column;gap:8px} .job__body h3{font-size:14px;font-weight:600;color:#111;margin-top:14px} .job__body ul{ /* 站内第 77 行有 ul,ol{list-style:none} 的全局重置，这里要显式写回来， 否则职位详情的项目符号全没了 */ list-style:disc;margin:0;padding-left:20px;display:flex;flex-direction:column;gap:8px; } .job__body li{font-size:14px;font-weight:400;line-height:1.75;color:#333} .job__body li::marker{color:#bbb} .job__body strong{font-weight:600;color:#111} .job__apply{ margin-top:18px;padding-top:14px;border-top:1px solid rgba(0,0,0,.08); font-size:14px;color:#999; } .job__apply a{color:#111;text-decoration:underline;text-underline-offset:3px; transition:color .2s var(--ease)} .job__apply a:hover{color:var(--orange)} /* 职位是正文最后一块，底部留白（源站 jobs-section 是 padding-bottom:100） */ .jobs--last{padding-bottom:100px} @media (max-width:640px){ .jhero{padding-top:120px;gap:20px} .jhero__mark{width:80px;height:80px} .jhero__title{font-size:34px} .letter p{font-size:15px} .press,.jobs{margin-top:44px} /* 窄屏把标题和标签叠成两行，箭头留在第一行右侧 */ .job__head{flex-wrap:wrap;gap:10px;padding:20px} .job__name{flex:1;min-width:0} .job__tags{flex:0 0 100%;order:3} .job__body{padding:0 20px 20px} .jobs--last{padding-bottom:72px} } /* ========================================================= 博客（blog.html 列表 + blog-.html 文章） 列表页照 Linear /now 的**浅色模式**（Ping 指定的参考，1440 视口实测）： 纯白底，没有卡片底色 —— 图 + 文直接放在白底上，靠留白和灰阶分层 容器 1280 · 三栏 384 · 栏距/行距 64 · 图 384×216(16:9) radius 5 标题 20/510 #282a30 · 摘要 15/400 lh24 #6f6e77 · 元信息 13/400 #86848d （510 是 Inter 可变字重，PingFang 没有，这里用 600；CJK 在 500 会显得虚） 文章页照 https://ideashell.cn/vision/ 的排版实测： 日期 14/500 居中 · 标题 32/700 居中 · 头图 720 · 正文栏 720 · 15/400 lh1.7 源站是灰底 + 白卡，Ping 要求全白，所以卡片本身去掉，只留构图（同关于页的处理） ========================================================= */ /* ---- 文章页：排版照 Linear 文章页浅色模式实测 ---- h1 48/590 居中（宽 900）· 正文栏 624 · 小标题 24/590 上距 56 · 元信息 13/510 #6f6e77 正文 Linear 实测是 17/1.6，这里按 Ping 要求用 15 —— 同样 px 下 CJK 的视觉字面比拉丁大， 17px 中文偏胖；行高相应从 1.6 提到 1.75，小字号中文用 1.6 会挤 段距 20 590 是 Inter 可变字重，PingFang 没有，统一用 600 */ .post{padding-top:150px;padding-bottom:40px;font-family:var(--sans-inter)} /* 页脚自身还带 56，40+56≈96 到黑色页脚，120 会空出 176 */ .post__head{width:min(100% - 40px,900px);margin-inline:auto;text-align:center} .post__title{font-size:48px;font-weight:600;line-height:1.05;color:#282a30;letter-spacing:-.02em} .post__meta{margin-bottom:16px;font-size:13px;font-weight:500;color:#6f6e77} .post__hero{width:min(100% - 40px,900px);margin:48px auto 0;border-radius:6px;overflow:hidden;background:var(--bg)} .post__hero img{width:100%;height:auto;display:block} .post__body{width:min(100% - 40px,624px);margin:56px auto 0} .post__body p{font-size:15px;font-weight:400;line-height:1.75;color:#343434} .post__body p + p{margin-top:20px} .post__body h2{ margin-top:56px; font-size:24px;font-weight:600;line-height:1.33;color:#282a30;letter-spacing:-.01em; } .post__body h3{ margin-top:36px; font-size:18px;font-weight:600;line-height:1.45;color:#282a30; } .post__body h2 + p,.post__body h3 + p{margin-top:12px} .post__body strong{font-weight:600;color:#282a30} .post__sign{margin-top:56px !important;color:#6f6e77 !important} .post__back{width:min(100% - 40px,624px);margin:56px auto 0;font-size:14px} .post__back a{color:#6f6e77;transition:color .2s var(--ease)} .post__back a:hover{color:var(--orange)} @media (max-width:760px){ .post{padding-top:120px;padding-bottom:32px} .post__title{font-size:32px} .post__meta{margin-bottom:12px} .post__hero{margin-top:32px} .post__body{margin-top:36px} .post__body p{font-size:15px} .post__body h2{margin-top:40px;font-size:21px} .post__body h3{margin-top:28px;font-size:17px} } /* ---- 博客：类目筛选 + 文章正文里的列表/提示/素材块 ---- */ .blog__tabs{display:flex;flex-wrap:wrap;gap:8px;margin-top:28px} .btab{ height:32px;padding:0 14px;border-radius:999px; font-size:13px;font-weight:500;color:#6f6e77;white-space:nowrap; background:transparent;box-shadow:inset 0 0 0 1px #e9e8ea; transition:background-color .2s var(--ease),color .2s var(--ease),box-shadow .2s var(--ease); } .btab:hover{color:var(--ink);background:rgba(0,0,0,.03)} .btab.is-active{color:var(--white);background:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)} .bitem[hidden]{display:none} /* li 的 display 会压过 UA 的 [hidden]，同下载页那张卡 */ .blog__empty{margin-top:40px;font-size:15px;color:#6f6e77} /* 文章正文里的无序列表（iOS 18 / Raise to record 两篇用到） */ .post__body ul{ /* 第 77 行的 ul,ol{list-style:none} 全局重置会吃掉点儿，显式写回来 */ list-style:disc;margin-top:16px;padding-left:22px; display:flex;flex-direction:column;gap:10px; } .post__body li{font-size:15px;font-weight:400;line-height:1.75;color:#343434} .post__body li::marker{color:#bbb} .post__body ul + p,.post__body ul + h2,.post__body ul + h3{margin-top:24px} .post__tip{ margin-top:28px !important;padding:16px 18px;border-radius:8px; background:var(--bg);font-size:14px !important;color:#6f6e77 !important; } .post__tip a{color:var(--ink);text-decoration:underline;text-underline-offset:3px} .post__tip a:hover{color:var(--orange)} .post__body--tail{margin-top:40px} /* 品牌素材：独立页，大标题版式（Ping 2026-08-24：博客只留文章，品牌素材单独成页） */ .post--brand{padding-top:0} .brandhero{padding-top:230px;padding-bottom:8px} /* 跟产品动态标题上方留白一致 */ .brandhero__title{font-size:48px;font-weight:600;line-height:1;color:var(--ink);letter-spacing:-.02em} .brandhero__sub{margin-top:16px;max-width:560px;font-size:15px;font-weight:400;line-height:1.7;color:#6f6e77} /* 大标题走 1280 通栏，正文仍是 624，把正文左对齐到同一条基线 */ .post--brand .post__body, .post--brand .shots, .post--brand .post__back{margin-left:max(20px,calc(50% - 640px));margin-right:0} .post--brand .post__body{margin-top:56px} /* 品牌页各块（标志 / 应用图标 / 品牌色 / 产品截图）之间比文章页更松：56 + 40 */ .post--brand .post__body h2{margin-top:96px} .post--brand .post__body > h2:first-child{margin-top:0} /* 品牌素材内容块 *//* 品牌素材内容块 */ .post__body ul.brandgrid{ list-style:none;margin-top:20px;padding-left:0; display:grid;grid-template-columns:repeat(3,1fr);gap:16px; } .post__body ul.brandgrid--icons{grid-template-columns:repeat(2,1fr)} .brandgrid__box{ position:relative; display:flex;align-items:center;justify-content:center; height:120px;padding:20px;border-radius:8px;background:var(--bg); transition:background-color .2s var(--ease); } .brandgrid__box:hover{background:var(--bg2)} /* hover 时右下角浮出一个小下载角标； 让点击直接存文件 */ .brandgrid__dl{ position:absolute;right:8px;bottom:8px; width:24px;height:24px;border-radius:6px; display:flex;align-items:center;justify-content:center; background:var(--white);box-shadow:0 1px 4px rgba(0,0,0,.12); opacity:0;transform:translateY(2px); transition:opacity .18s var(--ease),transform .18s var(--ease); } .brandgrid__box:hover .brandgrid__dl, .brandgrid__box:focus-visible .brandgrid__dl{opacity:1;transform:none} .brandgrid__dl svg{ width:14px;height:14px;fill:none;stroke:#343434; stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round; } /* 深色底那块（RoundRedDot 白字版）角标反过来 */ .brandgrid__box--dark:hover{background:#2a2a2a} .brandgrid__box--dark{background:var(--black)} .brandgrid__box img{max-width:100%;max-height:100%;width:auto;height:auto} .brandgrid__cap{margin-top:10px;font-size:13px;font-weight:500;line-height:1.5;color:var(--ink)} .brandgrid__cap span{font-weight:400;color:#6f6e77} /* 标准组合额外提供透明 PNG，两种格式并列成可点的下载链接 */ .brandgrid__fmts{font-size:12px} .brandgrid__fmts a{ color:#343434;text-decoration:underline;text-underline-offset:2px; transition:color .2s var(--ease); } .brandgrid__fmts a:hover{color:var(--orange)} .brandgrid__note{display:block;margin-top:3px;font-size:11px;color:#9b9a9f} .swatch__group{ margin-top:24px !important;font-size:13px;font-weight:600; letter-spacing:.5px;color:#6f6e77; } /* 三色横排。必须带 .post__body 前缀：.post__body ul 设了 flex-direction:column（特异性 0,1,1）， 只写 .swatches{display:flex !important} 压不住方向，色块还是会竖着堆 —— 已踩过。 */ .post__body ul.swatches{ list-style:none;margin-top:20px;padding-left:0; display:flex;flex-direction:row;flex-wrap:wrap;gap:14px; } .post__body ul.swatches > li{width:150px} .swatch{display:block;height:64px;border-radius:8px} /* 浅色块（白 / 近白）没有描边就看不见边界 */ .swatch--line{box-shadow:inset 0 0 0 1px #e1e1e1} /* 产品截图：横滑条。左边贴正文基线，右边一直延伸到视口边缘裁掉， 屏幕越宽露出越多 —— 跟首页设备卡那条是同一套做法 */ .shots{margin-top:24px} .shots__track{ list-style:none;margin:0;padding:0 0 8px; display:flex;gap:12px; overflow-x:auto;overflow-y:hidden; scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch; scrollbar-width:none; } .shots__track::-webkit-scrollbar{display:none} .shots__track > li{flex:none;scroll-snap-align:start} /* flex 容器的 padding-right 不计入可滚动溢出（README 坑 6），末尾留白得垫一个占位项 */ .shots__track::after{content:"";flex:none;width:20px} .shots__item{ position:relative;display:block;border-radius:12px;overflow:hidden; background:var(--bg); } .shots__track img{width:220px;height:auto;display:block} /* 截图也可下载：hover 右下角浮出角标，点击存原图（1290×2796） */ .shots__item .brandgrid__dl{right:8px;bottom:8px} .shots__item:hover .brandgrid__dl, .shots__item:focus-visible .brandgrid__dl{opacity:1;transform:none} @media (max-width:760px){ .post__body ul.brandgrid,.post__body ul.brandgrid--icons{grid-template-columns:repeat(2,1fr)} .post__body ul.swatches > li{width:130px} .swatch{height:56px} .post__body li{font-size:14px} } /* ========================================================= 更新日志（changelog.html） 时间轴照 Linear /changelog 浅色模式实测（1440 视口）： 容器 1280 · 竖线 1px #e9e8ea 落在容器左侧 9px · 日期 14/400 距线 24 内容栏 624 · 页标题 48 竖线用 .cl__list 的 ::before 画，圆点用每条 .clitem__side 的 ::before， 都不占布局，加减条目不用动任何数值 ========================================================= */ .blog__tabs{display:flex;flex-wrap:wrap;gap:8px;margin-top:28px} .btab{ height:32px;padding:0 14px;border-radius:999px; font-size:13px;font-weight:500;color:#6f6e77;white-space:nowrap; background:transparent;box-shadow:inset 0 0 0 1px #e9e8ea; transition:background-color .2s var(--ease),color .2s var(--ease),box-shadow .2s var(--ease); } .btab:hover{color:var(--ink);background:rgba(0,0,0,.03)} .btab.is-active{color:var(--white);background:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)} .blog__empty{margin-top:40px;font-size:15px;color:#6f6e77} .cl{padding-top:230px} /* 150 + 80（Ping 2026-08-24 要求标题上方更空） */ .cl__title{font-size:48px;font-weight:600;line-height:1;color:var(--ink);letter-spacing:-.02em} .cl__sub{margin-top:14px;font-size:15px;font-weight:400;line-height:1.6;color:#6f6e77} .cl__wrap{margin-top:56px;padding-bottom:120px} .cl__list{list-style:none;margin:0;padding:0;position:relative} /* 贯穿整条列表的竖线；最后一条的下半段用 .clitem:last-child 的白色遮罩收掉 */ .cl__list::before{ content:"";position:absolute;left:9px;top:8px;bottom:0;width:1px;background:#e9e8ea; } .clitem{ /* 47 条、总高 13000+px：让浏览器跳过屏幕外条目的布局与绘制。 contain-intrinsic-size 给一个占位高度，避免滚动条长度乱跳。 */ content-visibility:auto; contain-intrinsic-size:auto 320px; position:relative; display:grid;grid-template-columns:280px minmax(0,624px);gap:32px; padding-bottom:72px; } .clitem:last-child{padding-bottom:0} .clitem[hidden]{display:none} /* li 的 display:grid 会压过 UA 的 [hidden] */ .clitem__side{position:relative;padding-left:34px} /* 圆点压在竖线上：线在 9，点 9px 宽 → left 5 让它居中，白边把线遮出缺口 */ .clitem__side::before{ content:"";position:absolute;left:5px;top:5px;width:9px;height:9px;border-radius:50%; background:#bbb;box-shadow:0 0 0 3px var(--white); /* 灰点，不用主题橙（Ping 2026-08-24） */ } .clitem__date{font-size:14px;font-weight:400;line-height:1.4;color:#282a30;font-variant-numeric:tabular-nums;display:block} /* 平台标记（iOS / Android），来自 md 里的「更新日志 · iOS」 */ .clitem__plat{ display:inline-block;margin-top:8px; font-size:12px;font-weight:400;color:#777; background:var(--bg);border-radius:999px;padding:2px 9px; } .clitem__title{font-size:24px;font-weight:600;line-height:1.33;color:var(--ink);letter-spacing:-.01em} /* 标题 hover 不变色（Ping 2026-08-24；跟之前卡片版一致） */ .clitem__cover{display:block;margin-top:18px;border-radius:6px;overflow:hidden;background:var(--bg)} .clitem__cover img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block} .clitem__sum{margin-top:18px;font-size:15px;font-weight:400;line-height:1.75;color:#343434;max-width:56em} .clitem__more{margin-top:18px;font-size:14px;font-weight:500} /* ---- 更新日志条目（.clitem--log）：正文全文展开，没有封面也没有「阅读全文」 ---- */ .clitem--log{padding-bottom:56px} .clitem--log .clitem__title{font-size:20px} .clitem--log .clitem__sum{margin-top:14px} .clitem--log .clitem__sum + .clitem__sum{margin-top:10px} .clitem__sub{ margin-top:22px;font-size:15px;font-weight:600;line-height:1.5;color:var(--ink); } .clitem__list{ /* 全局 ul,ol{list-style:none} 会吃掉点儿，显式写回来 */ list-style:disc;margin-top:10px;padding-left:20px; display:flex;flex-direction:column;gap:7px; } .clitem__list li{font-size:15px;font-weight:400;line-height:1.7;color:#343434} .clitem__list li::marker{color:#c9c9c9} .clitem__list strong{font-weight:600;color:var(--ink)} .clitem__sub + .clitem__list{margin-top:10px} .clitem__list + .clitem__sum{margin-top:18px} /* 年份分隔：时间轴上一个独立的刻度 */ .clyear{ display:block;position:relative;padding:0 0 28px 34px; } .clyear[hidden]{display:none} .clyear span{ display:inline-block;font-size:13px;font-weight:700;letter-spacing:1px;color:var(--ink); background:var(--white);padding:2px 0; } /* 年份的点跟条目点同尺寸同一条竖线（9px / left:5），只是颜色更深：条目点 #bbb，年份点 --ink。 top 是 8 不是 5 —— 年份的 span 带 2px 上下内距，文字中心比条目日期低 3px， 照抄条目的 top:5 点会明显偏高（实测文字中心 13、点中心 10）。 白色外圈是用来在竖线上遮出缺口的，别去掉。 */ .clyear::before{ content:"";position:absolute;left:5px;top:8px;width:9px;height:9px;border-radius:50%; background:var(--ink);box-shadow:0 0 0 3px var(--white); } .clitem__more a{color:#6f6e77;transition:color .2s var(--ease)} .clitem__more a:hover{color:var(--orange)} @media (max-width:900px){ /* 窄屏日期挪到内容上方，竖线和圆点保留 */ .clitem{grid-template-columns:1fr;gap:12px;padding-bottom:56px} .clyear{padding-bottom:20px} .clitem__body{padding-left:34px} } @media (max-width:760px){ .brandhero{padding-top:180px} .brandhero__title{font-size:34px} .cl{padding-top:180px} .cl__title{font-size:34px} .cl__wrap{margin-top:40px;padding-bottom:88px} .clitem__title{font-size:21px} .clitem--log .clitem__title{font-size:18px} .clitem__sum{font-size:14px} .clitem__list li{font-size:14px} .clitem__sub{font-size:14px} } /* ========================================================= 用户协议 / 法律文本页（terms.html） 复用文章页的 .post，这里只收紧字号与间距 —— 条文比文章密， 而且分条编号本身已经提供了结构，不需要文章那么大的呼吸 ========================================================= */ .post--legal .post__body{margin-top:48px} .post--legal .post__body p{font-size:14px;line-height:1.85} .post--legal .post__body p + p{margin-top:14px} .post--legal .post__body h2{ margin-top:44px;font-size:18px;line-height:1.4; } .post--legal .post__body h2 + p{margin-top:14px} .post--legal .post__body ul{margin-top:12px;gap:8px} .post--legal .post__body li{font-size:14px;line-height:1.85} .post--legal .post__body ul + p{margin-top:14px} /* 协议页开头的导言块。中文版是一整段，英文版源文里被拆成 3~4 段 —— 统一用
包住"首个

之前的全部段落"，里面多少段都是同一个灰底卡片。 */ .legal__intro{ padding:18px 20px;border-radius:8px;background:var(--bg); color:#3c4149 !important; } .legal__intro p{color:inherit} .legal__intro > p:first-child{margin-top:0} .legal__intro > p:last-child{margin-bottom:0} .post--legal .post__body a{ color:var(--ink);text-decoration:underline;text-underline-offset:3px; transition:color .2s var(--ease); } .post--legal .post__body a:hover{color:var(--orange)} @media (max-width:760px){ .post--legal .post__body p,.post--legal .post__body li{font-size:14px} .post--legal .post__body h2{font-size:16px;margin-top:36px} } /* ========================================================= 首页「你记下的一切，它都记得」下方的 Agent 步骤演示 进入视口 → 自动按一下发送键 → 四条步骤逐条展开（initAskDemo） ========================================================= */ /* 发送键被"按下"时的反馈 */ .aibox__btn--sent{transition:transform .16s var(--ease)} .aibox__btn--sent.is-pressed{transform:scale(.82)} /* 提问区：点击发送后整块淡出并收起高度 */ .aibox__q{display:flex;flex-direction:column;gap:12.3px} .js .aibox__q{transition:opacity .26s var(--ease)} /* 淡出后脱离文档流，卡片高度才能让给步骤。 不用 height:0 —— height 从 auto 补间不了，会直接跳一下。 */ .js .aibox__q.is-out{ opacity:0;pointer-events:none; position:absolute;left:12.3px;right:12.3px;top:12.3px; } /* 步骤长在同一张卡片里，不另起卡底、不加分隔线 */ .ask{list-style:none;margin:0;padding:0 12.3px} /* 一条都没出来的时候，把 .aibox 的 12.3 间距也吃掉 —— 否则卡片底部会空出一截。 is-open 由 initAskDemo 在第一条出现时加上。 */ .js .ask{margin-top:-12.3px;transition:margin-top .42s var(--ease)} .js .ask.is-open{margin-top:0;padding-bottom:2px} /* 外层 li 只管高度折叠：grid-template-rows 0fr → 1fr 是唯一能补间的收展写法 （height:auto 补间不了，会直接跳）。内层 .ask__row 必须 min-height:0 + overflow:hidden， 否则内容会把 0fr 撑开、折不起来。 */ .ask__step{display:grid;grid-template-rows:1fr;position:relative} .ask__row{ min-width:0;min-height:0;overflow:hidden; /* 顶端对齐：文案换行时图标留在第一行旁边，不跟着整块居中 */ display:grid;grid-template-columns:34px 1fr 16px;align-items:start;gap:12px; padding:9px 0; } /* 图标之间的竖连接线 */ /* 连接线：从本行图标底部（9 内距 + 34 图标 + 4 呼吸）连到下一行图标顶部 */ .ask__step:not(:last-child)::before{ content:"";position:absolute;left:16.5px;top:47px;bottom:-5px; width:1px;background:rgba(0,0,0,.1); /* 比圆底的 .05 深一档，细线太淡会看不见 */ } .ask__ico{ /* 半透明而不是实色 —— 卡片是磨砂玻璃，圆底用不透明的 #eaeaea 会显得糊在上面一层。 透明度就是这个 .05，调深浅改它。 */ width:34px;height:34px;border-radius:50%;background:rgba(0,0,0,.05); display:flex;align-items:center;justify-content:center; position:relative;z-index:1; } .ask__ico svg{ width:17px;height:17px;fill:none;stroke:#4a4a4a; stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round; } .ask__step--done .ask__ico svg{stroke-width:2} .ask__txt{font-size:17px;line-height:1.45;color:var(--black);min-width:0;padding-top:4.7px} /* 「联系人」这类关键词：只加粗，不做颜色和底色处理（Ping 2026-08-24） */ .ask__hl{font-style:normal;font-weight:600} .ask__go{width:16px;height:16px;display:block;margin-top:9px} .ask__go svg{width:100%;height:100%;fill:none;stroke:#c4c4c4;stroke-width:1.8; stroke-linecap:round;stroke-linejoin:round} /* 失败可见：只有 JS 跑起来了才折起来（同 .reveal 的做法，见坑 14）。 收起时同时压掉连接线，否则会看到一截悬空的竖线。 */ .js .ask__step{ grid-template-rows:0fr;opacity:0; transition:grid-template-rows .42s var(--ease),opacity .38s var(--ease); } /* 内距也要一起收：grid-template-rows:0fr 只压内容高度，压不掉 .ask__row 自己的 上下内距（9+9），四条就是 72px 死高度，卡片默认状态会空出一大块。padding 可以补间。 */ .js .ask__row{padding-top:0;padding-bottom:0;transition:padding .42s var(--ease)} .js .ask__step.is-in .ask__row{padding-top:9px;padding-bottom:9px} .js .ask__step::before{opacity:0;transition:opacity .3s var(--ease)} .js .ask__step.is-in{grid-template-rows:1fr;opacity:1} .js .ask__step.is-in::before{opacity:1} @media (prefers-reduced-motion:reduce){ .js .ask__step{grid-template-rows:1fr;opacity:1} .js .ask__step::before{opacity:1} .js .ask__row{padding-top:9px;padding-bottom:9px} .aibox__btn--sent.is-pressed{transform:none} } @media (max-width:640px){ .ask{padding:0 10px} .js .ask.is-open{padding-bottom:2px} .ask__row{grid-template-columns:30px 1fr 14px;gap:10px;padding:8px 0} .js .ask__step.is-in .ask__row{padding-top:8px;padding-bottom:8px} .ask__ico{width:30px;height:30px} .ask__ico svg{width:15px;height:15px} .ask__step:not(:last-child)::before{left:14.5px;top:42px;bottom:-5px} .ask__txt{padding-top:4px} .ask__go{margin-top:8px} .ask__txt{font-size:15px} }