/** * [2026-10-24 omg669「节日主题」] 全站节日主题: 万圣节 / 感恩节 / 圣诞 / 新年。 * * 怎么挂: 各页里 nav.css 后面引用本文件 + /holiday.js; holiday.js 按访客本地日期给挂 data-holiday=…, * 后台「系统设置 → 节日主题」关掉就不挂, 页面马上回原样。admin.html 不引用。 * * 优先级: 配色变量写在 html:root[data-holiday=…] 上 (0,2,1), 压过 nav.css / index / gallery / account 各自的 :root (0,1,0) * 和暗色那套 :root:not([data-theme="light"]) (0,2,0) —— 访客系统是浅色还是暗色都按节日色走。各组件本来就按变量写, 换变量即换肤。 * * 背景画在两层伪元素上, 都是 z-index:-1 + pointer-events:none, 在所有内容下面, 不挡点击: * body::before 固定铺满屏幕: 夜空渐变 + 星星/雪花/彩纸平铺 + 底边一条地面和南瓜/落叶/小树 (滚动时不动) * body::after 贴在页面顶部、跟内容一起滚走: 月亮/蝙蝠/落叶/雪花/彩带。放哪是按 11 种语言 × 8 个页面实测文字位置挑的: * 宽屏(≥1240px)放内容栏右边的留白里; 平板/小笔记本(521–1239px)缩到右上角、导航上面只露一角; * 手机(≤520px, 导航是两行)放第二行右边那块空位。阿拉伯语(rtl)整层左右镜像。 * 图全是 CSS 渐变 + 内联 SVG data URI, 不加载外部图片。SVG 里 # 写 %23, 不出现裸 %。 * 文字直接压在背景上的地方(标题/导语/静态页正文)加一层很淡的深色 text-shadow, 背景图在字后面也看得清。 * 老内核: 不用 inset / min() / :is()。 */ /* ================= 通用骨架: 只要挂了 data-holiday 就生效 ================= */ html:root[data-holiday] { color-scheme: dark; background: var(--bg); } html[data-holiday] body, html[data-holiday] body.page { background: transparent; } html[data-holiday] body::before { content: ""; position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: -1; pointer-events: none; background-repeat: no-repeat; } html[data-holiday] body::after { content: ""; position: absolute; top: 0; left: 0; right: 0; margin: 0 auto; max-width: 1240px; height: 440px; z-index: -1; pointer-events: none; background-repeat: no-repeat; } html[data-holiday][dir="rtl"] body::after { transform: scaleX(-1); } html[data-holiday] .wrap { text-shadow: 0 1px 2px rgba(4, 2, 14, .55); } html[data-holiday] .cta, html[data-holiday] .btn:not(.ghost), html[data-holiday] .page a.btn { box-shadow: 0 6px 20px color-mix(in srgb, var(--brand) 35%, transparent); } html[data-holiday] .langcode { background: var(--card); } html[data-holiday] .cta { border-color: var(--brand-deep); } /* 首屏主按钮是