@windcoder/astro-theme-orchid 0.3.0 → 0.4.1

package/src/styles/global.css

@@ -191,6 +191,35 @@ html.dark a:hover {
 	backdrop-filter: blur(14px);
 	border-bottom: 1px solid var(--border);
 }
+/* 壁纸导航栏透明形态（§4.98）：html[data-wallpaper-nav] = semi/semifull/full/solid，
+   solid 走上方基础规则无需覆盖；wp-scrolled 由 app.ts 滚动监听切换 */
+html[data-wallpaper-nav="semi"] .site-header {
+	background: color-mix(in srgb, var(--bg) 55%, transparent);
+	-webkit-backdrop-filter: blur(var(--wp-nav-blur, 5px));
+	backdrop-filter: blur(var(--wp-nav-blur, 5px));
+	border-bottom-color: transparent;
+}
+html[data-wallpaper-nav="semi"].wp-scrolled .site-header,
+html[data-wallpaper-nav="semifull"].wp-scrolled .site-header {
+	background: color-mix(in srgb, var(--bg) 78%, transparent);
+	-webkit-backdrop-filter: blur(14px);
+	backdrop-filter: blur(14px);
+	border-bottom-color: var(--border);
+}
+html[data-wallpaper-nav="semifull"] .site-header,
+html[data-wallpaper-nav="full"] .site-header {
+	background: transparent;
+	-webkit-backdrop-filter: none;
+	backdrop-filter: none;
+	border-bottom-color: transparent;
+}
+/* 移动端菜单展开时强制实底，保证导航可读性（特异性高于形态规则） */
+html[data-wallpaper-nav] .site-header:has(.site-nav.open) {
+	background: color-mix(in srgb, var(--bg) 92%, transparent);
+	-webkit-backdrop-filter: blur(14px);
+	backdrop-filter: blur(14px);
+	border-bottom-color: var(--border);
+}
 .header-inner {
 	display: flex;
 	align-items: center;
@@ -651,31 +680,360 @@ html.dark #modeToggle .i-sun {
 	color: var(--muted);
 	text-align: center;
 }
+/* §4.104 浮层超出上限时的「查看全部 N 条结果」入口 */
+.search-more {
+	display: block;
+	padding: 11px 14px;
+	border-top: 1px solid var(--border);
+	background: var(--bg-soft);
+	text-align: center;
+	font-size: 13px;
+	color: var(--accent-ink);
+	transition: background-color 0.15s;
+}
+.search-more:hover {
+	background: var(--accent-soft);
+}
 
