/* ========================================================= * 陇上数字经纬 · 敦煌壁画视觉主题 (模块 C) * 严格按项目书 4.3 配色方案 + 4.3.2 质感效果 * 注入方式： * 启用质感：给加 class="dh-themed" * ========================================================= */ :root { /* ---- 主色调（敦煌壁画） ---- */ --dunhuang-red: #9D2933; /* 朱砂红 - 壁画主色 */ --dunhuang-blue: #2B6B8A; /* 石青 - 天空/水色 */ --dunhuang-green: #4A8C6F; /* 石绿 - 山石草木 */ --dunhuang-gold: #C9A96E; /* 泥金 - 佛像/装饰 */ --dunhuang-yellow:#EAD999; /* 土黄 - 大地/沙漠 */ --dunhuang-ink: #2D2D2D; /* 墨色 - 文字/线条 */ /* ---- 背景色 ---- */ --silk-paper: #F5EDE0; /* 绢帛色背景（子页面浅色） */ --cave-dark: #1A1410; /* 洞窟深色背景（首页/开启页） */ /* ---- 渐变 ---- */ --sunset-gradient: linear-gradient(135deg, #9D2933 0%, #C9A96E 50%, #EAD999 100%); --cave-gradient: linear-gradient(180deg, #1A1410 0%, #2D2520 50%, #3D3530 100%); /* ---- 衍生（金线/光晕，方便复用） ---- */ --gold-line: rgba(201, 169, 110, 0.35); --gold-soft: rgba(201, 169, 110, 0.12); --gold-glow: rgba(201, 169, 110, 0.55); } /* ---- 4.3.2 质感：壁画斑驳纹理（覆盖全屏，极低透明度，不挡交互） ---- */ body.dh-themed::before { content: ""; position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 9999; opacity: 0.035; mix-blend-mode: multiply; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } /* ---- 金色光晕边框卡片（项目书 .card 规范） ---- */ .dh-card { border: 1px solid rgba(201, 169, 110, 0.2); box-shadow: 0 0 0 1px rgba(201, 169, 110, 0.1), inset 0 0 30px rgba(201, 169, 110, 0.05); border-radius: 8px; background: rgba(255, 255, 255, 0.04); } /* ---- 金色文字 ---- */ .dh-gold { color: var(--dunhuang-gold); text-shadow: 0 0 18px rgba(201, 169, 110, 0.35); } /* ---- 标题金色流光（ reusable） ---- */ .dh-title-glow { font-family: 'Ma Shan Zheng', cursive; color: var(--dunhuang-gold); text-shadow: 0 0 24px rgba(201, 169, 110, 0.5); } /* ========================================================= * C-3 导航栏 / 卡片 / 按钮交互升级（自动覆盖 body.dh-themed 的页面） * 原则：保留原有布局与浅色背景，只加金色强调线与悬停动效 * ========================================================= */ /* ---- 导航栏：浅底+金色底线+金色 active ---- */ body.dh-themed .navbar { background: rgba(244, 236, 224, 0.98) !important; border-bottom: 1px solid var(--gold-line) !important; box-shadow: 0 2px 14px rgba(201, 169, 110, 0.08); } body.dh-themed .navbar .logo, body.dh-themed .navbar a.brand { color: var(--dunhuang-red) !important; text-shadow: 0 0 14px rgba(157, 41, 51, 0.22); } body.dh-themed .navbar a { color: var(--dunhuang-ink) !important; transition: color 0.25s ease, border-color 0.25s ease; } body.dh-themed .navbar a:hover, body.dh-themed .navbar a.active { color: var(--dunhuang-red) !important; border-bottom-color: var(--dunhuang-gold) !important; } /* ---- 卡片：金边 + 金阴影 + 悬停上浮 ---- */ body.dh-themed .card, body.dh-themed .feature-item, body.dh-themed .feature-card, body.dh-themed .工艺-card, body.dh-themed .文物-card, body.dh-themed .典故-list, body.dh-themed .kpi-card, body.dh-themed .chart-widget, body.dh-themed .map-module, body.dh-themed .explore-sidebar, body.dh-themed .quiz-card, body.dh-themed .side-panel, body.dh-themed .feed-item, body.dh-themed .publish-box, body.dh-themed .stats-card, body.dh-themed .card-row > div { border: 1px solid var(--gold-line) !important; box-shadow: 0 4px 16px var(--gold-soft) !important; transition: transform 0.3s ease, box-shadow 0.3s ease; } body.dh-themed .card:hover, body.dh-themed .feature-item:hover, body.dh-themed .feature-card:hover, body.dh-themed .工艺-card:hover, body.dh-themed .文物-card:hover, body.dh-themed .kpi-card:hover, body.dh-themed .chart-widget:hover, body.dh-themed .map-module:hover, body.dh-themed .explore-sidebar:hover, body.dh-themed .quiz-card:hover, body.dh-themed .side-panel:hover, body.dh-themed .feed-item:hover, body.dh-themed .publish-box:hover, body.dh-themed .stats-card:hover { transform: translateY(-5px); box-shadow: 0 10px 30px rgba(201, 169, 110, 0.18) !important; } /* ---- 按钮：金色边框 + 泥金填充悬停 ---- */ body.dh-themed .enter-btn, body.dh-themed .btn-post, body.dh-themed .follow-btn, body.dh-themed .filter-btn, body.dh-themed .feature-item-content a, body.dh-themed .工艺-content a, body.dh-themed .card-body a, body.dh-themed .main-container a.btn, body.dh-themed button[type="submit"] { border: 1px solid var(--dunhuang-gold) !important; color: var(--dunhuang-red) !important; background: transparent !important; transition: all 0.3s ease; } body.dh-themed .enter-btn:hover, body.dh-themed .btn-post:hover, body.dh-themed .follow-btn:hover, body.dh-themed .filter-btn:hover, body.dh-themed .feature-item-content a:hover, body.dh-themed .工艺-content a:hover, body.dh-themed .card-body a:hover, body.dh-themed .main-container a.btn:hover, body.dh-themed button[type="submit"]:hover { background: var(--dunhuang-gold) !important; color: #1a1410 !important; box-shadow: 0 0 22px var(--gold-glow) !important; transform: translateY(-2px); } /* ---- 浅色页祥云顶部渐隐：只在页面顶部区域显示，不覆盖主要内容 ---- */ canvas.dh-cloud-top { -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 0, rgba(0,0,0,1) 70px, rgba(0,0,0,1) 30%, rgba(0,0,0,0) 60%); mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 0, rgba(0,0,0,1) 70px, rgba(0,0,0,1) 30%, rgba(0,0,0,0) 60%); } /* ========================================================= * C-6 滚动动画 + 数字计数（与 dh-scroll.js 配套） * ========================================================= */ [data-scroll] { will-change: opacity, transform; } .dh-scroll-fade-up { opacity: 0; transform: translateY(36px); transition: opacity 0.7s ease-out, transform 0.7s ease-out; } .dh-scroll-fade-up.dh-visible { opacity: 1; transform: translateY(0); } .dh-scroll-scale { opacity: 0; transform: scale(0.92); transition: opacity 0.7s ease-out, transform 0.7s ease-out; } .dh-scroll-scale.dh-visible { opacity: 1; transform: scale(1); } .dh-scroll-slide-left { opacity: 0; transform: translateX(-40px); transition: opacity 0.7s ease-out, transform 0.7s ease-out; } .dh-scroll-slide-left.dh-visible { opacity: 1; transform: translateX(0); }