:root{ --bg:#ffffff; --panel:#fbf8e6; --line:#e3e9dd; --text:#20291f; --muted:#5f6b5a; --accent:#1e8e4f; --accent-dk:#166f3d; --ok:#1a7f42; --ok-bg:#f2fbf5; --ok-line:#bfe3cd; --warn:#6b5410; --warn-bg:#fdf8ec; --warn-line:#e6d5a8; } *{box-sizing:border-box} html{scroll-behavior:smooth} body{margin:0;background:var(--bg);color:var(--text); font:16px/1.8 "Microsoft YaHei","PingFang SC",system-ui,-apple-system,"Segoe UI",sans-serif} a{color:var(--accent);text-decoration:none} a:hover{text-decoration:underline} .wrap{max-width:1280px;margin:0 auto;padding:0 24px} /* 顶部导航 */ nav.top{border-bottom:1px solid var(--line);background:var(--bg);position:sticky;top:0;z-index:20} nav.top .wrap{display:flex;align-items:center;gap:18px;height:60px;overflow-x:auto;white-space:nowrap} nav.top .brand{font-weight:700;font-size:15.5px;color:var(--text);flex:none} nav.top .brand small{display:block;font-weight:400;font-size:11.5px;color:var(--muted);letter-spacing:.03em} nav.top .sep{flex:none;width:1px;height:26px;background:var(--line)} nav.top a.nl{flex:none;font-size:14.5px;color:var(--muted);padding:4px 2px;border-bottom:2px solid transparent} nav.top a.nl:hover{color:var(--text);text-decoration:none} nav.top a.nl.on{color:var(--accent);border-bottom-color:var(--accent);font-weight:600} /* 首屏（内容居中） */ header.hero{padding:80px 0 60px;border-bottom:1px solid var(--line);text-align:center} header.hero .lead{margin-left:auto;margin-right:auto} header.hero .chips{justify-content:center} header.hero .row{justify-content:center} .kicker{display:inline-block;padding:5px 12px;border:1px solid var(--line);border-radius:4px; background:var(--panel);color:var(--muted);font-size:13px;letter-spacing:.04em} h1{margin:20px 0 14px;font-size:clamp(27px,4.4vw,40px);line-height:1.25;letter-spacing:-.3px;font-weight:700} .lead{color:var(--muted);max-width:800px;font-size:16.5px;margin:0;line-height:1.85} /* 标签 */ .chips{margin-top:26px;display:flex;flex-wrap:wrap;gap:10px} .chip{padding:6px 13px;border-radius:4px;font-size:13.5px;border:1px solid var(--line); background:var(--bg);color:var(--muted)} .chip.ok{border-color:var(--ok-line);color:var(--ok);background:var(--ok-bg)} /* 主体两栏：左目录 / 右内容 */ .layout{display:grid;grid-template-columns:224px minmax(0,1fr);gap:52px;align-items:start} .content{min-width:0} .toc{position:sticky;top:78px;border:1px solid var(--line);border-radius:6px;padding:16px 14px 12px;background:var(--bg)} .toc .t{font-size:12px;color:var(--muted);letter-spacing:.08em;padding:0 8px 10px; border-bottom:1px solid var(--line);margin-bottom:8px} .toc a{display:block;padding:7px 9px;margin:3px 0;border-radius:4px;font-size:14px;color:var(--muted); border-left:2px solid transparent;line-height:1.55} .toc a:hover{background:var(--panel);color:var(--text);text-decoration:none} .toc a.on{color:var(--accent);border-left-color:var(--accent);background:#e9f6ee;font-weight:600} .toc a.back{margin-top:12px;padding-top:12px;border-top:1px solid var(--line); border-left-color:transparent;color:var(--muted);font-size:13px} .toc a.back:hover{background:none;color:var(--accent)} .toc a.sub{padding:4px 9px 4px 20px;font-size:13px;border-left-color:transparent;position:relative;line-height:1.5} .toc a.sub::before{content:"·";position:absolute;left:10px;color:#b9c9b9} .toc a.sub:hover{background:var(--panel);color:var(--text);text-decoration:none} .toc a.sub.on{color:var(--accent);background:#e9f6ee;font-weight:600;border-left-color:transparent} .star{color:#c98a2e;font-weight:700} .sec-top{margin-top:30px;text-align:right} .sec-top a{font-size:13px;color:var(--muted)} .sec-top a:hover{color:var(--accent);text-decoration:none} /* 区块 */ section{padding:62px 0;border-bottom:1px solid var(--line);scroll-margin-top:80px} section:last-of-type{border-bottom:none} h2{margin:0 0 10px;font-size:24px;font-weight:700} .sub{color:var(--muted);margin:0 0 30px;font-size:15px;max-width:820px;line-height:1.8} .sub.tight{margin-bottom:12px} .sub.top{margin-top:16px} /* 卡片栅格 */ .grid{display:grid;gap:20px} .g3{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))} .g2{grid-template-columns:repeat(auto-fit,minmax(400px,1fr))} .card{background:var(--bg);border:1px solid var(--line);border-radius:6px;padding:22px 24px 20px} .card h3{margin:0 0 10px;font-size:17px;font-weight:700} .card p{margin:0;color:var(--muted);font-size:15px;line-height:1.8} .num{display:inline-flex;align-items:center;justify-content:center;min-width:34px;height:24px; padding:0 7px;border-radius:4px;margin-bottom:13px;font-weight:700;font-size:13px; color:var(--accent);background:#e9f6ee;border:1px solid #cde8d6} /* 学科入口卡 */ .subjs{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:20px} .subj{display:block;border:1px solid var(--line);border-radius:6px;padding:22px 24px;background:var(--bg); transition:.15s border-color,.15s box-shadow} .subj:hover{border-color:#cfe0cf;box-shadow:0 2px 10px rgba(28,33,38,.05);text-decoration:none} .subj .h{display:flex;align-items:baseline;gap:10px} .subj h3{margin:0;font-size:18px;color:var(--text)} .subj .tag{margin-left:auto;flex:none;font-size:12.5px;color:var(--muted);border:1px solid var(--line); border-radius:4px;padding:2px 8px;background:var(--panel)} .subj p{margin:10px 0 0;color:var(--muted);font-size:15px;line-height:1.8} .subj .meta{margin-top:16px;padding-top:12px;border-top:1px solid var(--line); font-size:13px;color:var(--muted);display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap} .subj .meta .go{color:var(--accent);font-weight:600} /* 时间线 */ .tl{list-style:none;margin:0;padding:0 0 0 28px;border-left:2px solid var(--line)} .tl li{position:relative;padding:0 0 34px 16px} .tl li:last-child{padding-bottom:0} .tl li::before{content:"";position:absolute;left:-35px;top:8px;width:12px;height:12px;border-radius:50%; background:var(--bg);border:2px solid var(--accent)} .tl .stage{font-size:12.5px;color:var(--accent);font-weight:700;letter-spacing:.03em} .tl h3{margin:3px 0 6px;font-size:17px} .tl p{margin:0;color:var(--muted);font-size:15px;line-height:1.8;max-width:820px} /* 列表 */ ul.bul,ol.bul{margin:0;padding-left:22px;color:var(--muted);font-size:15px;line-height:1.8} ul.bul li,ol.bul li{margin:9px 0} ul.bul b,ol.bul b{color:var(--text);font-weight:600} ol.bul li::marker{color:var(--accent);font-weight:700} /* 考点卡 */ .card .khead{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:10px} .card .khead h3{margin:0;font-size:17px} .card .khead .no{font-size:12.5px;font-weight:700;color:var(--accent);background:#e9f6ee; border:1px solid #cde8d6;border-radius:4px;padding:2px 8px} .card .khead .now{font-size:12.5px;font-weight:700;color:var(--ok);background:var(--ok-bg); border:1px solid var(--ok-line);border-radius:4px;padding:2px 8px} .card .chips{margin:12px 0 0} /* 表格 */ table{width:100%;border-collapse:collapse;font-size:15px;border:1px solid var(--line); border-radius:6px;overflow:hidden} th,td{text-align:left;padding:13px 18px;border-bottom:1px solid var(--line);vertical-align:top;line-height:1.75} th{color:var(--muted);font-weight:600;background:var(--panel)} tr:last-child td{border-bottom:none} /* 代码 */ pre,code{font-family:ui-monospace,Consolas,"Cascadia Mono",monospace} pre{background:#fdfaeb;border:1px solid var(--line);border-radius:6px;padding:18px 22px; overflow:auto;font-size:14px;color:#1f2a22;line-height:1.85;margin:20px 0 0} code.i{background:#f7f4dc;border:1px solid #e6dfb8;padding:1px 6px;border-radius:4px;font-size:13.5px} /* 按钮 */ .row{display:flex;flex-wrap:wrap;gap:12px} .btn{display:inline-flex;align-items:center;gap:8px;padding:11px 18px;border-radius:5px; border:1px solid var(--line);background:var(--bg);color:var(--text);font-size:14.5px; transition:.15s border-color,.15s background} .btn:hover{background:var(--panel);border-color:#cfe0cf;text-decoration:none} .btn.primary{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600} .btn.primary:hover{background:var(--accent-dk);border-color:var(--accent-dk)} /* 图集 */ .gal{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:20px} figure{margin:0;background:var(--bg);border:1px solid var(--line);border-radius:6px;overflow:hidden} figure img{display:block;width:100%;height:auto;background:#10141c} figcaption{padding:13px 16px;font-size:14px;color:var(--muted);border-top:1px solid var(--line);line-height:1.7} figcaption b{color:var(--text);font-weight:600} /* 矢量配图（SVG 示意图）：白底、居中，与截图类图区分 */ figure.dia{margin:24px 0;padding:0;background:#fff;border:1px solid var(--line); border-radius:12px;overflow:hidden;box-shadow:0 1px 2px rgba(28,33,38,.04); transition:box-shadow .18s ease} figure.dia:hover{box-shadow:0 6px 22px rgba(28,33,38,.07)} figure.dia img{display:block;width:100%;height:auto;background:#fff} figure.dia figcaption{margin:0;padding:11px 18px;border-top:1px solid var(--line); background:#fbfdfb;text-align:left;font-size:12.5px;color:var(--muted);line-height:1.65} figure.dia figcaption b{color:var(--text);font-weight:600} figure.dia figcaption a{color:var(--accent)} /* 章节卡内的加厚分块：重点 / 易错 / 题型 */ .card .grp{margin-top:16px;padding-top:13px;border-top:1px solid var(--line)} .card .grp + .grp{margin-top:12px} .card .grp .gt{font-size:13px;font-weight:700;letter-spacing:.03em;margin-bottom:6px} .card .grp .gt.k1{color:var(--accent)} .card .grp .gt.k2{color:#b0522a} .card .grp .gt.k3{color:var(--ok)} .card .grp ul.bul{padding-left:20px;font-size:14.5px} .card .grp ul.bul li{margin:6px 0} /* SQL 沙盒 */ textarea.sb{width:100%;min-height:300px;font-family:ui-monospace,Consolas,"Cascadia Mono",monospace; font-size:14px;padding:14px 16px;border:1px solid var(--line);border-radius:6px; background:var(--panel);color:var(--text);line-height:1.7;resize:vertical} textarea.sb:focus{outline:none;border-color:#cfe0cf;background:#fff} .sb-examples{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0} .sb-examples button{font:inherit;font-size:13.5px;padding:6px 12px;border:1px solid var(--line); border-radius:4px;background:var(--bg);color:var(--muted);cursor:pointer} .sb-examples button:hover{color:var(--accent);border-color:#cfe0cf} .sb-meta{color:var(--muted);font-size:13.5px;margin-top:10px} .sb-err{border:1px solid #e8cccc;background:#fdf4f4;color:#8a3b3b;border-radius:6px; padding:12px 16px;font-size:14.5px;margin-top:16px} .sb-ok{border:1px solid var(--ok-line);background:var(--ok-bg);color:var(--ok);border-radius:6px; padding:10px 16px;font-size:14px;margin-top:16px} .sb-table{margin-top:14px;overflow:auto} table.sb{font-size:14px} table.sb th,table.sb td{padding:9px 13px;white-space:nowrap} td.null{color:#9aa4ae;font-style:italic} /* 代码输出区（浅绿底，与代码区的淡黄底区分） */ pre.sb-out{margin-top:14px;background:#f2f9f2;border:1px solid #cde8d6;border-radius:6px; padding:14px 16px;font-size:14px;line-height:1.75;color:#26302a;white-space:pre-wrap; word-break:break-word;max-height:420px;overflow:auto} pre.sb-out:empty{display:none} .sb-stdin{margin-top:14px} .sb-stdin label{display:block;font-size:13.5px;color:var(--muted);margin-bottom:6px} .sb-stdin textarea{min-height:120px} /* 课堂练习（可折叠） */ details{margin-top:16px;border:1px solid var(--line);border-radius:6px;padding:12px 16px;background:var(--panel)} summary{cursor:pointer;font-size:14.5px;font-weight:600;color:var(--text)} summary:hover{color:var(--accent)} details ol{margin:10px 0 0;padding-left:22px;color:var(--muted);font-size:14.5px;line-height:1.8} details ol li{margin:7px 0} details .ans{display:block;color:var(--text);font-size:14px;margin-top:5px} /* 提示 / 待补充 */ .note{border:1px dashed var(--warn-line);background:var(--warn-bg);border-radius:6px; padding:16px 20px;color:var(--warn);font-size:15px;line-height:1.8} .note b{color:#4f3d0a} .note + .note{margin-top:14px} .subjs + .note{margin-top:26px} /* 上下页 */ .pager{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap} .pager a{font-size:14.5px} footer{padding:44px 0 70px;color:var(--muted);font-size:13.5px} @media (max-width:1040px){ .layout{grid-template-columns:1fr;gap:0} .toc{position:static;margin:0 0 8px;padding:14px 16px 12px} .toc .t{border-bottom:none;padding-bottom:4px;margin-bottom:4px} .toc a{display:inline-block;margin:0 8px 8px 0;border:1px solid var(--line);border-left-width:1px} .toc a.on{border-left-color:var(--accent)} .toc a.back{display:block;border:none;border-top:1px solid var(--line);margin-top:8px} } @media (max-width:720px){ header.hero{padding:52px 0 40px} section{padding:44px 0} .card,.subj{padding:18px 20px 16px} .subj .h{flex-wrap:wrap} } /* ================= 视觉增强层（追加，覆盖同名前序定义） ================= */ :root{ --bg-soft:#ffffff; --line-soft:#eef1ea; --shadow-sm:0 1px 2px rgba(24,32,44,.04), 0 1px 3px rgba(24,32,44,.05); --shadow-md:0 6px 20px rgba(24,32,44,.08); --radius:8px; } body{background:var(--bg-soft)} ::selection{background:#cdeed9;color:#123020} /* 首屏保持纯白，与浅灰内容区形成层次 */ header.hero{background:#fff} /* 顶部导航：半透明 + 毛玻璃 + 细阴影 */ nav.top{background:rgba(255,255,255,.9);backdrop-filter:saturate(180%) blur(10px); -webkit-backdrop-filter:saturate(180%) blur(10px);box-shadow:0 1px 0 rgba(24,32,44,.05)} nav.top a.nl{transition:color .15s,border-color .15s} /* 卡片：统一圆角与柔和阴影，悬停轻微浮起 */ .card,.subj,figure,details,table,pre{border-radius:var(--radius)} .card{box-shadow:var(--shadow-sm);transition:border-color .18s,box-shadow .18s} .card:hover{border-color:#d8e5d6;box-shadow:var(--shadow-md)} .subj{box-shadow:var(--shadow-sm)} .subj:hover{transform:translateY(-1px);box-shadow:var(--shadow-md);border-color:#d8e5d6} figure{box-shadow:var(--shadow-sm);transition:box-shadow .18s} figure:hover{box-shadow:var(--shadow-md)} .toc{box-shadow:var(--shadow-sm)} .toc a{border-radius:5px} /* 章节标题：左侧强调条 */ h2{position:relative;padding-left:16px} h2::before{content:"";position:absolute;left:0;top:.3em;width:5px;height:.95em;border-radius:3px; background:linear-gradient(180deg,#4cb877,#1e8e4f)} /* 表格：表头淡黄、悬停行浅绿提示 */ th{background:#faf7e8;color:#4a5244;letter-spacing:.01em} td{background:#fff} tbody tr:hover td,table tr:hover td{background:#f7fbf3} table{box-shadow:var(--shadow-sm)} table.sb tr:hover td{background:transparent} /* 按钮：柔和阴影与浮起 */ .btn{box-shadow:var(--shadow-sm);transition:background .15s,border-color .15s,box-shadow .18s,transform .18s} .btn:hover{box-shadow:0 3px 10px rgba(24,32,44,.09);transform:translateY(-1px)} .btn.primary{box-shadow:0 1px 2px rgba(30,142,79,.32)} .btn.primary:hover{box-shadow:0 4px 14px rgba(30,142,79,.3)} /* 标签 */ .chip{transition:border-color .15s,color .15s} .chip:hover{border-color:#cfe0cf;color:var(--text)} /* 代码块：淡黄底 + 左侧绿色细条，与正文明显拉开 */ pre{background:#fdfaeb;border-left:3px solid #86c9a3} code.i{background:#f7f4dc;border-color:#e6dfb8} /* 折叠面板：指示箭头 */ summary{list-style:none} summary::-webkit-details-marker{display:none} summary::before{content:"▸";display:inline-block;margin-right:8px;color:var(--accent); transition:transform .15s} details[open] summary::before{transform:rotate(90deg)} details[open]{background:#fff;box-shadow:var(--shadow-sm)} /* 列表标记 */ ul.bul li::marker{color:#a9bfa9} ol.bul li::marker{color:var(--accent)} /* 滚动条 */ *{scrollbar-width:thin;scrollbar-color:#ccd6ca transparent} ::-webkit-scrollbar{width:10px;height:10px} ::-webkit-scrollbar-track{background:transparent} ::-webkit-scrollbar-thumb{background:#c8d4c5;border-radius:6px;border:2px solid transparent; background-clip:content-box} ::-webkit-scrollbar-thumb:hover{background:#b0c0ad;background-clip:content-box} /* 页脚 */ footer{border-top:1px solid var(--line-soft);margin-top:8px;padding-top:26px} /* 数字等宽，表格与代码对齐更整齐 */ table,pre,code,.num,.no{font-variant-numeric:tabular-nums} /* 打印时隐藏导航与目录 */ @media print{nav.top,.toc,.sec-top,.sb-examples,.row{display:none}} /* ================================================================== UI 补丁（2026-10-02 追加，原文件 1-304 行未改动） 5 段各自独立：01 焦点环 / 02 动效降级 / 03 对比度 / 04 触控 / 05 深色模式 备份：assets/style.css.bak-20261002 ================================================================== */ /* ---------- 01 焦点可见性 ---------- 原文件 focus 只命中 1 次（textarea.sb:focus{outline:none}）， 且那一条是把轮廓关掉、换成几乎看不出差别的边框变色（#e4e8ec → #c9d4e0）。 22 个 button + 33 个 summary 原本完全没有作者定义的焦点样式。 用 :focus-visible 而非 :focus —— 鼠标点击时不会冒出难看的框。 */ :where(a, button, summary, input, textarea, select, [tabindex]):focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; } /* 覆盖原有的 outline:none，让沙盒输入框也走同一套环 */ textarea.sb:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* summary 是整站「课堂练习」折叠控件（33 个），焦点时给和 hover 同级的可视反馈 */ summary:focus-visible { color: var(--accent); } /* ---------- 02 动效降级 ---------- 原生有 scroll-behavior:smooth、多处 transition、.subj/.btn 的 translateY(-1px)、 summary 箭头 rotate(90deg)。scroll-behavior:smooth 配合 toc.js 的滚动高亮， 点目录会触发长距离平滑滚动，这组最伤。 */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } } /* ---------- 03 对比度修复 td.null ---------- 原 #9aa4ae 对白底仅 2.54:1，是全站唯一色彩硬失败。影响 SQL 沙盒里的 NULL 值。 改为 #6b7785，对白底 4.6:1。 */ td.null { color: #6b7785; } /* ---------- 04 触控目标 ---------- 原 .sb-examples button 约 32px 高、gap 仅 8px；.toc a 约 36px。 32px 已过 WCAG 2.5.8 的 24px 门槛，这里解决的是误触手感而非合规。 只在粗指针设备生效，桌面不受影响。 */ @media (pointer: coarse) { .sb-examples { gap: 10px; } .sb-examples button { padding: 10px 15px; font-size: 14px; } .toc a { padding: 9px 11px; } } /* ================================================================== 05 深色模式（2026-10-10 停用，用户要求全站固定白底） 原「跟随系统深色模式」自动切换已移除 —— 系统处于深色模式时 页面曾自动变黑，与"白底"要求冲突。 如需恢复：见同目录 style.css.bak-20261010-darkmode ================================================================== */ /* ---------- 03 锚点跳转补偿 ---------- 顶部 nav.top 是 sticky（60px 高）。section 本身已有 scroll-margin-top:80px， 但目录里的考点链接指向 .khead（卡片内的考点标题）与 details，它们没有补偿， 跳转后标题会被导航条盖住 —— 表现为"点了目录，内容好像往下多跳了一截"。 这里给这些非 section 的锚点目标统一留出导航条高度 + 余量。 */ .card .khead, .card h3, details, [id^="k"] { scroll-margin-top: 96px; } /* ================================================================== 未来加页时保住的两条纪律 ① 不要新增