/* ============================================================ 三个学科页共用的样式（语文 / 数学 / 英语都引用这一个文件，改一次三页全变） ============================================================ */ /* 每个学科页在上加一个 class 来指定主色 */ body.subject-chinese { --accent: #e0416a; --accent-soft: #fff0f4; --accent-line: #ffd0dd; } body.subject-math { --accent: #3d7bef; --accent-soft: #eef4ff; --accent-line: #c9dcff; } body.subject-english { --accent: #2fa86a; --accent-soft: #eafaf1; --accent-line: #c4ecd6; } :root { --ink: #3a2224; --muted: #8a6b6b; } * { box-sizing: border-box; } body { margin: 0; min-height: 100vh; background: radial-gradient(circle at 50% 0%, #fff6f2 0%, #ffe9e0 45%, #ffdccf 100%); font-family: system-ui, -apple-system, "Microsoft YaHei", sans-serif; color: var(--ink); padding: 40px 20px 56px; line-height: 1.75; } .wrap { max-width: 820px; margin: 0 auto; } /* ── 顶部 ─────────────────────────────────── */ header { text-align: center; margin-bottom: 30px; } .mini-tomato { width: 76px; height: 76px; animation: bob 3s ease-in-out infinite; filter: drop-shadow(0 8px 14px rgba(217, 43, 56, 0.2)); } @keyframes bob { 0%, 100% { transform: translateY(0) rotate(-3deg) } 50% { transform: translateY(-8px) rotate(3deg) } } h1 { margin: 8px 0 6px; font-size: 32px; font-weight: 900; letter-spacing: 3px; color: var(--accent); text-shadow: 0 3px 0 #fff, 0 8px 16px rgba(0, 0, 0, 0.08); } header p { margin: 0; font-size: 14px; color: var(--muted); letter-spacing: 1px; } /* ── 卡片 ─────────────────────────────────── */ .card { background: #fff; border-radius: 20px; padding: 24px 22px; box-shadow: 0 8px 24px rgba(180, 90, 80, 0.12); margin-bottom: 20px; } .card > h2 { margin: 0 0 16px; font-size: 18px; font-weight: 900; letter-spacing: 2px; display: flex; align-items: center; gap: 10px; color: var(--ink); } .card > h2::before { content: ""; width: 6px; height: 19px; border-radius: 3px; background: var(--accent); flex: none; } /* ── 考试信息格 ───────────────────────────── */ .facts { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); } .fact { background: var(--accent-soft); border-radius: 14px; padding: 14px 16px; } .fact span { display: block; font-size: 12px; color: var(--muted); letter-spacing: 1px; margin-bottom: 4px; } .fact strong { font-size: 17px; font-weight: 900; color: var(--accent); } /* ── 考点框架 ─────────────────────────────── */ .module { margin-bottom: 14px; } .module:last-child { margin-bottom: 0; } .module > h3 { margin: 0 0 10px; font-size: 15px; font-weight: 900; letter-spacing: 1px; color: var(--accent); display: flex; align-items: center; gap: 8px; } .module > h3 .n { width: 22px; height: 22px; border-radius: 7px; flex: none; background: var(--accent); color: #fff; font-size: 12px; display: flex; align-items: center; justify-content: center; } .points { list-style: none; margin: 0; padding: 0 0 0 4px; } .points li { display: flex; align-items: flex-start; gap: 10px; padding: 7px 0; font-size: 15px; cursor: pointer; border-bottom: 1px dashed #f0e6e2; } .points li:last-child { border-bottom: none; } .points li .box { width: 19px; height: 19px; flex: none; margin-top: 3px; border: 2px solid var(--accent-line); border-radius: 6px; position: relative; transition: background 0.15s ease, border-color 0.15s ease; } .points li.checked .box { background: var(--accent); border-color: var(--accent); } .points li.checked .box::after { content: ""; position: absolute; left: 5px; top: 1px; width: 5px; height: 10px; border: solid #fff; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); } .points li.checked .txt { color: #b9a9a6; text-decoration: line-through; } .points li .txt { flex: 1; } /* ── 提示条 ───────────────────────────────── */ .note { border-radius: 14px; padding: 16px 18px; font-size: 14px; line-height: 1.9; background: var(--accent-soft); border: 1px solid var(--accent-line); color: #6b5350; } .note strong { color: var(--accent); } /* ── 进度条 ───────────────────────────────── */ .progress-row { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; } .progress-track { flex: 1; height: 10px; border-radius: 999px; background: #f3ebe8; overflow: hidden; } .progress-fill { height: 100%; width: 0%; border-radius: 999px; background: var(--accent); transition: width 0.3s ease; } .progress-text { font-size: 13px; font-weight: 800; color: var(--accent); white-space: nowrap; } /* ── 底部 ─────────────────────────────────── */ footer { text-align: center; margin-top: 34px; font-size: 13px; color: var(--muted); line-height: 1.9; } footer a { color: var(--muted); text-decoration: none; padding: 9px 20px; border-radius: 999px; background: rgba(255,255,255,0.8); } footer a:hover { background: #fff; color: var(--accent); } footer nav { margin-bottom: 14px; } footer .src { font-size: 12px; color: #b09d99; } @media (max-width: 600px) { body { padding: 28px 14px 44px; } h1 { font-size: 25px; letter-spacing: 2px; } .mini-tomato { width: 62px; height: 62px; } .card { padding: 20px 16px; } .points li { font-size: 14px; } }