-/* ---------- 3.5 背景壁纸（§4.35，banner 单模式） ---------- */
-/* Header 为 sticky 且背景半透明 + 毛玻璃：负 margin 让横幅上缘滑入 Header 底下 */
-.wallpaper-banner {
+/* ---------- 独立搜索页（§4.104，/search/）：静态外壳 + 客户端查询分页 ---------- */
+.search-page {
+	max-width: 760px;
+	margin: 0 auto;
+}
+.search-page-bar {
+	display: flex;
+	align-items: center;
+	gap: 10px;
+	height: 46px;
+	padding: 0 16px;
+	border: 1px solid var(--border);
+	border-radius: 12px;
+	background: var(--surface);
+	color: var(--muted);
+	transition:
+		border-color 0.15s,
+		color 0.15s;
+}
+.search-page-bar:focus-within {
+	border-color: var(--accent-ink);
+	color: var(--ink-2);
+}
+.search-page-bar svg {
+	width: 18px;
+	height: 18px;
+	flex: none;
+}
+.search-page-bar input {
+	flex: 1;
+	min-width: 0;
+	border: none;
+	outline: none;
+	background: transparent;
+	font: inherit;
+	font-size: 16px;
+	color: var(--ink);
+}
+.search-page-bar input::placeholder {
+	color: var(--muted);
+}
+.search-page-bar input::-webkit-search-cancel-button {
+	-webkit-appearance: none;
+}
+.search-page-meta {
+	margin-top: 14px;
+	font-size: 13px;
+	color: var(--muted);
+}
+.search-page-results {
+	margin-top: 4px;
+}
+.search-page-results .search-item {
+	padding: 14px 4px;
+}
+.search-page-results .search-item:hover {
+	background: transparent;
+}
+.search-page-results .search-item:hover .search-item-title {
+	color: var(--accent-ink);
+}
+.search-page-results .search-item-title {
+	font-size: 15.5px;
+	font-weight: 600;
+}
+.search-page-results .search-item-excerpt {
+	margin-top: 4px;
+	font-size: 13px;
+	-webkit-line-clamp: 3;
+}
+
+/* ---------- 3.5 统一壁纸体系（§4.98）：单一 .wp-stage + html[data-wallpaper-mode] 四形态 ---------- */
+/* 形态语义：
+   banner     横幅——文档流内定高，负 margin 让上缘滑入 sticky Header 底下；
+   fullscreen 全屏首屏——文档流内 100vh，同样负 margin；
+   overlay    覆盖透明——fixed 垫底（z-index:-1），正文卡片按 --wp-card-opacity 半透明透出壁纸；
+   none       纯色——stage display:none，页面回退 body 画布底色 */
+.wp-stage {
 	position: relative;
-	height: var(--banner-h, 32vh);
-	margin-top: calc(-1 * var(--header-h));
 	overflow: hidden;
 }
-.wallpaper-banner img {
-	display: block;
+html[data-wallpaper-mode="banner"] .wp-stage {
+	height: var(--banner-h, 60vh);
+	margin-top: calc(-1 * var(--header-h));
+}
+/* fullscreen 首页独占一屏；非首页降级（§4.98）：classic→banner 高度，hero→overlay fixed 垫底 */
+html[data-wallpaper-mode="fullscreen"][data-wp-is-home] .wp-stage {
+	height: 100vh;
+	margin-top: calc(-1 * var(--header-h));
+}
+html[data-wallpaper-mode="fullscreen"]:not([data-wp-is-home]):not(
+		[data-wp-fs-layout="hero"]
+	)
+	.wp-stage {
+	height: var(--banner-h, 60vh);
+	margin-top: calc(-1 * var(--header-h));
+}
+html[data-wallpaper-mode="fullscreen"]:not(
+		[data-wp-is-home]
+	)[data-wp-fs-layout="hero"]
+	.wp-stage {
+	position: fixed;
+	inset: 0;
+	height: auto;
+	margin-top: 0;
+	z-index: -1;
+	pointer-events: none;
+	opacity: var(--wp-overlay-opacity, 0.8);
+}
+/* overlay：fixed 垫底叠在 body 传播的画布底色之上、内容之下；整体 opacity 控制透出强度 */
+html[data-wallpaper-mode="overlay"] .wp-stage {
+	position: fixed;
+	inset: 0;
+	z-index: -1;
+	pointer-events: none;
+	opacity: var(--wp-overlay-opacity, 0.8);
+}
+/* none 模式与 homeOnly 非首页：banner/fullscreen 形态下不渲染（overlay 天然全站忽略隐藏） */
+html[data-wallpaper-mode="none"] .wp-stage,
+html[data-wallpaper-mode="banner"] .wp-stage[data-wallpaper-hidden],
+html[data-wallpaper-mode="fullscreen"] .wp-stage[data-wallpaper-hidden] {
+	display: none;
+}
+
+/* 底部衔接（§4.98 banner / fullscreen-classic，对齐 Firefly 首屏布局）：
+   内容区上拉 --wp-overlap 覆盖 stage 底缘，分类导航条半压壁纸；
+   stage 底部 ::after 渐隐（透明 → var(--bg)），壁纸自然过渡到正文纯色背景。
+   hero 布局（fixed 整屏 + 100vh 下推）与 overlay（fixed 全站垫底）不适用；
+   stage 隐藏（homeOnly 非首页 / JS 切走）时取消上拉，避免正文被 sticky Header 裁切 */
+/* 仅 banner 与非首页 fullscreen-classic 上拉；fullscreen 首页独占一屏不上拉 */
+html[data-wallpaper-mode="banner"]:not([data-wp-stage-hidden]) .site-main,
+html[data-wallpaper-mode="fullscreen"]:not([data-wp-is-home]):not(
+		[data-wp-fs-layout="hero"]
+	):not([data-wp-stage-hidden])
+	.site-main {
+	/* 上拉后与 stage 产生重叠：stage 是 positioned（z-auto），card 多为 static 会被其盖住；
+	   给 main 补 position 使其按 DOM 序（stage 前 main 后）压回壁纸之上 */
+	position: relative;
+	margin-top: calc(-1 * var(--wp-overlap, 64px));
+}
+html[data-wallpaper-mode="banner"] .wp-stage::after,
+html[data-wallpaper-mode="fullscreen"]:not([data-wp-is-home]):not(
+		[data-wp-fs-layout="hero"]
+	)
+	.wp-stage::after {
+	content: "";
+	position: absolute;
+	inset: auto 0 0 0;
+	height: calc(var(--wp-overlap, 64px) + 56px);
+	background: linear-gradient(to bottom, transparent, var(--bg));
+	pointer-events: none;
+}
+
+/* 图片层：desktop/mobile 分端渲染；<768px 优先 mobile 源，未配置 mobile 时 desktop 层全宽兜底 */
+.wp-images {
+	position: absolute;
+	inset: 0;
+}
+.wp-img {
 	width: 100%;
 	height: 100%;
 	object-fit: cover;
+	opacity: 0;
+	transition:
+		opacity 0.8s ease,
+		transform 0.8s ease;
+}
+.wp-img.active {
+	opacity: 1;
+}
+html[data-wallpaper-mode="banner"] .wp-img,
+html[data-wallpaper-mode="fullscreen"]:not([data-wp-is-home]):not(
+		[data-wp-fs-layout="hero"]
+	)
+	.wp-img {
 	object-position: var(--banner-pos, center);
 }
-/* 黑蒙层：深浅模式同色（orchid-blog 口径），只保证压暗不改变色调 */
-.wallpaper-dim {
+html[data-wallpaper-mode="fullscreen"][data-wp-is-home] .wp-img {
+	object-position: var(--fs-pos, center);
+}
+.wp-mobile {
+	display: none;
+}
+@media (max-width: 767px) {
+	.wp-mobile {
+		display: block;
+	}
+	/* :has 兜底"未配置 mobile 源"场景：desktop 层后方无 mobile 兄弟时保持显示 */
+	.wp-desktop:has(~ .wp-mobile) {
+		display: none;
+	}
+}
+/* overlay 形态的图片模糊/放大补偿（服务端算好 scale 防边缘露底），与 body 级旧口径一致；
+   非首页 fullscreen-hero 降级为 overlay，复用同一套模糊参数 */
+html[data-wallpaper-mode="overlay"] .wp-img,
+html[data-wallpaper-mode="fullscreen"]:not(
+		[data-wp-is-home]
+	)[data-wp-fs-layout="hero"]
+	.wp-img {
+	filter: blur(var(--wp-overlay-blur, 0px));
+	transform: scale(var(--wp-overlay-scale, 1));
+}
+
+/* 轮播过渡（§4.98 carousel）：opacity 交叉淡化为基础，其余效果经 data-effect 加成；
+   --wp-interval 由 JS 写入 stage，使 kenburns/zoom 动画时长与轮换间隔一致 */
+.wp-stage[data-effect="slide"] .wp-img {
+	transform: translateX(48px);
+}
+.wp-stage[data-effect="slide"] .wp-img.active {
+	transform: translateX(0);
+}
+.wp-stage[data-effect="zoom"] .wp-img.active {
+	animation: wpZoom var(--wp-interval, 5s) ease-out forwards;
+}
+.wp-stage[data-effect="kenburns"] .wp-img.active {
+	animation: wpKenburns var(--wp-interval, 5s) linear forwards;
+}
+@keyframes wpZoom {
+	from {
+		transform: scale(1.1);
+	}
+	to {
+		transform: scale(1);
+	}
+}
+@keyframes wpKenburns {
+	from {
+		transform: scale(1) translate(0, 0);
+	}
+	to {
+		transform: scale(1.12) translate(-1.5%, 1%);
+	}
+}
+
+/* 视频壁纸层：默认不加载不显示（preload=none、无 src），播放态淡入盖过图片层 */
+.wp-video {
 	position: absolute;
 	inset: 0;
-	background: rgba(0, 0, 0, var(--banner-dim, 0.2));
+	width: 100%;
+	height: 100%;
+	object-fit: cover;
+	opacity: 0;
+	transition: opacity 0.6s ease;
+	pointer-events: none;
+}
+.wp-stage[data-video-playing] .wp-video {
+	opacity: 1;
+}
+.wp-stage[data-video-playing] .wp-images {
+	opacity: 0;
+	transition: opacity 0.6s ease;
+}
+/* 播放/暂停双图标显隐（is-playing 由 app.ts 依 video.play/pause 事件切换） */
+#wpPlayerToggle .i-pause {
+	display: none;
+}
+#wpPlayerToggle.is-playing .i-play {
+	display: none;
+}
+#wpPlayerToggle.is-playing .i-pause {
+	display: block;
+}
+
+/* 蒙层：浅/暗双档不透明度（--wp-dim / --wp-dim-dark），压暗壁纸保证前景可读 */
+.wp-dim {
+	position: absolute;
+	inset: 0;
+	background: rgb(0 0 0 / var(--wp-dim, 0.2));
+}
+html.dark .wp-dim {
+	background: rgb(0 0 0 / var(--wp-dim-dark, 0.65));
+}
+
+/* 底部渐变装饰：压暗底缘承托波浪与 hero，分端显隐与图片层同口径 */
+.wp-gradient {
+	position: absolute;
+	inset: auto 0 0 0;
+	height: var(--wp-grad-h, 10%);
+	background: linear-gradient(to top, rgb(0 0 0 / 0.35), transparent);
+	pointer-events: none;
+}
+.wp-gradient.is-mobile {
+	display: none;
+}
+@media (max-width: 767px) {
+	.wp-gradient.is-mobile {
+		display: block;
+	}
+	.wp-gradient.is-desktop {
+		display: none;
+	}
+}
+
+/* 底部波浪装饰：双层错相反向平移（200% 宽无缝循环） */
+.wp-waves {
+	position: absolute;
+	inset: auto 0 0 0;
+	height: 90px;
+	pointer-events: none;
 }
