/* truebottleneck — 全局样式（字体自托管，见 public/static/fonts/fonts.css，由 base.html 的 引入） * 说明：组件级内联样式保留在模板里（忠实于设计稿）；此处只收全站通用规则： * resets / 滚动条 / 关键帧 / 页面外壳 / 导航 / 页脚 / 下拉 / 响应式断点。 */ *{box-sizing:border-box} html,body{margin:0;padding:0;background:#070a0f} body{font-family:'IBM Plex Sans',system-ui,sans-serif;-webkit-font-smoothing:antialiased;color:#e6edf3} ::selection{background:#2dd4bf44} input::placeholder{color:#5d6e82} *::-webkit-scrollbar{width:9px;height:9px} *::-webkit-scrollbar-thumb{background:#243341;border-radius:5px} *::-webkit-scrollbar-track{background:transparent} @keyframes tbFade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}} a{color:inherit} summary::-webkit-details-marker{display:none} /* 键盘焦点可见（:focus-visible 仅 Tab 导航显示，鼠标点击不显示，不影响视觉）。 组件多用内联样式 + outline:none，补一层全站键盘焦点环保证可达性。 */ [data-tb-combo]:focus-visible,[data-tb-calc]:focus-visible,[data-tb-res]:focus-visible,[data-tb-ram]:focus-visible,[data-tb-storage]:focus-visible,[data-tb-quality]:focus-visible,[data-tb-refresh]:focus-visible,[data-tb-toggle-switch]:focus-visible,[data-tb-toggle]:focus-visible,[data-tb-burger]:focus-visible,.tb-nav-link:focus-visible,.tb-menu-item:focus-visible{outline:2px solid #2dd4bf;outline-offset:2px;border-radius:6px} /* 页面外壳（原本内联在每页最外层两个 div 上） */ .tb-page{min-height:100vh;background:radial-gradient(1200px 620px at 50% -120px,#0e2230 0%,#070a0f 60%);color:#e6edf3} .tb-wrap{max-width:1120px;margin:0 auto;padding:0 22px} /* 主导航链接 + Guides 按钮（含 active 高亮 / hover） */ .tb-nav-link{text-decoration:none;font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:14.5px;padding:7px 2px;color:#9fb0c4;background:none;border:none;cursor:pointer;transition:color .15s;display:inline-flex;align-items:center;gap:6px} .tb-nav-link:hover{color:#e6edf3} .tb-nav-link.tb-active{color:#5fe3ce;box-shadow:inset 0 -2px 0 #2dd4bf} /* 下拉菜单（Guides / 语言） */ .tb-menu{position:absolute;top:100%;right:0;margin-top:8px;background:#0d141d;border:1px solid #25394d;border-radius:12px;padding:6px;box-shadow:0 20px 46px -14px rgba(0,0,0,.75);z-index:60;animation:tbFade .14s ease} .tb-menu[hidden]{display:none} .tb-menu-item{display:block;width:100%;text-align:left;text-decoration:none;padding:10px 12px;border-radius:8px;color:#d6e0ec;font-family:'IBM Plex Sans',sans-serif;font-weight:500;font-size:14px;background:none;border:none;cursor:pointer} .tb-menu-item:hover{background:#16212e;color:#fff} /* 页脚链接 */ .tb-foot-link{text-decoration:none;color:#9fb0c4;font-size:14px;transition:color .15s} .tb-foot-link:hover{color:#2dd4bf} /* 博客列表卡片 + 文章返回链接 hover（替代 DC 的 style-hover） */ .tb-card-link{transition:border-color .15s} .tb-card-link:hover{border-color:#2dd4bf55} .tb-back-link{transition:color .15s} .tb-back-link:hover{color:#2dd4bf} /* pSEO 中枢列表 / 相关游戏卡片 hover（描边高亮 + 底色微提，明确可点） */ .tb-hub-card{transition:border-color .15s,background .15s} .tb-hub-card:hover{border-color:#2dd4bf55;background:#0e141d} /* 响应式（来自各页 helmet 内的 @media，全站统一收口） */ @media (max-width:760px){ .tb-result-grid{grid-template-columns:1fr !important} } @media (max-width:640px){ .tb-primary-nav{gap:8px 16px !important} } @media (max-width:430px){ h1{font-size:30px !important} } /* 开放算法徽章在平板(≤900)隐藏：避免长语种(德语 Offener Algorithmus)把语言切换挤到第二行； ≤760 走汉堡时本就隐藏，此规则覆盖 761–900 平板横排带。 */ @media (max-width:900px){ .tb-openbadge{display:none !important} } /* 天梯榜行（GPU/CPU）手机重排：桌面/iPad 单行；≤640 型号名独占整行不截断， 名次/分数条/Check 落到第二行——修「型号名被挤成 1 个字母」的核心问题。 */ @media (max-width:640px){ .tb-tier-row{flex-wrap:wrap !important;row-gap:10px !important} .tb-tier-name{order:-1;flex-basis:100% !important} /* 名字块提到第一行、占满整行 */ .tb-tier-name-text{white-space:normal !important} /* 允许长名换行显示，去掉省略号截断 */ } /* pSEO 配置规格表：≤520 收窄标签列（"Processor"/"Graphics" 实际只需 ~70px）， 把省下的宽度让给 min/rec 数据列，长 CPU/GPU 串少换几行、行更矮。 */ @media (max-width:520px){ .tb-spec-grid{grid-template-columns:88px 1fr 1fr !important} } /* 触控目标 ≥~42px（WCAG 2.5.5 / 44px 建议）：手机上加大分段按钮与开关的可点高度。 桌面不受影响。用各组件已有的 data-* 钩子，无需改模板。 */ @media (max-width:640px){ [data-tb-res],[data-tb-ram],[data-tb-storage],[data-tb-quality],[data-tb-refresh]{padding-top:12px !important;padding-bottom:12px !important} [data-tb-toggle-switch]{padding-top:9px !important;padding-bottom:9px !important} [data-tb-toggle]{padding-top:9px !important;padding-bottom:9px !important} } /* 页脚触控人体工学（手机）：链接/社交图标默认行高仅 ~17-19px，加垂直可点区。 Lighthouse tap-target 本已通过，此为锦上添花，桌面不受影响。 */ @media (max-width:640px){ .tb-foot-link{display:inline-block;padding:6px 0} footer a[aria-label]{padding:9px;margin:-3px} /* 社交图标(GitHub/X)：17/15px → ~35px 可点，负 margin 抵消视觉位移 */ } /* 移动端汉堡导航（桌面隐藏汉堡、显示横排；≤760 收进下拉面板） */ .tb-burger{display:none;align-items:center;justify-content:center;width:42px;height:42px;background:#0b121a;border:1px solid #1c2a39;border-radius:10px;color:#cdd9e6;font-size:19px;line-height:1;cursor:pointer;transition:color .15s,border-color .15s} .tb-burger:hover{color:#fff;border-color:#25394d} @media (max-width:760px){ .tb-header{position:relative} .tb-burger{display:inline-flex} .tb-primary-nav{display:none !important;position:absolute;top:100%;left:0;right:0;flex-direction:column !important;align-items:stretch !important;gap:4px !important;background:#0d141d;border:1px solid #25394d;border-radius:12px;padding:10px !important;margin-top:6px;box-shadow:0 22px 48px -14px rgba(0,0,0,.78);z-index:70} .tb-primary-nav.tb-open{display:flex !important} .tb-primary-nav .tb-nav-link{width:100%;padding:11px 12px !important;border-radius:8px} .tb-primary-nav .tb-nav-link.tb-active{box-shadow:none;background:#13201d} .tb-primary-nav .tb-nav-link:hover{background:#16212e} .tb-primary-nav .tb-openbadge{display:none !important} .tb-primary-nav [data-tb-dropdown]{width:100%} .tb-primary-nav .tb-menu{position:static;box-shadow:none;border:none;background:#0a1019;margin-top:2px;padding:2px 0 2px 10px} }