/* ═══════════════════════════════════════════════════════════════ 天讯 API · 首页视觉层 (tx-home.css) - 全部样式 scope 在 .tx-home 下，不影响 new-api 其它页面 - 设计：极简 + 玻璃拟态（高透明磨砂）+ 流动渐变光斑 + 悬停凸出 - 2026-09-11 初版 ═══════════════════════════════════════════════════════════════ */ .tx-home{ --tx-ink:#0a1020; --tx-ink-2:#3d4b66; --tx-ink-3:#6b7a96; --tx-brand:#2563eb; --tx-brand-2:#06b6d4; --tx-accent:#10b981; --tx-line:rgba(11,18,32,.09); --tx-radius:22px; --tx-glass-a:.38; /* 玻璃主透明度（平衡通透与可读性） */ --tx-glass-b:.50; --tx-blur:26px; position:relative; color:var(--tx-ink); font-family:Inter,"PingFang SC","Microsoft YaHei",system-ui,sans-serif; line-height:1.6; -webkit-font-smoothing:antialiased; /* ★ 突破 new-api 首页外层 max-width 容器，铺满全宽 注意：用 100% + translateX 而非 100vw（100vw 在移动端含滚动条宽度会导致横向溢出） */ width:100vw; max-width:100vw; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); overflow-x:clip; } /* 移动端：放弃全宽突破（父容器本就近全宽），避免横向溢出 */ @media(max-width:768px){ .tx-home{ width:auto;max-width:none; margin-left:0;margin-right:0; /* new-api 外层容器在窄屏下自身横向溢出，用视口宽度锁死我方形变区 */ max-width:100%; overflow-x:hidden; } /* 关键：所有直接子块强制不超过视口 */ .tx-home > *{max-width:100%} .tx-wrap{width:100%;max-width:100%;padding:0 16px} .tx-grid,.tx-peaks,.tx-steps{width:100%} .tx-card,.tx-peak,.tx-step,.tx-code,.tx-badge{max-width:100%} /* 长模型名/长价格允许换行，不撑破容器 */ .tx-mname{word-break:break-all;overflow-wrap:anywhere} .tx-prow{flex-wrap:wrap;gap:4px} .tx-pv{white-space:nowrap} } /* 移动端禁止横向滚动 */ @media(max-width:768px){ html,body{overflow-x:hidden;max-width:100%} } .tx-home *,.tx-home *::before,.tx-home *::after{box-sizing:border-box} /* ═══════════════════════════════════════════════════════════════ 防闪烁(FOUC)：新版首页由 JS 渲染，旧 Markdown 会先于 JS 出现 方案：注入的内联脚本立即给 打 tx-js 标记 → 容器先隐藏； JS 挂载完成后新内容自然可见（新内容是容器的兄弟节点，不受隐藏影响）； 若 JS 不可用/拉取失败/超时 → reveal() 移除 tx-js，旧内容照常显示。 ═══════════════════════════════════════════════════════════════ */ html.tx-js .custom-home-content{visibility:hidden} /* ── 渐变底色（铺在首页区域内） ── */ .tx-home::before{ content:"";position:absolute;inset:0;z-index:-1;pointer-events:none; background: radial-gradient(1300px 760px at 6% -8%, #bfdbfe 0%, rgba(191,219,254,0) 62%), radial-gradient(1100px 680px at 98% 2%, #a5f3fc 0%, rgba(165,243,252,0) 60%), radial-gradient(1200px 880px at 48% 44%, #ddd6fe 0%, rgba(221,214,254,0) 64%), radial-gradient(1000px 780px at 4% 98%, #a7f3d0 0%, rgba(167,243,208,0) 62%), radial-gradient(900px 700px at 96% 88%, #c7d2fe 0%, rgba(199,210,254,0) 62%), linear-gradient(180deg,#f4f8ff 0%,#eaf1fc 40%,#f1f6fd 100%); } /* ── 流动光斑（位置漂移 + 透明度呼吸 = 渐入渐出） ── */ .tx-aurora{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none} .tx-blob{position:absolute;border-radius:50%;filter:blur(84px);will-change:transform,opacity} .tx-b1{width:820px;height:820px;left:-200px;top:-240px;background:radial-gradient(circle at 34% 34%,#2563eb,rgba(37,99,235,0) 66%);opacity:.46} .tx-b2{width:720px;height:720px;right:-180px;top:-170px;background:radial-gradient(circle at 58% 42%,#06b6d4,rgba(6,182,212,0) 66%);opacity:.42} .tx-b3{width:900px;height:900px;left:32%;top:170px;background:radial-gradient(circle at 50% 50%,#8b5cf6,rgba(139,92,246,0) 66%);opacity:.34} .tx-b4{width:700px;height:700px;left:-140px;top:900px;background:radial-gradient(circle at 42% 58%,#10b981,rgba(16,185,129,0) 66%);opacity:.30} .tx-b5{width:760px;height:760px;right:-160px;top:1240px;background:radial-gradient(circle at 50% 50%,#3b82f6,rgba(59,130,246,0) 66%);opacity:.30} .tx-b6{width:680px;height:680px;left:42%;top:1960px;background:radial-gradient(circle at 50% 50%,#0ea5e9,rgba(14,165,233,0) 68%);opacity:.26} @keyframes tx-drift-a{0%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(56px,36px,0) scale(1.08)}100%{transform:translate3d(0,0,0) scale(1)}} @keyframes tx-drift-b{0%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(-62px,32px,0) scale(1.06)}100%{transform:translate3d(0,0,0) scale(1)}} @keyframes tx-drift-c{0%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(38px,-48px,0) scale(1.1)}100%{transform:translate3d(0,0,0) scale(1)}} @keyframes tx-breathe-a{0%,100%{opacity:.30}50%{opacity:.56}} @keyframes tx-breathe-b{0%,100%{opacity:.48}50%{opacity:.24}} @keyframes tx-breathe-c{0%,100%{opacity:.22}50%{opacity:.42}} .tx-b1{animation:tx-drift-a 30s ease-in-out infinite,tx-breathe-a 17s ease-in-out infinite} .tx-b2{animation:tx-drift-b 36s ease-in-out infinite,tx-breathe-b 22s ease-in-out infinite} .tx-b3{animation:tx-drift-c 42s ease-in-out infinite,tx-breathe-a 26s ease-in-out infinite} .tx-b4{animation:tx-drift-a 48s ease-in-out infinite reverse,tx-breathe-c 19s ease-in-out infinite} .tx-b5{animation:tx-drift-b 40s ease-in-out infinite reverse,tx-breathe-a 24s ease-in-out infinite} .tx-b6{animation:tx-drift-c 52s ease-in-out infinite reverse,tx-breathe-b 28s ease-in-out infinite} /* ── 玻璃基类 ── */ .tx-glass{ background:linear-gradient(150deg, rgba(255,255,255,var(--tx-glass-b)) 0%, rgba(255,255,255,var(--tx-glass-a)) 52%, rgba(255,255,255,.30) 100%); border:1px solid rgba(255,255,255,.64); backdrop-filter:blur(var(--tx-blur)) saturate(190%) brightness(1.04); -webkit-backdrop-filter:blur(var(--tx-blur)) saturate(190%) brightness(1.04); box-shadow: 0 12px 38px rgba(23,37,84,.10), 0 2px 8px rgba(23,37,84,.05), inset 0 1px 0 rgba(255,255,255,.9), inset 0 -1px 0 rgba(255,255,255,.28); } /* ── 入场动画（错峰） ── 注意：必须用 backwards 填充 + 只定义 from 帧。 若用 forwards/两者都定义，动画结束会以 forwards 锁死 transform， 使 :hover 的 translateY/scale 失效（实测踩过：阴影生效但不动）。 */ @keyframes tx-rise{from{opacity:0;transform:translateY(22px)}} .tx-rise{animation:tx-rise .78s cubic-bezier(.22,1,.36,1) backwards} .tx-d1{animation-delay:.06s}.tx-d2{animation-delay:.15s}.tx-d3{animation-delay:.24s} .tx-d4{animation-delay:.33s}.tx-d5{animation-delay:.42s}.tx-d6{animation-delay:.51s} @media (prefers-reduced-motion:reduce){ .tx-blob{animation:none!important} .tx-rise{animation:none!important} .tx-grad{animation:none!important} } /* ── 布局 ── */ .tx-wrap{position:relative;z-index:1;max-width:1180px;margin:0 auto;padding:0 28px} .tx-sec{padding:52px 0} .tx-shead{text-align:center;margin-bottom:34px} .tx-shead h2{font-size:clamp(26px,3vw,35px);font-weight:780;letter-spacing:-.015em;margin:0 0 11px;color:var(--tx-ink)} .tx-shead p{color:var(--tx-ink-2);font-size:16px;max-width:580px;margin:0 auto} /* ── Hero ── */ .tx-hero{padding:88px 0 54px;text-align:center} .tx-badge{display:inline-flex;align-items:center;gap:9px;font-size:13px;font-weight:650;color:var(--tx-ink-2); padding:8px 16px;border-radius:999px;margin-bottom:24px} .tx-dot{width:7px;height:7px;border-radius:50%;background:var(--tx-accent); box-shadow:0 0 0 4px rgba(16,185,129,.2);animation:tx-pulse 2.4s ease-in-out infinite} @keyframes tx-pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.84)}} .tx-hero h1{font-size:clamp(38px,5.4vw,62px);line-height:1.12;letter-spacing:-.025em;font-weight:820;margin:0 0 20px;color:var(--tx-ink)} .tx-grad{ background:linear-gradient(110deg,#1d4ed8,#0891b2 28%,#7c3aed 52%,#0891b2 74%,#1d4ed8); background-size:280% 100%; -webkit-background-clip:text;background-clip:text;color:transparent; animation:tx-sheen 9s ease-in-out infinite; } @keyframes tx-sheen{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}} .tx-lede{font-size:17.5px;color:var(--tx-ink-2);max-width:650px;margin:0 auto 32px} .tx-cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-bottom:38px} .tx-btn{display:inline-block;border:0;cursor:pointer;font:inherit;font-weight:650;text-decoration:none; border-radius:13px;padding:10px 20px; transition:transform .24s cubic-bezier(.22,1,.36,1),box-shadow .24s,background .24s} .tx-btn-lg{padding:15px 30px;font-size:16px;border-radius:15px} .tx-btn-primary{background:linear-gradient(135deg,var(--tx-brand),var(--tx-brand-2));color:#fff; box-shadow:0 8px 22px rgba(37,99,235,.32), inset 0 1px 0 rgba(255,255,255,.28)} .tx-btn-primary:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(37,99,235,.4)} .tx-btn-ghost{background:rgba(255,255,255,.42);color:var(--tx-ink);border:1px solid rgba(255,255,255,.72); backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 6px 18px rgba(23,37,84,.07)} .tx-btn-ghost:hover{transform:translateY(-2px);background:rgba(255,255,255,.7)} .tx-code{max-width:640px;margin:0 auto;border-radius:18px;overflow:hidden;text-align:left} .tx-codebar{display:flex;align-items:center;gap:8px;padding:12px 17px;border-bottom:1px solid var(--tx-line); font-size:12.5px;color:var(--tx-ink-3);font-weight:650} .tx-tl{width:9px;height:9px;border-radius:50%;background:rgba(11,18,32,.13)} .tx-codebody{padding:17px 19px;font-family:"SFMono-Regular",Consolas,Menlo,monospace;font-size:13px; color:#101a30;line-height:1.9;overflow-x:auto;white-space:pre} .tx-s{color:#0369a1}.tx-c{color:var(--tx-ink-3)} /* ── 网格 ── */ .tx-grid{display:grid;gap:16px} .tx-g3{grid-template-columns:repeat(3,1fr)} .tx-g4{grid-template-columns:repeat(4,1fr)} /* ── 模型卡（含悬停凸出） ── */ .tx-card{border-radius:var(--tx-radius);padding:22px;position:relative; transition:transform .34s cubic-bezier(.22,1,.36,1),box-shadow .34s cubic-bezier(.22,1,.36,1), border-color .34s ease} .tx-card::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none; opacity:0;transition:opacity .34s ease; background:linear-gradient(150deg,rgba(255,255,255,.72),rgba(255,255,255,.28) 55%,rgba(255,255,255,.14))} .tx-card>*{position:relative;z-index:1} .tx-card:hover{transform:translateY(-14px) scale(1.035);border-color:rgba(255,255,255,.95); box-shadow:0 34px 70px rgba(23,37,84,.26),0 12px 28px rgba(23,37,84,.14),0 3px 10px rgba(23,37,84,.08), inset 0 1px 0 rgba(255,255,255,1),inset 0 -1px 0 rgba(255,255,255,.42)} .tx-card:hover::after{opacity:1} .tx-mtop{display:flex;align-items:center;gap:11px;margin-bottom:14px} .tx-mico{width:37px;height:37px;border-radius:12px;display:grid;place-items:center;font-weight:800;font-size:15px;color:#fff; box-shadow:0 5px 14px rgba(23,37,84,.22), inset 0 1px 0 rgba(255,255,255,.35);flex:none} .tx-i-blue{background:linear-gradient(135deg,#3b82f6,#0ea5e9)} .tx-i-violet{background:linear-gradient(135deg,#8b5cf6,#6366f1)} .tx-i-green{background:linear-gradient(135deg,#10b981,#059669)} .tx-i-amber{background:linear-gradient(135deg,#f59e0b,#f43f5e)} .tx-mname{font-weight:720;font-size:14.5px;word-break:break-all;line-height:1.3;color:var(--tx-ink)} .tx-mvendor{font-size:11.5px;color:var(--tx-ink-3)} .tx-prow{display:flex;justify-content:space-between;align-items:baseline;padding:7.5px 0; border-top:1px solid rgba(11,18,32,.07);font-size:13px} .tx-prow:first-of-type{border-top:0} .tx-pk{color:var(--tx-ink-3)} .tx-pv{font-weight:750;font-variant-numeric:tabular-nums;color:var(--tx-ink)} .tx-pv i{font-style:normal;font-size:10.5px;font-weight:600;color:var(--tx-ink-3);margin-left:2px} .tx-cap{margin-top:13px;padding-top:12px;border-top:1px solid rgba(11,18,32,.07)} .tx-caprow{display:flex;justify-content:space-between;font-size:11.5px;color:var(--tx-ink-3);margin-bottom:6px} .tx-bar{height:5px;border-radius:3px;background:rgba(11,18,32,.08);overflow:hidden} .tx-bar span{display:block;height:100%;border-radius:3px;background:linear-gradient(90deg,#22c55e,#10b981)} .tx-bar.tx-blue span{background:linear-gradient(90deg,#3b82f6,#06b6d4)} .tx-tagrow{display:flex;gap:6px;flex-wrap:wrap;margin-top:13px} .tx-tag{font-size:11.5px;font-weight:650;padding:4px 10px;border-radius:8px; background:rgba(255,255,255,.52);color:#1d4ed8;border:1px solid rgba(37,99,235,.18)} .tx-tag.tx-g{color:#047857;border-color:rgba(16,185,129,.22);background:rgba(236,253,245,.58)} /* ── 峰谷定价卡 ── */ .tx-peaks{display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:880px;margin:0 auto} .tx-peak{padding:28px;border-radius:var(--tx-radius);position:relative;overflow:hidden; transition:transform .34s cubic-bezier(.22,1,.36,1),box-shadow .34s cubic-bezier(.22,1,.36,1),border-color .34s} .tx-peak:hover{transform:translateY(-12px) scale(1.022);border-color:rgba(255,255,255,.95); box-shadow:0 30px 64px rgba(23,37,84,.22),0 10px 24px rgba(23,37,84,.12),inset 0 1px 0 rgba(255,255,255,1)} .tx-peak.tx-low::before{content:"";position:absolute;width:210px;height:210px;right:-60px;bottom:-84px;border-radius:50%; background:radial-gradient(circle,rgba(16,185,129,.34),rgba(16,185,129,0) 70%);filter:blur(22px)} .tx-peak.tx-high::before{content:"";position:absolute;width:210px;height:210px;right:-60px;bottom:-84px;border-radius:50%; background:radial-gradient(circle,rgba(6,182,212,.32),rgba(6,182,212,0) 70%);filter:blur(22px)} .tx-lbl{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:750; padding:6px 12px;border-radius:9px;margin-bottom:16px;position:relative} .tx-lbl-low{background:rgba(236,253,245,.78);color:#047857;border:1px solid rgba(16,185,129,.24)} .tx-lbl-high{background:rgba(236,254,255,.8);color:#0e7490;border:1px solid rgba(6,182,212,.26)} /* 当前所处时段：强调卡 + 呼吸圆点 */ .tx-peak.tx-now{border-color:rgba(37,99,235,.42); box-shadow:0 16px 44px rgba(37,99,235,.18),0 4px 12px rgba(23,37,84,.08),inset 0 1px 0 rgba(255,255,255,.95)} .tx-nowdot{width:6px;height:6px;border-radius:50%;background:currentColor;margin-left:6px; animation:tx-pulse 1.8s ease-in-out infinite} .tx-big{font-size:35px;font-weight:820;letter-spacing:-.025em;font-variant-numeric:tabular-nums;position:relative;color:var(--tx-ink)} .tx-big small{font-size:15px;font-weight:650;color:var(--tx-ink-3);margin-left:4px} .tx-note{font-size:13px;color:var(--tx-ink-3);margin-top:8px;position:relative} /* ── 步骤卡 ── */ .tx-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px} .tx-step{padding:24px;border-radius:var(--tx-radius); transition:transform .34s cubic-bezier(.22,1,.36,1),box-shadow .34s cubic-bezier(.22,1,.36,1),border-color .34s} .tx-step:hover{transform:translateY(-12px) scale(1.025);border-color:rgba(255,255,255,.95); box-shadow:0 30px 62px rgba(23,37,84,.22),0 10px 22px rgba(23,37,84,.12),inset 0 1px 0 rgba(255,255,255,1)} .tx-num{width:35px;height:35px;border-radius:12px;background:linear-gradient(135deg,var(--tx-brand),var(--tx-brand-2)); color:#fff;font-weight:800;display:grid;place-items:center;font-size:15px;margin-bottom:14px; box-shadow:0 6px 16px rgba(37,99,235,.32), inset 0 1px 0 rgba(255,255,255,.3)} .tx-step h3{font-size:15.5px;font-weight:720;margin:0 0 7px;color:var(--tx-ink)} .tx-step p{font-size:13.5px;color:var(--tx-ink-2);margin:0} .tx-step code{font-family:Consolas,monospace;font-size:12.5px;background:rgba(255,255,255,.58); padding:2px 7px;border-radius:6px;color:var(--tx-brand);border:1px solid rgba(37,99,235,.14)} /* ── 暗色模式适配（站点有主题切换） ── */ html.dark .tx-home,body.dark .tx-home,[data-theme="dark"] .tx-home{ --tx-ink:#e8eefc;--tx-ink-2:#a9b7d0;--tx-ink-3:#7b8aa6; --tx-line:rgba(255,255,255,.10); } html.dark .tx-home::before,body.dark .tx-home::before,[data-theme="dark"] .tx-home::before{ background: radial-gradient(1300px 760px at 6% -8%, #1e3a8a 0%, rgba(30,58,138,0) 62%), radial-gradient(1100px 680px at 98% 2%, #164e63 0%, rgba(22,78,99,0) 60%), radial-gradient(1200px 880px at 48% 44%, #4c1d95 0%, rgba(76,29,149,0) 64%), radial-gradient(1000px 780px at 4% 98%, #064e3b 0%, rgba(6,78,59,0) 62%), linear-gradient(180deg,#0b1220 0%,#0f172a 45%,#0b1220 100%); } html.dark .tx-glass,body.dark .tx-glass,[data-theme="dark"] .tx-glass{ background:linear-gradient(150deg,rgba(255,255,255,.14),rgba(255,255,255,.07) 52%,rgba(255,255,255,.05)); border-color:rgba(255,255,255,.16); } html.dark .tx-blob,body.dark .tx-blob,[data-theme="dark"] .tx-blob{opacity:.34} html.dark .tx-mname,html.dark .tx-hero h1,html.dark .tx-shead h2,html.dark .tx-big,body.dark .tx-mname,body.dark .tx-hero h1,[data-theme="dark"] .tx-mname{color:#e8eefc} html.dark .tx-codebody,body.dark .tx-codebody,[data-theme="dark"] .tx-codebody{color:#dbe6fb} html.dark .tx-btn-ghost,body.dark .tx-btn-ghost,[data-theme="dark"] .tx-btn-ghost{background:rgba(255,255,255,.12);color:#e8eefc;border-color:rgba(255,255,255,.2)} html.dark .tx-tag,body.dark .tx-tag,[data-theme="dark"] .tx-tag{background:rgba(255,255,255,.1);color:#93c5fd;border-color:rgba(147,197,253,.28)} /* ── 响应式 ── */ @media(max-width:1024px){.tx-g4{grid-template-columns:repeat(2,1fr)}.tx-g3{grid-template-columns:repeat(2,1fr)}} @media(max-width:720px){ .tx-hero{padding:52px 0 36px} .tx-g4,.tx-g3,.tx-peaks,.tx-steps{grid-template-columns:1fr} .tx-sec{padding:40px 0} .tx-wrap{padding:0 18px} /* 移动端收敛排版，防长标题/长价格撑破视口 */ .tx-hero h1{font-size:clamp(28px,7.6vw,40px);letter-spacing:-.02em} .tx-lede{font-size:15.5px;padding:0 4px} .tx-shead h2{font-size:clamp(21px,5.6vw,27px)} .tx-shead p{font-size:14.5px} .tx-big{font-size:29px} .tx-code{max-width:100%} .tx-codebody{font-size:11.5px;padding:14px 15px} .tx-mname{font-size:13.5px} .tx-prow{font-size:13.5px} .tx-btn-lg{padding:13px 24px;font-size:15px} .tx-cta{gap:10px} }