-/* hero 叠加（§4.39）：首页 hero 启用时主句/副句居中压到 banner 上；
-   banner 上缘滑入 Header 底下（负 margin），文字区加 padding-top 补偿做视觉居中 */
-.wallpaper-hero {
+.wp-waves .wave {
+	position: absolute;
+	bottom: 0;
+	left: 0;
+	width: 200%;
+	height: 100%;
+	fill: rgb(255 255 255 / 0.16);
+}
+.wp-waves .wave.w1 {
+	animation: wpWave 14s linear infinite;
+}
+.wp-waves .wave.w2 {
+	fill: rgb(255 255 255 / 0.1);
+	animation: wpWave 22s linear infinite reverse;
+}
+@keyframes wpWave {
+	from {
+		transform: translateX(0);
+	}
+	to {
+		transform: translateX(-50%);
+	}
+}
+.wp-waves.is-mobile {
+	display: none;
+}
+@media (max-width: 767px) {
+	.wp-waves.is-mobile {
+		display: block;
+	}
+	.wp-waves.is-desktop {
+		display: none;
+	}
+}
+
+/* hero 叠加（§4.98 homeText）：主句/副句居中压在壁纸可视区上；字号走 stage 级变量；
+   上缘滑入 Header 底下（负 margin）且底缘被内容上拉覆盖（--wp-overlap），文字区
+   padding-top/bottom 双向补偿，保证视觉居中不被导航遮挡、不压分类导航条 */
+.wp-hero {
 	position: absolute;
 	inset: 0;
 	z-index: 1;
@@ -686,45 +1044,503 @@ html.dark #modeToggle .i-sun {
 	padding: var(--header-h) 24px 0;
 	text-align: center;
 }
-.wallpaper-hero .hero-quote {
+/* banner 底缘被内容上拉覆盖（--wp-overlap），文字区底部同步补偿保持视觉居中、
+   不压分类导航条；非首页 fullscreen-classic 降级为 banner 同样适用 */
+html[data-wallpaper-mode="banner"] .wp-hero,
+html[data-wallpaper-mode="fullscreen"]:not([data-wp-is-home]):not(
+		[data-wp-fs-layout="hero"]
+	)
+	.wp-hero {
+	padding-bottom: var(--wp-overlap, 64px);
+}
+/* 字号随窗口流体缩放：配置值为上限（宽屏保持大气），窄屏按 vw 平滑收缩，无需断点 */
+.wp-hero .hero-quote {
+	font-size: clamp(1.8rem, 6vw + 1rem, var(--wp-hero-title-size, 3.8rem));
 	color: #fff;
 	text-shadow: 0 2px 16px rgba(0, 0, 0, 0.45);
 }
-/* banner 上强调色需提亮：accent-ink 在黑蒙层上偏暗，混入白色保证可读 */
-.wallpaper-hero .hero-quote em {
+/* 壁纸上强调色需提亮：accent-ink 在黑蒙层上偏暗，混入白色保证可读 */
+.wp-hero .hero-quote em {
 	color: color-mix(in srgb, var(--accent) 45%, #fff);
 }
-.wallpaper-hero .hero-sub {
+.wp-hero .hero-sub {
+	min-height: 1.75em;
+	margin-top: 14px;
+	font-size: clamp(1rem, 2.5vw + 0.5rem, var(--wp-hero-sub-size, 1.5rem));
 	color: rgba(255, 255, 255, 0.88);
 	text-shadow: 0 1px 10px rgba(0, 0, 0, 0.4);
 }
 
-/* ---------- 3.5b 全站背景壁纸（§4.92）：fixed 视口背景，与顶部 banner（§4.42）独立 ---------- */
-/* body 背景传播为画布底色：负 z-index 定位子元素画在其上、内容之下——壁纸加载中仍有底色兜底，
-   body 自身的径向渐变装饰同样在画布层，被壁纸自然覆盖 */
-.site-wallpaper {
+/* 全屏首屏滚动提示（§4.98 fullscreen）：底部靠上居中悬浮，上下浮动引导；
+   点击平滑滚过首屏（onclick scrollIntoView）。SSR 始终渲染、CSS 按模式门控显隐，
+   访客切到 fullscreen 即可用；hero 布局滚动后随 hero 一起淡出 */
+.wp-scroll-hint {
+	display: none;
+	position: absolute;
+	left: 50%;
+	bottom: 9vh;
+	transform: translateX(-50%);
+	z-index: 1;
+	align-items: center;
+	justify-content: center;
+	width: 44px;
+	height: 44px;
+	padding: 0;
+	border: none;
+	border-radius: 50%;
+	background: rgb(255 255 255 / 0.16);
+	-webkit-backdrop-filter: blur(6px);
+	backdrop-filter: blur(6px);
+	color: #fff;
+	cursor: pointer;
+	animation: wpScrollHint 2.2s ease-in-out infinite;
+	transition:
+		background 0.2s,
+		opacity 0.5s ease;
+}
+/* 仅 fullscreen 首页可见（banner/overlay/none 与非首页降级保持 display:none） */
+html[data-wallpaper-mode="fullscreen"][data-wp-is-home] .wp-scroll-hint {
+	display: flex;
+}
+.wp-scroll-hint:hover {
+	background: rgb(255 255 255 / 0.28);
+}
+.wp-scroll-hint svg {
+	width: 22px;
+	height: 22px;
+}
+@keyframes wpScrollHint {
+	0%,
+	100% {
+		transform: translateX(-50%) translateY(0);
+	}
+	50% {
+		transform: translateX(-50%) translateY(10px);
+	}
+}
+@media (prefers-reduced-motion: reduce) {
+	.wp-scroll-hint {
+		animation: none;
+	}
+}
+/* hero 布局：stage fixed 且 pointer-events:none，箭头需单独恢复可点击；
+   滚动后随 .wp-hero 同步淡出 */
+html[data-wallpaper-mode="fullscreen"][data-wp-fs-layout="hero"]
+.wp-scroll-hint {
+	pointer-events: auto;
+}
+html[data-wallpaper-mode="fullscreen"][data-wp-fs-layout="hero"].wp-scrolled
+	.wp-scroll-hint {
+	opacity: 0;
+	pointer-events: none;
+}
+
+/* 打字机光标（§4.98 typewriter）：span.typewriter 文本后闪烁竖线 */
+.typewriter::after {
+	content: "|";
+	margin-left: 2px;
+	color: rgba(255, 255, 255, 0.85);
+	animation: wpCursor 1s step-end infinite;
+}
+@keyframes wpCursor {
+	0%,
+	100% {
+		opacity: 1;
+	}
+	50% {
+		opacity: 0;
+	}
+}
+
+/* overlay 形态正文卡片半透明（§4.98 overlay.cardOpacity）：壁纸从页缝与卡片间隙透出；
+   --wp-card-opacity 由 SSR 输出为百分比字面量 */
+html[data-wallpaper-mode="overlay"] .card {
+	background: color-mix(
+		in srgb,
+		var(--surface) var(--wp-card-opacity, 50%),
+		transparent
+	);
+}
+
+/* 动画减免偏好：波浪/推近类装饰动画静止（交叉淡化保留，不影响可读性） */
+@media (prefers-reduced-motion: reduce) {
+	.wp-waves .wave,
+	.wp-stage[data-effect="kenburns"] .wp-img.active,
+	.wp-stage[data-effect="zoom"] .wp-img.active {
+		animation: none;
+	}
+}
+
+/* ---------- 3.5b 全屏 hero 布局（§4.103 fullscreen.layout=hero） ----------
+   与 classic 的差异：滚下后壁纸 fixed 铺满 + 模糊渐变过渡，卡片浮于模糊壁纸上；
+   classic 滚下后正文区纯色背景（旧行为，无需额外规则）。
+   首屏两种布局一致：壁纸占满一屏 + 中央 hero 文案。 */
+html[data-wallpaper-mode="fullscreen"][data-wp-fs-layout="hero"][data-wp-is-home]
+.wp-stage {
 	position: fixed;
 	inset: 0;
+	height: auto;
+	margin-top: 0;
 	z-index: -1;
-	overflow: hidden;
 	pointer-events: none;
 }
-.site-wallpaper img {
-	width: 100%;
-	height: 100%;
-	object-fit: cover;
-	filter: blur(var(--wp-blur, 0px));
-	/* 模糊边缘泛出透明底：按模糊量轻微放大补偿（服务端算好 --wp-scale） */
-	transform: scale(var(--wp-scale, 1));
+/* 首屏让给 hero：正文流向下推一屏，滚上后覆盖 fixed 壁纸；
+   stage 隐藏（homeOnly 非首页 / JS 切走）时取消下推，避免顶部整屏空白 */
+html[data-wallpaper-mode="fullscreen"][data-wp-fs-layout="hero"][data-wp-is-home]:not(
+	[data-wp-stage-hidden]
+) .site-main {
+	margin-top: 100vh;
+}
+/* hero 交互：fixed 后 pointer-events 被关，hero 文案纯展示无需点击（打字机亦然） */
+/* hero 文字滚动淡出：滚离首屏后标题/副标题渐隐，不盖在正文区模糊壁纸上 */
+html[data-wallpaper-mode="fullscreen"][data-wp-fs-layout="hero"][data-wp-is-home]
+.wp-hero {
+	transition: opacity 0.5s ease;
+}
+html[data-wallpaper-mode="fullscreen"][data-wp-fs-layout="hero"][data-wp-is-home].wp-scrolled
+	.wp-hero {
+	opacity: 0;
+}
+/* 滚动模糊过渡：滚过 40px（html.wp-scrolled，app.ts updateWallpaperScroll）后
+   壁纸加模糊 + 放大补偿 + 底部渐隐蒙层加深，保证模糊渐变在 blur=0 时也可见 */
+html[data-wallpaper-mode="fullscreen"][data-wp-fs-layout="hero"][data-wp-is-home]
+.wp-img {
+	transition:
+		opacity 0.8s ease,
+		transform 0.8s ease,
+		filter 0.5s ease;
+}
+html[data-wallpaper-mode="fullscreen"][data-wp-fs-layout="hero"][data-wp-is-home].wp-scrolled
+	.wp-img {
+	filter: blur(var(--wp-overlay-blur, 0px));
+	transform: scale(var(--wp-overlay-scale, 1));
 }
-/* 遮罩层：浅/暗双档不透明度（--wp-dim / --wp-dim-dark），保证任意壁纸下正文可读 */
-.site-wallpaper-dim {
+html[data-wallpaper-mode="fullscreen"][data-wp-fs-layout="hero"][data-wp-is-home]
+	.wp-stage::after {
+	content: "";
 	position: absolute;
-	inset: 0;
-	background: rgb(0 0 0 / var(--wp-dim, 0.45));
+	inset: auto 0 0 0;
+	height: 40vh;
+	background: linear-gradient(to bottom, transparent, var(--bg));
+	opacity: 0;
+	transition: opacity 0.5s ease;
+	pointer-events: none;
 }
-html.dark .site-wallpaper-dim {
-	background: rgb(0 0 0 / var(--wp-dim-dark, 0.65));
+html[data-wallpaper-mode="fullscreen"][data-wp-fs-layout="hero"][data-wp-is-home].wp-scrolled
+	.wp-stage::after {
+	opacity: 1;
+}
+/* hero 布局正文卡片半透明：复用 overlay 的 --wp-card-opacity（壁纸从卡片间隙透出）。
+   文章列表 .post-card 与分页 .page-item 不走 .card 类，需一并覆盖；
+   非首页 fullscreen-hero 降级为 overlay，同样需要半透明卡片 */
+html[data-wallpaper-mode="fullscreen"][data-wp-fs-layout="hero"][data-wp-is-home]
+.card,
+html[data-wallpaper-mode="fullscreen"][data-wp-fs-layout="hero"][data-wp-is-home]
+	.post-card,
+html[data-wallpaper-mode="fullscreen"][data-wp-fs-layout="hero"][data-wp-is-home]
+	.page-item,
+html[data-wallpaper-mode="fullscreen"]:not(
+		[data-wp-is-home]
+	)[data-wp-fs-layout="hero"]
+	.card,
+html[data-wallpaper-mode="fullscreen"]:not(
+		[data-wp-is-home]
+	)[data-wp-fs-layout="hero"]
+	.post-card,
+html[data-wallpaper-mode="fullscreen"]:not(
+		[data-wp-is-home]
+	)[data-wp-fs-layout="hero"]
+	.page-item {
+	background: color-mix(
+		in srgb,
+		var(--surface) var(--wp-card-opacity, 50%),
+		transparent
+	);
+}
+
+/* ---------- 3.5c 壁纸访客开关显隐（§4.103）：html data 属性驱动 ----------
+   boot 脚本（BaseLayout）与 app.ts applySavedWallpaper 双入口写入，
+   面板开关切换时同步更新 */
+/* hero 文案显隐总规则（§4.98 硬规则，用户多次确认、后续改动不得回退）：
+   壁纸文字只允许出现在两类位置——① banner 形态的横幅区（Header 菜单导航与
+   分类导航条之间，含非首页 fullscreen-classic 降级）；② fullscreen 首页首屏
+   （hero 布局居中文案）。其余形态一律不展示文字：overlay 形态 stage 为 fixed
+   垫底，.wp-hero 会浮在半透明内容区背后；fullscreen-hero 非首页降级为 overlay
+   同样适用（data-wallpaper-mode 仍是 "fullscreen"，需按 layout+非首页匹配）。
+   文字职责交还内容区标题（.page-title/.post-title-lg 等，见下方规则） */
+html[data-wallpaper-mode="overlay"] .wp-hero,
+html[data-wallpaper-mode="none"] .wp-hero,
+html[data-wallpaper-mode="fullscreen"][data-wp-fs-layout="hero"]:not(
+		[data-wp-is-home]
+	)
+	.wp-hero {
+	display: none;
+}
+html[data-wp-home-text="off"] .wp-hero {
+	display: none;
+}
+/* hero 横幅显示页面标题时，隐藏内容区重复标题（避免归档/文章等页面出现两个同名标题）。
+   仅 banner 与 fullscreen-classic 生效：fullscreen-hero 非首页降级为 overlay，
+   .wp-hero 被上方规则隐藏，此时内容区标题应保留可见 */
+html[data-wp-hero="visible"][data-wallpaper-mode="banner"] .page-title,
+html[data-wp-hero="visible"][data-wallpaper-mode="banner"] .page-sub,
+html[data-wp-hero="visible"][data-wallpaper-mode="banner"] .post-title-lg,
+html[data-wp-hero="visible"][data-wallpaper-mode="banner"] .archive-head,
+html[data-wp-hero="visible"][data-wallpaper-mode="fullscreen"]:not(
+		[data-wp-fs-layout="hero"]
+	)
+	.page-title,
+html[data-wp-hero="visible"][data-wallpaper-mode="fullscreen"]:not(
+		[data-wp-fs-layout="hero"]
+	)
+	.page-sub,
+html[data-wp-hero="visible"][data-wallpaper-mode="fullscreen"]:not(
+		[data-wp-fs-layout="hero"]
+	)
+	.post-title-lg,
+html[data-wp-hero="visible"][data-wallpaper-mode="fullscreen"]:not(
+		[data-wp-fs-layout="hero"]
+	)
+	.archive-head {
+	display: none;
+}
+html[data-wp-waves="off"] .wp-waves {
+	display: none;
+}
+html[data-wp-gradient="off"] .wp-gradient {
+	display: none;
+}
+html[data-wp-sakura="off"] #sakura-canvas {
+	display: none;
+}
+
+/* ---------- 3.5d 显示设置面板（§4.103，对齐 Firefly） ----------
+   齿轮入口的右上角浮层：三 Tab（外观/壁纸/特效）+ 组卡片 + 开关/滑块/模式宫格；
+   样式变量复用 palette-pop/card 体系（surface/border/radius/shadow） */
+.ds-panel {
+	position: fixed;
+	top: calc(var(--header-h) + 12px);
+	right: max(16px, calc((100vw - var(--page-width, 1600px)) / 2));
+	z-index: 120;
+	width: 330px;
+	max-width: calc(100vw - 32px);
+	max-height: 78vh;
+	display: flex;
+	flex-direction: column;
+	background: var(--surface);
+	border: 1px solid var(--border);
+	border-radius: var(--radius);
+	box-shadow: var(--shadow-md);
+	overflow: hidden;
+}
+.ds-panel[hidden] {
+	display: none;
+}
+/* Tab 栏：图标+文字横排，激活态 accent 底色 */
+.ds-tabs {
+	display: flex;
+	gap: 4px;
+	padding: 10px 12px 0;
+	border-bottom: 1px solid var(--border);
+}
+.ds-tab {
+	flex: 1;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	gap: 6px;
+	padding: 8px 4px 10px;
+	font-size: 13px;
+	color: var(--muted);
+	border-bottom: 2px solid transparent;
+	transition:
+		color 0.15s,
+		border-color 0.15s;
+}
+.ds-tab svg {
+	width: 16px;
+	height: 16px;
+}
+.ds-tab:hover {
+	color: var(--ink-2);
+}
+.ds-tab.is-active {
+	color: var(--accent-ink);
+	border-bottom-color: var(--accent);
+}
+/* 内容区可滚动（面板 max-height 78vh） */
+.ds-body {
+	overflow-y: auto;
+	padding: 14px;
+}
+.ds-page {
+	display: none;
+}
+.ds-page.is-active {
+	display: block;
+}
+/* 组卡片：标题 + 右上组重置按钮（壁纸设置/透明设置） */
+.ds-group {
+	padding: 12px;
+	border: 1px solid var(--border);
+	border-radius: var(--radius);
+	background: var(--bg-soft, transparent);
+}
+.ds-group + .ds-group {
+	margin-top: 12px;
+}
+.ds-group-title {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	font-size: 12px;
+	color: var(--muted);
+	letter-spacing: 0.08em;
+	margin-bottom: 10px;
+}
+.ds-group-reset {
+	font-size: 14px;
+	line-height: 1;
+	color: var(--muted);
+	padding: 2px 6px;
+	border-radius: 6px;
+	transition:
+		color 0.15s,
+		background-color 0.15s;
+}
+.ds-group-reset:hover {
+	color: var(--accent-ink);
+	background: var(--accent-soft);
+}
+/* 模式宫格：两列按钮（图标+文字），当前选中态 accent 描边 */
+.ds-mode-grid {
+	display: grid;
+	grid-template-columns: 1fr 1fr;
+	gap: 8px;
+}
+.ds-mode-btn {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	gap: 6px;
+	padding: 9px 6px;
+	font-size: 13px;
+	color: var(--ink-2);
+	border: 1px solid var(--border);
+	border-radius: 10px;
+	background: var(--surface);
+	transition:
+		color 0.15s,
+		border-color 0.15s,
+		background-color 0.15s;
+}
+.ds-mode-btn svg {
+	width: 16px;
+	height: 16px;
+}
+.ds-mode-btn:hover {
+	border-color: var(--accent);
+}
+.ds-mode-btn.is-active {
+	color: var(--accent-ink);
+	border-color: var(--accent);
+	background: var(--accent-soft);
+}
+/* 开关行：图标 + 文案 + switch（44x24 轨道，accent 开态） */
+.ds-switch-row,
+.ds-slider-row {
+	display: flex;
+	align-items: center;
+	gap: 10px;
+	padding: 7px 0;
+}
+.ds-switch-row svg,
+.ds-slider-row svg {
+	width: 16px;
+	height: 16px;
+	flex-shrink: 0;
+	color: var(--muted);
+}
+.ds-row-label {
+	flex: 1;
+	font-size: 13px;
+	color: var(--ink-2);
+}
+.ds-switch {
+	position: relative;
+	width: 40px;
+	height: 22px;
+	flex-shrink: 0;
+	border-radius: 999px;
+	background: var(--border);
+	transition: background-color 0.2s;
+}
+.ds-switch-knob {
+	position: absolute;
+	top: 3px;
+	left: 3px;
+	width: 16px;
+	height: 16px;
+	border-radius: 50%;
+	background: var(--surface);
+	box-shadow: var(--shadow-sm);
+	transition: transform 0.2s;
+}
+.ds-switch[aria-checked="true"] {
+	background: var(--accent);
+}
+.ds-switch[aria-checked="true"] .ds-switch-knob {
+	transform: translateX(18px);
+}
+/* 滑块行：图标 + 文案 + range + 数值徽章（80% / 10.0px / 60%） */
+.ds-slider {
+	flex: 1;
+	min-width: 0;
+	height: 6px;
+	appearance: none;
+	-webkit-appearance: none;
+	background: var(--border);
+	border-radius: 999px;
+	cursor: pointer;
+	outline-offset: 3px;
+}
+.ds-slider::-webkit-slider-thumb {
+	appearance: none;
+	-webkit-appearance: none;
+	width: 16px;
+	height: 16px;
+	border-radius: 50%;
+	background: var(--surface);
+	border: 2px solid var(--accent);
+	box-shadow: var(--shadow-sm);
+}
+.ds-slider::-moz-range-thumb {
+	width: 16px;
+	height: 16px;
+	border-radius: 50%;
+	background: var(--surface);
+	border: 2px solid var(--accent);
+	box-shadow: var(--shadow-sm);
+}
+.ds-badge {
+	min-width: 44px;
+	text-align: right;
+	font-size: 12px;
+	color: var(--muted);
+	font-variant-numeric: tabular-nums;
+}
+/* 面板内模式相关组/行的运行时显隐（app.ts 按当前模式+布局刷新） */
+.ds-group[data-modes].is-hidden,
+.ds-slider-row[data-modes].ds-row-hidden {
+	display: none;
+}
+/* 移动端：面板贴边全宽 */
+@media (max-width: 767px) {
+	.ds-panel {
+		right: 12px;
+		left: 12px;
+		width: auto;
+	}
 }
 
 /* ---------- 3.5c 番组追番页（§4.93） ---------- */
@@ -2671,15 +3487,28 @@ html.dark .form-grid .input-error {
 }
 
 /* ---------- 7. 归档 ---------- */
+/* §4.105：页面头居中排版——居中标题 + 标题下渐变短线 + 副标题，
+   PC 宽屏下标题与内容列同轴居中，不再贴容器左缘 */
 .archive-head {
 	max-width: 760px;
-	margin-bottom: 32px;
+	margin: 0 auto 32px;
+	text-align: center;
 }
 .archive-head .page-title {
 	font-family: var(--font-display);
 	font-size: 30px;
 	font-weight: 700;
 }
+/* 标题下渐变短线（accent → 透明），随暗色模式 accent 变量自动适配 */
+.archive-head .page-title::after {
+	content: "";
+	display: block;
+	width: 56px;
+	height: 3px;
+	margin: 14px auto 0;
+	border-radius: 2px;
+	background: linear-gradient(90deg, var(--accent), transparent);
+}
 .archive-head .page-sub {
 	margin-top: 6px;
 	color: var(--muted);