/**
* 帮助中心样式
* - 分页器
* - Hero / 联系入口的渐变蒙板（避免在模板里写大段 inline style）
* - 通用文字描边阴影
*
* 仅在加载了帮助中心相关页面时通过 wp_enqueue_style 引入。
*/
/* ======================================================================
* 分页样式（archive-help_article.php）—— 机能风
* ====================================================================== */
/* 隐藏 WP the_posts_pagination 输出的 screen-reader 标题（WP 官方标准 SR-only 写法） */
.yk-hc-pagination .screen-reader-text {
position: absolute !important;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.yk-hc-pagination .page-numbers {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 36px;
height: 36px;
padding: 0 10px;
margin: 0 3px;
border-radius: 6px;
font-size: 13px;
font-weight: 900;
font-style: italic;
color: #0f172a;
background: #ffffff;
border: 2px solid #0f172a;
box-shadow: 2px 2px 0 #0f172a;
transition: all .15s;
text-decoration: none;
}
.yk-hc-pagination .page-numbers:hover {
background: #facc15;
transform: translate(-1px, -1px);
box-shadow: 3px 3px 0 #0f172a;
}
.yk-hc-pagination .page-numbers.current {
background: #facc15;
transform: translate(1px, 1px);
box-shadow: none;
}
.yk-hc-pagination .dots {
background: transparent;
border-color: transparent;
box-shadow: none;
}
.yk-hc-pagination .dots:hover {
background: transparent;
transform: none;
box-shadow: none;
}
/* ======================================================================
* Hero 区蒙板：左侧白色渐变 → 右侧透明（保证标题/搜索框可读）
* 用法：
* ====================================================================== */
.yk-hc-mask-light {
background: linear-gradient(
90deg,
rgba(238, 242, 255, 0.95) 0%,
rgba(238, 242, 255, 0.75) 35%,
rgba(238, 242, 255, 0.15) 65%,
rgba(238, 242, 255, 0) 100%
);
}
/* ======================================================================
* 联系入口蒙板：左侧深色渐变 → 右侧透明（保证白字 CTA 可读）
* 用法：
* ====================================================================== */
.yk-hc-mask-dark {
background: linear-gradient(
90deg,
rgba(15, 23, 42, 0.78) 0%,
rgba(15, 23, 42, 0.55) 40%,
rgba(15, 23, 42, 0.15) 75%,
rgba(15, 23, 42, 0) 100%
);
}
/* ======================================================================
* 公用文字阴影
* ====================================================================== */
/* Hero 标题：白色描边阴影（描边块状） */
.yk-hc-hero-title-shadow {
text-shadow: 2px 2px 0 rgba(255, 255, 255, 0.7);
}
/* CTA 区白字：黑色单层描边阴影 */
.yk-hc-text-shadow {
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85);
}
/* ======================================================================
* 背景图通用样式：cover + center
* 配合 inline style 的 background-image:url(...) 使用，避免重复写
* ====================================================================== */
.yk-hc-bg-cover {
background-size: cover;
background-position: center;
}
/* ======================================================================
* 机能风组件 class
* 把模板里反复出现的长 Tailwind class 串抽成统一组件，便于维护
* ====================================================================== */
/* 卡片：大 / 小 两种尺寸，区别在阴影偏移
* 注意：背景色由模板自己决定（bg-white / bg-slate-900 / bg-gradient-* 等），
* 这里不写 background，避免覆盖动态背景图和渐变。
*/
.yk-hc-card {
border-radius: 0.375rem;
border: 2px solid #0f172a;
box-shadow: 4px 4px 0 #0f172a;
}
.yk-hc-card-sm {
border-radius: 0.375rem;
border: 2px solid #0f172a;
box-shadow: 2px 2px 0 #0f172a;
}
/* 按压位移：小幅（按钮 / tab / 小卡片） */
.yk-hc-press {
transition: transform .15s, box-shadow .15s, background-color .15s;
}
.yk-hc-press:hover {
transform: translate(-1px, -1px);
box-shadow: 3px 3px 0 #0f172a;
}
/* 按压位移：大幅 + 红色彩阴（主要用于分类卡 / 新手指南卡） */
.yk-hc-press-lg {
border: 2px solid #0f172a;
box-shadow: 4px 4px 0 #0f172a;
transition: transform .15s, box-shadow .15s;
}
.yk-hc-press-lg:hover {
transform: translate(-4px, -4px);
box-shadow: 6px 6px 0 #ef4444;
}
/* 按钮基础 */
.yk-hc-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.375rem;
padding: 0.5rem 1rem;
font-weight: 700;
font-style: normal;
font-size: 0.875rem;
line-height: 1.25;
border-radius: 0.375rem;
border: 2px solid #0f172a;
box-shadow: 2px 2px 0 #0f172a;
transition: transform .15s, box-shadow .15s, background-color .15s;
text-align: center;
text-decoration: none;
white-space: nowrap;
text-shadow: none;
}
.yk-hc-btn:hover {
transform: translate(-1px, -1px);
box-shadow: 3px 3px 0 #0f172a;
}
.yk-hc-btn-primary {
background: #facc15; /* yellow-400 */
color: #0f172a;
}
.yk-hc-btn-primary:hover {
background: #eab308; /* yellow-500 */
}
.yk-hc-btn-secondary {
background: #fff;
color: #0f172a;
}
.yk-hc-btn-secondary:hover {
background: #fefce8; /* yellow-50 */
}
/* 徽章：HOT（红底白字）、新手（黄底黑字） */
.yk-hc-badge {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 2px 6px;
font-size: 10px;
font-weight: 900;
font-style: italic;
border: 2px solid #0f172a;
border-radius: 0.25rem;
box-shadow: 2px 2px 0 #0f172a;
line-height: 1.1;
}
.yk-hc-badge-hot {
background: #ef4444; /* red-500 */
color: #fff;
}
.yk-hc-badge-guide {
background: #facc15; /* yellow-400 */
color: #0f172a;
}
/* Tab 按钮 */
.yk-hc-tab {
display: inline-flex;
align-items: center;
padding: 6px 16px;
font-size: 14px;
font-weight: 900;
font-style: italic;
white-space: nowrap;
border: 2px solid #0f172a;
border-radius: 0.375rem;
box-shadow: 2px 2px 0 #0f172a;
background: #fff;
color: #475569;
transition: transform .15s, box-shadow .15s, background-color .15s;
cursor: pointer;
}
.yk-hc-tab:hover {
transform: translate(-1px, -1px);
box-shadow: 3px 3px 0 #0f172a;
background: #f8fafc;
}
.yk-hc-tab.is-active {
background: #facc15;
color: #0f172a;
}
/* ======================================================================
* 面包屑（机能风：黑底 + 黄字 + 红色硬阴影 + 终端图标）
* 用法：
*
*
* ====================================================================== */
.yk-hc-breadcrumb {
display: inline-flex;
align-items: center;
gap: 8px;
max-width: 100%;
padding: 8px 12px;
background: #0f172a;
color: #fff;
border: 2px solid #0f172a;
box-shadow: 4px 4px 0 #ef4444;
font-size: 13px;
font-weight: 900;
font-style: italic;
text-transform: uppercase;
letter-spacing: 0.02em;
}
.yk-hc-breadcrumb a {
color: #fff;
transition: color .15s;
text-decoration: none;
white-space: nowrap;
}
.yk-hc-breadcrumb a:hover {
color: #facc15;
}
.yk-hc-breadcrumb .yk-hc-bc-icon {
color: #facc15;
width: 16px;
height: 16px;
flex-shrink: 0;
}
.yk-hc-breadcrumb .yk-hc-bc-sep {
color: #ef4444;
flex-shrink: 0;
}
.yk-hc-breadcrumb .yk-hc-bc-current {
color: #facc15;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 40ch;
}
/* 黄黑警示带：施工 / 警戒线风 */
.yk-hc-stripe-warning {
height: 12px;
margin-top: 12px;
background: repeating-linear-gradient(
45deg,
#facc15 0,
#facc15 14px,
#0f172a 14px,
#0f172a 28px
);
border-top: 2px solid #0f172a;
border-bottom: 2px solid #0f172a;
}
/* 热门搜索关键词小胶囊 */
.yk-hc-tag {
display: inline-flex;
align-items: center;
padding: 4px 12px;
font-size: 12px;
font-weight: 700;
border: 2px solid #0f172a;
border-radius: 0.375rem;
box-shadow: 2px 2px 0 #0f172a;
background: #fff;
color: #0f172a;
transition: transform .15s, box-shadow .15s, background-color .15s;
text-decoration: none;
}
.yk-hc-tag:hover {
transform: translate(-1px, -1px);
box-shadow: 3px 3px 0 #0f172a;
background: #facc15;
}