；
* 原有 [*] 仍渲染为 ![]()
+ 文本，故只给容器
* 留出适当的左缩进与上下间距。CSS 不限定 page-index，让论坛/详情页等
* 也享受同样的效果。
* =================================================================== */
.bbcode-list {
margin: 6px 0;
padding-left: 4px;
}
.bbcode-list .listicon {
margin-right: 6px;
}
/* ===================================================================
* 9. 响应式断点（仅作用首页主区，不触碰顶部 banner/菜单/个人信息栏）
* =================================================================== */
@media (max-width: 1200px) {
body.page-index .index-stats-group-layout {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 768px) {
body.page-index .index-card {
padding: 12px 14px 14px;
border-radius: 14px;
}
/* 横滑模式下，窄屏卡片宽度收窄一档，让一屏可见约 1.3 张卡 */
body.page-index .index-latest-resource {
flex: 0 0 300px;
grid-template-columns: 92px minmax(0, 1fr);
column-gap: 12px;
}
body.page-index .index-latest-resource__poster {
width: 92px;
/* height 由父级 aspect-ratio: 296/412 反推（≈128px），保证比例与桌面端一致 */
}
body.page-index .index-hot-resource {
--index-hot-poster-width: 122px;
flex: 0 0 166px;
padding: 11px;
row-gap: 8px;
/* 同步基类：2:3 海报(122→183) + row-gap 8 + 评分行 ~22 + 标题 18 + content gap 2 + meta 20 ≈ 253 */
contain-intrinsic-size: auto 166px auto 253px;
}
body.page-index .index-card__head {
gap: 6px;
}
body.page-index .index-card__title {
font-size: 13px;
}
body.page-index .index-hot-resource__title-meta,
body.page-index .index-latest-resource__title-meta {
max-width: 100%;
}
body.page-index .index-news-item__head {
grid-template-columns: auto minmax(0, 1fr) auto;
}
body.page-index .index-news-item__date {
text-align: left;
}
body.page-index .index-stats-chart-grid {
grid-template-columns: 1fr;
}
body.page-index .index-stats-chart {
height: 180px;
}
body.page-index .index-stats-group-layout {
grid-template-columns: 1fr;
}
body.page-index .index-stats-group:last-child {
grid-column: auto;
}
body.page-index .index-stats-grid,
body.page-index .index-stats-group:last-child .index-stats-grid {
grid-template-columns: 1fr;
}
body.page-index .index-stats-group__meta {
text-align: left;
}
body.page-index .index-poll__option-row {
grid-template-columns: minmax(0, 1fr) 3.5em;
gap: 5px 8px;
}
body.page-index .index-poll__option-label {
grid-column: 1 / -1;
text-align: left;
}
body.page-index .index-poll__option-bar {
grid-column: 1;
}
body.page-index .index-poll__option-pct {
grid-column: 2;
}
body.page-index .index-poll__option-votes {
grid-column: 1 / -1;
text-align: left;
}
}
@media (max-width: 640px) {
body.page-index {
--site-shell-side-gap: 2px;
}
body.page-index #outer > table.main {
width: 100% !important;
min-width: 0 !important;
}
body.page-index #outer > table.main > tbody > tr > td.embedded {
width: 100% !important;
min-width: 0 !important;
}
body.page-index .index-card {
padding-left: 10px;
padding-right: 10px;
border-radius: 13px;
}
}
@media (max-width: 480px) {
body.page-index #outer {
padding-left: 2px !important;
padding-right: 2px !important;
}
body.page-index .index-card {
padding-left: 9px;
padding-right: 9px;
}
}
@media (max-width: 480px) {
/* 移动端：最新上传卡片宽度再收窄到 220px，海报缩到 78×110，标题区相对更宽，
* 一屏正好可见 ~1.2 张卡，引导用户横滑 */
body.page-index .index-latest-resource {
flex: 0 0 250px;
grid-template-columns: 78px minmax(0, 1fr);
column-gap: 10px;
}
body.page-index .index-latest-resource__poster {
width: 78px;
/* height 由父级 aspect-ratio: 296/412 反推（≈108.6px），保证比例与桌面端一致 */
}
body.page-index .index-hot-resource {
--index-hot-poster-width: 108px;
flex: 0 0 150px;
padding: 10px;
/* 同步基类：2:3 海报(108→162) + row-gap 8 + 评分行 ~22 + 标题 18 + content gap 2 + meta 20 ≈ 232 */
contain-intrinsic-size: auto 150px auto 232px;
}
body.page-index .index-card__action-link {
font-size: 10px;
padding: 1px 8px;
}
}
/* ===================================================================
* 10. 近期热门 / 推荐 区域视觉现代化
* 仅作用于四个横滑卡片块（热门影视 / 热门动画 / 豆瓣推荐 / TMDB推荐，
* 均以 .index-hot-resource 渲染单卡，外层 .index-card--hot-movies /
* --hot-anim / --douban-recommend / --tmdb-recommend）。
* 不触碰"最新上传"(.index-latest-resource) / 投票 / 趣味盒 / 统计等卡片。
*
* 本节实现四项改造：
* #2 海报信息层次 / hover 交互：海报抬升 + 放大 + 阴影加深 + 渐变遮罩浮出
* #3 去框感：去掉每张小卡的边框/底色/投影，让海报本身成为主视觉
* #4 区块标题与筛选 tab：标题加大加重 + segmented 主题色激活态 + 计数上标弱化
* #6 细节统一：统一圆角/阴影 token + 海报骨架占位（懒加载未到位前的 shimmer）
*
* 放在文件末尾、所有移动端断点之后；本节"全局规则"只改这些断点未涉及的
* 视觉属性（边框/阴影/圆角/底色/tab/遮罩），故对移动端只做同款视觉增强、
* 不改尺寸；"结构调整"（卡宽 / 内距 / 海报铺满 / 占位高度 / 标题字号）一律
* 包进 @media (min-width: 769px)，与移动端 (max-width:768) 互斥，
* 已调好的窄屏断点完全不受影响。
* =================================================================== */
/* —— 统一设计 token（#6）—— */
body.page-index {
--idx-poster-radius: 13px;
--idx-poster-shadow: 0 4px 12px rgba(49, 66, 96, .14), 0 1px 3px rgba(49, 66, 96, .10);
--idx-poster-shadow-hover: 0 14px 30px rgba(49, 66, 96, .22), 0 6px 14px rgba(184, 122, 58, .16);
--idx-accent: #bd8a45;
--idx-accent-strong: #9a6526;
}
/* —— 外层板块面板：上下内距略收，让海报区更聚焦（仅四个热门/推荐块）—— */
body.page-index .index-card--hot-movies,
body.page-index .index-card--hot-anim,
body.page-index .index-card--douban-recommend,
body.page-index .index-card--tmdb-recommend {
padding-top: 12px;
padding-bottom: 10px;
}
/* —— #3 去框感：单卡不再画边框/底色/投影，posters 直接浮在板块面板上 —— */
body.page-index .index-hot-resource {
border: 0;
background: none;
box-shadow: none;
border-radius: 0;
}
/* —— 标题/文案左对齐：贴近主流影视墙（Netflix / TMDB）—— */
body.page-index .index-hot-resource__content {
text-align: left;
}
/* hover 不再恢复旧卡框，只整卡轻微上抬（阴影改由海报承载） */
body.page-index .index-hot-resource:hover {
background: none;
border-color: transparent;
box-shadow: none;
transform: translateY(-4px);
}
/* —— #6 海报：统一圆角/阴影 + 骨架占位 shimmer —— */
body.page-index .index-hot-resource__poster {
border: 0;
border-radius: var(--idx-poster-radius);
box-shadow: var(--idx-poster-shadow);
/* 懒加载海报未到位前的骨架：浅灰底 + 缓慢扫光；图片加载后铺满覆盖 */
background-color: #eef1f6;
background-image: linear-gradient(100deg,
rgba(255, 255, 255, 0) 20%,
rgba(255, 255, 255, .55) 50%,
rgba(255, 255, 255, 0) 80%);
background-size: 200% 100%;
background-repeat: no-repeat;
animation: idxPosterShimmer 1.5s ease-in-out infinite;
transition: box-shadow .3s ease, transform .32s cubic-bezier(.22, .61, .36, 1);
}
@keyframes idxPosterShimmer {
0% { background-position: 150% 0; }
100% { background-position: -50% 0; }
}
/* —— #2 hover 交互：海报阴影加深 + 海报内图放大 + 底部渐变遮罩浮出 —— */
body.page-index .index-hot-resource:hover .index-hot-resource__poster {
box-shadow: var(--idx-poster-shadow-hover);
}
body.page-index .index-hot-resource:hover .index-hot-resource__poster > img {
transform: scale(1.06);
filter: contrast(1.05) saturate(1.06) brightness(.9);
}
/* —— #E 海报顶部常驻渐变 scrim ——
* 右上角的"类型 · 年份"角标是白字，压在浅色海报上会发虚。这里给海报顶部叠一层
* 很淡的常驻渐变（top→透明），保证角标在任何海报上都清晰，同时带来影视墙的纵深感。
* z-index:1 位于海报图之上、评分 overlay(z2) 与角标(z3) 之下，不遮挡既有信息。 */
body.page-index .index-hot-resource__poster::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 38%;
background: linear-gradient(to bottom, rgba(0, 0, 0, .32), rgba(0, 0, 0, 0));
border-radius: var(--idx-poster-radius) var(--idx-poster-radius) 0 0;
pointer-events: none;
z-index: 1;
}
/* —— #F hover 浮现「搜索资源」图标 ——
* 默认隐藏，hover 时居中柔和淡入并轻微回弹放大，给"可点击进入"的明确反馈。
* 卡片点击实际跳转站内资源搜索（torrents.php?search=...），故用放大镜图标而非
* 播放三角，避免"播放视频"的误导，与真实动作保持一致。
* 视觉：去掉圆形磨砂底，只留一枚干净的白色描边放大镜；靠 drop-shadow 投影保证在
* 任意底色海报（含浅色海报）上都清晰可读，更轻盈通透。
* 过渡：opacity/transform 时长拉长并统一缓动，配合海报放大+压暗，让"图标 + 海报"
* 作为一段连贯动作浮现，消除原先几段快动作拼接的生硬感。
* z-index:2 与评分浮层同层、位于角标(z3)之下；pointer-events:none 让点击穿透到 。 */
body.page-index .index-hot-resource__poster::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 40px;
height: 40px;
transform: translate(-50%, -46%) scale(.62);
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M21 21l-5.3-5.3'/%3E%3C/svg%3E") 50% 50% / contain no-repeat;
filter: drop-shadow(0 2px 5px rgba(0, 0, 0, .55)) drop-shadow(0 0 1px rgba(0, 0, 0, .65));
opacity: 0;
transition: opacity .26s ease, transform .36s cubic-bezier(.34, 1.32, .56, 1);
pointer-events: none;
z-index: 2;
}
body.page-index .index-hot-resource:hover .index-hot-resource__poster::after {
opacity: 1;
transform: translate(-50%, -50%) scale(1);
transition-delay: .04s;
}
/* —— #4 筛选 tab：segmented 控件 + 主题色激活态 + 计数上标弱化 —— */
body.page-index .index-hot-resource-tabs {
gap: 2px;
padding: 3px;
border-color: transparent;
background: rgba(150, 120, 84, .10);
}
body.page-index .index-hot-resource-tabs__button {
padding: 3px 12px;
color: #8c7d6b;
border-radius: 999px;
letter-spacing: .02em;
}
body.page-index .index-hot-resource-tabs__button em {
margin-left: 3px;
font-size: 9px;
font-weight: 700;
vertical-align: 2px; /* 计数"上标化"，弱化为辅助信息 */
opacity: .62;
}
body.page-index .index-hot-resource-tabs__button:hover:not(.is-active),
body.page-index .index-hot-resource-tabs__button:focus-visible:not(.is-active) {
color: #7a4f20;
background: rgba(255, 247, 235, .7);
}
body.page-index .index-hot-resource-tabs__button.is-active {
color: #fff;
background: linear-gradient(180deg, var(--idx-accent), var(--idx-accent-strong));
box-shadow: 0 2px 7px rgba(160, 106, 38, .30);
}
body.page-index .index-hot-resource-tabs__button.is-active em {
color: rgba(255, 255, 255, .9);
opacity: 1;
}
/* —— 降低动效：尊重 prefers-reduced-motion —— */
@media (prefers-reduced-motion: reduce) {
body.page-index .index-hot-resource__poster {
animation: none;
}
body.page-index .index-hot-resource,
body.page-index .index-hot-resource__poster,
body.page-index .index-hot-resource__poster > img,
body.page-index .index-hot-resource__poster::after {
transition: none;
}
}
/* —— 桌面端结构调整（#3 海报铺满卡宽 / #4 标题加大）——
* 与移动端 (max-width:768) 互斥，窄屏断点保持原有调校不受影响。 */
@media (min-width: 769px) {
/* 卡片收窄并贴合海报，去掉内边距让海报成为卡片主体；
* 海报放大一档（170px），占位高度按新高度重算，避免横滑滚动条跳变：
* 海报(170×412/296≈237) + row-gap 8 + 标题 ~18 + meta ~16 ≈ 279 */
body.page-index .index-hot-resource {
flex-basis: 170px;
padding: 0 0 2px;
row-gap: 8px;
/* 2:3 海报(170→255) + row-gap 8 + 评分行 ~22 + 标题 ~18 + meta ~16 ≈ 319 */
contain-intrinsic-size: auto 170px auto 319px;
}
body.page-index .index-hot-resource__poster,
body.page-index .index-hot-resource__content {
width: 100%;
}
/* 区块标题：仅四个热门/推荐块加大加重，并把竖条换成主题色渐变（#4）。
* 选择器特异度高于全站 .index-card__title，不影响其它卡片。 */
body.page-index .index-card--hot-movies .index-card__title,
body.page-index .index-card--hot-anim .index-card__title,
body.page-index .index-card--douban-recommend .index-card__title,
body.page-index .index-card--tmdb-recommend .index-card__title {
font-size: 15px;
}
body.page-index .index-card--hot-movies .index-card__title::before,
body.page-index .index-card--hot-anim .index-card__title::before,
body.page-index .index-card--douban-recommend .index-card__title::before,
body.page-index .index-card--tmdb-recommend .index-card__title::before {
width: 4px;
height: 15px;
background: linear-gradient(180deg, var(--idx-accent), var(--idx-accent-strong));
}
}
/* ===================================================================
* 11. P1/P2 续：标题对齐统一 + 区块差异化 + 评分浮层收敛
* =================================================================== */
/* —— P1：标题与下方"国家 · 类型"同左基线 ——
* #2 现代化时已把 .index-hot-resource__content 设为左对齐，但 title-head
* 仍残留 justify-content:center，导致"标题居中、meta 靠左"的错位。这里统一为
* 左对齐，让 海报 / 标题 / meta 三者共用同一条左基线（主流影视墙做法）。 */
body.page-index .index-hot-resource__title-head {
justify-content: flex-start;
}
/* —— P2(a)：四个区块各自的主题色 ——
* 仅覆写 --idx-accent / --idx-accent-strong，标题竖条渐变(::before)、
* 激活态 tab、来源标识胶囊都会继承，形成区块色彩节奏：
* 站内热门=暖金 / 动画=玫瑰 / 豆瓣=豆瓣绿 / TMDB=青蓝 */
body.page-index .index-card--hot-movies {
--idx-accent: #c2913f;
--idx-accent-strong: #99661f;
}
body.page-index .index-card--hot-anim {
--idx-accent: #c46f93;
--idx-accent-strong: #9a4569;
}
body.page-index .index-card--douban-recommend {
--idx-accent: #3f9d5d;
--idx-accent-strong: #2c7644;
}
body.page-index .index-card--tmdb-recommend {
--idx-accent: #3a9fb2;
--idx-accent-strong: #1f7888;
}
/* —— P2(b)：来源标识 —— 把标题旁的 aux 文本做成跟随区块主题色的轻量胶囊。
* bg/border 用各自 RGBA 显式写出（不依赖 color-mix，老浏览器也稳）。 */
body.page-index .index-card--hot-movies .index-card__title-aux,
body.page-index .index-card--hot-anim .index-card__title-aux,
body.page-index .index-card--douban-recommend .index-card__title-aux,
body.page-index .index-card--tmdb-recommend .index-card__title-aux {
margin-left: 0;
padding: 1px 8px;
font-size: 11px;
font-weight: 600;
letter-spacing: .02em;
line-height: 1.5;
color: var(--idx-accent-strong);
background: rgba(150, 120, 84, .10);
border: 1px solid rgba(150, 120, 84, .24);
border-radius: 999px;
}
body.page-index .index-card--hot-anim .index-card__title-aux {
background: rgba(196, 111, 147, .12);
border-color: rgba(196, 111, 147, .30);
}
body.page-index .index-card--douban-recommend .index-card__title-aux {
background: rgba(63, 157, 93, .12);
border-color: rgba(63, 157, 93, .30);
}
body.page-index .index-card--tmdb-recommend .index-card__title-aux {
background: rgba(58, 159, 178, .12);
border-color: rgba(58, 159, 178, .30);
}
/* —— 方案1：玻璃评分条上的 logo 统一漂白成单色 ——
* brightness(0) 先把 logo 压成纯黑，再 invert(1) 翻成纯白 → 任意品牌色 logo 都变白，
* 色彩噪点从 4 个 logo 收敛到数字一处；drop-shadow 保证白 logo 在亮海报上仍有边界。 */
body.page-index .index-card__poster-ratings .index-card-rating img {
filter: brightness(0) invert(1) drop-shadow(0 1px 1.5px rgba(0, 0, 0, .55));
}