/** * Knowledge Hub — B2B Sourcing Guide (minimal gray layout) */ /* * base.css 使用 html,body { overflow-x:hidden } 防止横向滚动，但会使 position:sticky 失效。 * 与 blog-single-bridge 相同：改为 clip，避免侧栏无法吸顶。 * header.php 在 Knowledge Hub 模板下为 增加 .knowledge-hub-html */ html.knowledge-hub-html, body.page-template-page-knowledge-hub-php, body.page-template-page-knowledge-hub, body.page-template-page-guide-hub-php, body.page-template-page-guide-detail-php { overflow-x: clip; } body.page-template-page-knowledge-hub-php, body.page-template-page-knowledge-hub, body.page-template-page-guide-hub-php, body.page-template-page-guide-detail-php { scroll-behavior: smooth; } body.page-template-page-knowledge-hub-php #site-content.knowledge-hub-page, body.page-template-page-knowledge-hub #site-content.knowledge-hub-page, body.page-template-page-guide-hub-php #site-content.knowledge-hub-page, body.page-template-page-guide-detail-php #site-content.knowledge-hub-page { background: #f9fafb; overflow: visible; } .kh-details-stack { display: flex; flex-direction: column; gap: 0.25rem; } .knowledge-hub { /* 与全站固定导航 .tw-header 高度一致 */ --kh-nav-height: 80px; --kh-sticky-gap: 8px; --kh-sticky-pad-bottom: 16px; /* 登录后台时 WP 管理栏高度（桌面约 32px） */ --kh-admin-bar-height: 32px; --kh-text: #111827; --kh-muted: #6b7280; --kh-border: #e5e7eb; max-width: 1400px; margin: 0 auto; padding: 2rem 1rem 3rem; display: flex; flex-direction: column; gap: 2rem; } @media (min-width: 768px) { .knowledge-hub { flex-direction: row; padding: 2rem 1.5rem 3rem; gap: 2rem; align-items: flex-start; overflow: visible; } } /* Sidebar TOC */ .kh-sidebar { width: 100%; flex-shrink: 0; } @media (min-width: 768px) { /* * 固定顶栏 var(--kh-nav-height) = 80px（.tw-header）；sticky 左栏避免随长文滚动消失。 * align-self:flex-start 防止 flex 子项被拉成与主栏同高导致 sticky 失效。 */ .kh-sidebar { width: 20%; align-self: flex-start; position: -webkit-sticky; position: sticky; top: calc(var(--kh-nav-height) + var(--kh-sticky-gap)); z-index: 25; max-height: calc(100vh - var(--kh-nav-height) - var(--kh-sticky-gap) - var(--kh-sticky-pad-bottom)); overflow-y: auto; overflow-x: hidden; padding-right: 0.25rem; scrollbar-width: thin; scrollbar-color: #d1d5db transparent; } body.admin-bar .kh-sidebar { top: calc(var(--kh-admin-bar-height) + var(--kh-nav-height) + var(--kh-sticky-gap)); max-height: calc( 100vh - var(--kh-admin-bar-height) - var(--kh-nav-height) - var(--kh-sticky-gap) - var(--kh-sticky-pad-bottom) ); } .kh-sidebar::-webkit-scrollbar { width: 6px; } .kh-sidebar::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 3px; } .kh-sidebar::-webkit-scrollbar-track { background: transparent; } } .kh-sidebar__title { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: #9ca3af; margin: 0 0 1rem; padding-left: 0.5rem; border-left: 2px solid #1f2937; } .kh-details summary { list-style: none; } .kh-details summary::-webkit-details-marker { display: none; } .kh-details__summary { display: flex; justify-content: space-between; align-items: center; font-weight: 700; cursor: pointer; padding: 0.625rem 0.75rem; color: var(--kh-text); background: #f9fafb; border-radius: 0.375rem; transition: background 0.2s; font-size: 0.875rem; } .kh-details[open] .kh-details__summary { background: #f3f4f6; } .kh-details__summary:hover { background: #e5e7eb; } .kh-details[open] .kh-details__summary:hover { background: #e5e7eb; } .kh-details__chev { transition: transform 0.3s; color: #9ca3af; flex-shrink: 0; } .kh-details[open] .kh-details__chev { transform: rotate(180deg); } .kh-toc { margin: 0.5rem 0 0.75rem; padding-left: 1rem; margin-left: 1rem; border-left: 2px solid #e5e7eb; list-style: none; } .kh-toc li { margin-bottom: 0.75rem; } .kh-toc a { font-size: 0.875rem; color: #4b5563; font-weight: 500; text-decoration: none; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; transition: color 0.2s; } .kh-toc a:hover { color: #000; } /* Main column */ .kh-main { width: 100%; background: #fff; padding: 2rem; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04); border-radius: 0.5rem; border: 1px solid #e5e7eb; } @media (min-width: 768px) { .kh-main { width: 60%; padding: 2.5rem 3rem; } } .kh-main__h1 { font-size: clamp(1.75rem, 4vw, 2.25rem); font-weight: 700; color: #111827; margin: 0 0 0.75rem; letter-spacing: -0.025em; } .kh-main__lead { color: var(--kh-muted); margin: 0 0 2.5rem; padding-bottom: 1.5rem; border-bottom: 1px solid #f3f4f6; font-size: 1.125rem; line-height: 1.65; } .kh-section-wrap { margin-bottom: 3.5rem; } .kh-section-wrap:last-of-type { margin-bottom: 0; } .kh-section-title { font-size: 1.5rem; font-weight: 700; color: #111827; margin: 0 0 2rem; padding-bottom: 0.5rem; border-bottom: 2px solid #111827; display: inline-block; } .kh-block { /* 锚点跳转时落在固定导航下方（80px + 余量） */ scroll-margin-top: calc(var(--kh-nav-height) + 24px); margin-bottom: 2.5rem; } .kh-section-wrap .kh-block:last-child { margin-bottom: 0; } .kh-q { font-size: 1.125rem; font-weight: 700; color: #111827; margin: 0 0 0.75rem; display: flex; align-items: flex-start; gap: 0.75rem; line-height: 1.4; } .kh-q__badge { flex-shrink: 0; background: #111827; color: #fff; font-size: 0.75rem; padding: 0.125rem 0.5rem; border-radius: 0.25rem; border: 1px solid #111827; margin-top: 0.125rem; font-weight: 700; letter-spacing: 0.02em; } .kh-a { color: #1f2937; line-height: 1.75; /* 仅略深于页面底 #f9fafb，细边框保留块级层次 */ background: #f6f7f9; border: 1px solid #e8eaed; padding: 1.25rem; border-radius: 0.5rem; margin: 0; font-size: 0.9375rem; display: block; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55); } .kh-a strong { color: #111827; } .kh-a a { color: #111827; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; } .kh-a a:hover { color: #000; } /* Right column */ .kh-aside { width: 100%; flex-shrink: 0; } @media (min-width: 768px) { .kh-aside { width: 20%; align-self: flex-start; position: -webkit-sticky; position: sticky; top: calc(var(--kh-nav-height) + var(--kh-sticky-gap)); max-height: calc(100vh - var(--kh-nav-height) - var(--kh-sticky-gap) - var(--kh-sticky-pad-bottom)); overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; } body.admin-bar .kh-aside { top: calc(var(--kh-admin-bar-height) + var(--kh-nav-height) + var(--kh-sticky-gap)); max-height: calc( 100vh - var(--kh-admin-bar-height) - var(--kh-nav-height) - var(--kh-sticky-gap) - var(--kh-sticky-pad-bottom) ); } } .kh-aside__title { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: #9ca3af; margin: 0 0 1rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--kh-border); } .kh-card { margin-bottom: 1.5rem; } .kh-card__img { background: #e5e7eb; height: 10rem; border-radius: 0.375rem; overflow: hidden; margin-bottom: 0.75rem; } .kh-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s; } .kh-card:hover .kh-card__img img { transform: scale(1.05); } .kh-card__h4 { font-size: 0.875rem; font-weight: 700; color: #1f2937; margin: 0 0 0.25rem; } .kh-card__meta { font-size: 0.75rem; color: var(--kh-muted); margin: 0 0 0.5rem; } .kh-btn { display: block; width: 100%; padding: 0.5rem; font-size: 0.75rem; font-weight: 700; text-align: center; text-decoration: none; border-radius: 0.375rem; cursor: pointer; border: 1px solid #d1d5db; background: #fff; color: #374151; transition: border-color 0.2s, color 0.2s; } .kh-btn:hover { border-color: #111827; color: #111827; } /* Dark CTA — white button */ .kh-btn--invert { background: #fff; color: #111827; border-color: #fff; font-size: 0.875rem; padding: 0.625rem 1rem; font-weight: 700; } .kh-btn--invert:hover { background: #f3f4f6; color: #000; border-color: #f3f4f6; } .kh-cta-box { margin-top: 2rem; background: #111827; color: #fff; padding: 1.25rem; border-radius: 0.375rem; text-align: center; } /* #site-content h4/p in base.css use ID — must win for dark CTA strip */ #site-content .kh-cta-box h4 { margin: 0 0 0.5rem; font-size: 1rem; font-weight: 700; color: #fff; } #site-content .kh-cta-box p { margin: 0 0 1rem; font-size: 0.75rem; color: #fff; line-height: 1.5; } /* base.css #site-content a + main a:hover 会盖过 .kh-btn--invert */ #site-content .kh-cta-box .kh-btn.kh-btn--invert { color: #111827; } #site-content .kh-cta-box .kh-btn.kh-btn--invert:hover, #site-content .kh-cta-box .kh-btn.kh-btn--invert:focus-visible { color: #000; } .kh-footer-note { text-align: center; font-size: 0.875rem; color: var(--kh-muted); padding: 2rem 1rem; border-top: 1px solid var(--kh-border); margin-top: 0; } /* —— Guide Hub (/guide/) —— 对齐原型：白 Hero + 大搜索 + 白卡片 + 彩色点缀 + 底栏 CTA */ .guide-hub-page .guide-hub { font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; font-feature-settings: 'kern' 1; -webkit-font-smoothing: antialiased; color: #111827; max-width: none; margin: 0; padding: 0; background: #f9fafb; } /* Hero 全宽白底条 */ .guide-hub__hero-strip { background: #fff; border-bottom: 1px solid #f3f4f6; padding: 3rem 1.25rem 4rem; } @media (min-width: 768px) { .guide-hub__hero-strip { padding: 4rem 1.5rem 5rem; } } .guide-hub__hero-inner { max-width: 56rem; margin: 0 auto; text-align: center; } .guide-hub__h1 { font-size: clamp(2rem, 5vw, 3rem); font-weight: 700; letter-spacing: -0.025em; color: #030712; margin: 0 0 1rem; line-height: 1.1; } .guide-hub__lead { color: #6b7280; font-size: 1.125rem; line-height: 1.65; max-width: 42rem; margin: 0 auto 2.5rem; } /* 关键词筛选：左侧提示（灯泡）+ 大圆角输入框 */ .guide-hub__search-container { position: relative; max-width: 42rem; margin: 0 auto; text-align: left; } .guide-hub__tip-icon { position: absolute; left: 1.25rem; top: 50%; transform: translateY(-50%); display: flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem; color: #d97706; pointer-events: none; z-index: 1; } .guide-hub__tip-icon svg { display: block; width: 100%; height: 100%; } .guide-hub__search-input { width: 100%; min-height: 3.25rem; padding: 1.15rem 1.5rem 1.15rem 3.5rem; font-size: 1.125rem; line-height: 1.5; color: #111827; background: #f9fafb; border: 1px solid #000; border-radius: 1rem; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; } .guide-hub__search-input::placeholder { color: #9ca3af; } .guide-hub__search-input:hover { border-color: #000; background: #fff; } .guide-hub__search-input:focus { outline: none; background: #fff; border-color: #000; box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.05); } .guide-hub__suggestions { list-style: none; margin: 0; padding: 0.25rem 0; position: absolute; left: 0; right: 0; top: calc(100% + 8px); background: #fff; border: 1px solid #e5e7eb; border-radius: 0.75rem; box-shadow: 0 20px 40px rgba(15, 23, 42, 0.12); z-index: 40; max-height: min(18rem, 55vh); overflow-y: auto; scrollbar-width: thin; } .guide-hub__suggestions li a { display: block; padding: 0.75rem 1rem 0.75rem 2.75rem; color: #111827; text-decoration: none; font-size: 0.9375rem; line-height: 1.4; border-bottom: 1px solid #f3f4f6; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23d1d5db' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M9 5l7 7-7 7'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: 0.85rem 0.95rem; background-size: 1rem; transition: background-color 0.12s ease, color 0.12s ease; } .guide-hub__suggestions li:last-child a { border-bottom: 0; } .guide-hub__suggestions li a:hover, .guide-hub__suggestions li a:focus-visible { background-color: #f9fafb; color: #000; outline: none; } .guide-hub__suggestions li:first-child a { border-radius: 0.65rem 0.65rem 0 0; } .guide-hub__suggestions li:last-child a { border-radius: 0 0 0.65rem 0.65rem; } /* 卡片区 */ .guide-hub__cards-wrap { max-width: 1200px; margin: 0 auto; padding: 3rem 1.25rem 2rem; } @media (min-width: 768px) { .guide-hub__cards-wrap { padding: 4rem 1.5rem 2rem; } } .guide-hub__grid { counter-reset: gh-topic; display: grid; grid-template-columns: 1fr; gap: 2rem; align-items: stretch; } @media (min-width: 640px) { .guide-hub__grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .guide-hub__grid { grid-template-columns: repeat(3, 1fr); } } /* * 每张卡片的主题色（背景序号、顶线、「Open Topic」按钮底）。 * 按 DOM 顺序：第 1 张用色 1，…第 20 张用色 20，第 21 张起与第 1 张同色循环。 * 新增卡片无需改 CSS，只要在后台加分组即可。 */ .guide-hub__card:nth-child(20n + 1) { --card-tone: #2563eb; } .guide-hub__card:nth-child(20n + 2) { --card-tone: #16a34a; } .guide-hub__card:nth-child(20n + 3) { --card-tone: #ea580c; } .guide-hub__card:nth-child(20n + 4) { --card-tone: #9333ea; } .guide-hub__card:nth-child(20n + 5) { --card-tone: #db2777; } .guide-hub__card:nth-child(20n + 6) { --card-tone: #0891b2; } .guide-hub__card:nth-child(20n + 7) { --card-tone: #4f46e5; } .guide-hub__card:nth-child(20n + 8) { --card-tone: #dc2626; } .guide-hub__card:nth-child(20n + 9) { --card-tone: #65a30d; } .guide-hub__card:nth-child(20n + 10) { --card-tone: #059669; } .guide-hub__card:nth-child(20n + 11) { --card-tone: #c026d3; } .guide-hub__card:nth-child(20n + 12) { --card-tone: #7c3aed; } .guide-hub__card:nth-child(20n + 13) { --card-tone: #0e7490; } .guide-hub__card:nth-child(20n + 14) { --card-tone: #b45309; } .guide-hub__card:nth-child(20n + 15) { --card-tone: #475569; } .guide-hub__card:nth-child(20n + 16) { --card-tone: #be123c; } .guide-hub__card:nth-child(20n + 17) { --card-tone: #0369a1; } .guide-hub__card:nth-child(20n + 18) { --card-tone: #5b21b6; } .guide-hub__card:nth-child(20n + 19) { --card-tone: #0f766e; } .guide-hub__card:nth-child(20n + 20) { --card-tone: #a16207; } .guide-hub__card.hub-card { position: relative; display: flex; flex-direction: column; min-height: 17rem; padding: 2.5rem; background: #fff; border: 1px solid #e5e7eb; border-radius: 1rem; text-decoration: none; color: inherit; overflow: hidden; cursor: pointer; counter-increment: gh-topic; /* 默认即带层次，与灰底区分 */ box-shadow: 0 4px 6px -1px rgba(15, 23, 42, 0.08), 0 2px 4px -2px rgba(15, 23, 42, 0.06), 0 12px 24px -8px rgba(15, 23, 42, 0.06); transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s ease, border-color 0.3s ease; } .guide-hub__card-bg-num { position: absolute; right: 1.25rem; top: 0.625rem; font-size: 3rem; font-weight: 800; line-height: 1; pointer-events: none; font-variant-numeric: tabular-nums; letter-spacing: -0.04em; color: var(--card-tone, #3b82f6); opacity: 0.22; } .guide-hub__card-bg-num::before { content: counter(gh-topic, decimal-leading-zero); } .guide-hub__card-accent-line { display: block; width: 2.5rem; height: 2px; margin-bottom: 1.5rem; background: var(--card-tone, #3b82f6); border-radius: 1px; } .guide-hub__card-title { margin: 0 0 0.75rem; padding-right: 3rem; font-size: 1.25rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.3; color: #111827; } .guide-hub__card-desc { margin: 0 0 2rem; flex: 1 1 auto; font-size: 0.875rem; line-height: 1.65; color: #6b7280; } .guide-hub__card-footer { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .guide-hub__card-count { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: #000; } .guide-hub__card-link { display: inline-block; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: #fff; background: var(--card-tone, #3b82f6); padding: 0.4rem 0.85rem; border-radius: 0.375rem; white-space: nowrap; line-height: 1.2; transition: filter 0.2s ease, box-shadow 0.2s ease; } .guide-hub__card:hover, .guide-hub__card:focus-visible { transform: translateY(-5px); border-color: #d1d5db; box-shadow: 0 20px 25px -5px rgba(15, 23, 42, 0.14), 0 10px 15px -6px rgba(15, 23, 42, 0.1), 0 0 0 1px rgba(15, 23, 42, 0.04); outline: none; } .guide-hub__card:hover .guide-hub__card-link, .guide-hub__card:focus-visible .guide-hub__card-link { filter: brightness(1.06); } /* 底部 CTA */ .guide-hub__bottom-cta { max-width: 1200px; margin: 0 auto; padding: 0 1.25rem 6rem; } @media (min-width: 768px) { .guide-hub__bottom-cta { padding: 0 1.5rem 6rem; } } .guide-hub__bottom-cta-inner { position: relative; overflow: hidden; padding: 3rem 1.5rem; text-align: center; font-family: inherit; color: #fff; background: #111827; border-radius: 1.5rem; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); } /* * 覆盖 base.css 的全局 h2 / #site-content p 颜色，否则深色底上会显示主色标题与黑色正文。 * base.css: h2 { color: var(--heading-primary-color...) }; #site-content p { color: #000 } */ #site-content .guide-hub__bottom-cta-inner h2.guide-hub__bottom-cta-title { color: #fff; } #site-content .guide-hub__bottom-cta-inner p.guide-hub__bottom-cta-text { color: #d1d5db; } @media (min-width: 768px) { .guide-hub__bottom-cta-inner { padding: 3rem 2rem; } } .guide-hub__bottom-cta-inner::after { content: ''; position: absolute; right: -5rem; top: -5rem; width: 16rem; height: 16rem; border-radius: 50%; background: rgba(255, 255, 255, 0.05); filter: blur(3rem); pointer-events: none; } .guide-hub__bottom-cta-title { position: relative; z-index: 1; margin: 0 0 1rem; font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em; color: #fff; } .guide-hub__bottom-cta-text { position: relative; z-index: 1; margin: 0 auto 2rem; max-width: 32rem; font-size: 0.9375rem; line-height: 1.6; color: #d1d5db; } .guide-hub__bottom-cta-btn { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; padding: 0.75rem 2rem; font-size: 0.9375rem; font-weight: 700; color: #111827; background: #fff; border-radius: 999px; text-decoration: none; transition: background 0.2s ease, transform 0.2s ease; } .guide-hub__bottom-cta-btn:hover, .guide-hub__bottom-cta-btn:focus-visible { background: #f3f4f6; outline: none; } /* —— Guide detail (1:1 with B2B prototype: 3-col + TOC + accordion + right CTA) —— */ .guide-detail-page .knowledge-hub.guide-detail__shell { max-width: 90rem; /* 1440px */ margin-left: auto; margin-right: auto; padding: 2rem 1rem 3rem; display: flex; flex-direction: column; gap: 2rem; align-items: stretch; /* 避免任意祖先 overflow 裁剪导致子项 position:sticky 失效 */ overflow: visible; } @media (min-width: 1024px) { .guide-detail-page .knowledge-hub.guide-detail__shell { flex-direction: row; align-items: flex-start; gap: 3rem; padding: 3rem 1.5rem 3rem; } /* * 左侧：外层列 align-self:stretch 与主栏同高，给 sticky 足够滚动范围； * 内层 aside 吸顶；长 TOC 时栏内滚动（max-height）不缩短 sticky 范围。 */ .guide-detail-page .guide-detail__sidebar-col.guide-detail__sidebar--desktop { display: flex; flex-direction: column; align-self: stretch; width: 25%; flex: 0 0 25%; max-width: 25%; min-height: 0; padding-right: 1rem; box-sizing: border-box; } .guide-detail-page .guide-detail__sidebar-col .guide-detail__sidebar.kh-sidebar { position: -webkit-sticky; position: sticky; top: calc(var(--kh-nav-height) + var(--kh-sticky-gap)); z-index: 25; align-self: flex-start; width: 100%; max-height: calc(100vh - var(--kh-nav-height) - var(--kh-sticky-gap) - var(--kh-sticky-pad-bottom)); overflow-y: auto; overflow-x: hidden; -ms-overflow-style: none; scrollbar-width: none; } .guide-detail-page .guide-detail__sidebar-col .guide-detail__sidebar.kh-sidebar::-webkit-scrollbar { display: none; } body.admin-bar .guide-detail-page .guide-detail__sidebar-col .guide-detail__sidebar.kh-sidebar { top: calc(var(--kh-admin-bar-height) + var(--kh-nav-height) + var(--kh-sticky-gap)); max-height: calc( 100vh - var(--kh-admin-bar-height) - var(--kh-nav-height) - var(--kh-sticky-gap) - var(--kh-sticky-pad-bottom) ); } .guide-detail-page .guide-detail__main { width: 50%; flex: 1 1 50%; max-width: 50%; } /* 右侧：同左栏结构，外层 stretch + 内层 sticky，卡片不裁切 */ .guide-detail-page .guide-detail__aside-col { display: flex; flex-direction: column; align-self: stretch; width: 25%; flex: 0 0 25%; max-width: 25%; min-height: 0; box-sizing: border-box; } .guide-detail-page .guide-detail__aside-col .guide-detail__aside.kh-aside { position: -webkit-sticky; position: sticky; top: calc(var(--kh-nav-height) + var(--kh-sticky-gap)); z-index: 25; align-self: flex-start; width: 100%; padding-left: 0.5rem; overflow: visible; } body.admin-bar .guide-detail-page .guide-detail__aside-col .guide-detail__aside.kh-aside { top: calc(var(--kh-admin-bar-height) + var(--kh-nav-height) + var(--kh-sticky-gap)); } } @media (max-width: 1023px) { .guide-detail-page .guide-detail__sidebar--desktop { display: none; } .guide-detail-page .knowledge-hub.guide-detail__shell { flex-direction: column; } .guide-detail-page .guide-detail__main, .guide-detail-page .guide-detail__aside-col, .guide-detail-page .guide-detail__aside.kh-aside { width: 100%; max-width: 100%; flex: 1 1 auto; position: static; max-height: none; } } .guide-detail-page .guide-detail__main, .guide-detail-page .guide-detail__aside.kh-aside { background: transparent; border: none; box-shadow: none; padding: 0; } @media (min-width: 1024px) { .guide-detail-page .guide-detail__aside-col .guide-detail__aside.kh-aside { padding-left: 0.5rem; } } .guide-detail-page .guide-detail__main { font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; scroll-behavior: smooth; } /* Back link — minimal (prototype) */ .guide-detail__back--minimal { margin: 0 0 2rem; padding: 0; background: none; border: none; display: block; } .guide-detail__back--minimal a { display: inline-flex; align-items: center; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: #9ca3af; text-decoration: none; transition: color 0.2s ease; } .guide-detail__back--minimal a:hover, .guide-detail__back--minimal a:focus-visible { color: #000; outline: none; } .guide-detail__toc-heading { font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.2em; color: #9ca3af; margin: 0 0 1.5rem; padding-bottom: 0.75rem; border-bottom: 1px solid #e5e7eb; } .guide-detail__toc-nav { display: flex; flex-direction: column; gap: 0.25rem; } .guide-detail__toc-nav .toc-link { display: block; padding: 0.5rem 1rem; font-size: 0.875rem; line-height: 1.4; color: #6b7280; text-decoration: none; border-left: 4px solid transparent; border-radius: 0 0.375rem 0.375rem 0; transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease; } .guide-detail__toc-nav .toc-link:hover { color: #111827; } .guide-detail__toc-nav .toc-link.active { border-left-color: #000; color: #000; font-weight: 700; background: #f3f4f6; } /* Breadcrumb + hero */ #site-content.guide-detail-page .guide-detail__breadcrumb { display: flex; align-items: center; flex-wrap: wrap; gap: 0.25rem; font-size: 0.875rem; margin-bottom: 1rem; } #site-content.guide-detail-page .guide-detail__breadcrumb a { color: #6b7280; text-decoration: none; } #site-content.guide-detail-page .guide-detail__breadcrumb a:hover { color: #000; } .guide-detail__breadcrumb-sep { margin: 0 0.25rem; color: #9ca3af; } .guide-detail__breadcrumb-current { color: #000; font-weight: 500; } .guide-detail__intro { margin-bottom: 3rem; } .guide-detail-page .guide-detail__h1.kh-main__h1 { font-size: clamp(2.25rem, 5vw, 3rem); font-weight: 700; color: #030712; letter-spacing: -0.025em; line-height: 1.1; margin: 0 0 1.5rem; } .guide-detail-page .guide-detail__lead.kh-main__lead { font-size: 1.125rem; line-height: 1.65; color: #6b7280; margin: 0; padding: 0; border: none; } /* Guide detail — 子话题/卡片/手风琴外壳由 Tailwind 工具类负责；此处仅锚点与富文本兜底 */ .guide-detail__qa { scroll-margin-top: 7rem; } @media (min-width: 640px) { .guide-detail__qa { scroll-margin-top: 8rem; } } .guide-detail-page .guide-detail__answer-stack summary::-webkit-details-marker { display: none; } .guide-detail-page .guide-detail__answer-stack summary { list-style: none; } /* Answer 区内排版（padding/背景由 Tailwind utilities 控制） */ .guide-detail__answer { font-size: 1rem; line-height: 1.65; color: #4b5563; } .guide-detail__answer p { margin: 0 0 0.75rem; } .guide-detail__answer p:last-child { margin-bottom: 0; } .guide-detail__answer strong { color: #111827; font-weight: 600; } #site-content.guide-detail-page .guide-detail__answer a { color: #111827; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; } .guide-detail__answer .kh-answer__img { border-radius: 0.375rem; } /* 右侧栏 sticky 样式在 @media (min-width: 1024px) 内与桌面三栏布局一并定义 */ .guide-detail__cta-dark.kh-cta-box { margin-top: 0; margin-bottom: 2rem; padding: 2rem; background: #111827; color: #fff; border: none; border-radius: 1rem; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); text-align: left; } .guide-detail__cta-dark.kh-cta-box h4 { font-size: 1.25rem; font-weight: 700; margin: 0 0 0.75rem; color: #fff; } #site-content .guide-detail__cta-dark.kh-cta-box p { color: #9ca3af; font-size: 0.875rem; line-height: 1.6; margin: 0 0 1.5rem; } .guide-detail__cta-btn.kh-btn--invert { width: 100%; padding: 0.75rem 1rem; font-size: 0.875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; border-radius: 0.5rem; border: none; background: #fff; color: #000; } .guide-detail__cta-btn.kh-btn--invert:hover { background: #f3f4f6; color: #000; } .guide-detail__aside-kicker { font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.2em; color: #9ca3af; margin: 0 0 1rem; } .guide-detail__card.kh-card { background: #fff; border: 1px solid #e5e7eb; border-radius: 1rem; padding: 1.5rem; margin-bottom: 0; } .guide-detail__card-img.kh-card__img { height: auto; aspect-ratio: unset; border-radius: 0.5rem; margin-bottom: 1rem; overflow: visible; } /* 完整展示图片，避免 cover 裁切（“遮挡”） */ .guide-detail__card .guide-detail__card-img img { width: 100%; height: auto; max-height: none; object-fit: contain; object-position: center center; } .guide-detail__card:hover .guide-detail__card-img img { transform: none; } #site-content .guide-detail__card .guide-detail__card-btn.kh-btn { color: #2563eb; font-weight: 700; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em; border: none; background: transparent; padding: 0; text-align: left; width: auto; } #site-content .guide-detail__card .guide-detail__card-btn.kh-btn:hover { text-decoration: underline; color: #1d4ed8; } .kh-answer__img { max-width: 100%; height: auto; border-radius: 0.375rem; cursor: zoom-in; } .kh-lightbox { position: fixed; inset: 0; z-index: 100000; background: rgba(0, 0, 0, 0.88); display: flex; align-items: center; justify-content: center; padding: 2rem; } .kh-lightbox[hidden] { display: none !important; } .kh-lightbox__img { max-width: min(96vw, 1200px); max-height: 90vh; width: auto; height: auto; object-fit: contain; } .kh-lightbox__close { position: absolute; top: 1rem; right: 1rem; width: 2.5rem; height: 2.5rem; border: 0; border-radius: 999px; background: #fff; font-size: 1.5rem; line-height: 1; cursor: pointer; color: #111; } .kh-lightbox__close:hover { background: #f3f4f6; }