/* ============================================================ theme-light.css —— 浅色主题「白昼星空」表层覆盖（2026-08-19） 设计令牌级反转在 tokens.css 的 html[data-theme="light"] 块； 本文件只修正不依赖 token 的硬编码色（星空/网格/光柱、抽屉、 分页器、玻璃卡片、节点文字、浮标、星点 SVG 等）。 依赖 （js/main.js 读取 skypine-theme 写入）。 ============================================================ */ /* ---------------- 背景：星云 / 网格 / 中央光柱 ---------------- 浅底上星云改为极淡深蓝印（α 约减半），网格改深蓝墨线； 光柱从「蓝系柔光」反转为「日光白柱」——中央亮、两侧是浅蓝灰底， 延续「文字区亮、两侧暗」的分区照明，只是底色反转 */ html[data-theme="light"] .bg-stars::before { background: radial-gradient(52% 44% at 18% 26%, rgba(46, 84, 155, 0.05), transparent 68%), radial-gradient(44% 38% at 82% 68%, rgba(122, 92, 230, 0.025), transparent 70%), radial-gradient(60% 50% at 55% 12%, rgba(30, 58, 128, 0.04), transparent 72%), radial-gradient(38% 34% at 74% 30%, rgba(46, 124, 246, 0.03), transparent 66%); } html[data-theme="light"] body::after { background-image: linear-gradient(rgba(27, 42, 74, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(27, 42, 74, 0.03) 1px, transparent 1px); } html[data-theme="light"] body::before { background: linear-gradient(90deg, transparent 16%, rgba(255, 255, 255, 0.5) 36%, rgba(255, 255, 255, 0.75) 50%, rgba(255, 255, 255, 0.5) 64%, transparent 84%), radial-gradient(ellipse 60% 58% at 50% 44%, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.5) 52%, rgba(255, 255, 255, 0) 76%); } @media (max-width: 768px) { html[data-theme="light"] body::before { background: linear-gradient(90deg, transparent 5%, rgba(255, 255, 255, 0.5) 30%, rgba(255, 255, 255, 0.7) 50%, rgba(255, 255, 255, 0.5) 70%, transparent 95%), radial-gradient(ellipse 78% 62% at 50% 42%, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.45) 56%, rgba(255, 255, 255, 0) 80%); } } /* ---------------- 全局固定星空星点：白星 → 淡蓝墨印（α 0.4 → 0.09） ---------------- */ html[data-theme="light"] #st-near-a use:nth-child(1) { fill: #4E68A0; fill-opacity: .4; } html[data-theme="light"] #st-near-a use:nth-child(2) { fill: #7890BC; fill-opacity: .22; } html[data-theme="light"] #st-near-b use:nth-child(1) { fill: #647EAE; fill-opacity: .32; } html[data-theme="light"] #st-near-b use:nth-child(2) { fill: #8A9DC4; fill-opacity: .22; } html[data-theme="light"] #st-mid circle:nth-child(1) { fill: #7E96C2; fill-opacity: .2; } html[data-theme="light"] #st-mid circle:nth-child(2) { fill: #8DA3CC; fill-opacity: .14; } html[data-theme="light"] #st-far circle:nth-child(1) { fill: #93A8CE; fill-opacity: .13; } html[data-theme="light"] #st-far circle:nth-child(2) { fill: #9CB0D4; fill-opacity: .09; } /* ---------------- 选区 / 滚动条 ---------------- */ html[data-theme="light"] ::selection { color: #FFFFFF; background: rgba(46, 124, 246, 0.4); } html[data-theme="light"] ::-webkit-scrollbar-track { background: var(--bg-base); } html[data-theme="light"] ::-webkit-scrollbar-thumb { border-color: var(--bg-base); } /* ---------------- 幽灵编号（section-index）描边转深墨线 ---------------- */ html[data-theme="light"] .section-index { -webkit-text-stroke: 1px rgba(27, 42, 74, 0.18); } /* ---------------- 移动端抽屉：深空渐变 → 白昼渐变，星点转淡印 ---------------- */ html[data-theme="light"] .drawer-backdrop { background: rgba(20, 30, 55, 0.4); } html[data-theme="light"] .drawer-panel { background: radial-gradient(110% 75% at 88% -12%, rgba(46, 124, 246, 0.12), transparent 62%), radial-gradient(110% 80% at -15% 105%, rgba(122, 92, 230, 0.08), transparent 60%), linear-gradient(180deg, #F1F4FA 0%, #E7EBF3 55%, #F1F4FA 100%); border-left-color: var(--border); } html[data-theme="light"] .drawer-panel::before { background-image: url("data:image/svg+xml;utf8,"); opacity: .5; } /* ---------------- 右侧悬浮角标 / 移动端返回顶部球：白玻璃 → 白玻璃深墨图标 ---------------- */ html[data-theme="light"] .float-tab { color: rgba(27, 42, 74, 0.85); border-color: rgba(27, 42, 74, 0.18); } html[data-theme="light"] .float-tab:hover, html[data-theme="light"] .float-tab.is-open { color: var(--primary); border-color: rgba(46, 124, 246, 0.45); box-shadow: 0 0 20px rgba(46, 124, 246, 0.2), inset 0 0 0 1px rgba(46, 124, 246, 0.12); } html[data-theme="light"] .float-ball { background: rgba(255, 255, 255, 0.82); color: var(--text-2); box-shadow: 0 8px 24px rgba(27, 42, 74, 0.12); } html[data-theme="light"] .float-ball:hover, html[data-theme="light"] .float-ball:active { color: var(--primary); } /* ---------------- 分页器 / 加载更多：深底胶囊 → 白玻璃深墨 ---------------- */ html[data-theme="light"] .loadmore, html[data-theme="light"] .pager .pager-btn, html[data-theme="light"] .pager .pager-num { color: var(--text-2); border-color: rgba(27, 42, 74, 0.18); background: rgba(255, 255, 255, 0.65); } html[data-theme="light"] .loadmore:hover, html[data-theme="light"] .pager .pager-btn:hover:not(:disabled), html[data-theme="light"] .pager .pager-num:hover:not(.active) { color: var(--primary); border-color: rgba(46, 124, 246, 0.5); box-shadow: 0 0 16px rgba(46, 124, 246, 0.15); } html[data-theme="light"] .pager .pager-num.active { color: #FFFFFF; background: linear-gradient(135deg, #4A8EF8, #2E7CF6); border-color: transparent; box-shadow: 0 0 14px rgba(46, 124, 246, 0.3); } html[data-theme="light"] .pager .pager-ellipsis { color: rgba(27, 42, 74, 0.4); } /* ---------------- 工具卡 / 愿景卡：深底半透明 → 白底玻璃 ---------------- */ html[data-theme="light"] .res-card, html[data-theme="light"] .res-card--plain, html[data-theme="light"] .res-card--plain:hover, html[data-theme="light"] .vs-item { background: rgba(255, 255, 255, 0.72); border-color: var(--hairline); } html[data-theme="light"] .res-card:hover, html[data-theme="light"] .vs-item:hover { background: rgba(255, 255, 255, 0.92); border-color: rgba(46, 124, 246, 0.4); } html[data-theme="light"] .res-card h3, html[data-theme="light"] .vs-item h3 { color: var(--text-1); text-shadow: none; } /* ---------------- 外链确认弹窗 ---------------- */ html[data-theme="light"] .modal-overlay { background: rgba(27, 42, 74, 0.3); } html[data-theme="light"] .modal-dialog { background: #FFFFFF; border-color: var(--border-strong); box-shadow: 0 12px 40px rgba(27, 42, 74, 0.16); } /* ---------------- 首页 Hero：浅色模式「照片亮化转浅」（2026-08-19 方案 A） 背景图提亮（去掉深色模式的暗化滤镜）+ 白色→浅蓝渐变遮罩冲淡； 文字转深墨（--text-1/2），与下方白底一体。若后台配了浅色专用图 hero.bgLight（data-home-img-light），显示浅色图，滤镜/遮罩规则同样生效。 ---------------- */ html[data-theme="light"] .hero-bg img { filter: saturate(0.92) brightness(1.08); } html[data-theme="light"] .hero-overlay { background: linear-gradient(180deg, rgba(241, 244, 250, 0.40) 0%, rgba(241, 244, 250, 0.62) 100%); } html[data-theme="light"] .hero-eyebrow { color: var(--text-2); } html[data-theme="light"] .hero-title { color: var(--text-1); } html[data-theme="light"] .hero-title .accent { color: var(--primary); } html[data-theme="light"] .hero-sub { color: var(--text-2); } /* ---------------- 发展历程 / 愿景：节点与标题文字在浅色画布上转深墨，去发光 ---------------- */ html[data-theme="light"] .ms-node__yr { color: var(--text-1); text-shadow: 0 0 16px rgba(46, 124, 246, 0.18); } html[data-theme="light"] .ms-node__title { text-shadow: none; } html[data-theme="light"] .ms-node::after { box-shadow: 0 10px 28px rgba(27, 42, 74, 0.14); } html[data-theme="light"] .vs-eyebrow { text-shadow: none; } html[data-theme="light"] .vs-title__l1, html[data-theme="light"] .vs-title__l2 { color: var(--text-1); text-shadow: none; } html[data-theme="light"] .vs-title__l2 { color: var(--text-2); } /* ---------------- 资质荣誉海报位：深底玻璃 → 白底玻璃 ---------------- */ html[data-theme="light"] .cert-poster { background: rgba(255, 255, 255, 0.75); border-color: var(--hairline); } html[data-theme="light"] .cert-poster:hover, html[data-theme="light"] .cert-poster:focus-visible { border-color: rgba(46, 124, 246, 0.45); box-shadow: 0 14px 36px rgba(27, 42, 74, 0.14); } /* ---------------- 图片冷蓝软光：浅色下减淡，避免染色过重 ---------------- */ html[data-theme="light"] .img-ph--tone::after { background: linear-gradient(135deg, rgba(46, 84, 155, 0.1), rgba(46, 124, 246, 0.04)); } /* ---------------- 证书大图弹层：深色遮罩 → 浅色遮罩 + 白底图位 ---------------- */ html[data-theme="light"] .lightbox { background: rgba(27, 42, 74, 0.35); } html[data-theme="light"] .lightbox-figure img { background: #FFFFFF; border-color: var(--border); box-shadow: 0 24px 60px rgba(27, 42, 74, 0.22); } /* ---------------- 断网页：白色星点/图标 → 深蓝，避免浅底隐身 ---------------- */ html[data-theme="light"] .page-offline .po-star { color: #4E68A0; } html[data-theme="light"] .page-offline .po-icon { color: var(--text-2); } /* ---------------- 优势网格 hover 角标：白点 → 保持主色（浅底白点不可见） ---------------- */ html[data-theme="light"] .adv-item:hover .adv-dot { background: var(--primary); }