/* ============================================================ 统一视觉主题覆盖层 v1 设计语言：科技蓝 + 高级灰 + 毛玻璃 + 精致微交互 + 极简大气 用法：在每个交互页 中 本文件通过 !important 覆盖页面内联样式的视觉属性，保留原有布局结构 ============================================================ */ /* ---------- 1. 设计变量重映射（覆盖页面内 :root 的旧紫/橙变量） ---------- */ :root{ /* 科技蓝主色系 */ --primary:#2563eb !important; --primary-dark:#1d4ed8 !important; --primary-light:#60a5fa !important; --secondary:#64748b !important; --accent:#0ea5e9 !important; --orange-main:#0ea5e9 !important; --orange:#0ea5e9 !important; --orange-1:#e0f2fe !important; --orange-2:#bae6fd !important; --orange-3:#7dd3fc !important; --orange-4:#38bdf8 !important; --orange-5:#0ea5e9 !important; --orange-6:#0284c7 !important; --orange-light:#e0f2fe !important; --orange-bg:#f0f9ff !important; --orange-pale:#e0f2fe !important; /* 紫色系全部映射为蓝 */ --purple:#2563eb !important; --purple-main:#2563eb !important; --purple-deep:#1e3a8a !important; --purple-light:#60a5fa !important; --purple-pale:#dbeafe !important; --purple-bg:#eff6ff !important; --purple-1:#eff6ff !important; --purple-2:#dbeafe !important; --purple-3:#bfdbfe !important; --purple-4:#93c5fd !important; --purple-5:#60a5fa !important; --purple-6:#3b82f6 !important; /* 文本 */ --text-dark:#1e293b !important; --text-mid:#475569 !important; --text-medium:#475569 !important; --text-light:#94a3b8 !important; --text:#334155 !important; /* 表面 / 背景 */ --bg-card:rgba(255,255,255,0.96) !important; --bg:#eef2f7 !important; --bg-warm:#eff6ff !important; --warm-bg:#eff6ff !important; --card:rgba(255,255,255,0.96) !important; --shadow:0 10px 30px rgba(30,58,138,0.10) !important; --radius:18px !important; --radius-sm:12px !important; } /* ---------- 2. 基础重置与背景 ---------- */ *{box-sizing:border-box;} html{-webkit-text-size-adjust:100%;} body{ font-family:"PingFang SC","Microsoft YaHei","Noto Sans SC","Helvetica Neue",sans-serif !important; background:#e8edf4 !important; background-image:none !important; color:#1e293b !important; line-height:1.7 !important; -webkit-font-smoothing:antialiased; } /* 极简大气：柔和径向高光背景 */ body::before{ content:"";position:fixed;inset:0;z-index:-1;pointer-events:none; background: radial-gradient(900px 500px at 12% -8%, rgba(37,99,235,0.14), transparent 60%), radial-gradient(800px 600px at 105% 8%, rgba(14,165,233,0.12), transparent 55%), linear-gradient(180deg,#f0f3f9 0%, #e5ecf4 100%); } /* ---------- 3. 通用毛玻璃表面工具 ---------- */ .top-bar,.nav-bar,.card,.lab-box,.conclusion-box,.quiz-question,.source-card, .summary-card,.intro-item,.intro-card,.k-card,.know-card,.harm-card,.scene-card, .compare-item,.highlight-box,.speed-visual,.speed-compare-item,.canvas-wrap, .card-btn,.quiz-opt,.btn-source,.btn-not-source,.summary-item,.drop-zone,.page, .tag,.section-title,.screen-sub,.page-title,.canvas-controls{ backdrop-filter:blur(18px) saturate(160%); -webkit-backdrop-filter:blur(18px) saturate(160%); } /* ---------- 4. 顶栏 / 导航栏（玻璃蓝） ---------- */ .top-bar{ background:rgba(37,99,235,0.85) !important; backdrop-filter:blur(18px) saturate(160%) !important; -webkit-backdrop-filter:blur(18px) saturate(160%) !important; border-bottom:1px solid rgba(255,255,255,0.18) !important; box-shadow:0 6px 24px rgba(30,58,138,0.18) !important; color:#fff !important; } .top-bar .title{color:#fff !important;font-weight:700;letter-spacing:.5px;} .top-bar .chapter{color:rgba(255,255,255,0.85) !important;} .progress-bar{background:rgba(255,255,255,0.30) !important;border-radius:99px !important;overflow:hidden;} .progress-fill{background:linear-gradient(90deg,#7dd3fc,#38bdf8) !important;border-radius:99px !important;} .nav-bar{ background:rgba(255,255,255,0.72) !important; backdrop-filter:blur(18px) saturate(160%) !important; -webkit-backdrop-filter:blur(18px) saturate(160%) !important; border-top:1px solid rgba(37,99,235,0.12) !important; box-shadow:0 -6px 24px rgba(30,58,138,0.08) !important; } /* 进度圆点 */ .dot{background:rgba(37,99,235,0.18) !important;border:1px solid transparent !important;} .dot.active{background:#2563eb !important;box-shadow:0 2px 10px rgba(37,99,235,0.45) !important;} .dot.done{background:#0ea5e9 !important;} .page-num,.progress-dots{color:#2563eb !important;} /* ---------- 5. 卡片（内容卡片统一为毛玻璃白） ---------- */ .card,.source-card,.summary-card,.intro-item,.intro-card,.k-card,.know-card, .harm-card,.scene-card,.compare-item,.highlight-box,.speed-visual,.speed-compare-item, .canvas-wrap,.card-btn,.quiz-opt,.summary-item,.drop-zone,.page,.tag,.section-title, .screen-sub,.page-title,.canvas-controls{ background:rgba(255,255,255,0.96) !important; border:1px solid rgba(37,99,235,0.10) !important; border-radius:18px !important; box-shadow:0 8px 24px rgba(30,58,138,0.08) !important; color:#1e293b !important; } .card p,.source-card p,.summary-card p,.intro-item .label,.k-card p,.know-card p{color:#475569 !important;} .card h2,.card h3,.screen-content h2,.screen-content h3,.section-title,.source-card .name, .summary-card .title,.k-card h4,.know-card h4,.page-title{color:#1e3a8a !important;} /* 覆盖卡片内联style的颜色，确保文字可读 */ .intro-card *,.intro-item *{color:#1e293b !important;} .intro-card .label{font-weight:600;color:#2563eb!important;font-size:.92em;} .intro-item .label{font-weight:500;color:#2563eb!important;font-size:.88em;} .source-card .name,.summary-card .title{font-weight:700;color:#1e3a8a !important;} /* 内容卡片悬停微交互 */ .card:hover,.source-card:hover,.summary-card:hover,.intro-item:hover,.intro-card:hover, .k-card:hover,.know-card:hover,.harm-card:hover,.scene-card:hover,.canvas-wrap:hover{ transform:translateY(-3px) !important; box-shadow:0 16px 40px rgba(30,58,138,0.16) !important; border-color:rgba(37,99,235,0.25) !important; } /* 网格 */ .card-grid,.summary-grid,.intro-grid,.knowledge-grid,.grid-2,.grid-3,.scene-grid{ gap:16px !important; } /* ---------- 6. 按钮（科技蓝 + 微交互） ---------- */ .btn,.nav-btn,.quiz-submit,.btn-primary,.btn-outline,.btn-accent,.btn-sm,.btn-next, .btn-secondary,.btn-orange,.btn-source,.btn-not-source,.quiz-opt,.rgb-btn{ border-radius:99px !important; font-weight:600 !important; letter-spacing:.3px; transition:all .28s cubic-bezier(.4,0,.2,1) !important; cursor:pointer; } .btn:hover,.nav-btn:hover,.quiz-submit:hover,.btn-primary:hover,.btn-accent:hover, .btn-secondary:hover,.btn-orange:hover,.btn-next:hover,.rgb-btn:hover{ transform:translateY(-2px) !important; } .btn:active,.nav-btn:active,.quiz-submit:active,.btn-primary:active,.btn-accent:active{ transform:scale(.96) !important; } .btn-primary,.nav-btn-next,.quiz-submit,.btn-accent,.btn-orange{ background:linear-gradient(135deg,#2563eb,#3b82f6) !important; color:#fff !important; border:none !important; box-shadow:0 6px 18px rgba(37,99,235,0.32) !important; } .btn-primary:hover,.nav-btn-next:hover,.quiz-submit:hover,.btn-accent:hover{ box-shadow:0 10px 26px rgba(37,99,235,0.45) !important; } .btn-outline,.nav-btn-prev,.btn-secondary{ background:rgba(255,255,255,0.8) !important; color:#2563eb !important; border:1.5px solid rgba(37,99,235,0.35) !important; } .btn-outline:hover,.nav-btn-prev:hover,.btn-secondary:hover{ background:rgba(37,99,235,0.08) !important; border-color:#2563eb !important; } .btn:disabled,.nav-btn:disabled,.quiz-submit:disabled,.btn-primary:disabled{ opacity:.45 !important;transform:none !important;cursor:not-allowed !important;box-shadow:none !important; } .btn-row,.nav-arrows{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:16px;} /* 选项按钮（练习） */ .quiz-opt,.card-btn{ background:#fff !important; border:1.5px solid rgba(37,99,235,0.18) !important; color:#334155 !important; border-radius:14px !important; } .quiz-opt:hover,.card-btn:hover{ border-color:#2563eb !important; background:rgba(37,99,235,0.06) !important; transform:translateY(-2px) !important; } .quiz-opt.selected,.card-btn.selected{ border-color:#2563eb !important; background:rgba(37,99,235,0.10) !important; color:#1d4ed8 !important; font-weight:600; } .quiz-opt.correct,.card-btn.correct{background:#ecfdf5 !important;border-color:#10b981 !important;color:#047857 !important;} .quiz-opt.wrong,.card-btn.wrong{background:#fef2f2 !important;border-color:#ef4444 !important;color:#b91c1c !important;} .quiz-opt.show-correct{background:#ecfdf5 !important;border-color:#10b981 !important;color:#047857 !important;} /* 光源分类按钮 */ .btn-source{background:rgba(37,99,235,0.10) !important;color:#1d4ed8 !important;border:none !important;} .btn-source:hover{background:#2563eb !important;color:#fff !important;} .btn-not-source{background:rgba(14,165,233,0.10) !important;color:#0369a1 !important;border:none !important;} .btn-not-source:hover{background:#0ea5e9 !important;color:#fff !important;} /* ---------- 7. 结论 / 提示 / 结果框 ---------- */ .conclusion-box,.hint-bar,.result-box,.quiz-result,.quiz-feedback,.highlight-box{ background:rgba(255,255,255,0.80) !important; border:1px solid rgba(37,99,235,0.14) !important; border-left:4px solid #2563eb !important; border-radius:14px !important; box-shadow:0 8px 24px rgba(30,58,138,0.08) !important; color:#1e293b !important; padding:18px 22px !important; } .conclusion-box h3,.hint-bar strong,.result-box strong{color:#1d4ed8 !important;} .conclusion-box li{border-bottom:1px solid rgba(37,99,235,0.08) !important;color:#475569 !important;} .conclusion-box li .highlight{color:#2563eb !important;font-weight:700;} .conclusion-box li .orange{color:#0284c7 !important;font-weight:700;} .result-box.success{background:#ecfdf5 !important;border-left-color:#10b981 !important;color:#047857 !important;} .result-box.info{background:#eff6ff !important;border-left-color:#2563eb !important;color:#1d4ed8 !important;} .result-box.hint{background:#fff7ed !important;border-left-color:#f59e0b !important;color:#b45309 !important;} .quiz-result.correct{background:#ecfdf5 !important;border-color:#a7f3d0 !important;color:#047857 !important;} .quiz-result.wrong{background:#fef2f2 !important;border-color:#fecaca !important;color:#b91c1c !important;} .quiz-score{background:rgba(255,255,255,0.85) !important;border:1px solid rgba(37,99,235,0.14) !important;color:#1d4ed8 !important;} /* ---------- 8. 标题与文字 ---------- */ .main-title{ background:linear-gradient(135deg,#2563eb,#0ea5e9) !important; -webkit-background-clip:text !important;background-clip:text !important; -webkit-text-fill-color:transparent !important;color:transparent !important; letter-spacing:2px !important; } .sub-title,.section-title .icon{color:#2563eb !important;} .section-title{color:#1e3a8a !important;} h2,h3,h4{color:#1e3a8a !important;} .screen-subtitle,.screen-sub{color:#475569 !important;} /* 渐变文字高亮（原橙/紫高亮） */ .highlight{color:#2563eb !important;font-weight:700;} .orange{color:#0284c7 !important;font-weight:700;} /* ---------- 9. Canvas 容器 ---------- */ canvas{ background:#fff !important; border-radius:14px !important; box-shadow:0 6px 20px rgba(30,58,138,0.08) !important; max-width:100% !important; } .canvas-wrap canvas{border-radius:10px !important;} .canvas-tip,.canvas-label{color:#2563eb !important;} /* 滑块 */ input[type=range]{ -webkit-appearance:none;appearance:none;height:6px;border-radius:99px; background:linear-gradient(90deg,#bfdbfe,#93c5fd) !important;outline:none;cursor:pointer; } input[type=range]::-webkit-slider-thumb{ -webkit-appearance:none;appearance:none;width:20px;height:20px;border-radius:50%; background:#fff;border:3px solid #2563eb;box-shadow:0 2px 8px rgba(37,99,235,0.4);cursor:pointer; transition:transform .2s; } input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.15);} input[type=range]::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:#fff;border:3px solid #2563eb;cursor:pointer;} /* ---------- 10. 三原色按钮（保留红绿蓝语义色） ---------- */ .rgb-btn{border:3px solid rgba(255,255,255,0.6) !important;} .rgb-btn.on{box-shadow:0 0 16px rgba(255,255,255,0.5) !important;} .rgb-label{color:#2563eb !important;} /* ---------- 11. 拖拽 / 分类区 ---------- */ .drop-zone{border:2px dashed rgba(37,99,235,0.3) !important;background:rgba(37,99,235,0.04) !important;} .drop-zone.drag-over{border-color:#2563eb !important;background:rgba(37,99,235,0.08) !important;} /* ---------- 12. 入场微动画 ---------- */ @keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}} .screen.active,.card.active{ animation:fadeUp .45s cubic-bezier(.4,0,.2,1) both !important; } @keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}} .float-anim{animation:floatY 3s ease-in-out infinite !important;} @keyframes glowPulse{0%,100%{box-shadow:0 0 8px rgba(37,99,235,0.25)}50%{box-shadow:0 0 26px rgba(37,99,235,0.5)}} .glow-anim{animation:glowPulse 2.4s ease-in-out infinite !important;} @keyframes softPulse{0%,100%{opacity:1}50%{opacity:0.55}} .pulse{animation:softPulse 1.6s ease-in-out infinite !important;} /* 减少动效偏好 */ @media (prefers-reduced-motion: reduce){ *{animation:none !important;transition:none !important;} } /* ---------- 13. 页脚 / 页眉（索引页用） ---------- */ .header{ background:rgba(37,99,235,0.88) !important; backdrop-filter:blur(18px) !important; -webkit-backdrop-filter:blur(18px) !important; border-bottom:1px solid rgba(255,255,255,0.18) !important; color:#fff !important; } .header h1{color:#fff !important;}