/* 避坑手记 design system · v=20260701 · Risograph 双色印刷手册 字体由各页 的 加载:ZCOOL QingKe HuangYou / Bricolage Grotesque / Noto Sans SC / DM Mono */ :root{ --paper:#F3EEE3; --paper2:#ECE5D6; --ink:#1C1B22; --ink2:#36333d; --blue:#2A4BD0; --blue-d:#1c3494; --orange:#F0502E; --orange-d:#b53314; --over:#2E1C66; --muted:#6E675B; --line:#1C1B22; --cn:'ZCOOL QingKe HuangYou',system-ui,sans-serif; --en:'Bricolage Grotesque',system-ui,sans-serif; --body:'Noto Sans SC',system-ui,-apple-system,sans-serif; --mono:'DM Mono',ui-monospace,monospace; --wrap:1180px; } *{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{ margin:0;background:var(--paper);color:var(--ink); font-family:var(--body);font-size:17px;line-height:1.75;-webkit-font-smoothing:antialiased; background-image:radial-gradient(rgba(28,27,34,.5) .6px,transparent .7px);background-size:5px 5px; } body::before{content:"";position:fixed;inset:0;background:var(--paper);opacity:.92;z-index:-1} img{max-width:100%;height:auto;display:block} a{color:var(--blue-d)} .wrap{max-width:var(--wrap);margin:0 auto;padding:0 28px} .cn{font-family:var(--cn);font-weight:400} .en{font-family:var(--en)} .mono{font-family:var(--mono)} h1,h2,h3,h4{font-family:var(--cn);font-weight:400;letter-spacing:.01em;line-height:1.08;margin:0} .skip{position:absolute;left:-9999px} .skip:focus{left:8px;top:8px;background:var(--ink);color:var(--paper);padding:8px 12px;z-index:99;border-radius:4px} /* ---------- nav ---------- */ .nav{display:flex;align-items:center;gap:24px;padding:18px 0;border-bottom:2.5px solid var(--ink);flex-wrap:wrap} .brand{display:flex;align-items:baseline;gap:10px;text-decoration:none;color:var(--ink)} .brand .logo{font-family:var(--en);font-weight:800;font-size:24px;letter-spacing:-.01em;position:relative} .brand .logo::after{content:"";position:absolute;left:-3px;right:-3px;bottom:4px;height:11px;background:var(--orange);mix-blend-mode:multiply;z-index:-1} .brand .tag{font-family:var(--mono);font-size:11px;color:var(--blue);border:1.5px solid var(--blue);padding:1px 6px;border-radius:3px;white-space:nowrap} .nav .links{margin-left:auto;display:flex;gap:20px;font-size:15px;font-weight:500;flex-wrap:wrap} .nav .links a{text-decoration:none;color:var(--ink);padding-bottom:2px} .nav .links a:hover{box-shadow:inset 0 -8px 0 rgba(42,75,208,.2)} /* ---------- hero ---------- */ .hero{position:relative;padding:46px 0 38px;overflow:hidden} .hero .halftone{position:absolute;inset:0;background-image:radial-gradient(var(--blue) 1px,transparent 1.4px);background-size:9px 9px;opacity:.10;pointer-events:none} .hero-grid{position:relative;display:block} .kicker{font-family:var(--mono);font-size:13px;color:var(--blue);text-transform:uppercase;letter-spacing:.12em;margin-bottom:14px} .hero h1{font-size:70px;line-height:.98} .hero h1 .hl{color:var(--paper);position:relative;white-space:nowrap} .hero h1 .hl::before{content:"";position:absolute;inset:-2px -8px;background:var(--blue);transform:rotate(-1.4deg);z-index:-1} .hero h1 .o{color:var(--orange)} .lede{font-size:18px;max-width:30em;margin:22px 0 0;color:#2c2a30} .lede b{font-weight:700;color:var(--ink)} .trustrow{display:flex;flex-direction:column;gap:6px;margin-top:22px} .trustrow span{font-size:14px;color:var(--muted);display:flex;align-items:center;gap:8px} .trustrow i{width:8px;height:8px;background:var(--orange);display:inline-block;border-radius:50%;flex:none} .copied{font-size:12px;font-family:var(--mono);height:16px;margin:7px 2px 0;color:#bfe3c9} .cta{display:block;text-align:center;text-decoration:none;background:var(--orange);color:#2a0d05;font-weight:700;font-size:18px;padding:14px;border-radius:5px;margin-top:6px;box-shadow:4px 4px 0 var(--ink);border:2px solid var(--ink)} .cta:hover{transform:translate(-1px,-1px);box-shadow:6px 6px 0 var(--ink)} /* ---------- sections ---------- */ section{padding:54px 0;border-top:2.5px solid var(--ink)} .sec-head{display:flex;align-items:baseline;gap:14px;margin-bottom:30px;flex-wrap:wrap} .sec-no{font-family:var(--mono);font-size:14px;color:var(--orange)} .sec-head h2{font-size:38px} .sec-head .sub{margin-left:auto;font-size:14px;color:var(--muted);max-width:24em} /* 场景导航 */ .scenes{display:grid;grid-template-columns:repeat(12,1fr);gap:16px} .scene{border:2px solid var(--ink);border-radius:6px;padding:18px;background:var(--paper);position:relative;text-decoration:none;color:var(--ink);display:block} .scene:hover{background:var(--paper2)} .scene .n{font-family:var(--en);font-weight:800;font-size:15px;color:var(--blue)} .scene h3{font-family:var(--cn);font-size:24px;margin:6px 0 7px} .scene p{margin:0;font-size:14.5px;color:#3a3833} .scene.big{grid-column:span 7;background:var(--paper2)} .scene.sm{grid-column:span 5} .scene.t3{grid-column:span 4} .scene .dot{position:absolute;right:14px;top:14px;width:14px;height:14px;border-radius:50%;background:var(--orange);mix-blend-mode:multiply} /* playbook */ .playbook{background:var(--ink);color:var(--paper);border-radius:8px;padding:34px 30px;position:relative;overflow:hidden} .playbook .ht{position:absolute;inset:0;background-image:radial-gradient(var(--orange) 1px,transparent 1.3px);background-size:10px 10px;opacity:.14} .playbook h2{color:var(--paper);font-size:34px;position:relative} .playbook .pb-sub{position:relative;color:#d8d3c7;margin:10px 0 26px;max-width:42em} .steps{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:18px} .step{border-top:3px solid var(--orange);padding-top:12px} .step .sn{font-family:var(--en);font-weight:800;font-size:13px;color:var(--orange)} .step h4{font-size:20px;color:var(--paper);margin:4px 0 6px} .step p{font-size:13.5px;color:#cfcabd;margin:0} /* 清单 */ .checks{display:grid;grid-template-columns:1fr 1fr;gap:14px 34px} .chk{display:flex;gap:13px;align-items:flex-start;border-bottom:1.5px dashed rgba(0,0,0,.13);padding-bottom:12px} .chk .box{flex:none;width:24px;height:24px;border:2.5px solid var(--orange);border-radius:4px;position:relative;margin-top:2px} .chk .box::after{content:"";position:absolute;left:4px;top:0;width:8px;height:14px;border:solid var(--orange);border-width:0 3px 3px 0;transform:rotate(40deg)} .chk p{margin:0;font-size:15px}.chk b{font-weight:700} /* 工具卡 */ .tools{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:16px} .tool{border:2px solid var(--ink);border-radius:6px;padding:18px;background:var(--paper);position:relative;text-decoration:none;color:var(--ink);display:block} .tool:hover{background:var(--paper2)} .tool .tk{font-family:var(--mono);font-size:11px;color:var(--blue);letter-spacing:.1em} .tool h3{font-size:22px;margin:6px 0 8px} .tool p{font-size:14px;margin:0 0 12px;color:#3a3833} .tool .demo{font-family:var(--mono);font-size:13px;background:var(--paper2);border:1.5px dashed var(--ink);border-radius:4px;padding:9px 10px} .tool .demo .hl{background:var(--orange);color:#2a0d05;padding:0 3px;font-weight:500} .tool .go{display:inline-block;margin-top:12px;font-weight:700;font-size:14px;color:var(--blue-d);text-decoration:none;border-bottom:2px solid var(--blue)} /* 文章列表 zine */ .posts{border-top:2px solid var(--ink)} .post{display:grid;grid-template-columns:46px 1fr auto;gap:20px;align-items:baseline;padding:18px 0;border-bottom:1.5px solid rgba(0,0,0,.13);text-decoration:none;color:var(--ink)} .post:hover{background:rgba(42,75,208,.05)} .post .pn{font-family:var(--en);font-weight:800;color:var(--orange);font-size:16px} .post h3{font-family:var(--body);font-weight:700;font-size:20px;margin:0 0 4px} .post p{margin:0;font-size:14.5px;color:var(--muted)} .post .meta{font-family:var(--mono);font-size:12px;color:var(--muted);text-align:right;white-space:nowrap} /* 全部笔记索引 */ .ix{display:block;font-size:14.5px;padding:5px 0;color:#36333d;text-decoration:none;border-bottom:1px solid rgba(0,0,0,.08)} .ix:hover{color:var(--blue-d);padding-left:4px} /* 信任条 */ .trust{display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:center} .trust .big{font-family:var(--cn);font-size:30px;line-height:1.15} .trust ul{margin:0;padding-left:18px;font-size:15px;color:#33312c} .trust li{margin:7px 0} /* ---------- 文章页 ---------- */ .article{max-width:760px;margin:0 auto;padding:34px 0 0} .crumb{font-family:var(--mono);font-size:12.5px;color:var(--muted);margin-bottom:18px} .crumb a{color:var(--muted);text-decoration:none}.crumb a:hover{color:var(--blue-d)} .art-head h1{font-size:46px;line-height:1.05;margin:0 0 14px} .art-meta{display:flex;gap:16px;flex-wrap:wrap;font-family:var(--mono);font-size:12.5px;color:var(--muted);border-bottom:2px solid var(--ink);padding-bottom:16px;margin-bottom:8px} .art-meta b{color:var(--ink);font-weight:500} .article-cover{margin:24px 0} .article-cover img{border:2px solid var(--ink);border-radius:6px;width:100%} .article-cover figcaption{font-size:12.5px;color:var(--muted);margin-top:7px;font-family:var(--mono)} .toc{background:var(--paper2);border:2px solid var(--ink);border-radius:6px;padding:16px 20px;margin:26px 0} .toc .tt{font-family:var(--mono);font-size:12px;color:var(--blue);letter-spacing:.1em;margin-bottom:8px} .toc ol{margin:0;padding-left:20px} .toc li{margin:4px 0;font-size:15px} .toc a{color:var(--ink2);text-decoration:none}.toc a:hover{color:var(--blue-d)} .prose{font-size:17.5px;line-height:1.85} .prose h2{font-size:30px;margin:42px 0 12px;padding-top:8px} .prose h2::before{content:"";display:block;width:54px;height:5px;background:var(--orange);margin-bottom:14px} .prose h3{font-size:22px;margin:30px 0 10px;font-family:var(--body);font-weight:700} .prose p{margin:0 0 18px} .prose ul,.prose ol{margin:0 0 18px;padding-left:24px} .prose li{margin:7px 0} .prose a{color:var(--blue-d);text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:2px} .prose strong{font-weight:700} .prose blockquote{margin:22px 0;padding:4px 0 4px 20px;border-left:4px solid var(--blue);color:var(--ink2);font-style:normal} .prose code{font-family:var(--mono);font-size:.92em;background:var(--paper2);padding:1px 5px;border-radius:3px} .prose table{width:100%;border-collapse:collapse;margin:22px 0;font-size:15px} .prose th,.prose td{border:1.5px solid var(--ink);padding:9px 12px;text-align:left} .prose th{background:var(--paper2);font-weight:700} /* callout 警示框(避坑主题核心组件) */ .callout{border:2px solid var(--ink);border-radius:6px;padding:16px 18px;margin:24px 0;position:relative} .callout .co-t{font-family:var(--cn);font-size:19px;margin:0 0 6px;display:flex;align-items:center;gap:9px} .callout .co-t::before{content:"";width:14px;height:14px;flex:none;border-radius:3px} .callout p:last-child{margin-bottom:0} .callout.danger{background:#fbeae7;border-color:var(--orange-d)} .callout.danger .co-t{color:var(--orange-d)}.callout.danger .co-t::before{background:var(--orange)} .callout.warn{background:#f6efd9;border-color:#9a6a12} .callout.warn .co-t{color:#7a5410}.callout.warn .co-t::before{background:#e3a52a;border-radius:50%} .callout.note{background:#e9edfb;border-color:var(--blue-d)} .callout.note .co-t{color:var(--blue-d)}.callout.note .co-t::before{background:var(--blue)} .callout.tip{background:#e7f1ea;border-color:#1f6b46} .callout.tip .co-t{color:#1f6b46}.callout.tip .co-t::before{background:#2f9e63;transform:rotate(45deg)} /* 文中转化条 */ .inline-cta{background:var(--blue);color:var(--paper);border-radius:6px;padding:20px 22px;margin:30px 0;box-shadow:6px 6px 0 var(--ink);position:relative;overflow:hidden} .inline-cta h4{font-family:var(--cn);font-size:22px;color:var(--paper);margin:0 0 6px} .inline-cta p{margin:0 0 14px;font-size:14.5px;color:#dfe4fb} .inline-cta .ic-note{font-size:11.5px;color:#cfd6f5;margin-top:9px} /* 文章早段紧凑转化条(TOC 后) */ .cta-strip{border:2px solid var(--ink);border-radius:6px;background:var(--paper2);padding:13px 16px;margin:22px 0;display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px} .cta-strip .cs-k{font-family:var(--mono);font-weight:500;font-size:18px;letter-spacing:.04em;background:var(--paper);border:1.5px dashed var(--ink);border-radius:4px;padding:4px 10px} .cta-strip .cs-copy{font-family:var(--body);font-weight:700;font-size:13px;border:1.5px solid var(--ink);background:var(--paper);border-radius:4px;padding:5px 10px;cursor:pointer} .cta-strip .cs-copy:active{transform:scale(.97)} .cta-strip .copied{font-size:12px;font-family:var(--mono);color:#1f6b46} .cta-strip .cs-go{margin-left:auto;font-weight:700;font-size:15px;text-decoration:none;background:var(--orange);color:#2a0d05;border:2px solid var(--ink);border-radius:5px;padding:9px 15px;box-shadow:3px 3px 0 var(--ink)} .cta-strip .cs-go:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--ink)} .cta-strip .cs-note{flex-basis:100%;margin:2px 0 0;font-size:12px;color:var(--muted);line-height:1.55} .cta-strip .cs-note strong{color:var(--orange-d)} .cta-strip .cs-note a{color:var(--blue-d)} /* 移动端菜单按钮触摸目标 ≥44px */ .nav-toggle{min-height:44px;display:inline-flex;align-items:center;justify-content:center} /* FAQ */ .faq details{border-bottom:1.5px solid rgba(0,0,0,.15);padding:14px 0} .faq summary{font-weight:700;font-size:17px;cursor:pointer;list-style:none} .faq summary::marker{content:""} .faq summary::before{content:"+ ";color:var(--orange);font-family:var(--mono)} .faq details[open] summary::before{content:"– "} .faq p{margin:10px 0 2px;color:var(--ink2)} /* 作者/来源 */ .authorbox{display:flex;gap:16px;align-items:flex-start;border:2px solid var(--ink);border-radius:6px;padding:18px;margin:34px 0;background:var(--paper2)} .authorbox .av{width:48px;height:48px;flex:none;border-radius:50%;background:var(--blue);color:var(--paper);display:flex;align-items:center;justify-content:center;font-family:var(--cn);font-size:22px} .authorbox .ab-n{font-weight:700}.authorbox .ab-d{font-size:13.5px;color:var(--muted);margin-top:3px} .sources{font-size:14px;color:var(--ink2);border-top:1.5px dashed rgba(0,0,0,.2);margin-top:30px;padding-top:16px} .sources a{color:var(--blue-d)} .updated{font-family:var(--mono);font-size:12.5px;color:var(--muted);margin-top:10px} .related{margin:34px 0} .related a{display:block;padding:8px 0;border-bottom:1px solid rgba(0,0,0,.12);text-decoration:none;color:var(--ink);font-weight:500} .related a:hover{color:var(--blue-d)} /* 工具页 */ .toolpage{max-width:760px;margin:0 auto;padding:34px 0} .toolui{border:2px solid var(--ink);border-radius:6px;padding:22px;background:var(--paper2);margin:24px 0} .toolui label{display:block;font-weight:500;margin:12px 0 5px} .toolui input[type=text],.toolui textarea{width:100%;font-family:var(--mono);font-size:15px;padding:10px 12px;border:2px solid var(--ink);border-radius:5px;background:var(--paper)} .toolui button{font-family:var(--body);font-weight:700;background:var(--orange);color:#2a0d05;border:2px solid var(--ink);border-radius:5px;padding:10px 18px;cursor:pointer;box-shadow:3px 3px 0 var(--ink);margin-top:14px} .toolui button:active{transform:translate(1px,1px);box-shadow:1px 1px 0 var(--ink)} .toolui .out{margin-top:16px;font-size:15px} .chkitem{display:flex;gap:11px;align-items:flex-start;padding:9px 0;border-bottom:1px dashed rgba(0,0,0,.16)} .chkitem input{width:22px;height:22px;margin-top:2px;flex:none;accent-color:var(--orange)} /* ---------- footer ---------- */ footer{background:var(--ink);color:var(--paper);padding:48px 0 30px;border-top:8px solid var(--orange)} .fgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:28px} footer h4{font-size:19px;color:var(--paper);margin:0 0 12px} footer a{display:block;color:#d6d1c6;text-decoration:none;font-size:14px;padding:3px 0} footer a:hover{color:var(--orange)} .fdisc{font-size:12px;color:#9a958b;line-height:1.65;margin-top:22px;border-top:1px solid rgba(255,255,255,.13);padding-top:16px} /* ---------- 移动端 ---------- */ @media(max-width:860px){ .wrap{padding:0 20px} .cta-strip .cs-go{margin-left:0;flex-basis:100%;text-align:center} .crumb a,.toc a{display:inline-block;padding:6px 2px} .ix{padding:10px 2px} .related a{padding:12px 0} .chkitem input{width:24px;height:24px} .cs-copy{min-height:40px} .hero{padding:24px 0 30px} .hero h1{font-size:39px} .lede{font-size:16px;margin-top:16px} .sec-head h2{font-size:30px} .sec-head .sub{margin-left:0} .scenes{grid-template-columns:1fr} .scene.big,.scene.sm,.scene.t3{grid-column:auto} .steps{grid-template-columns:1fr 1fr} .checks,.trust,.tools{grid-template-columns:1fr} .indexgrid{grid-template-columns:1fr 1fr !important} .fgrid{grid-template-columns:1fr 1fr} .nav .links{display:none} .post{grid-template-columns:32px 1fr;gap:12px}.post .meta{display:none} .art-head h1{font-size:33px} .prose{font-size:17px} .prose h2{font-size:25px} } @media(min-width:861px){ .nav-toggle{display:none} }