:root{--navy:#0B2B4F;--navy-deep:#071C33;--navy-2:#123A63;--navy-soft:#EAF0F7;--gold:#F6B93C;--gold-deep:#E8A51F;--gold-soft:#FDF3DD;--paper:#F5F6F2;--ink:#17212B;--muted:#5B6B7A;--line:#E3E7E1;--white:#fff;--shadow:0 10px 30px rgba(11,43,79,.10);--radius:16px;--hazard:repeating-linear-gradient(-45deg,#0B2B4F 0 10px,#F6B93C 10px 20px)} *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth} body{font-family:system-ui,-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Source Han Sans SC","Noto Sans CJK SC",sans-serif;color:var(--ink);background:var(--white);line-height:1.6;-webkit-font-smoothing:antialiased} img{display:block;max-width:100%} a{color:inherit;text-decoration:none} button{font-family:inherit} .container{max-width:1180px;margin:0 auto;padding:0 22px} .eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:700;letter-spacing:.08em;color:var(--gold-deep)} .eyebrow::before{content:"";width:22px;height:3px;background:var(--hazard);border-radius:2px} .sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:28px;flex-wrap:wrap} .sec-title{font-size:clamp(24px,3.2vw,34px);font-weight:900;line-height:1.25;color:var(--navy-deep)} .sec-sub{color:var(--muted);margin-top:8px;max-width:720px;font-size:15px} .sec-sub.on-dark{color:#c2d3e4} .more-link{font-weight:700;font-size:14px;color:var(--navy);border-bottom:2px solid var(--gold);padding-bottom:2px;white-space:nowrap;cursor:pointer} /* utility + nav */ .utility{background:var(--navy-deep);color:#cfe0f0;font-size:13px} .utility .container{display:flex;justify-content:space-between;align-items:center;height:38px} .utility .u-left,.utility .u-right{display:flex;gap:18px;align-items:center} .utility .u-phone{font-weight:900;color:#fff} /* 原为裸元素选择器 header{...}，会把页面里任意
（如 FAQ 页的 .faqkb-head 标题带）也变成第二条白色吸顶栏盖住真正的 site-header。改为类选择器。 */ .site-header{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.95);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)} .nav{height:72px;display:flex;align-items:center;justify-content:space-between;gap:16px} .brand{display:flex;align-items:center;gap:10px;cursor:pointer} .brand .logo{width:40px;height:44px;object-fit:contain;display:block;flex-shrink:0} .brand .name{line-height:1.1} .brand .name b{font-size:19px;font-weight:900;color:var(--navy-deep)} .brand .name span{display:block;font-size:11px;color:var(--muted);letter-spacing:.12em} .nav-links{display:flex;align-items:center;gap:2px} .nav-links a{padding:10px 13px;font-weight:500;font-size:15px;color:var(--ink);border-radius:8px;transition:.2s} .nav-links a:hover{color:var(--navy);background:var(--navy-soft)} .nav-links a.active{color:var(--navy);font-weight:700;background:var(--navy-soft)} .nav-cta{display:flex;align-items:center;gap:12px} .btn{display:inline-flex;align-items:center;gap:8px;font-weight:700;border-radius:10px;border:0;cursor:pointer;transition:transform .15s ease,box-shadow .2s ease,background .2s ease,color .2s ease;font-family:inherit} .btn-gold{background:var(--gold);color:var(--navy-deep);padding:12px 20px;font-size:15px;box-shadow:0 6px 16px rgba(246,185,60,.4)} .btn-gold:hover{background:var(--gold-deep);transform:translateY(-1px);box-shadow:0 12px 28px rgba(246,185,60,.45)} .btn-ghost{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.5);padding:12px 20px;font-size:15px} .btn-ghost:hover{background:rgba(255,255,255,.12);transform:translateY(-1px)} .btn-navy{background:var(--navy);color:#fff;padding:13px 22px;font-size:15px} .btn-white:hover{transform:translateY(-1px);box-shadow:0 10px 22px rgba(11,43,79,.18)} /* === P0 微反馈：translateY + shadow + focus-visible (added by patch_p0_v2.py) === */ .btn:hover:not(:disabled):not(.btn-ghost):not(.btn-white){transform:translateY(-1px);box-shadow:0 10px 22px rgba(11,43,79,.18)} .btn:active:not(:disabled){transform:translateY(0);box-shadow:0 3px 8px rgba(11,43,79,.10)} .btn:focus-visible{outline:2px solid var(--primary);outline-offset:3px} .btn-navy:hover{background:var(--navy-2);transform:translateY(-1px);box-shadow:0 10px 22px rgba(11,43,79,.22)} .btn-white{background:#fff;color:var(--navy-deep);padding:12px 20px;font-size:15px;transition:transform .15s ease,box-shadow .2s ease,background .2s ease} .nav-phone{font-weight:900;color:var(--navy);font-size:16px;white-space:nowrap} .menu-toggle{display:none;background:none;border:0;width:42px;height:42px;cursor:pointer;flex-direction:column;gap:5px;align-items:center;justify-content:center} .menu-toggle span{width:24px;height:2.5px;background:var(--navy-deep);border-radius:2px} /* hero */ .hero{position:relative;background:radial-gradient(1200px 500px at 85% -10%,rgba(246,185,60,.18),transparent 60%),linear-gradient(135deg,var(--navy-deep) 0%,var(--navy) 55%,var(--navy-2) 100%);color:#fff;overflow:hidden} .hero::before{content:"";position:absolute;inset:0;opacity:.05;background-image:linear-gradient(#fff 1px,transparent 1px),linear-gradient(90deg,#fff 1px,transparent 1px);background-size:52px 52px;pointer-events:none} .hero .container{position:relative;padding-top:60px;padding-bottom:36px} .hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:44px;align-items:center} .hero-eyebrow{display:inline-flex;align-items:center;gap:10px;background:rgba(246,185,60,.14);border:1px solid rgba(246,185,60,.4);color:var(--gold);padding:7px 14px;border-radius:999px;font-size:13px;font-weight:700} .hero-eyebrow .dot{width:8px;height:8px;border-radius:50%;background:var(--gold);animation:pulse 2s infinite} @keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}} .hero h1{font-size:clamp(32px,5vw,52px);font-weight:900;line-height:1.12;margin:20px 0 16px} .hero h1 .accent{color:var(--gold)} .hero p.lead{font-size:16px;color:#d8e4f2;max-width:560px;margin-bottom:24px} .hero-ctas{display:flex;gap:14px;flex-wrap:wrap;align-items:center} .hero-stats{display:flex;margin-top:32px;border-top:1px solid rgba(255,255,255,.16);padding-top:22px;flex-wrap:wrap} .stat{flex:1;min-width:120px} .stat b{font-size:clamp(22px,2.6vw,30px);font-weight:900;color:#fff} .stat b i{color:var(--gold);font-style:normal} .stat span{display:block;font-size:12.5px;color:#b9cbdc;margin-top:2px} .hero-visual{position:relative} .ai-card{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);border-radius:18px;padding:18px;box-shadow:0 24px 60px rgba(0,0,0,.3)} .ai-card .q{display:flex;gap:10px;align-items:flex-start;margin-bottom:12px} .ai-card .q .av{flex:none;width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,var(--gold),var(--gold-deep));color:var(--navy-deep);font-weight:900;font-size:13px;display:grid;place-items:center} .ai-card .q p{font-size:14px;color:#eef4fb;padding:8px 12px;background:rgba(255,255,255,.1);border-radius:10px;border-top-left-radius:2px} .ai-card .a{display:flex;gap:10px;align-items:flex-start} .ai-card .a .av{flex:none;width:30px;height:30px;border-radius:50%;background:var(--gold);color:var(--navy-deep);font-weight:900;font-size:12px;display:grid;place-items:center} .ai-card .a .body{flex:1;font-size:13.5px;color:#e7eef6;line-height:1.55} .ai-card .a .body .src{display:inline-flex;align-items:center;gap:5px;margin-top:8px;background:rgba(246,185,60,.16);border:1px solid rgba(246,185,60,.4);color:var(--gold);padding:4px 9px;border-radius:8px;font-size:12px;font-weight:700} .hero-photo{margin-top:16px;border-radius:18px;overflow:hidden;border:1px solid rgba(255,255,255,.2);height:185px;box-shadow:0 20px 50px rgba(0,0,0,.35)} .hero-photo img{width:100%;height:100%;object-fit:cover} .hero-badge{position:absolute;top:-18px;right:8px;background:var(--gold);color:var(--navy-deep);font-weight:900;font-size:12px;padding:8px 14px;border-radius:10px;letter-spacing:.02em} /* trust */ .trust{border-bottom:1px solid var(--line)} .trust .container{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;padding:22px 22px} .trust-item{display:flex;gap:12px;align-items:center} .trust-item svg{flex:none;width:32px;height:32px;color:var(--navy)} .trust-item .t b{display:block;font-size:15px;color:var(--ink)} .trust-item .t span{font-size:12.5px;color:var(--muted)} /* sections */ section{padding:66px 0} .section-paper{background:var(--paper)} .section-navy{background:var(--navy-deep);color:#fff} .section-navy .sec-title{color:#fff} /* qualification list */ .qual-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px} .qual-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:20px 18px;transition:.25s;position:relative;overflow:hidden;display:flex;flex-direction:column;gap:10px;cursor:pointer} .qual-card::before{content:"";position:absolute;left:0;top:0;width:100%;height:4px;background:var(--navy);transition:.25s} .qual-card:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:transparent} .qual-card:hover::before{background:var(--hazard)} .qual-card .ico{width:46px;height:46px;border-radius:12px;background:var(--navy-soft);color:var(--navy);display:grid;place-items:center} .qual-card .ico svg{width:25px;height:25px} .qual-card .tag{font-size:11px;font-weight:700;color:var(--gold-deep);background:var(--gold-soft);padding:2px 8px;border-radius:6px;align-self:flex-start} .qual-card h3{font-size:15.5px;font-weight:700;color:var(--navy-deep)} .qual-card p{font-size:12.5px;color:var(--muted);line-height:1.5;flex:1} .qual-card .go{font-size:13px;font-weight:700;color:var(--gold-deep)} /* steps */ .steps{display:grid;grid-template-columns:repeat(5,1fr);position:relative} .steps::before{content:"";position:absolute;top:26px;left:6%;right:6%;height:2px;background:var(--line)} .step{padding:0 14px;position:relative} .step .node{width:52px;height:52px;border-radius:50%;background:#fff;border:3px solid var(--navy);color:var(--navy);font-weight:900;font-size:20px;display:grid;place-items:center;position:relative;z-index:2;margin-bottom:16px} .step:nth-child(even) .node{background:var(--navy);color:#fff;border-color:var(--gold)} .step h4{font-size:16px;font-weight:700;color:var(--navy-deep);margin-bottom:6px} .step p{font-size:13px;color:var(--muted);line-height:1.55} /* why */ .why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px} .why-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:24px;transition:.25s} .why-card:hover{box-shadow:var(--shadow);transform:translateY(-4px)} .why-card .k{display:flex;align-items:center;gap:12px;margin-bottom:12px} .why-card .k .ico{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:var(--navy-soft);color:var(--navy)} .why-card .k .ico svg{width:24px;height:24px} .why-card .k h3{font-size:17px;font-weight:900;color:var(--navy-deep)} .why-card p{font-size:14px;color:var(--muted);line-height:1.65} .why-card .val{margin-top:14px;font-size:26px;font-weight:900;color:var(--gold-deep)} /* article cards (list) */ .art-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px} .art-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;cursor:pointer;transition:.25s} .art-card:hover{box-shadow:var(--shadow);transform:translateY(-5px)} .art-card .cover{position:relative;height:150px;overflow:hidden} .art-card .cover img{width:100%;height:100%;object-fit:cover} .art-card .cover .tag{position:absolute;top:12px;left:12px;background:var(--gold);color:var(--navy-deep);font-weight:700;font-size:11.5px;padding:4px 9px;border-radius:7px} .art-card .body{padding:16px;display:flex;flex-direction:column;gap:8px;flex:1} .art-card .meta{font-size:12px;color:var(--muted)} .art-card h3{font-size:15.5px;font-weight:700;color:var(--navy-deep);line-height:1.4} .art-card p{font-size:12.5px;color:var(--muted);line-height:1.55;flex:1} .art-card .ai-line{font-size:12px;color:#6a5310;background:var(--gold-soft);border-left:3px solid var(--gold-deep);padding:7px 10px;border-radius:6px} /* CSS 文章封面（内容索引式，按分类区分，避免复用照片） */ .art-cover{position:relative;height:150px;overflow:hidden;display:flex;align-items:flex-end;padding:14px} .art-cover::before{content:"";position:absolute;inset:0;opacity:.09;background-image:linear-gradient(#fff 1px,transparent 1px),linear-gradient(90deg,#fff 1px,transparent 1px);background-size:22px 22px;pointer-events:none} .art-cover .glyph{position:absolute;top:12px;left:14px;z-index:2;font-size:11px;font-weight:900;color:var(--gold);background:rgba(246,185,60,.15);border:1px solid rgba(246,185,60,.4);padding:4px 9px;border-radius:7px} .art-cover .watermark{position:absolute;right:8px;top:2px;font-size:58px;font-weight:900;line-height:1;opacity:.16;color:#fff} .art-cover .bottom{position:relative;z-index:2;display:flex;justify-content:space-between;align-items:center;width:100%;gap:8px} .art-cover .bottom .d{color:#cfe0f0;font-size:12px} .art-cover .bottom .rd{color:#dce8f4;font-size:11px} .art-cover::after{content:"";position:absolute;left:0;bottom:0;height:4px;width:100%;background:var(--hazard)} .art-cover.c1{background:linear-gradient(135deg,var(--navy-deep),var(--navy-2))} .art-cover.c2{background:linear-gradient(135deg,#08243f,#0e3a63)} .art-cover.c3{background:linear-gradient(135deg,var(--navy),#14507f)} .art-cover.c4{background:linear-gradient(135deg,#071c33,#0b2b4f)} /* filter tabs */ .filter-bar{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:22px} .filter-bar button{border:1px solid var(--line);background:#fff;color:var(--muted);font-weight:600;font-size:13.5px;padding:8px 16px;border-radius:999px;cursor:pointer;transition:.2s} .filter-bar button.active{background:var(--navy);color:#fff;border-color:var(--navy)} /* video grid */ .video-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px} .video-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;transition:.25s;cursor:pointer;display:flex;flex-direction:column} .video-card:hover{box-shadow:var(--shadow);transform:translateY(-5px)} .video-thumb{position:relative;height:150px;overflow:hidden} .video-thumb img{width:100%;height:100%;object-fit:cover;transition:.4s} .video-card:hover .video-thumb img{transform:scale(1.06)} .video-thumb::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,28,51,0) 30%,rgba(7,28,51,.55))} .video-thumb .play{position:absolute;inset:0;display:grid;place-items:center;z-index:2} .video-thumb .play span{width:50px;height:50px;border-radius:50%;background:rgba(246,185,60,.95);display:grid;place-items:center} .video-thumb .play svg{width:19px;height:19px;fill:var(--navy-deep);margin-left:3px} .video-thumb .dur{position:absolute;right:10px;bottom:10px;z-index:2;background:rgba(7,28,51,.85);color:#fff;font-size:11.5px;font-weight:700;padding:3px 8px;border-radius:6px} .video-thumb .views{position:absolute;left:10px;bottom:10px;z-index:2;color:#fff;font-size:11px;text-shadow:0 1px 3px rgba(0,0,0,.5)} .video-body{padding:14px 16px 16px;display:flex;flex-direction:column;gap:8px;flex:1} .video-body .vt{font-size:13.5px;font-weight:700;color:var(--navy-deep);line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .video-body .vmeta{display:flex;justify-content:space-between;margin-top:auto;font-size:11.5px;color:var(--muted)} .video-body .vmeta .sub{background:var(--navy-soft);color:var(--navy);padding:2px 8px;border-radius:6px;font-weight:600} /* detail pages */ .detail-layout{display:grid;grid-template-columns:1fr 320px;gap:28px;align-items:start} .detail-main{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:30px} .detail-side{display:flex;flex-direction:column;gap:18px} .side-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:20px} .side-card h4{font-size:15px;font-weight:900;color:var(--navy-deep);margin-bottom:14px;padding-bottom:10px;border-bottom:1px solid var(--line)} .side-card .cta-tel{font-size:26px;font-weight:900;color:var(--navy);margin:8px 0} .side-card .side-item{display:flex;gap:8px;align-items:flex-start;font-size:13px;color:var(--muted);margin-bottom:10px;line-height:1.5} .side-card .side-item b{color:var(--ink)} .side-card .side-item svg{flex:none;width:16px;height:16px;color:var(--gold-deep);margin-top:3px} .toc{font-size:14px} .toc h4{font-size:15px;font-weight:900;color:var(--navy-deep);margin-bottom:12px} .toc a{display:block;color:var(--muted);padding:7px 0;border-bottom:1px dashed var(--line);font-size:13.5px;cursor:pointer} .toc a:hover{color:var(--navy)} .detail-main h1{font-size:clamp(22px,3vw,30px);font-weight:900;color:var(--navy-deep);line-height:1.3;margin:12px 0} .detail-main h2{font-size:19px;font-weight:900;color:var(--navy-deep);margin:28px 0 12px;padding-left:12px;border-left:4px solid var(--gold)} .detail-main p{font-size:14.5px;color:#37434f;line-height:1.75;margin-bottom:12px} .detail-main ul,.detail-main ol{margin:0 0 14px 22px;font-size:14.5px;color:#37434f;line-height:1.7} .detail-main li{margin-bottom:6px} .lead-box{background:var(--navy-soft);border-radius:12px;padding:16px 18px;font-size:14px;color:#2c3a49;line-height:1.7;margin-bottom:18px} .lead-box b{color:var(--navy)} .ai-answer{background:var(--gold-soft);border:1px solid #f0dfae;border-radius:12px;padding:14px 16px;margin:18px 0;font-size:13.5px;color:#5a4408} .ai-answer b{color:#8a6200} .spec-table{width:100%;border-collapse:collapse;font-size:13.5px;margin:14px 0 20px} .spec-table th{background:var(--navy);color:#fff;text-align:left;padding:10px 12px;font-weight:700} .spec-table td{padding:10px 12px;border:1px solid var(--line);color:#37434f;vertical-align:top} .spec-table tr:nth-child(even) td{background:#FAFBF7} .process-mini{counter-reset:p;margin:14px 0} .process-mini .pm{display:flex;gap:12px;margin-bottom:12px;align-items:flex-start} .process-mini .pm::before{counter-increment:p;content:counter(p);flex:none;width:26px;height:26px;border-radius:8px;background:var(--navy);color:var(--gold);font-weight:900;font-size:13px;display:grid;place-items:center} .process-mini .pm b{display:block;color:var(--navy-deep)} .process-mini .pm span{font-size:13.5px;color:var(--muted)} .faq-mini{background:var(--paper);border-radius:12px;padding:18px;margin-top:10px} .faq-mini h4{font-size:15px;font-weight:900;color:var(--navy-deep);margin-bottom:12px} .faq-mini .fm{display:flex;gap:10px;margin-bottom:12px;font-size:13.5px;align-items:flex-start} .faq-mini .fm .qk{flex:none;width:22px;height:22px;border-radius:7px;background:var(--gold);color:var(--navy-deep);font-weight:900;font-size:12px;display:grid;place-items:center} .faq-mini .fm .qb b{display:block;color:var(--ink)} .faq-mini .fm .qb span{color:var(--muted);line-height:1.6} /* article body */ .article-meta{display:flex;gap:14px;font-size:12.5px;color:var(--muted);flex-wrap:wrap;margin:6px 0 16px} .article-meta .src{border:1px solid var(--line);background:var(--paper);padding:2px 8px;border-radius:6px} .author-box{display:flex;align-items:center;gap:10px;background:var(--paper);border-radius:12px;padding:14px 16px;margin:18px 0} .author-box .av{width:40px;height:40px;border-radius:50%;background:var(--navy);color:var(--gold);font-weight:900;font-size:16px;display:grid;place-items:center} .author-box .who b{display:block;font-size:14px;color:var(--ink)} .author-box .who span{font-size:12px;color:var(--muted)} /* video detail */ .video-stage{position:relative;border-radius:var(--radius);overflow:hidden;aspect-ratio:16/9;background:var(--navy-deep)} .video-stage img{width:100%;height:100%;object-fit:cover;opacity:.55} .video-stage .bigplay{position:absolute;inset:0;display:grid;place-items:center;cursor:pointer} .video-stage .bigplay span{width:76px;height:76px;border-radius:50%;background:rgba(246,185,60,.95);display:grid;place-items:center} .video-stage .bigplay svg{width:28px;height:28px;fill:var(--navy-deep);margin-left:4px} .transcript{background:var(--paper);border-radius:12px;padding:18px;font-size:14px;color:#37434f;line-height:1.8} .transcript .tl{font-weight:700;color:var(--navy-deep);margin-bottom:8px} .transcript p{margin-bottom:10px} /* about */ .about-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:28px;align-items:start} .about-milestone{position:relative;padding-left:22px;border-left:2px solid var(--line)} .about-milestone .am{position:relative;padding-bottom:20px} .about-milestone .am::before{content:"";position:absolute;left:-26px;top:5px;width:12px;height:12px;border-radius:50%;background:var(--gold);border:3px solid #fff;box-shadow:0 0 0 2px var(--gold)} .about-milestone .am b{font-size:15px;color:var(--navy-deep);font-weight:900;display:block} .about-milestone .am span{font-size:12px;color:var(--gold-deep);font-weight:700} .about-milestone .am p{font-size:13.5px;color:var(--muted);margin-top:4px} /* faq page */ .faq-list{max-width:860px;margin:0 auto} .faq-item{border:1px solid var(--line);border-radius:12px;background:#fff;margin-bottom:12px;overflow:hidden} .faq-item summary{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:17px 20px;cursor:pointer;font-weight:700;font-size:15.5px;color:var(--ink);list-style:none} .faq-item summary::-webkit-details-marker{display:none} .faq-item summary .ic{flex:none;width:26px;height:26px;border-radius:8px;background:var(--navy-soft);color:var(--navy);display:grid;place-items:center;transition:.25s} .faq-item summary .ic svg{width:14px;height:14px} .faq-item[open] summary .ic{transform:rotate(45deg);background:var(--gold);color:var(--navy-deep)} .faq-item .ans{padding:0 20px 18px;font-size:14.5px;color:#3a4856;line-height:1.7;border-top:1px dashed var(--line)} .faq-item .ans b{color:var(--navy)} /* contact */ .contact-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:28px;align-items:start} .contact-item{display:flex;gap:14px;align-items:flex-start;margin-bottom:18px} .contact-item .ico{flex:none;width:44px;height:44px;border-radius:12px;background:var(--navy-soft);color:var(--navy);display:grid;place-items:center} .contact-item .ico svg{width:22px;height:22px} .contact-item h4{font-size:15px;font-weight:900;color:var(--navy-deep);margin-bottom:2px} .contact-item p{font-size:14px;color:var(--muted)} .contact-item p b{color:var(--ink);font-size:18px} /* footer */ footer{background:var(--navy-deep);color:#a9bdcf;font-size:13.5px} .foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1.2fr 1.3fr;gap:30px;padding:52px 22px 38px} footer h4{color:#fff;font-size:15px;font-weight:700;margin-bottom:16px} .foot-brand .logo{width:42px;height:46px;object-fit:contain;display:block;margin-bottom:14px} .foot-brand p{line-height:1.7} footer .f-col a,.f-col .line{display:flex;gap:8px;margin-bottom:10px;color:#a9bdcf;line-height:1.5;cursor:pointer} footer .f-col a:hover{color:#fff} .f-col .li{display:flex;gap:10px;margin-bottom:12px} .f-col .li svg{flex:none;width:17px;height:17px;color:var(--gold);margin-top:3px} .llms-note{margin-top:14px;background:rgba(246,185,60,.1);border:1px solid rgba(246,185,60,.25);border-radius:10px;padding:12px;font-size:12px;line-height:1.6;color:#cdd9e6} .llms-note b{color:var(--gold)} .foot-bottom{border-top:1px solid rgba(255,255,255,.1);padding:18px 22px;font-size:12px;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;color:#7f95a9} /* drawer */ .drawer{position:fixed;inset:0;background:rgba(7,28,51,.5);z-index:80;opacity:0;pointer-events:none;transition:.25s} .drawer.open{opacity:1;pointer-events:auto} .drawer .panel{position:absolute;top:0;right:0;bottom:0;width:min(320px,86vw);background:#fff;padding:24px;display:flex;flex-direction:column;gap:4px;transform:translateX(100%);transition:.28s} .drawer.open .panel{transform:none} .drawer .panel a{padding:13px 8px;font-weight:600;font-size:16px;color:var(--ink);border-bottom:1px solid var(--line);cursor:pointer} .drawer .panel .close{align-self:flex-end;background:none;border:0;font-size:22px;cursor:pointer;color:var(--muted);margin-bottom:6px} .drawer .panel .phone{margin-top:auto;font-weight:900;color:var(--navy);font-size:20px} /* responsive */ @media(max-width:1024px){.hero-grid{grid-template-columns:1fr;gap:34px}.qual-grid{grid-template-columns:repeat(3,1fr)}.video-grid{grid-template-columns:repeat(2,1fr)}.why-grid{grid-template-columns:repeat(2,1fr)}.art-grid{grid-template-columns:repeat(2,1fr)}.steps{grid-template-columns:1fr;gap:20px}.steps::before{display:none}.step{display:flex;gap:16px;align-items:flex-start;padding:0}.step .node{margin:0}.step h4{margin-top:6px}.detail-layout{grid-template-columns:1fr}.cta .container,.contact-grid,.about-grid{grid-template-columns:1fr}} @media(max-width:860px){.nav-links{display:none}.menu-toggle{display:flex}.trust .container{grid-template-columns:repeat(2,1fr)}.qual-grid{grid-template-columns:repeat(2,1fr)}.foot-grid{grid-template-columns:1fr 1fr}.utility .u-left span{display:none}} @media(max-width:560px){.qual-grid{grid-template-columns:1fr 1fr;gap:12px}.video-grid{grid-template-columns:1fr}.why-grid{grid-template-columns:1fr}.art-grid{grid-template-columns:1fr}.nav-phone{display:none}} @media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}} /* ============================================================ 资质百科文章列表重做 原 .art-card 是靠"假封面"撑起来的大卡片：渐变底 + 网格纹理 + 巨大半透明 水印字 + 右下角黄黑斜纹条，四张卡四种颜色（蓝/深蓝/金/紫），视觉重心全在 装饰上，标题被挤到中间；"阅读 2.4k" 还被 overflow 裁成"阅读 2"。 现在一律去掉封面，改成纯文字：列表页一条文章一行（.art-list）， 首页仍是三列紧凑卡（.art-grid）。两者共用 .art-item。 ============================================================ */ .art-item{position:relative;cursor:pointer} .art-head{display:flex;align-items:center;gap:10px;margin-bottom:9px;flex-wrap:wrap} .art-cat{font-size:12px;font-weight:700;letter-spacing:.3px;padding:3px 9px;border-radius:5px; background:rgba(22,119,255,.09);color:var(--link);white-space:nowrap} .art-when{font-size:12.5px;color:var(--muted);font-feature-settings:"tnum";white-space:nowrap} .art-src{font-size:12.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis; white-space:nowrap;min-width:0} .art-title{margin:0 0 7px;font-size:17px;font-weight:700;line-height:1.45;color:var(--ink)} .art-desc{margin:0;font-size:14px;line-height:1.75;color:var(--ink-2); display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .art-desc b{display:inline-block;margin-right:8px;font-size:11.5px;font-weight:700; color:#8a5f00;background:rgba(224,160,42,.14);padding:2px 7px;border-radius:5px;vertical-align:1px} /* 箭头常驻（触屏没有 hover），只用透明度做层级，不做显隐 */ .art-go{margin-left:auto;font-size:13px;font-weight:600;color:var(--link);white-space:nowrap; opacity:.55;transition:opacity .18s ease} .art-go::after{content:" ›"} .art-item:hover .art-title{color:var(--link)} .art-item:hover .art-go{opacity:1} /* 分类配色：只用在标签和左侧色条上，其余保持中性 */ .art-item.c2 .art-cat{background:rgba(14,122,95,.10);color:#0b6b52} .art-item.c3 .art-cat{background:rgba(124,58,237,.10);color:#6d28d9} .art-item.c4 .art-cat{background:rgba(180,83,9,.10);color:#9a4a06} /* --- 列表页：整块白面板 + 细分隔线，一条文章一行 --- */ .art-list{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden} .art-list .art-item{padding:19px 26px 19px 28px;border-bottom:1px solid var(--line); display:flex;flex-direction:column;transition:background .18s ease} .art-list .art-item:last-child{border-bottom:0} .art-list .art-item::before{content:"";position:absolute;left:0;top:0;bottom:0; width:3px;background:var(--primary);transition:width .18s ease} .art-list .art-item:hover{background:rgba(22,119,255,.035)} .art-list .art-item:hover::before{width:4px} .art-list .art-title{font-size:18px} .art-list .art-item.c1::before{background:#1677ff} .art-list .art-item.c2::before{background:#0e7a5f} .art-list .art-item.c3::before{background:#7c3aed} .art-list .art-item.c4::before{background:#b45309} /* --- 首页：三列紧凑卡（同样无封面） --- */ .art-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px} .art-grid .art-item{background:var(--surface);border:1px solid var(--line); border-radius:var(--radius);padding:20px 20px 18px; display:flex;flex-direction:column;transition:.2s} .art-grid .art-item:hover{border-color:rgba(22,119,255,.45); box-shadow:0 8px 22px rgba(22,119,255,.10);transform:translateY(-2px)} @media (max-width:900px){ .art-grid{grid-template-columns:repeat(2,1fr)} } @media (max-width:760px){ .art-grid{grid-template-columns:1fr} .art-list .art-item{padding:18px 16px 16px 20px} .art-title,.art-list .art-title{font-size:16.5px} .art-desc{-webkit-line-clamp:3} .art-go{opacity:1;transform:none} } /* === 浅色主题补丁（由 patch_light_theme.py 追加，勿手改） === */ /* 通用 .crumb 样式（页面级顶部路径导航）—— 全站统一 eyebrow 风格（浅蓝细边胶囊 + 12px 蓝色字 + / 分隔符），让 FAQ hero / zbk 列表页 section 顶部 / zbk 40 个文章详情 / SPA 7 个路由的"首页 / 父级 / 当前"路径都长一样。 之前是浅色大胶囊 + 14px 大字 + › 箭头分隔符（用户嫌丑）， 改回 eyebrow 风格与 FAQ 原本的红框视觉一致，但所有页面用同一类。 */ .crumb { display: inline-flex; align-items: center; gap: 4px; padding: 6px 14px; background: rgba(22,119,255,.08); color: var(--link); border: 1px solid rgba(22,119,255,.24); border-radius: 100px; font-size: 12px; font-weight: 600; letter-spacing: 1px; margin-bottom: 14px; } .crumb a { color: var(--link); transition: color .15s ease; } .crumb a:hover { color: var(--primary); } /* a 后面自动补 / 分隔符 —— text 节点之前的 a 也会带，自然形成 `首页 / 资质百科 / 政策解读` */ .crumb a:not(:last-child)::after { content: "/"; color: var(--line-2); margin: 0 6px; font-weight: 300; } /* app.css 里 `.utility .u-phone` 的特异性 (0,2,0) 高于 design_common 的 `.u-phone` (0,1,0)， 而且写死了白字 —— 浅底上等于隐形。同特异性下同文件靠后即生效，所以放这里。 */ .utility .u-phone { color: var(--link); } /* === PHONE_UNIFY_V1 === 手机号颜色与电话统一: 11 位手机号原本走 d-base 块的 .u-mobile { color: var(--ink-3) } 灰色, 在 utility 浅底上变 "信息"类弱色, 跟 .u-phone (--link 蓝) 不一致. 这里覆盖到同色. 同时把 11 位手机号文字去中划线 (131-2489-2760 → 13124892760), 跟 400 电话 (4001858631) tel: 拨号一致, href 不动. */ .utility .u-mobile { color: var(--link); } .utility .u-mobile svg { color: var(--link); } .utility .u-mobile:hover { color: var(--primary); } .utility .u-mobile:hover svg { color: var(--primary); } /* 内页通栏标题条：暗色 hero —— 整页 .page-hero 深 navy 底 + 陆家嘴实景图 + 白字。 hero 区与下方浅色内容形成对比，更"高大上"。之前用户嫌白罩糊掉了底图（PIL 改用暗色 蒙层），但浅色 hero + 实景底图"商业站用浅底"的调性不足，整体翻暗色更稳。 - ::before 实景图 opacity .55（让图清晰可见但被深色蒙层压暗） - ::after 深色水平渐变（左侧更暗，让前景标题区更稳）+ 底部深色渐变过渡到下一区块 - 标题/段落全部翻浅色 */ /* === 通用内页 hero: 暂时全部隐藏 === 用户多次反馈 hero 设计"丑"，先试验彻底移除所有 hero 区块看效果。 - 5 个页面的 .page-hero / .faqkb-head (含全部 ::before / ::after / .container) 全部 display:none，但仍保留 DOM（方便未来恢复） - 页面内容直接紧接 utility + header，无需 hero 标题区 - about 详情页已有 detail-main h1 作总标题；FAQ/remz/zzd/zbk_list 的内容 （搜索框 / 资质卡片 / tab+列表）本来就能独立支撑页面，不需要 hero - 决定后改回 display:block (恢复 hero) 或彻底删除 DOM */ .page-hero, .faqkb-head { /* 暂时完全移除 hero 区域 —— 5 个页面都拿掉，未来要么改回要么删 DOM */ display: none !important; } /* ::before: 抽象渐变 mesh 装饰 —— 左上蓝色径向 blob + 右下金色径向 blob */ .page-hero::before, .faqkb-head::before { content: ""; position: absolute; inset: -120px; background: radial-gradient(circle 700px at 12% 35%, rgba(22, 119, 255, .22) 0%, transparent 60%), radial-gradient(circle 600px at 88% 75%, rgba(154, 103, 0, .14) 0%, transparent 60%); pointer-events: none; z-index: 0; /* SVG noise 叠加: 极淡的颗粒感，避免纯色平滑显得假 */ } /* ::after: 顶部 1px 极细高光线 (Apple 风格) + 底部细线收口 */ .page-hero::after, .faqkb-head::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(to right, transparent, rgba(255, 255, 255, .22), transparent); pointer-events: none; z-index: 1; } .page-hero > .container, .faqkb-head > .container { padding: 0 56px; display: flex; flex-direction: column; align-items: flex-start; gap: 18px; position: relative; z-index: 2; width: 100%; max-width: 1120px; margin: 0 auto; } /* hero h1: clamp 流体大字号 (40~56px), 紧字距 -.04em —— "高大上" 字面感 */ .page-hero h1, .faqkb-head h1 { color: #fff; margin: 0; font-size: clamp(40px, 4.4vw, 56px); font-weight: 800; line-height: 1.15; letter-spacing: -.04em; } /* hero p: 15.5px / 1.7 / opacity 0.72 —— 副标题克制低饱和 */ .page-hero p, .faqkb-head p { color: rgba(255, 255, 255, .72); margin: 0; font-size: 15.5px; line-height: 1.7; max-width: 720px; } /* === 紧跟 hero 的第一个 section：吃掉默认 padding-top === 全局 section { padding: 66px 0 } 给所有
加 66px padding-top， 但 .page-hero 后紧接的
（如 about-grid / zizhidaibenz 详情布局 / 视频列表等） 再叠 66px padding-top 会让 hero 与下方内容之间出现 ~66px 空白带， 视觉上 hero 与 zbk 列表页 hero 紧接 tab 看起来不一致。 把第一个 section 的 padding-top 缩到 24px（保留一点呼吸但不空旷）。*/ .page-hero + section, .faqkb-head + section { padding-top: 24px; } .page-hero + .faqkb, .faqkb-head + .faqkb { padding-top: 24px; } /* hero 区内的 crumb 翻深色：原浅蓝胶囊在深底里变半透白胶囊 */ .page-hero .crumb, .faqkb-head .crumb { background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.22); color: #fff; } .page-hero .crumb a, .faqkb-head .crumb a { color: rgba(255,255,255,.85); } .page-hero .crumb a:hover, .faqkb-head .crumb a:hover { color: #fff; } .page-hero .crumb a:not(:last-child)::after, .faqkb-head .crumb a:not(:last-child)::after { color: rgba(255,255,255,.45); } @media (max-width: 860px) { /* mobile: aspect-ratio 让 hero 同步变矮，宽度越窄 hero 越扁 */ .page-hero > .container, .faqkb-head > .container { padding: 0 20px; gap: 10px; } .page-hero h1, .faqkb-head h1 { font-size: 24px; letter-spacing: -.2px; } .page-hero p, .faqkb-head p { font-size: 13.5px; line-height: 1.55; } } /* app.js 用
渲染视频列表(app.js:237)和 SPA 内页(app.js:207)， app.css 里它是深蓝通栏 —— 浅色站里必须改成浅灰通栏，否则整块黑压在页面中间。 注意这两个类只在 app.js 里出现，grep 静态 HTML 是找不到的。 */ .section-navy { background: var(--bg-3); color: var(--ink); } .section-navy .sec-title { color: var(--ink); } .sec-sub.on-dark { color: var(--ink-2); } /* 视频卡：播放量压在亮色封面上读不清，补深色胶囊 */ .video-thumb .views { background: rgba(7,28,51,.85); color: #fff; padding: 3px 8px; border-radius: 6px; text-shadow: none; } /* 卡片顶部的色条：浅色主题下依然是纯蓝填充 */ .qual-card::before { background: var(--primary); } /* app.css 自带一套 :root（--gold:#F6B93C / --gold-deep:#E8A51F / --navy:#0B2B4F …）， 那是按「深底金字」取的。design_common 的 :root 在 之后加载，会接管双方都定义的 token（--gold/--navy/--ink/--line/--paper…），但接管不到的（--gold-deep/--gold-soft）仍是旧值。 结果：--gold 被改成可当正文色的深金 #9a6700 之后，所有「浅金底 + 深字」的按钮 跟着一起变深 —— 线上看起来就是一排暗橄榄按钮。这里把两种用途拆开。 */ :root { --gold-deep: #8a5f00; --gold-soft: rgba(154,103,0,.10); } .btn-gold { background: #F6B93C; color: #3d2a00; } .btn-gold:hover { background: #E8A51F; } .hero-badge { background: #F6B93C; color: #3d2a00; } .art-card .cover .tag { background: #F6B93C; color: #3d2a00; } .ai-card .q .av { background: linear-gradient(135deg,#F6B93C,#E8A51F); color: #3d2a00; } .ai-card .a .av { background: #F6B93C; color: #3d2a00; } /* 第二处 --gold 一符两用：app.css 把 --gold 当「深底上的金字」用。 深金 #9a6700 压在深蓝底(--navy)或半透明金底(封面图)上都会糊掉， 这几处必须是浅金字，不能跟着 token 一起变深。 */ .process-mini .pm::before { color: #F6B93C; } .author-box .av { color: #F6B93C; } /* 这两处是「浅金底 + 深字」，底也要跟着回到浅金 */ .faq-mini .fm .qk { background: #F6B93C; color: #3d2a00; } .faq-item[open] summary .ic { background: #F6B93C; color: #3d2a00; } /* 封面分类标签：压在蓝色/金色渐变图上，15% 金底不够，必须实心 */ .art-cover .glyph { color: #3d2a00; background: #F6B93C; border-color: rgba(199,138,18,.9); } /* 金色 / 白色填充上的文字必须钉深色，否则浅色字压浅色底 */ .video-thumb .play svg, .video-stage .bigplay svg { fill: #2b1f05; } /* 正文里的链接统一走 --link（浅色下是 #0e5fd0） */ .detail-main a, .side-card a, .transcript a { color: var(--link); } .detail-main a:hover, .side-card a:hover, .transcript a:hover { color: var(--primary); } table, .spec-table, .spec-table td { color: #37434f; } .spec-table th { color: var(--ink); } /* === 浅色主题补丁 END === */ /* === 浮动客服按钮（统一设计：3 图标白底胶囊 + 独立白色圆形 chevron-up） === */ /* 整体右侧垂直居中堆叠（与左侧 .hero-side-nav 同水平：top:50% / translateY(-50%)） */ .fk-stack { position: fixed; right: 10px; top: 50%; transform: translateY(-50%); z-index: 55; display: flex; flex-direction: column; gap: 10px; align-items: center; } /* 白底胶囊：3 按钮从上到下（AI 客服头像 / 小电话 / 微信） */ .float-kf { background: #fff; border-radius: 24px; padding: 12px 8px 14px; box-shadow: 0 10px 30px rgba(8,18,34,.18); display: flex; flex-direction: column; gap: 8px; align-items: center; width: 60px; } .fk-item { display: flex; flex-direction: column; align-items: center; gap: 4px; cursor: pointer; color: #5b6b7a; text-decoration: none; padding: 2px; } .fk-item:hover { color: var(--link); } /* AI 客服头像：圆形蓝色渐变底 + 客服头像图片 */ .fk-ai .avatar { width: 38px; height: 38px; border-radius: 50%; background: linear-gradient(135deg, #5b9df9 0%, #2c6fd6 100%); color: #fff; display: grid; place-items: center; font-weight: 900; font-size: 13px; letter-spacing: -.5px; box-shadow: 0 4px 10px rgba(44,111,214,.30); overflow: hidden; } /* AI_FAB_ICON_MESSAGE_CIRCLE_MORE_V1 */ .fk-ai .avatar svg { width: 20px; height: 20px; display: block; } /* AI_AVATAR_V5_IMG — FAB 头像改用客服图片 (customer-service-avatar.webp) 图片加载失败时 onerror 隐藏 img，露出下面的渐变底 + "客"字 */ .fk-ai .avatar { position: relative; } .fk-ai .avatar img { width: 100%; height: 100%; object-fit: cover; display: block; position: relative; z-index: 1; } .fk-ai .avatar::after { content: "客"; position: absolute; inset: 0; z-index: 0; display: grid; place-items: center; color: #fff; font-weight: 900; font-size: 13px; } .fk-ai .label { font-size: 11px; font-weight: 700; color: #16202e; white-space: nowrap; } /* 普通图标按钮（电话 / 微信）：36×36 圆形 */ .fk-ic { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; color: #5b6b7a; transition: background .15s, color .15s; } .fk-tel:hover { background: #eef4ff; color: var(--link); } .fk-wx { color: #16a34a; } .fk-wx:hover { background: #e8f7ee; color: #15803d; } /* 微信 popover 与原版一致 */ .fk-wx-wrap { position: relative; } .wx-qr-popover { position: absolute; right: calc(100% + 14px); top: 50%; transform: translateY(-50%) translateX(6px); opacity: 0; pointer-events: none; background: #fff; border-radius: 14px; padding: 14px 14px 12px; width: 200px; box-shadow: 0 14px 36px rgba(8,18,34,.22); transition: opacity .16s ease, transform .16s ease; z-index: 100; } .fk-wx-wrap:hover .wx-qr-popover, .fk-wx-wrap:focus-within .wx-qr-popover { opacity: 1; transform: translateY(-50%) translateX(0); pointer-events: auto; } .wx-qr-popover img { display: block; width: 100%; height: auto; border-radius: 6px; } .wx-qr-popover .wx-qr-tip { margin-top: 10px; text-align: center; font-size: 13px; font-weight: 700; color: #16202e; letter-spacing: .1px; } .wx-qr-popover .wx-qr-sub { margin-top: 2px; text-align: center; font-size: 11px; color: #5b6878; } .wx-qr-popover .wx-qr-arrow { position: absolute; right: -6px; top: 50%; transform: translateY(-50%) rotate(45deg); width: 12px; height: 12px; background: #fff; box-shadow: 2px -2px 3px rgba(0,0,0,.04); } /* 独立白色圆形 chevron-up 按钮（折叠 / 回到顶部） */ .fk-toggle { width: 40px; height: 40px; border-radius: 50%; background: #fff; border: 0; cursor: pointer; color: #5b6b7a; display: grid; place-items: center; box-shadow: 0 6px 18px rgba(8,18,34,.14); transition: color .15s, transform .3s ease; } .fk-toggle:hover { color: var(--link); } .fk-toggle .chev { transition: transform .3s ease; } /* 折叠态：chevron 翻转、胶囊缩小隐藏 */ .fk-stack.collapsed .float-kf { display: none; } .fk-stack.collapsed .fk-toggle { color: var(--link); } /* 移动端：没有左侧 .hero-side-nav，浮动按钮回到右下角 */ @media (max-width: 1024px) { .fk-stack { right: 12px; top: auto; bottom: 16px; transform: none; } /* AI_AVATAR_V5_IMG — FAB 头像图片在移动端同步缩放 */ .fk-ai .avatar { width: 34px; height: 34px; font-size: 12px; } .fk-ic { width: 32px; height: 32px; } .fk-toggle { width: 36px; height: 36px; } .wx-qr-popover { right: calc(100% + 10px); width: 180px; } } /* === WX_QR_MODAL_V1 — 微信二维码居中弹层 (wx-qr.js) === */ .wx-modal { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center; padding: 20px; opacity: 0; transition: opacity .18s ease; } .wx-modal.open { opacity: 1; } .wx-modal-mask { position: absolute; inset: 0; background: rgba(14,26,43,.42); } .wx-modal-card { position: relative; z-index: 1; width: 260px; max-width: 100%; background: #fff; border-radius: 16px; padding: 18px 18px 16px; text-align: center; box-shadow: 0 18px 48px rgba(8,18,34,.28); transform: translateY(10px) scale(.97); transition: transform .18s ease; } .wx-modal.open .wx-modal-card { transform: translateY(0) scale(1); } .wx-modal-card img { display: block; width: 100%; height: auto; border-radius: 8px; } .wx-modal-close { position: absolute; top: 8px; right: 8px; width: 30px; height: 30px; border: 0; background: rgba(14,26,43,.06); color: #16202e; font-size: 20px; line-height: 1; border-radius: 50%; cursor: pointer; } .wx-modal-close:hover { background: rgba(14,26,43,.13); } .wx-modal-card .wx-qr-tip { margin-top: 12px; font-size: 15px; font-weight: 700; color: #16202e; } .wx-modal-card .wx-qr-sub { margin-top: 3px; font-size: 12px; color: #5b6878; } /* === SITE_FONT_UNIFY_V1 === 全站字体统一： - app.css 原 body 字体首项 "Noto Sans SC" 在 Windows / 多数 Linux 未安装, 导致整条 font-family 失效, 浏览器回退到默认中文渲染, 按钮 .btn 文字 (继承 body) 与首页 (-apple-system 系列) 不一致。已改首项为 system-ui。 - 每页 HTML 头部的