/* ============================================================ Hive数据仓库工具 · 课程学习网站样式 ============================================================ */ :root{ --bg:#f4f6fb; --panel:#ffffff; --panel-2:#fbfcff; --ink:#141d33; --ink-2:#33415c; --muted:#63739a; --line:#e3e9f5; --line-2:#eef2fa; --brand:#1f4fd8; --brand-soft:#eaefff; --brand-2:#0d9488; --brand-2-soft:#e6f7f5; --accent:#f59e0b; --accent-soft:#fff5e2; --danger:#e11d48; --ok:#16a34a; --code-bg:#0f1729; --code-ink:#e6edff; --shadow:0 1px 2px rgba(18,32,66,.05), 0 8px 28px rgba(18,32,66,.07); --shadow-sm:0 1px 2px rgba(18,32,66,.06); --radius:16px; --radius-sm:10px; --sidebar-w:296px; } [data-theme="dark"]{ --bg:#0b1120; --panel:#141c2f; --panel-2:#172033; --ink:#e9eefc; --ink-2:#c4d0ea; --muted:#93a3c6; --line:#25314c; --line-2:#1d2740; --brand:#7aa2ff; --brand-soft:#1a2340; --brand-2:#2dd4bf; --brand-2-soft:#122b2a; --accent:#fbbf24; --accent-soft:#2c2412; --code-bg:#080d18; --code-ink:#e6edff; --shadow:0 1px 2px rgba(0,0,0,.3), 0 10px 30px rgba(0,0,0,.35); } *{box-sizing:border-box} [hidden]{display:none !important} html{scroll-behavior:auto} /* 锚点定位：给所有可跳转目标留出吸顶栏的高度，跳转后标题不会被遮住 */ [id]{scroll-margin-top:86px} .kp:target,.q-block:target,.lab-step:target{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)} h2.sec:target,h3.sub:target{background:linear-gradient(90deg,var(--brand-soft),transparent);border-radius:8px} body{ margin:0; background:var(--bg); color:var(--ink); font-family:"Microsoft YaHei","PingFang SC","Hiragino Sans GB","Source Han Sans SC","Noto Sans CJK SC",system-ui,-apple-system,"Segoe UI",sans-serif; font-size:15.5px; line-height:1.75; -webkit-font-smoothing:antialiased; } a{color:var(--brand); text-decoration:none} a:hover{text-decoration:underline} .skip{position:absolute; left:-9999px} .skip:focus{left:12px; top:12px; background:var(--panel); padding:8px 12px; border-radius:8px; z-index:99} /* ---------------- shell ---------------- */ .shell{display:flex; min-height:100vh} .sidebar{ width:var(--sidebar-w); flex:0 0 var(--sidebar-w); position:fixed; inset:0 auto 0 0; background:var(--panel); border-right:1px solid var(--line); display:flex; flex-direction:column; z-index:30; } .main{margin-left:var(--sidebar-w); flex:1; min-width:0; display:flex; flex-direction:column} /* ---------------- sidebar ---------------- */ .brand{display:flex; gap:12px; align-items:center; padding:18px 18px 14px; border-bottom:1px solid var(--line)} .brand-mark{ width:46px; height:46px; border-radius:12px; flex:0 0 46px; background:linear-gradient(135deg,#1f4fd8,#0d9488); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:12px; letter-spacing:.5px; } .brand-text{display:flex; flex-direction:column; line-height:1.3; min-width:0} .brand-text strong{font-size:15px} .brand-text span{font-size:12px; color:var(--muted)} .nav{overflow-y:auto; padding:12px 10px 20px; flex:1; scrollbar-width:thin} .nav-group{margin-bottom:14px} .nav-title{font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); padding:6px 10px; font-weight:700} .nav ul{list-style:none; margin:0; padding:0} .nav li a{ display:block; padding:6px 10px; border-radius:8px; color:var(--ink-2); font-size:13.6px; line-height:1.45; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .nav li a:hover{background:var(--line-2); text-decoration:none; color:var(--ink)} .nav li a.active{background:var(--brand-soft); color:var(--brand); font-weight:700} [data-theme="dark"] .nav li a.active{color:#a9c2ff} .nav-home{display:block; padding:9px 12px; border-radius:10px; font-weight:700; color:var(--ink); font-size:14px} .nav-home:hover{background:var(--line-2); text-decoration:none} .nav-home.active{background:var(--brand); color:#fff} .side-foot{border-top:1px solid var(--line); padding:12px 14px 14px; background:var(--panel-2)} .prog-label{display:flex; justify-content:space-between; font-size:12px; color:var(--muted); margin-bottom:6px} .prog-label b{color:var(--brand)} .prog-bar{height:7px; border-radius:99px; background:var(--line); overflow:hidden} .prog-bar i{display:block; height:100%; background:linear-gradient(90deg,var(--brand),var(--brand-2)); transition:width .3s} .theme-btn{margin-top:10px; width:100%; padding:7px; border:1px solid var(--line); background:transparent; color:var(--ink-2); border-radius:9px; cursor:pointer; font-size:12.5px; font-family:inherit} .theme-btn:hover{background:var(--line-2)} /* ---------------- topbar ---------------- */ .topbar{ position:sticky; top:0; z-index:20; display:flex; align-items:center; gap:14px; padding:10px 26px; background:color-mix(in srgb, var(--panel) 88%, transparent); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); } .burger{display:none; border:1px solid var(--line); background:var(--panel); border-radius:9px; padding:5px 10px; cursor:pointer; font-size:16px; color:var(--ink)} .crumbs{font-size:12.6px; color:var(--muted); display:flex; gap:7px; flex-wrap:wrap; align-items:center; min-width:0} .crumbs i{opacity:.5; font-style:normal} .crumbs a{color:var(--muted)} .crumbs span{color:var(--ink-2); font-weight:600} .top-actions{margin-left:auto; display:flex; align-items:center; gap:12px} .search-trigger{ border:1px solid var(--line); background:var(--panel); color:var(--muted); cursor:pointer; border-radius:10px; padding:6px 12px; font-size:12.8px; font-family:inherit; } .search-trigger:hover{border-color:var(--brand); color:var(--brand)} .search-trigger kbd{background:var(--line-2); border-radius:4px; padding:1px 5px; font-size:11px; margin-left:3px; font-family:inherit} .top-title{display:none} /* ---------------- content ---------------- */ .content{max-width:1000px; width:100%; padding:26px 34px 70px; margin:0 auto} .foot{border-top:1px solid var(--line); padding:20px 34px 34px; color:var(--muted); font-size:12.6px; max-width:1000px; margin:0 auto; width:100%} .foot-meta{margin-top:5px} /* ---------------- hero ---------------- */ .hero{ position:relative; overflow:hidden; border-radius:22px; padding:34px 36px; color:#fff; background:linear-gradient(135deg,#1738a8 0%,#1f4fd8 42%,#0d9488 100%); box-shadow:var(--shadow); } .hero:after{content:""; position:absolute; right:-60px; top:-70px; width:280px; height:280px; border-radius:50%; background:rgba(255,255,255,.10)} .hero:before{content:""; position:absolute; right:90px; bottom:-90px; width:190px; height:190px; border-radius:50%; background:rgba(255,255,255,.07)} .hero h1{margin:0 0 8px; font-size:30px; letter-spacing:.5px} .hero p{margin:0; color:rgba(255,255,255,.9); max-width:70ch} .hero-tags{display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; position:relative; z-index:2} .hero-tags span{background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.25); border-radius:99px; padding:4px 12px; font-size:12.6px} .hero-slim{padding:26px 30px} .hero-slim h1{font-size:24px} /* ---------------- generic ---------------- */ h2.sec{ font-size:20px; margin:38px 0 14px; padding-left:13px; border-left:4px solid var(--brand); line-height:1.35; } h2.sec small{font-weight:400; color:var(--muted); font-size:13px; margin-left:8px} h3.sub{font-size:16.5px; margin:24px 0 10px} p{margin:9px 0} .lead{font-size:16.4px; color:var(--ink-2)} .muted{color:var(--muted)} .grid{display:grid; gap:16px} .g2{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))} .g3{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))} .g4{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))} .card{ background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:18px 20px; box-shadow:var(--shadow-sm); } .card h4{margin:0 0 8px; font-size:15.6px} .card p{margin:6px 0; font-size:14.2px; color:var(--ink-2)} .card .meta{font-size:12.4px; color:var(--muted)} a.card{display:block; color:inherit; transition:transform .16s, box-shadow .16s, border-color .16s} a.card:hover{transform:translateY(-2px); box-shadow:var(--shadow); border-color:var(--brand); text-decoration:none} .pill{display:inline-block; font-size:11.8px; padding:2px 9px; border-radius:99px; background:var(--brand-soft); color:var(--brand); font-weight:700; margin-right:6px} .pill.g{background:var(--brand-2-soft); color:var(--brand-2)} .pill.a{background:var(--accent-soft); color:#b45309} .pill.n{background:var(--line-2); color:var(--muted)} [data-theme="dark"] .pill{color:#a9c2ff} [data-theme="dark"] .pill.g{color:#5eead4} [data-theme="dark"] .pill.a{color:#fcd34d} .list-tight{margin:8px 0; padding-left:20px} .list-tight li{margin:4px 0} .callout{border-left:4px solid var(--accent); background:var(--accent-soft); border-radius:0 12px 12px 0; padding:12px 16px; margin:14px 0} .callout.info{border-color:var(--brand); background:var(--brand-soft)} .callout.ok{border-color:var(--ok); background:rgba(22,163,74,.08)} .callout b{display:block; margin-bottom:2px} .kbd{font-family:ui-monospace,Consolas,monospace; font-size:12.6px; background:var(--line-2); border:1px solid var(--line); border-radius:6px; padding:1px 6px; color:var(--ink-2)} /* ---------------- knowledge point ---------------- */ .kp{ background:var(--panel); border:1px solid var(--line); border-left:4px solid var(--brand); border-radius:14px; padding:18px 20px 16px; margin:16px 0; box-shadow:var(--shadow-sm); position:relative; } .kp.done{border-left-color:var(--ok); background:linear-gradient(0deg, rgba(22,163,74,.045), rgba(22,163,74,.045)), var(--panel)} .kp-head{display:flex; align-items:flex-start; gap:12px; flex-wrap:wrap} .kp-no{font-family:ui-monospace,Consolas,monospace; font-size:12.6px; font-weight:700; color:#fff; background:var(--brand); border-radius:7px; padding:2px 8px; margin-top:3px} .kp h3{margin:0; font-size:17.4px; flex:1; min-width:200px} .kp-obj{display:flex; flex-wrap:wrap; gap:6px; margin:10px 0 4px} .kp-obj span{font-size:12.6px; background:var(--brand-2-soft); color:var(--brand-2); border-radius:7px; padding:3px 9px} [data-theme="dark"] .kp-obj span{color:#5eead4} .kp-body{margin-top:6px} .kp-body ul{margin:8px 0; padding-left:20px} .kp-body li{margin:4px 0; color:var(--ink-2)} .kp-body p.bullet{padding-left:15px; position:relative; margin:6px 0; color:var(--ink-2)} .kp-body p.bullet:before{content:""; position:absolute; left:2px; top:.72em; width:5px; height:5px; border-radius:50%; background:var(--brand-2)} .mark{position:absolute; right:14px; top:14px; display:flex; align-items:center; gap:6px; font-size:12px; color:var(--muted); background:var(--panel-2); border:1px solid var(--line); border-radius:99px; padding:3px 10px; cursor:pointer; user-select:none} .mark input{cursor:pointer; accent-color:var(--ok)} .mark:hover{border-color:var(--ok); color:var(--ok)} details.raw{margin-top:12px; border-top:1px dashed var(--line); padding-top:10px} details.raw>summary{cursor:pointer; font-size:13.2px; color:var(--muted); font-weight:600} details.raw>summary:hover{color:var(--brand)} details.raw .slide{border-left:2px solid var(--line); padding:2px 0 2px 12px; margin:10px 0} details.raw .slide b{font-size:12.4px; color:var(--muted); display:block} details.raw .slide p{margin:3px 0; font-size:13.8px; color:var(--ink-2)} /* ---------------- code ---------------- */ .code{background:var(--code-bg); border-radius:12px; overflow:hidden; margin:12px 0; border:1px solid rgba(255,255,255,.06)} .code-bar{display:flex; justify-content:space-between; align-items:center; padding:6px 12px; background:rgba(255,255,255,.06); color:#93a5cc; font-size:11.6px; letter-spacing:.1em} .code-bar .copy{background:transparent; border:1px solid rgba(255,255,255,.18); color:#c3d0ee; border-radius:6px; padding:2px 9px; font-size:11.4px; cursor:pointer; font-family:inherit} .code-bar .copy:hover{background:rgba(255,255,255,.12)} .code pre{margin:0; padding:13px 15px; overflow-x:auto} .code code{font-family:ui-monospace,"Cascadia Mono",Consolas,"Courier New",monospace; font-size:13.2px; line-height:1.62; color:var(--code-ink); white-space:pre} code.inl{font-family:ui-monospace,Consolas,monospace; font-size:13px; background:var(--line-2); border:1px solid var(--line); border-radius:6px; padding:1px 6px; color:#b0306a} [data-theme="dark"] code.inl{color:#ff9ec4} /* ---------------- tables ---------------- */ .table-wrap{overflow-x:auto; margin:14px 0; border:1px solid var(--line); border-radius:12px; background:var(--panel)} .table-cap{font-size:12.6px; color:var(--muted); padding:9px 14px 0} table{border-collapse:collapse; width:100%; font-size:13.8px} th,td{border-bottom:1px solid var(--line); padding:9px 13px; text-align:left; vertical-align:top} thead th{background:var(--panel-2); font-size:13px; color:var(--ink); white-space:nowrap; font-weight:700} tbody tr:hover{background:var(--panel-2)} tbody tr:last-child td{border-bottom:none} /* ---------------- figures ---------------- */ figure.fig{margin:14px 0; text-align:center} figure.fig img{max-width:100%; height:auto; border:1px solid var(--line); border-radius:12px; background:#fff; cursor:zoom-in; box-shadow:var(--shadow-sm)} figure.fig figcaption{font-size:12.4px; color:var(--muted); margin-top:6px} .lightbox{position:fixed; inset:0; background:rgba(8,12,22,.88); display:flex; align-items:center; justify-content:center; z-index:60; padding:24px} .lightbox img{max-width:96vw; max-height:92vh; border-radius:10px} .lb-close{position:absolute; right:20px; top:16px; background:rgba(255,255,255,.15); color:#fff; border:none; border-radius:9px; width:38px; height:38px; font-size:17px; cursor:pointer} /* ---------------- chain ---------------- */ .chain{display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); margin:14px 0} .chain-col{background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:14px 16px} .chain-col h5{margin:0 0 8px; font-size:13px; color:var(--muted); letter-spacing:.08em; text-transform:uppercase} .chain-col a{display:block; padding:8px 10px; border-radius:9px; background:var(--panel-2); margin:6px 0; border:1px solid var(--line-2)} .chain-col a:hover{border-color:var(--brand); text-decoration:none} .chain-col a b{display:block; font-size:14px} .chain-col a span{font-size:12.4px; color:var(--muted)} .pager{display:flex; justify-content:space-between; gap:12px; margin:36px 0 0; flex-wrap:wrap} .pager a{flex:1; min-width:220px; background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:13px 16px} .pager a:hover{border-color:var(--brand); text-decoration:none} .pager .dir{font-size:12px; color:var(--muted); display:block} .pager b{font-size:14.6px} /* ---------------- stages / roadmap ---------------- */ .stage{position:relative; padding:18px 20px 18px 62px; background:var(--panel); border:1px solid var(--line); border-radius:16px; margin:14px 0; box-shadow:var(--shadow-sm)} .stage .no{position:absolute; left:16px; top:16px; width:32px; height:32px; border-radius:10px; color:#fff; background:linear-gradient(135deg,#1f4fd8,#0d9488); display:flex; align-items:center; justify-content:center; font-weight:800; font-size:13px} .stage h4{margin:0 0 4px; font-size:16.6px} .stage .goal{color:var(--ink-2); font-size:14.2px; margin:4px 0 10px} .stage .links{display:flex; flex-wrap:wrap; gap:8px} .stage .links a{font-size:12.8px; background:var(--panel-2); border:1px solid var(--line); border-radius:99px; padding:4px 11px} .stage .links a:hover{border-color:var(--brand); text-decoration:none} .flow{display:flex; flex-wrap:wrap; align-items:stretch; gap:10px; margin:18px 0} .flow-node{flex:1; min-width:150px; background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:12px 14px; text-align:center; box-shadow:var(--shadow-sm)} .flow-node b{display:block; font-size:14px} .flow-node span{font-size:12px; color:var(--muted)} .flow-arrow{align-self:center; color:var(--brand); font-weight:800} /* ---------------- toc ---------------- */ .toc{background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:14px 18px; margin:16px 0} .toc h5{margin:0 0 8px; font-size:12.6px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted)} .toc ol{margin:0; padding-left:20px; columns:2; column-gap:26px} .toc li{margin:3px 0; font-size:13.6px; break-inside:avoid} @media(max-width:760px){ .toc ol{columns:1} } /* ---------------- search ---------------- */ .search-overlay{position:fixed; inset:0; background:rgba(9,14,26,.62); z-index:70; display:flex; justify-content:center; padding-top:9vh} .search-box{width:min(720px,92vw); background:var(--panel); border-radius:16px; box-shadow:var(--shadow); overflow:hidden; display:flex; flex-direction:column; max-height:78vh} #searchInput{border:none; border-bottom:1px solid var(--line); padding:16px 18px; font-size:16px; background:transparent; color:var(--ink); font-family:inherit; outline:none} .search-results{overflow-y:auto; padding:8px} .search-results a{display:block; padding:10px 12px; border-radius:10px; color:inherit} .search-results a:hover,.search-results a.sel{background:var(--brand-soft); text-decoration:none} .search-results .r-title{font-weight:700; font-size:14.4px} .search-results .r-meta{font-size:12.2px; color:var(--muted)} .search-results .r-snip{font-size:13px; color:var(--ink-2); margin-top:2px} .search-results mark{background:var(--accent-soft); color:inherit; padding:0 2px; border-radius:3px} .hint{color:var(--muted); font-size:13.4px; padding:10px 12px} /* ---------------- lab ---------------- */ .lab-step{border-left:3px solid var(--line); padding:2px 0 2px 16px; margin:18px 0} .lab-step h4{margin:0 0 6px; font-size:15.6px} .lab-step .stepno{font-family:ui-monospace,Consolas,monospace; color:var(--brand); font-weight:700; margin-right:6px} .figref{display:inline-block; font-size:12.4px; color:var(--accent); background:var(--accent-soft); border-radius:6px; padding:1px 8px; margin:3px 4px 3px 0} [data-theme="dark"] .figref{color:#fcd34d} .cmd-note{font-size:12.6px; color:var(--muted); margin:2px 0 6px} /* ---------------- 实操示例 ---------------- */ .kp-ex{margin-top:14px; border:1px dashed var(--brand-2); border-radius:12px; padding:12px 14px; background:var(--brand-2-soft)} [data-theme="dark"] .kp-ex{background:rgba(13,148,136,.10)} .kp-ex-h{font-size:13px; font-weight:700; color:var(--brand-2); margin-bottom:6px; letter-spacing:.06em} [data-theme="dark"] .kp-ex-h{color:#5eead4} .kp-ex p{margin:6px 0; font-size:14.2px} p.tip{font-size:13.6px; color:var(--ink-2); background:var(--accent-soft); border-radius:8px; padding:8px 12px; margin:9px 0} p.goal{font-size:14.6px; color:var(--ink-2); margin:4px 0 8px} p.stepmark{font-size:12.8px; font-weight:700; color:var(--brand); background:var(--brand-soft); display:inline-block; border-radius:99px; padding:2px 12px; margin:12px 0 2px} .lab-step .code{margin:10px 0} .lab-step .table-wrap{margin:10px 0} .q-block{background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:14px 18px; margin:14px 0; box-shadow:var(--shadow-sm)} .q-block .q-head{display:flex; gap:10px; align-items:flex-start} .q-no{font-family:ui-monospace,Consolas,monospace; font-size:12.4px; font-weight:700; color:#fff; background:var(--brand-2); border-radius:7px; padding:2px 8px; margin-top:2px; white-space:nowrap} .q-block h4{margin:0; font-size:15.4px} .q-block details{margin-top:10px} .q-block summary{cursor:pointer; font-size:13.4px; color:var(--brand); font-weight:600} .q-block summary:hover{text-decoration:underline} /* ---------------- 零基础起步 ---------------- */ .sstep{background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:16px 20px; margin:14px 0; box-shadow:var(--shadow-sm)} .sstep h4{margin:0 0 6px; font-size:16px; display:flex; gap:10px; align-items:center} .sno{width:24px; height:24px; flex:0 0 24px; border-radius:8px; background:var(--brand); color:#fff; display:inline-flex; align-items:center; justify-content:center; font-size:13px} p.do{margin:6px 0 10px; font-size:14.6px; color:var(--ink-2)} .see{background:#0b1220; border-radius:12px; padding:12px 14px; margin:10px 0; color:#cfe0ff} .see b{display:block; font-size:12.6px; color:#8fb0ff; margin-bottom:6px; font-weight:700} .see pre{margin:0; white-space:pre-wrap; font-family:ui-monospace,Consolas,monospace; font-size:13px; line-height:1.6} .see p.muted{margin:8px 0 0; color:#93a5cc !important} .trb{background:#fff7ed; border:1px solid #fed7aa; border-radius:12px; padding:10px 14px; margin:10px 0} [data-theme="dark"] .trb{background:#2a2013; border-color:#5a4520} .trb b{display:block; font-size:13px; color:#b45309; margin-bottom:4px} [data-theme="dark"] .trb b{color:#fcd34d} .trb ul{margin:0; padding-left:18px} .trb li{margin:6px 0; font-size:13.6px; color:var(--ink-2)} table.explain td:first-child{white-space:nowrap; width:1%} table.explain td{font-size:13.6px} /* ---------------- misc ---------------- */ .tagline{font-size:15.4px; color:var(--brand-2); font-weight:600; margin:6px 0 0} .kv{display:grid; grid-template-columns:auto 1fr; gap:6px 16px; font-size:14px; margin:10px 0} .kv dt{color:var(--muted); white-space:nowrap} .kv dd{margin:0} .stat{display:flex; gap:22px; flex-wrap:wrap; margin:18px 0} .stat div{background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:12px 18px; min-width:120px} .stat b{display:block; font-size:22px; color:var(--brand); line-height:1.3} .stat span{font-size:12.6px; color:var(--muted)} .backtop{position:fixed; right:22px; bottom:22px; z-index:25; border:1px solid var(--line); background:var(--panel); border-radius:12px; width:42px; height:42px; cursor:pointer; color:var(--ink); box-shadow:var(--shadow-sm)} .hidden{display:none !important} @media(max-width:1080px){ .sidebar{transform:translateX(-100%); transition:transform .22s} .sidebar.open{transform:none; box-shadow:var(--shadow)} .main{margin-left:0} .burger{display:block} .content{padding:20px 18px 60px} .hero{padding:24px 22px} .hero h1{font-size:24px} } @media print{ .sidebar,.topbar,.pager,.search-overlay,.backtop{display:none !important} .main{margin:0} .content{max-width:none; padding:0} .kp{break-inside:avoid} } /* ============ Hadoop 主题色：深青 + 琥珀 ============ */ :root{ --brand:#0e7490; --brand-soft:#e2f6fb; --brand-2:#b45309; --brand-2-soft:#fff4e0; } [data-theme="dark"]{ --brand:#22d3ee; --brand-soft:#0a2b33; --brand-2:#fbbf24; --brand-2-soft:#2c2412; } .nav li a.active{ background:var(--brand-soft); color:var(--brand); } .brand-mark{ background:linear-gradient(135deg,#0e7490,#22d3ee); } .hero{ background:linear-gradient(135deg,#083344 0%,#0e7490 48%,#22d3ee 100%); } .stage .no{ background:linear-gradient(135deg,#0e7490,#22d3ee); color:#fff; } /* ---- 可读性修正：流程图节点用浅底卡片，渐变只用于圆形编号徽章 ---- */ .flow-node{ background:var(--panel); border:1px solid var(--line); box-shadow:var(--shadow-sm); } .flow-node b{ color:var(--ink); } .flow-node span{ color:var(--brand); font-weight:700; } a.flow-node:hover{ border-color:var(--brand); background:var(--brand-soft); text-decoration:none; } .flow-arrow{ color:var(--brand); } .stage .no{ color:#fff; } /* ===== 2026 视觉升级层 START ===== */ /* ============================================================================ 2026 视觉升级层 v1 — 令牌 / 排版 / 表面 只覆盖"结构与质感"，不重定义 --brand（各站主题色仍由各自主题块决定） ============================================================================ */ /* ---------- 1. 设计令牌 ---------- */ :root{ --bg:#f6f7fb; --panel:#ffffff; --panel-2:#f8f9fd; --ink:#0e1524; --ink-2:#39445a; --muted:#68748f; --line:#e7eaf3; --line-2:#eff2f8; --r-lg:22px; --r-md:15px; --r-sm:10px; --sh-1:0 1px 2px rgba(15,23,42,.05); --sh-2:0 1px 3px rgba(15,23,42,.06), 0 10px 28px -12px rgba(15,23,42,.14); --sh-3:0 2px 6px rgba(15,23,42,.07), 0 24px 56px -20px rgba(15,23,42,.20); --fs-body:15.5px; --lh-body:1.78; --font-sans:"MiSans","HarmonyOS Sans SC","PingFang SC","Microsoft YaHei","Source Han Sans SC",system-ui,-apple-system,"Segoe UI",sans-serif; --font-mono:"JetBrains Mono","Cascadia Mono",ui-monospace,Consolas,monospace; } [data-theme="dark"]{ --bg:#080c16; --panel:#0f1524; --panel-2:#131a2b; --ink:#eef2fb; --ink-2:#c2cde2; --muted:#8b9ab8; --line:#1e2740; --line-2:#18203a; --sh-1:0 1px 2px rgba(0,0,0,.4); --sh-2:0 1px 3px rgba(0,0,0,.45), 0 10px 30px -12px rgba(0,0,0,.6); --sh-3:0 2px 8px rgba(0,0,0,.5), 0 26px 60px -20px rgba(0,0,0,.75); } /* ---------- 2. 排版 ---------- */ body{ background:var(--bg); font-family:var(--font-sans); font-size:var(--fs-body); line-height:var(--lh-body); letter-spacing:.008em; font-feature-settings:"kern" 1,"liga" 1; text-rendering:optimizeLegibility; } /* 背景极淡的层次光，避免纯色平板感 */ body::before{ content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; background: radial-gradient(60vw 40vh at 88% -6%, color-mix(in oklab, var(--brand) 9%, transparent), transparent 60%), radial-gradient(50vw 34vh at 6% 4%, color-mix(in oklab, var(--brand-2) 7%, transparent), transparent 62%); } [data-theme="dark"] body::before{ background: radial-gradient(60vw 40vh at 88% -6%, color-mix(in oklab, var(--brand) 16%, transparent), transparent 62%), radial-gradient(50vw 34vh at 4% 2%, color-mix(in oklab, var(--brand-2) 12%, transparent), transparent 64%); } h1,h2,h3,h4{ letter-spacing:-.018em; } .hero h1{ font-size:clamp(25px,2.5vw,33px); font-weight:800; line-height:1.24; letter-spacing:-.025em; text-wrap:balance; } .hero p{ font-size:15px; line-height:1.72; color:rgba(255,255,255,.92); } h2.sec{ font-size:20.5px; font-weight:800; letter-spacing:-.015em; border-left:0; padding-left:0; margin:44px 0 16px; display:flex; align-items:center; gap:11px; } h2.sec::before{ content:""; flex:0 0 4px; width:4px; height:20px; border-radius:99px; background:linear-gradient(180deg,var(--brand),var(--brand-2)); } h2.sec small{ font-weight:500; font-size:12.5px; color:var(--muted); letter-spacing:0; } h3.sub{ font-size:16.5px; font-weight:750; margin:26px 0 12px; letter-spacing:-.012em; } p{ margin:11px 0; text-wrap:pretty; } .lead{ font-size:16px; } strong,b{ font-weight:700; } /* 正文里的行内代码更"贴" */ code.inl{ font-family:var(--font-mono); font-size:.88em; letter-spacing:0; padding:.12em .42em; border-radius:6px; background:color-mix(in oklab, var(--brand) 7%, var(--panel)); border:1px solid color-mix(in oklab, var(--brand) 16%, var(--line)); color:color-mix(in oklab, var(--brand) 78%, #101828); } [data-theme="dark"] code.inl{ background:color-mix(in oklab, var(--brand) 14%, var(--panel)); border-color:color-mix(in oklab, var(--brand) 26%, var(--line)); color:color-mix(in oklab, var(--brand) 70%, #ffffff); } /* ---------- 3. 侧栏 ---------- */ .sidebar{ box-shadow:1px 0 0 var(--line); } .brand{ padding:20px 18px 16px; } .brand-mark{ width:44px; height:44px; flex:0 0 44px; border-radius:13px; font-size:11.5px; letter-spacing:.6px; box-shadow:0 4px 14px -6px color-mix(in oklab, var(--brand) 70%, transparent); } .brand-text strong{ font-size:14.6px; letter-spacing:-.01em; } .brand-text span{ font-size:11.5px; } .nav{ padding:14px 10px 22px; } .nav-title{ font-size:10.5px; letter-spacing:.16em; font-weight:700; opacity:.85; padding:8px 10px 4px; } .nav li a{ font-size:13.4px; padding:7px 11px; border-radius:9px; transition:background .14s ease, color .14s ease, transform .14s ease; } .nav li a:hover{ transform:translateX(1px); } .nav li a.active{ position:relative; } .nav li a.active::before{ content:""; position:absolute; left:3px; top:50%; translate:0 -50%; width:3px; height:14px; border-radius:99px; background:var(--brand); } .nav-home{ font-size:13.8px; padding:8px 12px; border-radius:10px; } .nav-home.active{ box-shadow:0 6px 18px -8px color-mix(in oklab, var(--brand) 80%, transparent); } .prog-bar{ height:6px; background:var(--line-2); } .prog-bar i{ box-shadow:0 0 12px -2px color-mix(in oklab, var(--brand) 70%, transparent); } .theme-btn{ border-radius:10px; transition:background .15s ease, border-color .15s ease; } .theme-btn:hover{ border-color:color-mix(in oklab, var(--brand) 40%, var(--line)); } /* ---------- 4. 表面：卡片 / 知识卡 / 容器 ---------- */ .card{ border-radius:var(--r-md); border:1px solid var(--line); box-shadow:var(--sh-2); padding:20px 22px; transition:transform .18s cubic-bezier(.2,.8,.2,1), box-shadow .18s ease, border-color .18s ease; } a.card:hover{ transform:translateY(-3px); box-shadow:var(--sh-3); border-color:color-mix(in oklab, var(--brand) 45%, var(--line)); } .card h4{ font-size:15px; letter-spacing:-.012em; } .card p{ font-size:13.8px; line-height:1.72; } .kp{ border-radius:var(--r-md); border-left-width:3px; box-shadow:var(--sh-2); padding:20px 22px 18px; transition:box-shadow .2s ease, border-color .2s ease; } .kp:hover{ box-shadow:var(--sh-3); } .kp h3{ font-size:17px; letter-spacing:-.014em; } .kp-no{ border-radius:8px; font-size:12px; padding:3px 9px; box-shadow:0 4px 12px -6px color-mix(in oklab, var(--brand) 75%, transparent); } .mark{ border-radius:99px; font-size:11.5px; padding:3px 11px; transition:all .15s ease; } .table-wrap{ border-radius:var(--r-md); box-shadow:var(--sh-1); border-color:var(--line); } thead th{ font-size:12.5px; letter-spacing:.02em; padding:11px 14px; background:color-mix(in oklab, var(--brand) 4%, var(--panel-2)); } th,td{ padding:11px 14px; } tbody tr:nth-child(even){ background:color-mix(in oklab, var(--brand) 2%, transparent); } tbody tr:hover{ background:color-mix(in oklab, var(--brand) 6%, transparent); } .code{ border-radius:var(--r-md); box-shadow:var(--sh-2); } .code-bar{ padding:8px 14px; font-size:11px; letter-spacing:.12em; } .code code{ font-family:var(--font-mono); font-size:12.9px; line-height:1.66; } .callout{ border-radius:var(--r-sm); padding:14px 18px; margin:16px 0; box-shadow:var(--sh-1); } .pill{ border-radius:99px; font-size:11.5px; padding:3px 10px; letter-spacing:.01em; } .toc{ border-radius:var(--r-md); box-shadow:var(--sh-1); padding:16px 20px; } .flow-node{ border-radius:var(--r-md); transition:transform .16s cubic-bezier(.2,.8,.2,1), box-shadow .16s, border-color .16s, background .16s; } a.flow-node:hover{ transform:translateY(-2px); box-shadow:var(--sh-2); } .flow-arrow{ opacity:.5; } .stat div{ border-radius:var(--r-md); box-shadow:var(--sh-1); padding:14px 20px; } .stat b{ font-size:23px; letter-spacing:-.02em; font-variant-numeric:tabular-nums; } .stat span{ font-size:12px; } .pager a{ border-radius:var(--r-md); box-shadow:var(--sh-1); transition:transform .16s, box-shadow .16s, border-color .16s; } .pager a:hover{ transform:translateY(-2px); box-shadow:var(--sh-2); } .sstep,.q-block,.lab-step{ border-radius:var(--r-md); box-shadow:var(--sh-2); } .q-no,.sno{ box-shadow:0 4px 12px -6px color-mix(in oklab, var(--brand) 70%, transparent); } /* 顶部吸顶栏：更轻、更透 */ .topbar{ padding:11px 26px; box-shadow:0 1px 0 var(--line); } .search-trigger{ border-radius:10px; transition:all .15s ease; } .search-trigger:hover{ background:color-mix(in oklab, var(--brand) 6%, var(--panel)); } .crumbs{ font-size:12.4px; } /* 页脚 */ .foot{ font-size:12.4px; padding-top:26px; } /* ---------- 5. Hero 质感：噪点 + 光斑 + 玻璃标签 ---------- */ .hero{ position:relative; isolation:isolate; overflow:hidden; border-radius:var(--r-lg); padding:38px 40px 34px; box-shadow:0 1px 2px rgba(8,15,30,.10), 0 26px 60px -28px color-mix(in oklab, var(--brand) 85%, transparent); } /* 柔光 */ .hero::before{ content:""; position:absolute; inset:-40% -10% auto auto; width:520px; height:520px; z-index:0; background:radial-gradient(circle at 50% 50%, rgba(255,255,255,.42), rgba(255,255,255,0) 62%); filter:blur(6px); pointer-events:none; } .hero::after{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none; opacity:.5; 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='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.32'/%3E%3C/svg%3E"); mix-blend-mode:soft-light; } .hero > *{ position:relative; z-index:2; } .hero h1{ text-shadow:0 2px 18px rgba(6,12,26,.28); } .hero-tags span{ background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.28); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); font-size:12px; padding:5px 13px; letter-spacing:.01em; transition:background .18s ease, transform .18s ease; } .hero-tags span:hover{ background:rgba(255,255,255,.24); transform:translateY(-1px); } .hero-slim{ padding:30px 34px; } /* ---------- 6. 代码块：窗口感 ---------- */ .code{ border:1px solid color-mix(in oklab, #ffffff 8%, transparent); background:linear-gradient(180deg, #101a2e 0%, #0d1424 100%); } [data-theme="dark"] .code{ background:linear-gradient(180deg,#0a1020 0%,#070c18 100%); } .code-bar{ position:relative; padding:9px 14px 9px 62px; background:linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.03)); border-bottom:1px solid rgba(255,255,255,.06); color:#9fb2d6; font-weight:600; letter-spacing:.14em; } /* 三个窗口圆点 */ .code-bar::before{ content:""; position:absolute; left:14px; top:50%; translate:0 -50%; width:34px; height:10px; background: radial-gradient(circle at 5px 5px, #ff5f57 5px, transparent 5.6px), radial-gradient(circle at 17px 5px, #febc2e 5px, transparent 5.6px), radial-gradient(circle at 29px 5px, #28c840 5px, transparent 5.6px); opacity:.85; } .code-bar .copy{ border-radius:7px; font-size:11px; padding:3px 10px; transition:all .15s ease; } .code-bar .copy:hover{ background:rgba(255,255,255,.14); color:#fff; } .code pre{ padding:15px 18px; } /* 左侧渐变引导线 */ .code pre{ border-left:0; } /* ---------- 7. 表格：表头更"钉" ---------- */ .table-wrap{ background:var(--panel); } thead th{ position:relative; } thead th::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:color-mix(in oklab, var(--brand) 22%, var(--line)); } td{ font-variant-numeric:tabular-nums; } /* ---------- 8. 动效 ---------- */ @media (prefers-reduced-motion: no-preference){ .hero{ animation:hd-rise .5s cubic-bezier(.2,.8,.2,1) both; } h2.sec{ animation:hd-rise .45s cubic-bezier(.2,.8,.2,1) both; } .card,.kp,.sstep,.q-block{ animation:hd-rise .5s cubic-bezier(.2,.8,.2,1) both; } @keyframes hd-rise{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } } } a,button,.card,.kp,.nav li a,.pill,.flow-node,.search-results a{ will-change:auto; } :focus-visible{ outline:2px solid color-mix(in oklab, var(--brand) 70%, transparent); outline-offset:2px; border-radius:8px; } /* 图片卡片 */ figure.fig img{ border-radius:var(--r-md); box-shadow:var(--sh-2); transition:transform .2s ease, box-shadow .2s ease; } figure.fig img:hover{ transform:translateY(-2px) scale(1.006); box-shadow:var(--sh-3); } figure.fig figcaption{ font-size:11.8px; letter-spacing:.01em; } /* 搜索面板 */ .search-box{ border-radius:18px; box-shadow:0 30px 80px -24px rgba(6,12,26,.5); border:1px solid var(--line); } #searchInput{ font-size:15.5px; padding:17px 20px; } .search-results a{ border-radius:11px; } /* ---------- 9. 暗色主题精修 ---------- */ [data-theme="dark"] .hero{ box-shadow:0 1px 2px rgba(0,0,0,.5), 0 26px 60px -30px color-mix(in oklab, var(--brand) 55%, transparent); } [data-theme="dark"] .hero::after{ opacity:.32; } [data-theme="dark"] .card{ border-color:var(--line); background:linear-gradient(180deg, var(--panel) 0%, color-mix(in oklab, var(--panel) 92%, #000 8%) 100%); } [data-theme="dark"] a.card:hover{ border-color:color-mix(in oklab, var(--brand) 55%, var(--line)); } [data-theme="dark"] .kp{ background:linear-gradient(180deg, var(--panel) 0%, color-mix(in oklab, var(--panel) 94%, #000 6%) 100%); } [data-theme="dark"] .table-wrap{ background:var(--panel); } [data-theme="dark"] thead th{ background:color-mix(in oklab, var(--brand) 10%, var(--panel-2)); } [data-theme="dark"] tbody tr:nth-child(even){ background:color-mix(in oklab, #ffffff 2.5%, transparent); } [data-theme="dark"] tbody tr:hover{ background:color-mix(in oklab, var(--brand) 14%, transparent); } [data-theme="dark"] .sidebar{ background:color-mix(in oklab, var(--panel) 96%, #000 4%); } [data-theme="dark"] .topbar{ background:color-mix(in srgb, var(--panel) 78%, transparent); } [data-theme="dark"] figure.fig img{ background:#0b111d; } [data-theme="dark"] .callout{ background:color-mix(in oklab, var(--accent) 16%, var(--panel)); } [data-theme="dark"] .callout.info{ background:color-mix(in oklab, var(--brand) 16%, var(--panel)); } [data-theme="dark"] .callout.ok{ background:color-mix(in oklab, #16a34a 16%, var(--panel)); } [data-theme="dark"] .see{ background:#05080f; border:1px solid #16203a; } [data-theme="dark"] .toc,[data-theme="dark"] .flow-node,[data-theme="dark"] .stat div,[data-theme="dark"] .pager a{ background:var(--panel); } /* ---------- 10. 统计卡与阶段卡精修 ---------- */ .stat{ gap:14px; } .stat div{ position:relative; overflow:hidden; min-width:118px; padding:13px 20px 12px; border:1px solid var(--line); border-radius:var(--r-md); background:linear-gradient(180deg, var(--panel) 0%, color-mix(in oklab, var(--brand) 4%, var(--panel)) 100%); transition:transform .16s cubic-bezier(.2,.8,.2,1), box-shadow .16s, border-color .16s; } .stat div::after{ content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:linear-gradient(180deg, var(--brand), var(--brand-2)); opacity:.85; } .stat div:hover{ transform:translateY(-2px); box-shadow:var(--sh-2); border-color:color-mix(in oklab, var(--brand) 40%, var(--line)); } .stat b{ font-size:24px; line-height:1.15; color:var(--brand); } .stat span{ font-size:11.5px; letter-spacing:.06em; color:var(--muted); } .stage{ border-radius:var(--r-md); box-shadow:var(--sh-2); transition:box-shadow .18s, border-color .18s; } .stage:hover{ box-shadow:var(--sh-3); border-color:color-mix(in oklab, var(--brand) 35%, var(--line)); } .stage .no{ border-radius:11px; box-shadow:0 6px 16px -8px color-mix(in oklab, var(--brand) 85%, transparent); } .stage .links a{ border-radius:99px; transition:all .15s ease; } .stage .links a:hover{ background:color-mix(in oklab, var(--brand) 10%, var(--panel)); } /* 章节/工具卡片：hover 时左侧出现品牌色细线 */ .grid > a.card{ position:relative; overflow:hidden; } .grid > a.card::before{ content:""; position:absolute; left:0; top:14px; bottom:14px; width:3px; border-radius:99px; background:linear-gradient(180deg,var(--brand),var(--brand-2)); opacity:0; transform:scaleY(.4); transform-origin:center; transition:opacity .18s ease, transform .18s cubic-bezier(.2,.8,.2,1); } .grid > a.card:hover::before{ opacity:1; transform:scaleY(1); } /* 小尺寸标签（meta 行）更克制 */ .card .meta{ font-size:11.8px; letter-spacing:.01em; } /* 移动端微调 */ @media(max-width:1080px){ .hero{ border-radius:18px; padding:26px 22px; } .content{ padding:18px 16px 56px; } h2.sec{ font-size:18.5px; margin:32px 0 12px; } } @media(max-width:640px){ .stat div{ flex:1 1 44%; min-width:0; } .hero h1{ font-size:22px; } } /* ---------- 11. Hero 文字安全区：左侧暗角遮罩（保证白字对比度 ≥ 4.5） ---------- */ .hero::after{ background-image: linear-gradient(102deg, rgba(6,12,26,.46) 0%, rgba(6,12,26,.30) 30%, rgba(6,12,26,.12) 52%, rgba(6,12,26,0) 70%), 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='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.32'/%3E%3C/svg%3E"); mix-blend-mode:normal; opacity:1; } .hero h1,.hero p{ position:relative; z-index:2; } .hero-tags{ position:relative; z-index:2; } /* 亮端仍有渐变可见，但文字区被压暗 */ /* ---------- 12. 细节收尾 ---------- */ /* 表格首列强调 */ tbody td:first-child{ font-weight:600; color:var(--ink); } /* 细滚动条 */ *{ scrollbar-width:thin; scrollbar-color:color-mix(in oklab, var(--brand) 28%, var(--line)) transparent; } ::-webkit-scrollbar{ width:10px; height:10px; } ::-webkit-scrollbar-thumb{ background:color-mix(in oklab, var(--brand) 26%, var(--line)); border-radius:99px; border:2px solid var(--bg); } ::-webkit-scrollbar-thumb:hover{ background:color-mix(in oklab, var(--brand) 45%, var(--line)); } ::-webkit-scrollbar-track{ background:transparent; } /* 链接下划线动效 */ a:not(.card):not(.nav-home):not(.flow-node):hover{ text-decoration-thickness:1.5px; text-underline-offset:3px; } /* 选中文字用品牌色 */ ::selection{ background:color-mix(in oklab, var(--brand) 26%, transparent); } /* ---------- 13. 打印样式 ---------- */ @media print{ @page{ margin:14mm 12mm; } body{ background:#fff !important; color:#000; font-size:11.5pt; line-height:1.6; } body::before{ display:none !important; } .sidebar,.topbar,.pager,.search-overlay,.lightbox,.backtop,.theme-btn,.mark{ display:none !important; } .main{ margin:0 !important; } .content{ max-width:none; padding:0; } .hero{ background:#f3f4f7 !important; color:#111 !important; box-shadow:none; border:1px solid #ddd; border-radius:8px; padding:12mm 10mm; } .hero::before,.hero::after{ display:none !important; } .hero h1,.hero p,.hero-tags span{ color:#111 !important; } .hero-tags span{ background:#fff !important; border:1px solid #ccc !important; } .card,.kp,.sstep,.q-block,.code,.table-wrap{ box-shadow:none !important; border:1px solid #ddd !important; break-inside:avoid; } .code{ background:#f7f8fa !important; } .code code{ color:#111 !important; } .code-bar{ background:#eceef3 !important; color:#555 !important; } .code-bar::before{ display:none !important; } a{ color:#111 !important; text-decoration:none; } h2.sec{ break-after:avoid; } h2.sec::before{ background:#888 !important; } details{ display:block; } details[open] > *{ display:revert; } .stat div{ background:#fff !important; } } /* ---------- 14. 文档级三栏：右侧页内目录 + 阅读进度 ---------- */ .read-progress{ position:fixed; left:0; top:0; height:2px; width:100%; z-index:90; background:transparent; pointer-events:none; } .read-progress i{ display:block; height:100%; width:0; background:linear-gradient(90deg, var(--brand), var(--brand-2)); transition:width .08s linear; } .toc-rail{ display:none; } @media (min-width:1420px){ /* 正文左对齐 + 右侧预留目录栏：宽度按"主区宽度"计算，避免与侧栏重叠 */ body.with-toc .content{ max-width:min(940px, calc(100vw - 296px - 264px)); margin-left:0; margin-right:auto; padding-left:36px; padding-right:28px; } body.with-toc .toc-rail{ display:block; position:fixed; z-index:22; top:88px; right:26px; width:208px; max-height:calc(100vh - 140px); overflow-y:auto; padding:14px 6px 14px 14px; border-left:1px solid var(--line); font-size:12.6px; line-height:1.5; scrollbar-width:thin; } .toc-rail-title{ font-size:10.5px; letter-spacing:.16em; font-weight:700; color:var(--muted); margin-bottom:10px; text-transform:uppercase; } .toc-rail ol{ list-style:none; margin:0; padding:0; } .toc-rail li{ margin:1px 0; } .toc-rail li.lv2{ padding-left:11px; } .toc-rail a{ display:block; padding:4px 9px; border-radius:7px; color:var(--muted); text-decoration:none; border-left:2px solid transparent; transition:color .14s ease, background .14s ease, border-color .14s ease; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .toc-rail a:hover{ color:var(--ink); background:color-mix(in oklab, var(--brand) 7%, transparent); } .toc-rail a.on{ color:var(--brand); font-weight:700; background:color-mix(in oklab, var(--brand) 10%, transparent); border-left-color:var(--brand); } .toc-rail li.lv2 a{ font-size:12px; } } @media print{ .toc-rail,.read-progress{ display:none !important; } } /* ---------- 15. 自托管字体（OFL 开源字体子集，离线可用） ---------- */ @font-face{ font-family:"Noto Sans SC Local"; src:url("../fonts/noto-sans-sc-subset.woff2") format("woff2"); font-weight:300 800; font-style:normal; font-display:swap; } @font-face{ font-family:"SourceCodeMono Local"; src:url("../fonts/sourcecode-mono-subset.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap; } :root{ --font-sans:"Noto Sans SC Local","MiSans","HarmonyOS Sans SC","PingFang SC","Microsoft YaHei","Source Han Sans SC",system-ui,sans-serif; --font-mono:"SourceCodeMono Local","JetBrains Mono","Cascadia Mono",ui-monospace,Consolas,monospace; } body{ font-family:var(--font-sans); } .code code,code.inl,.kbd,.kp-no,.q-no,.stepno,.sno{ font-family:var(--font-mono); } /* 标题略微收紧，中文大字更"整" */ h1,h2,h3,h4,.hero h1,h2.sec,.kp h3{ font-feature-settings:"kern" 1,"palt" 1; } /* ---------- 16. 编辑感：宋体标题 + 更大呼吸感 ---------- */ @font-face{ font-family:"Noto Serif SC Local"; src:url("../fonts/noto-serif-sc-subset.woff2") format("woff2"); font-weight:300 800; font-style:normal; font-display:swap; } :root{ --font-serif:"Noto Serif SC Local","Source Han Serif SC","Noto Serif SC","Songti SC","SimSun",serif; } /* 展示级标题用宋体（正文仍无衬线，形成"教材感"对比） */ .hero h1,.hub-hero h1{ font-family:var(--font-serif); font-weight:600; letter-spacing:.012em; line-height:1.28; } .hub-hero h1{ font-size:clamp(26px,2.6vw,34px); } h2.sec{ font-family:var(--font-serif); font-weight:600; letter-spacing:.008em; font-size:21.5px; } h2.sec small{ font-family:var(--font-sans); font-weight:500; letter-spacing:0; } .hero p{ font-family:var(--font-sans); } /* 呼吸感：章节间距加大、卡片内距放宽 */ h2.sec{ margin:54px 0 18px; } h2.sec::before{ height:22px; width:3px; } h3.sub{ margin:30px 0 13px; } p{ margin:12px 0; } .kp{ padding:22px 24px 20px; margin:20px 0; } .kp-body p, .kp-body li{ line-height:1.86; } .grid{ gap:18px; } .content{ padding-top:30px; } /* 脚注式细节：图注/表题/meta 统一为小号无衬线 */ figure.fig figcaption,.table-cap,.card .meta{ font-family:var(--font-sans); font-size:11.6px; letter-spacing:.025em; } /* 引用块 */ blockquote{ margin:20px 0; padding:4px 0 4px 18px; border-left:2px solid var(--brand); font-family:var(--font-serif); color:var(--ink-2); } /* 暗色下宋体更轻，略提字重 */ [data-theme="dark"] .hero h1,[data-theme="dark"] h2.sec{ font-weight:550; } /* ---------- 17. 编辑感增强：章节编号 + 首字下沉 ---------- */ .content{ counter-reset: sec; } h2.sec{ counter-increment: sec; } /* 用"编号徽章"替代原来的渐变竖条 */ h2.sec::before{ content:counter(sec, decimal-leading-zero); width:auto; height:auto; flex:0 0 auto; font-family:var(--font-mono); font-size:11.5px; font-weight:700; letter-spacing:.06em; line-height:1; color:var(--brand); background:color-mix(in oklab, var(--brand) 9%, transparent); border:1px solid color-mix(in oklab, var(--brand) 24%, transparent); border-radius:6px; padding:5px 7px; background-image:none; } [data-theme="dark"] h2.sec::before{ background:color-mix(in oklab, var(--brand) 18%, transparent); border-color:color-mix(in oklab, var(--brand) 34%, transparent); color:color-mix(in oklab, var(--brand) 82%, #ffffff); } /* 首段首字下沉（只在页面第一个正文段落生效，没有就自然不显示） */ .content > p:first-of-type::first-letter, .hero-slim + h2.sec + p::first-letter{ font-family:var(--font-serif); float:left; font-size:2.55em; line-height:.92; font-weight:600; padding:6px 10px 0 0; color:var(--brand); } /* 章节间的呼吸：编号 + 标题整体略收缩，阅读更顺 */ h2.sec{ gap:10px; } /* ---------- 18. 页面转场（渐进增强，不支持则无副作用） ---------- */ @view-transition{ navigation:auto; } ::view-transition-old(root){ animation:vt-out .18s ease both; } ::view-transition-new(root){ animation:vt-in .26s cubic-bezier(.2,.8,.2,1) both; } @keyframes vt-out{ to{ opacity:0; transform:translateY(-4px); } } @keyframes vt-in{ from{ opacity:0; transform:translateY(6px); } } @media (prefers-reduced-motion: reduce){ ::view-transition-old(root),::view-transition-new(root){ animation:none !important; } } /* ---------- 19. 移动端底部 Tab 导航 ---------- */ .mtabs{ display:none; position:fixed; left:0; right:0; bottom:0; z-index:40; padding:6px max(8px, env(safe-area-inset-left)) calc(6px + env(safe-area-inset-bottom)); background:color-mix(in srgb, var(--panel) 86%, transparent); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-top:1px solid var(--line); box-shadow:0 -8px 28px -18px rgba(10,16,30,.5); } .mtab{ flex:1; display:flex; flex-direction:column; align-items:center; gap:3px; padding:7px 4px; border:0; background:transparent; cursor:pointer; color:var(--muted); font-family:inherit; font-size:10.5px; letter-spacing:.02em; border-radius:10px; text-decoration:none; transition:color .15s ease, background .15s ease; } .mtab-ico{ font-size:17px; line-height:1; filter:grayscale(.35); } .mtab.on{ color:var(--brand); background:color-mix(in oklab, var(--brand) 10%, transparent); } .mtab.on .mtab-ico{ filter:none; } .mtab:active{ background:color-mix(in oklab, var(--brand) 14%, transparent); } @media (max-width:1080px){ .mtabs{ display:flex; } body{ padding-bottom:70px; } /* 窄屏时顶部汉堡与底部"目录"重复，隐藏顶部汉堡 */ .burger{ display:none !important; } /* 侧栏抽屉浮在底部导航之上 */ .sidebar{ z-index:45; } .search-overlay{ z-index:60; } .backtop{ bottom:86px; right:14px; } .content{ padding-bottom:24px; } .foot{ padding-bottom:24px; } } @media print{ .mtabs{ display:none !important; } } /* ---------- 20. 移动端溢出修复 ---------- */ @media (max-width:1080px){ html,body{ overflow-x:hidden; } .content{ overflow-x:clip; } /* 代码块内部横向滚动，但不能把页面撑宽 */ .code{ max-width:100%; } .code pre{ max-width:100%; overflow-x:auto; } .code code{ white-space:pre; } /* 行内代码里的长路径要能断行 */ code.inl{ overflow-wrap:anywhere; word-break:break-word; } /* 表格/图片不越界 */ .table-wrap{ max-width:100%; -webkit-overflow-scrolling:touch; } img{ max-width:100%; height:auto; } /* 长英文/URL 断行 */ p,li,td,th{ overflow-wrap:break-word; } /* 目录 TOC 在窄屏单列 */ .toc ol{ columns:1; } } /* ---------- 21. 窄屏 Hero 适配：标签组安全换行 ---------- */ @media (max-width:640px){ .hero{ padding:26px 20px 22px; border-radius:18px; } .hero h1{ font-size:22.5px; line-height:1.3; } .hero p{ font-size:13.8px; line-height:1.68; } .hero-tags{ gap:6px; margin-top:13px; } .hero-tags span{ font-size:11.4px; padding:4px 10px; max-width:100%; white-space:normal; } h2.sec{ font-size:18px; margin:34px 0 12px; gap:8px; flex-wrap:wrap; } h2.sec::before{ font-size:10.5px; padding:4px 6px; } h2.sec small{ display:block; margin:2px 0 0; font-size:11.5px; } .kp{ padding:16px 16px 14px; } .kp h3{ font-size:15.8px; } .mark{ position:static; display:inline-flex; margin:0 0 8px; } .card{ padding:16px 16px; } .stat div{ min-width:0; flex:1 1 46%; padding:11px 14px; } table{ font-size:12.8px; } th,td{ padding:9px 10px; } .toc ol{ padding-left:16px; } } @media (max-width:400px){ .hero h1{ font-size:20.5px; } .mtab-txt{ font-size:10px; } } /* ============================================================================ 科技风特效层（仅落地页启用：body.fx-on） ============================================================================ */ /* ---------- 0. 全局科技感变量 ---------- */ body.fx-on{ --glow: color-mix(in oklab, var(--brand) 55%, transparent); --grid-line: color-mix(in oklab, var(--brand) 30%, transparent); } /* ---------- 1. Hero：网格 + 扫描线 + 渐变流动 ---------- */ .hero{ background-size: 220% 220% !important; } body.fx-on .hero{ animation: heroMesh 22s ease-in-out infinite; } @keyframes heroMesh{ 0%,100%{ background-position: 0% 50%; } 50% { background-position: 100% 50%; } } .hero-fx{ position:absolute; inset:0; z-index:1; pointer-events:none; overflow:hidden; border-radius:inherit; } /* 技术网格 */ .hero-fx::before{ content:""; position:absolute; inset:-1px; background-image: linear-gradient(to right, rgba(255,255,255,.10) 1px, transparent 1px), linear-gradient(to bottom, rgba(255,255,255,.10) 1px, transparent 1px); background-size: 44px 44px, 44px 44px; mask-image: radial-gradient(120% 90% at 18% 0%, #000 0%, transparent 72%); -webkit-mask-image: radial-gradient(120% 90% at 18% 0%, #000 0%, transparent 72%); opacity:.55; } /* 横向扫描线 */ .hero-fx::after{ content:""; position:absolute; left:-10%; right:-10%; top:0; height:38%; background:linear-gradient(to bottom, transparent, rgba(255,255,255,.16), transparent); filter:blur(2px); } body.fx-on .hero-fx::after{ animation: heroScan 7.5s cubic-bezier(.45,0,.55,1) infinite; } @keyframes heroScan{ 0% { transform: translateY(-40%); opacity:0; } 12% { opacity:.9; } 60% { opacity:.55; } 100% { transform: translateY(280%); opacity:0; } } /* 粒子画布 */ .hero-canvas{ position:absolute; inset:0; z-index:0; width:100%; height:100%; border-radius:inherit; opacity:.85; } /* 角落括标 */ .hero-corner{ position:absolute; width:16px; height:16px; z-index:3; pointer-events:none; border:1.5px solid rgba(255,255,255,.55); } .hero-corner.tl{ left:12px; top:12px; border-right:0; border-bottom:0; border-radius:4px 0 0 0; } .hero-corner.tr{ right:12px; top:12px; border-left:0; border-bottom:0; border-radius:0 4px 0 0; } .hero-corner.bl{ left:12px; bottom:12px; border-right:0; border-top:0; border-radius:0 0 0 4px; } .hero-corner.br{ right:12px; bottom:12px; border-left:0; border-top:0; border-radius:0 0 4px 0; } /* 状态条（运行时注入） */ .fx-status{ display:flex; flex-wrap:wrap; align-items:center; gap:14px; margin:0 0 18px; padding:9px 14px; font-family:var(--font-mono); font-size:11.5px; letter-spacing:.06em; color:var(--muted); background:color-mix(in oklab, var(--brand) 5%, var(--panel)); border:1px solid color-mix(in oklab, var(--brand) 20%, var(--line)); border-radius:10px; } .fx-status .dot{ width:7px; height:7px; border-radius:50%; background:#22c55e; box-shadow:0 0 0 0 rgba(34,197,94,.7); animation: pulseDot 2.2s ease-out infinite; } @keyframes pulseDot{ 0%{ box-shadow:0 0 0 0 rgba(34,197,94,.55); } 70%{ box-shadow:0 0 0 7px rgba(34,197,94,0); } 100%{ box-shadow:0 0 0 0 rgba(34,197,94,0); } } .fx-status b{ color:var(--brand); font-weight:700; } .fx-status .sep{ opacity:.3; } /* ---------- 2. 卡片：光斑跟随 + 发光描边 + 轻微倾斜 ---------- */ .grid > a.card, .course-card{ position:relative; isolation:isolate; transition:transform .22s cubic-bezier(.2,.8,.2,1), box-shadow .22s ease, border-color .22s ease; } .grid > a.card::after{ content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit; background:radial-gradient(220px circle at var(--mx,50%) var(--my,0%), color-mix(in oklab, var(--brand) 22%, transparent), transparent 72%); opacity:0; transition:opacity .22s ease; } .grid > a.card:hover::after{ opacity:1; } .grid > a.card:hover{ box-shadow:0 0 0 1px color-mix(in oklab, var(--brand) 45%, transparent), 0 18px 44px -18px var(--glow); transform:translateY(-4px) scale(1.004); } /* 课程卡：顶部光条流动 */ .course-card .cc-top{ background-size:220% 100% !important; animation: stripFlow 6s linear infinite; } @keyframes stripFlow{ 0%{ background-position:0% 50%; } 100%{ background-position:200% 50%; } } .course-card:hover{ box-shadow:0 0 0 1px color-mix(in oklab, var(--brand) 40%, transparent), 0 22px 52px -22px rgba(16,24,40,.45); } /* ---------- 3. 流程图：流动箭头 ---------- */ body.fx-on .flow-arrow{ animation: arrowPulse 1.8s ease-in-out infinite; opacity:.9; } @keyframes arrowPulse{ 0%,100%{ transform:translateX(0); opacity:.45; } 50% { transform:translateX(4px); opacity:1; } } body.fx-on .flow-node{ position:relative; overflow:hidden; } body.fx-on .flow-node::after{ content:""; position:absolute; left:0; right:0; top:0; height:2px; background:linear-gradient(90deg, transparent, var(--brand), transparent); transform:translateX(-100%); opacity:.9; } body.fx-on .flow-node:hover::after{ animation: sweepLine 1.1s ease forwards; } @keyframes sweepLine{ to{ transform:translateX(100%); } } /* ---------- 4. 统计数字：发光 + 等宽 ---------- */ body.fx-on .stat b{ text-shadow:0 0 22px var(--glow); font-variant-numeric:tabular-nums; } /* ---------- 5. 章节卡序号发光（阶段卡） ---------- */ body.fx-on .stage .no{ box-shadow:0 0 0 1px rgba(255,255,255,.18), 0 8px 26px -10px var(--glow); } /* ---------- 6. 门户 hub 专属 ---------- */ .hub-hero{ background-size:220% 220%; animation: heroMesh 24s ease-in-out infinite; } .hub-hero::after{ opacity:.75; } .hub-wrap .course-card{ border-radius:18px; } /* ---------- 7. 减弱动效 ---------- */ @media (prefers-reduced-motion: reduce){ body.fx-on .hero, .hub-hero, .course-card .cc-top, body.fx-on .flow-arrow, body.fx-on .hero-fx::after, .fx-status .dot{ animation:none !important; } .grid > a.card:hover{ transform:none; } } /* ---------- 8. 流程图宽屏 5 列（10 章正好两行） ---------- */ @media (min-width:1180px){ body.fx-on .flow{ gap:8px; } body.fx-on .flow-node{ flex:1 1 0; min-width:128px; padding:11px 10px; } body.fx-on .flow-node b{ font-size:13.4px; } body.fx-on .flow-node span{ font-size:11.5px; } body.fx-on .flow-arrow{ font-size:13px; margin:0 -2px; } } /* ---------- 9. Hero 鼠标视差（光斑层轻微跟随） ---------- */ body.fx-on .hero::before{ transition:transform .35s cubic-bezier(.2,.8,.2,1); will-change:transform; } body.fx-on .hero-canvas{ transition:transform .5s cubic-bezier(.2,.8,.2,1); } /* 状态条窄屏更紧凑 */ @media (max-width:640px){ .fx-status{ font-size:10.5px; gap:9px; padding:7px 11px; } .fx-status .sep{ display:none; } } /* ---------- 10. 窄屏流程图：竖排 + 箭头转向（消除左右游离箭头） ---------- */ @media (max-width:640px){ body .flow{ flex-direction:column; align-items:stretch; gap:0; padding:2px 0; counter-reset:none; } body .flow-node{ flex:0 0 auto; width:100%; min-width:0; text-align:left; padding:12px 14px; border-left:3px solid var(--brand); } body .flow-node b{ font-size:14.2px; } body .flow-node span{ font-size:11.8px; } body .flow-arrow{ display:flex; align-items:center; justify-content:center; align-self:center; margin:0; padding:5px 0; line-height:1; font-size:12px; opacity:.42; } /* 竖排后箭头向下脉动，而不是向右 */ body.fx-on .flow-arrow{ animation:arrowPulseY 1.8s ease-in-out infinite; opacity:.42; } } @keyframes arrowPulseY{ 0%,100%{ transform:rotate(90deg) translateX(0); opacity:.38; } 50% { transform:rotate(90deg) translateX(3px); opacity:.85; } } /* ---------- 11. 门户（.hub-hero）窄屏：与课程站一致的排版节奏 ---------- 门户 index.html 内有