/**
* 新闻列表页样式（news/list.html）
* 新闻频道样式：请在站点静态目录维护 → public/css/news/news-list.css
*/
.news-list-page .trial-right-content .container-inner {
width: 100%;
max-width: none;
margin-left: 0;
margin-right: 0;
box-sizing: border-box;
}
/* 页头区 */
.news-list-page .news-list-hero {
margin-bottom: 4px;
padding-bottom: 20px;
border-bottom: 1px solid var(--c-line);
}
.news-list-page .news-list-title {
font-size: clamp(1.25rem, 2.4vw, 1.5rem);
font-weight: 800;
color: var(--c-text);
margin: 0 0 12px;
line-height: 1.25;
letter-spacing: 0.02em;
}
.news-list-page .news-list-lead {
color: var(--c-text-2);
font-size: 0.9375rem;
line-height: 1.75;
margin: 0 0 18px;
max-width: 42rem;
}
.news-list-page .news-list-filters {
display: flex;
flex-wrap: wrap;
gap: 10px;
align-items: center;
}
.news-list-page .news-filter-chip {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 8px 16px;
border-radius: 999px;
font-size: 0.8125rem;
font-weight: 600;
color: var(--c-text-2);
background: var(--c-bg-soft);
border: 1px solid var(--c-line);
cursor: default;
user-select: none;
transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.news-list-page .news-filter-chip.is-active {
color: #fff;
background: var(--c-action);
border-color: var(--c-action);
box-shadow: 0 2px 10px rgba(var(--c-action-rgb), 0.25);
}
/* 列表：强制取消列表符号（避免 Bootstrap / 全局样式带出圆点） */
.news-list-page .news-list-section {
margin-top: 22px;
}
.news-list-page .news-article-list {
list-style: none;
list-style-type: none;
margin: 0;
padding: 0;
padding-inline-start: 0;
display: flex;
flex-direction: column;
gap: 14px;
}
.news-list-page .news-article-item {
list-style: none;
list-style-type: none;
margin: 0;
padding: 0;
display: block;
}
.news-list-page .news-article-item::before,
.news-list-page .news-article-item::marker {
display: none;
content: none;
}
/* 卡片 */
.news-list-page .news-article-card {
display: block;
position: relative;
padding: 18px 20px 18px 22px;
border-radius: var(--r-md);
border: 1px solid var(--c-line);
background: var(--c-bg-card);
box-shadow: var(--s-xs);
text-decoration: none;
color: inherit;
transition: border-color var(--ease), box-shadow var(--ease), transform 0.18s ease;
overflow: hidden;
}
.news-list-page .news-article-card::before {
content: "";
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 3px;
background: linear-gradient(180deg, var(--c-action), rgba(var(--c-action-rgb), 0.35));
opacity: 0;
transition: opacity var(--ease);
}
.news-list-page .news-article-card:hover {
border-color: var(--c-line-strong);
box-shadow: var(--s-sm);
transform: translateY(-2px);
text-decoration: none;
color: inherit;
}
.news-list-page .news-article-card:hover::before {
opacity: 1;
}
.news-list-page .news-article-meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px 12px;
font-size: 0.8125rem;
color: var(--c-text-3);
margin-bottom: 10px;
}
.news-list-page .news-article-meta time {
font-variant-numeric: tabular-nums;
color: var(--c-text-2);
font-weight: 500;
}
.news-list-page .news-article-tag {
display: inline-flex;
align-items: center;
padding: 3px 10px;
border-radius: 6px;
font-weight: 700;
font-size: 0.6875rem;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--c-action);
background: rgba(var(--c-action-rgb), 0.1);
border: 1px solid rgba(var(--c-action-rgb), 0.22);
}
.news-list-page .news-article-title {
margin: 0 0 10px;
font-size: 1.0625rem;
font-weight: 700;
color: var(--c-text);
line-height: 1.4;
}
.news-list-page .news-article-summary {
margin: 0 0 12px;
font-size: 0.875rem;
line-height: 1.65;
color: var(--c-text-2);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.news-list-page .news-article-more {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 0.8125rem;
font-weight: 700;
color: var(--c-action);
}
.news-list-page .news-article-card:hover .news-article-more {
color: var(--c-action-hover);
}
/* 分页 */
.news-list-page .news-list-pagination {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 16px;
margin-top: 28px;
padding: 16px 18px;
border-radius: var(--r-md);
border: 1px solid var(--c-line);
background: var(--c-bg-soft);
}
.news-list-page .news-page-btn {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 96px;
padding: 9px 16px;
border-radius: var(--r-sm);
font-size: 0.8125rem;
font-weight: 600;
text-decoration: none;
border: 1px solid var(--c-line);
color: var(--c-text);
background: var(--c-bg-card);
transition: background var(--ease), border-color var(--ease), color var(--ease);
box-shadow: var(--s-xs);
}
.news-list-page .news-page-btn:hover:not(.is-disabled) {
border-color: var(--c-action);
color: var(--c-action);
text-decoration: none;
box-shadow: var(--s-sm);
}
.news-list-page .news-page-btn.is-disabled {
opacity: 0.4;
cursor: not-allowed;
pointer-events: none;
box-shadow: none;
}
.news-list-page .news-page-indicator {
font-size: 0.8125rem;
font-weight: 600;
color: var(--c-text-2);
font-variant-numeric: tabular-nums;
}
/* 深色模式：对比度拉高，避免「灰字看不清」 */
html.io-dark-mode .news-list-page .news-list-lead {
color: #c4d4ea;
}
html.io-dark-mode .news-list-page .news-article-summary {
color: #b9cbe2;
}
html.io-dark-mode .news-list-page .news-article-meta time {
color: #c6d6ea;
}
html.io-dark-mode .news-list-page .news-filter-chip:not(.is-active) {
background: rgba(255, 255, 255, 0.04);
border-color: rgba(185, 203, 226, 0.22);
color: #c4d4ea;
}
html.io-dark-mode .news-list-page .news-article-tag {
background: rgba(59, 130, 246, 0.15);
border-color: rgba(59, 130, 246, 0.35);
color: #fed7aa;
}
html.io-dark-mode .news-list-page .news-article-card {
background: var(--c-bg-card);
border-color: rgba(185, 203, 226, 0.14);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.18);
}
html.io-dark-mode .news-list-page .news-list-pagination {
background: rgba(255, 255, 255, 0.03);
border-color: rgba(185, 203, 226, 0.14);
}
@media (max-width: 767px) {
.news-list-page .news-article-card {
padding: 16px 16px 16px 18px;
}
}