/* ============================================================ 攒息 Zanxi · v2 「浅底高端杂志」内容博客皮 结构:居中刊头(logo+tagline+居中菜单+语种)· featured 大图特稿 · 杂志卡片 + 侧栏 皮:暖象牙白 + 墨黑 + 深祖母绿 + 黄铜金 · 渐变 mesh hero · 玻璃浮层卡 · 衬线大标题(Fraunces / Noto Serif SC) ============================================================ */ /* 字体改由各页 的 非阻塞加载(避免 @import 渲染阻塞) */ :root{ --bg:#f7f5ef; /* 暖象牙白 */ --bg-soft:#f1eee4; --paper:#ffffff; --ink:#17191c; /* 墨黑 */ --ink2:#565b61; --ink3:#8b9096; --line:#e7e3d6; --line-soft:#efece2; --green:#0e5a41; /* 深祖母绿(主) */ --green-d:#0a3f2e; --green-l:#1b7e5c; --teal:#1fa98f; --gold:#b88a3e; /* 黄铜金(强调) */ --gold-l:#c9a24a; --gold-soft:#e8d9b0; --warn-bg:#fbf3e1; --warn-bd:#e7cd86; --warn-ink:#876219; --tip-bg:#e7f3ec; --tip-bd:#a3ceb2; --tip-ink:#0e5a41; --note-bg:#f0f0e8; --note-bd:#d8d6c6; --display:"Fraunces","Noto Serif SC",Georgia,"Songti SC",serif; --sans:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; --mono:ui-monospace,SFMono-Regular,Menlo,"Roboto Mono",Consolas,monospace; --r:18px; --r-s:11px; --sh-s:0 1px 3px rgba(20,40,30,.05),0 1px 2px rgba(20,40,30,.04); --sh-m:0 10px 30px -12px rgba(20,40,30,.18); --sh-l:0 28px 60px -22px rgba(14,60,40,.30); --wrap:1200px; --ease:cubic-bezier(.22,.61,.36,1); } *{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth} body{ margin:0;background:var(--bg);color:var(--ink); font-family:var(--sans);font-size:17px;line-height:1.75; -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility; } img{max-width:100%;height:auto;display:block} a{color:var(--green-l);text-decoration:none;transition:color .15s} a:hover{color:var(--gold)} .container{max-width:var(--wrap);margin:0 auto;padding:0 24px} .mono{font-family:var(--mono);font-variant-numeric:tabular-nums} ::selection{background:var(--gold-soft);color:var(--green-d)} /* 滚动渐入(JS 加 .is-in;无 JS 时全显) */ html.js [data-reveal]{opacity:0;transform:translateY(18px);transition:opacity .7s var(--ease),transform .7s var(--ease)} html.js [data-reveal].is-in{opacity:1;transform:none} @media(prefers-reduced-motion:reduce){html.js [data-reveal]{opacity:1;transform:none;transition:none}*{scroll-behavior:auto!important}} /* ---------- 顶部推广披露条 ---------- */ .disclosure-bar{ background:var(--green-d);color:#e7efe9;font-size:13px;letter-spacing:.2px; text-align:center;padding:8px 18px;line-height:1.5; } .disclosure-bar b{color:var(--gold-l)} .disclosure-bar a{color:#fff;text-decoration:underline;text-underline-offset:2px} /* ---------- 居中刊头(content-blog masthead) ---------- */ .site-head{background:rgba(247,245,239,.86);backdrop-filter:saturate(150%) blur(10px);-webkit-backdrop-filter:saturate(150%) blur(10px);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:60} .head__inner{max-width:var(--wrap);margin:0 auto;padding:18px 24px 12px;display:flex;flex-direction:column;align-items:center;gap:11px} .brand{display:flex;align-items:center;gap:13px} .brand__seal{ width:46px;height:46px;border-radius:13px;flex:0 0 46px; background:linear-gradient(150deg,var(--green) 22%,var(--green-l) 78%); color:var(--gold-l);font-family:var(--display);font-weight:900;font-size:25px; display:flex;align-items:center;justify-content:center; box-shadow:inset 0 0 0 1.5px rgba(201,162,74,.5),var(--sh-s); } .brand__name{font-family:var(--display);font-weight:900;font-size:2rem;color:var(--green-d);letter-spacing:.3px;line-height:1} .brand__name small{display:none} .masthead-tagline{margin:1px 0 0;font-size:13.5px;color:var(--ink2);letter-spacing:.3px;text-align:center} .masthead-tagline b{color:var(--gold)} .nav{margin:0} .nav__row{display:flex;gap:4px;align-items:center;flex-wrap:wrap;justify-content:center} .nav__row a{ color:var(--ink2);font-size:14.5px;font-weight:600;padding:7px 15px;border-radius:999px; white-space:nowrap;transition:background .18s,color .18s;letter-spacing:.2px; } .nav__row a:hover,.nav__row a[aria-current="page"]{background:var(--green);color:#fff} .nav__toggle{display:none} /* 语种切换器(_i18n.py 注入,紧跟 ) */ .langsw{margin-top:1px} .lsw-row{display:flex;gap:3px;align-items:center;justify-content:center;flex-wrap:wrap} .lsw-row a{font-size:12px;font-weight:600;color:var(--ink3);padding:4px 10px;border-radius:999px;letter-spacing:.3px} .lsw-row a:hover{color:var(--green);background:var(--bg-soft)} .lsw-row a.on{color:var(--green);background:var(--bg-soft);box-shadow:inset 0 0 0 1px var(--line)} /* ---------- 按钮 ---------- */ .btn{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:15.5px;font-family:var(--sans); padding:13px 26px;border-radius:999px;cursor:pointer;border:0;transition:transform .16s var(--ease),box-shadow .25s,background .2s;min-height:48px;letter-spacing:.2px} .btn--gold{background:linear-gradient(135deg,var(--gold-l),var(--gold));color:#2c2208;box-shadow:0 10px 24px -10px rgba(184,138,62,.7)} .btn--gold:hover{transform:translateY(-2px);box-shadow:0 16px 32px -10px rgba(184,138,62,.8);color:#241b05} .btn--green{background:var(--green);color:#eef5f0} .btn--green:hover{background:var(--green-d);transform:translateY(-2px);color:#fff} .btn--ghost{background:transparent;color:var(--green);box-shadow:inset 0 0 0 1.6px var(--line)} .btn--ghost:hover{background:#fff;color:var(--green-d);box-shadow:inset 0 0 0 1.6px var(--green-l)} /* ---------- Hero(首页刊头特稿) ---------- */ .hero{position:relative;overflow:hidden;border-bottom:1px solid var(--line); background: radial-gradient(60% 90% at 12% 8%,rgba(31,169,143,.22),transparent 60%), radial-gradient(55% 80% at 92% 12%,rgba(201,162,74,.26),transparent 62%), radial-gradient(80% 120% at 50% 120%,rgba(14,90,65,.18),transparent 60%), linear-gradient(180deg,#fbfaf5,var(--bg))} .hero__inner{max-width:var(--wrap);margin:0 auto;padding:66px 24px 60px;display:grid;grid-template-columns:1.12fr .88fr;gap:54px;align-items:center} .hero__kicker{display:inline-flex;align-items:center;gap:9px;font-size:12.5px;font-weight:700;letter-spacing:2.5px;color:var(--gold);text-transform:uppercase;margin:0 0 18px;font-family:var(--sans)} .hero__kicker::before{content:"";width:26px;height:2px;background:var(--gold)} .hero h1{font-family:var(--display);font-size:clamp(2.4rem,5vw,3.7rem);line-height:1.1;color:var(--green-d);margin:0 0 20px;font-weight:900;letter-spacing:-.5px} .hero h1 em{font-style:italic;color:var(--gold)} .hero__sub{font-size:18.5px;color:var(--ink2);margin:0 0 30px;max-width:36ch;line-height:1.7} .hero__cta{display:flex;gap:14px;flex-wrap:wrap} .hero__card{background:rgba(255,255,255,.72);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.8);border-radius:var(--r);box-shadow:var(--sh-l);padding:26px 28px} .hero__card h3{margin:0 0 16px;font-size:12.5px;color:var(--ink3);font-weight:700;letter-spacing:1.5px;text-transform:uppercase} .hero__rows{display:flex;flex-direction:column;gap:0} .hero__rows .row{display:flex;justify-content:space-between;align-items:baseline;padding:13px 0;border-bottom:1px solid var(--line-soft)} .hero__rows .row:last-child{border:0;padding-bottom:0} .hero__rows .k{color:var(--ink);font-size:15.5px;font-weight:500} .hero__rows .v{font-family:var(--mono);font-weight:700;color:var(--green);font-size:14px;background:var(--bg-soft);padding:3px 11px;border-radius:999px} /* ---------- featured 特稿(首页/列表大图) ---------- */ .feature{max-width:var(--wrap);margin:0 auto;padding:56px 24px 6px} .feature__card{display:grid;grid-template-columns:1.15fr .85fr;gap:0;background:var(--paper);border:1px solid var(--line);border-radius:calc(var(--r) + 4px);overflow:hidden;box-shadow:var(--sh-m);transition:box-shadow .3s,transform .3s var(--ease)} .feature__card:hover{box-shadow:var(--sh-l);transform:translateY(-3px)} .feature__media{overflow:hidden;background:var(--green-d);min-height:320px} .feature__media img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)} .feature__card:hover .feature__media img{transform:scale(1.04)} .feature__body{padding:38px 40px;display:flex;flex-direction:column;justify-content:center} .feature__tag{align-self:flex-start;font-size:11.5px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--gold);margin-bottom:15px} .feature__title{font-family:var(--display);font-size:clamp(1.6rem,2.8vw,2.2rem);line-height:1.18;color:var(--green-d);margin:0 0 14px;font-weight:800;letter-spacing:-.3px} .feature__title a{color:inherit}.feature__title a:hover{color:var(--gold)} .feature__excerpt{font-size:16px;color:var(--ink2);margin:0 0 22px;line-height:1.7} .feature__meta{font-family:var(--mono);font-size:12.5px;color:var(--ink3);display:flex;gap:14px;align-items:center} /* ---------- 两栏布局 ---------- */ .layout{max-width:var(--wrap);margin:0 auto;padding:54px 24px 12px;display:grid;grid-template-columns:minmax(0,1fr) 322px;gap:54px;align-items:start} .main{min-width:0} .sidebar{position:sticky;top:160px;display:flex;flex-direction:column;gap:24px} /* 段标题 */ .sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin:0 0 26px} .sec-head h2{font-family:var(--display);font-size:1.7rem;color:var(--green-d);margin:0;font-weight:800;letter-spacing:-.3px;display:flex;align-items:center;gap:12px} .sec-head h2::before{content:"";width:9px;height:24px;background:linear-gradient(var(--gold-l),var(--gold));border-radius:3px} .sec-head .more{font-size:13.5px;font-weight:700;color:var(--gold)} /* ---------- 杂志卡片 ---------- */ .card-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:26px;margin-bottom:44px} .card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--sh-s);transition:transform .22s var(--ease),box-shadow .3s,border-color .2s} .card:hover{transform:translateY(-5px);box-shadow:var(--sh-m);border-color:var(--gold-soft)} .card__media{aspect-ratio:1200/630;overflow:hidden;background:var(--green-d)} .card__media img{width:100%;height:100%;object-fit:cover;transition:transform .55s var(--ease)} .card:hover .card__media img{transform:scale(1.05)} .card__body{padding:21px 23px 24px;display:flex;flex-direction:column;flex:1} .card__tag{align-self:flex-start;font-size:11px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:var(--gold);margin-bottom:12px} .card__title{font-family:var(--display);font-size:1.28rem;line-height:1.32;color:var(--green-d);margin:0 0 10px;font-weight:700} .card a.card__title:hover{color:var(--gold)} .card__excerpt{font-size:14.5px;color:var(--ink2);margin:0 0 16px;flex:1;line-height:1.65} .card__meta{font-size:12px;color:var(--ink3);font-family:var(--mono);display:flex;gap:12px;padding-top:13px;border-top:1px solid var(--line-soft)} /* ---------- 侧栏 ---------- */ .widget{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:22px 23px;box-shadow:var(--sh-s)} .widget__title{font-size:12px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--ink3);margin:0 0 16px;padding-bottom:12px;border-bottom:1px solid var(--line)} .widget ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px} .widget li a{color:var(--ink);font-size:15px;font-weight:600;display:flex;gap:11px;align-items:baseline;line-height:1.4} .widget li a:hover{color:var(--gold)} .widget li .n{font-family:var(--display);color:var(--gold);font-weight:900;font-size:15px;flex:0 0 auto;font-style:italic} .ex-banner{border-radius:var(--r);padding:23px;color:#fff;box-shadow:var(--sh-m);position:relative;overflow:hidden} .ex-banner::after{content:"";position:absolute;inset:0;background:radial-gradient(120% 80% at 90% 0%,rgba(201,162,74,.28),transparent 60%);pointer-events:none} .ex-banner--binance{background:linear-gradient(150deg,#16321f,#0a3f2e)} .ex-banner--okx{background:linear-gradient(150deg,#10271c,#0a3f2e)} .ex-banner .ex__name{font-family:var(--display);font-size:20px;font-weight:800;margin:0 0 5px;color:#fff} .ex-banner .ex__sub{font-size:13.5px;color:#c2d4ca;margin:0 0 15px;line-height:1.55;position:relative} .ex-banner .ex__code{font-family:var(--mono);font-size:12.5px;color:var(--gold-l);background:rgba(255,255,255,.06);border:1px solid rgba(201,162,74,.4);border-radius:999px;padding:6px 13px;display:inline-block;margin-bottom:15px} .ex-banner .btn{width:100%;justify-content:center;font-size:14.5px;padding:11px;position:relative} /* ---------- 文章页 ---------- */ .crumbs{font-size:12.5px;color:var(--ink3);font-family:var(--mono);margin:0 0 20px;letter-spacing:.3px} .crumbs a{color:var(--ink2)}.crumbs a:hover{color:var(--gold)} .article__header h1{font-family:var(--display);font-size:clamp(1.9rem,3.8vw,2.85rem);line-height:1.14;color:var(--green-d);margin:0 0 18px;font-weight:900;letter-spacing:-.5px} .article__meta{display:flex;flex-wrap:wrap;gap:8px 18px;font-size:13px;color:var(--ink3);font-family:var(--mono);margin:0 0 26px;padding-bottom:22px;border-bottom:1px solid var(--line)} .article__meta .tag{color:var(--gold);font-weight:700;letter-spacing:.5px;text-transform:uppercase} .article__cover{border-radius:var(--r);overflow:hidden;margin:0 0 32px;border:1px solid var(--line);box-shadow:var(--sh-m)} figure{margin:0}figcaption{font-size:12.5px;color:var(--ink3);text-align:center;margin-top:9px} .tldr{background:linear-gradient(120deg,#fff,var(--bg-soft));border:1px solid var(--line);border-left:4px solid var(--gold);border-radius:0 var(--r-s) var(--r-s) 0;padding:20px 24px;margin:0 0 30px} .tldr p{margin:0;font-size:16px;color:var(--ink)} .tldr strong{color:var(--green-d)} .toc{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:20px 24px;margin:0 0 32px} .toc h2{font-size:12px;letter-spacing:1.5px;text-transform:uppercase;color:var(--ink3);margin:0 0 13px;font-weight:700;font-family:var(--sans);border:0;padding:0} .toc ol{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:8px;counter-reset:toc} .toc a{color:var(--ink);font-weight:600;font-size:15px} .toc a:hover{color:var(--gold)} .prose{font-size:18px;line-height:1.88;color:#23262b} .prose h2{font-family:var(--display);font-size:1.7rem;color:var(--green-d);margin:46px 0 16px;padding-bottom:0;border:0;font-weight:800;letter-spacing:-.3px;scroll-margin-top:160px} .prose h3{font-family:var(--display);font-size:1.32rem;color:var(--green-l);margin:32px 0 12px;font-weight:700} .prose p{margin:0 0 20px} .prose > p:first-of-type{font-size:1.06em} .prose a{text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--gold-soft);text-decoration-thickness:2px} .prose a:hover{text-decoration-color:var(--gold)} .prose ul,.prose ol{margin:0 0 20px;padding-left:26px} .prose li{margin:0 0 10px}.prose li::marker{color:var(--gold)} .prose strong{color:var(--green-d);font-weight:700} .prose blockquote{margin:28px 0;padding:4px 0 4px 26px;border-left:3px solid var(--gold);color:var(--ink2);font-family:var(--display);font-size:1.32rem;font-style:italic;line-height:1.5} .prose code{font-family:var(--mono);font-size:.86em;background:var(--bg-soft);padding:2px 7px;border-radius:6px;color:var(--green-d)} .prose table{width:100%;border-collapse:separate;border-spacing:0;margin:28px 0;font-size:15px;box-shadow:var(--sh-s);border-radius:var(--r-s);overflow:hidden;border:1px solid var(--line)} .prose th,.prose td{padding:13px 16px;text-align:left;border-bottom:1px solid var(--line-soft)} .prose thead th{background:var(--green-d);color:#eef5f0;font-weight:600;font-size:13.5px;letter-spacing:.3px} .prose tbody tr:nth-child(even){background:var(--bg-soft)} .prose tbody tr:last-child td{border-bottom:0} .prose td.mono{font-family:var(--mono);font-variant-numeric:tabular-nums;color:var(--green-d)} .callout{border-radius:var(--r-s);padding:18px 22px;margin:26px 0;font-size:15.5px} .callout p{margin:0 0 8px}.callout p:last-child{margin:0} .callout .callout__k{font-weight:800;font-size:12px;letter-spacing:1px;text-transform:uppercase;margin:0 0 8px} .callout.warn{background:var(--warn-bg);border:1px solid var(--warn-bd)}.callout.warn .callout__k{color:var(--warn-ink)} .callout.tip{background:var(--tip-bg);border:1px solid var(--tip-bd)}.callout.tip .callout__k{color:var(--tip-ink)} .callout.note{background:var(--note-bg);border:1px solid var(--note-bd)}.callout.note .callout__k{color:var(--ink2)} .field-note{background:linear-gradient(120deg,#fff,#fbf6ea);border:1px solid var(--gold-soft);border-left:5px solid var(--gold);border-radius:0 var(--r-s) var(--r-s) 0;padding:19px 23px;margin:28px 0} .field-note .fn__k{font-weight:800;color:var(--gold);font-size:12px;letter-spacing:1px;margin:0 0 8px;text-transform:uppercase} .field-note p{margin:0;font-size:15.5px;color:var(--ink)} .inline-cta{background:linear-gradient(120deg,var(--bg-soft),#fff);border:1px solid var(--line);border-left:4px solid var(--green-l);border-radius:0 var(--r-s) var(--r-s) 0;padding:18px 22px;margin:28px 0;font-size:15.5px} .inline-cta b{color:var(--green-d)}.inline-cta .mono{color:var(--gold);font-weight:700} .inline-cta a{font-weight:700;color:var(--green);text-decoration:underline;text-underline-offset:2px} .endcta{position:relative;overflow:hidden;background:linear-gradient(150deg,var(--green-d),#10402e);border-radius:var(--r);padding:40px 38px;margin:44px 0 14px;color:#e7efe9;box-shadow:var(--sh-l)} .endcta::after{content:"";position:absolute;inset:0;background:radial-gradient(80% 120% at 100% 0%,rgba(201,162,74,.24),transparent 55%);pointer-events:none} .endcta h2{font-family:var(--display);color:#fff;font-size:1.7rem;margin:0 0 13px;border:0;padding:0;font-weight:800;position:relative} .endcta p{color:#c2d4ca;font-size:15.5px;margin:0 0 22px;max-width:56ch;position:relative} .endcta .mono{color:var(--gold-l);font-weight:700} .endcta .row{display:flex;gap:13px;flex-wrap:wrap;position:relative} .authorcard{display:flex;gap:17px;align-items:flex-start;background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:22px 24px;margin:36px 0} .authorcard .brand__seal{width:52px;height:52px;flex-basis:52px;font-size:25px;border-radius:14px} .authorcard .name{font-family:var(--display);font-weight:800;color:var(--green-d);margin:0 0 6px;font-size:17px} .authorcard .bio{margin:0;font-size:14px;color:var(--ink2);line-height:1.7} .authorcard .bio strong{color:var(--warn-ink)} .faq{margin:40px 0} .faq details{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-s);margin-bottom:12px;overflow:hidden;transition:box-shadow .2s} .faq details[open]{box-shadow:var(--sh-s)} .faq summary{padding:17px 22px;font-weight:700;color:var(--green-d);cursor:pointer;list-style:none;font-size:16px;position:relative;font-family:var(--display)} .faq summary::-webkit-details-marker{display:none} .faq summary::after{content:"+";position:absolute;right:22px;color:var(--gold);font-weight:400;font-size:22px;transition:transform .2s} .faq details[open] summary::after{content:"–"} .faq details > p{margin:0;padding:0 22px 18px;color:var(--ink2);font-size:15px;line-height:1.7} .seo-guide{margin:34px 0;border-top:1px solid var(--line);padding-top:20px} .seo-guide > summary{font-family:var(--display);font-size:1.4rem;color:var(--green-d);cursor:pointer;font-weight:800;padding:6px 0;list-style:none} .seo-guide > summary::-webkit-details-marker{display:none} .seo-guide > summary::before{content:"▸ ";color:var(--gold)} .seo-guide[open] > summary::before{content:"▾ "} /* ---------- 试算器 ---------- */ .calc{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh-m);padding:30px;margin:26px 0} .calc__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px} .calc__field label{display:block;font-size:13px;font-weight:700;color:var(--ink2);margin-bottom:8px;letter-spacing:.2px} .calc__field input,.calc__field select{width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:11px;font-family:var(--mono);font-size:16px;color:var(--green-d);background:var(--bg)} .calc__field input:focus,.calc__field select:focus{outline:none;border-color:var(--gold);background:#fff;box-shadow:0 0 0 3px rgba(201,162,74,.18)} .calc__result{margin-top:24px;background:linear-gradient(150deg,var(--green-d),#10402e);border-radius:var(--r-s);padding:26px;text-align:center;color:#fff;position:relative;overflow:hidden} .calc__result::after{content:"";position:absolute;inset:0;background:radial-gradient(70% 120% at 100% 0,rgba(201,162,74,.22),transparent 55%)} .calc__result .big{font-family:var(--mono);font-size:2.4rem;font-weight:800;color:#fff;font-variant-numeric:tabular-nums;position:relative} .calc__result .lbl{font-size:13px;color:#bcd0c6;margin-top:5px;position:relative} .calc__breakdown{display:grid;grid-template-columns:repeat(3,1fr);gap:13px;margin-top:20px} .calc__breakdown .cell{background:var(--bg);border:1px solid var(--line);border-radius:11px;padding:14px;text-align:center} .calc__breakdown .v{font-family:var(--mono);font-weight:700;color:var(--green-d);font-size:18px} .calc__breakdown .k{font-size:12px;color:var(--ink3);margin-top:4px} /* ---------- 通用页 ---------- */ .page-head{position:relative;overflow:hidden;border-bottom:1px solid var(--line);padding:56px 0 44px; background:radial-gradient(60% 100% at 15% 0,rgba(31,169,143,.16),transparent 60%),radial-gradient(50% 90% at 95% 10%,rgba(201,162,74,.2),transparent 60%),linear-gradient(180deg,#fbfaf5,var(--bg))} .page-head .container{position:relative} .page-head h1{font-family:var(--display);font-size:clamp(2rem,3.8vw,2.9rem);color:var(--green-d);margin:0 0 14px;font-weight:900;letter-spacing:-.5px;max-width:22ch} .page-head p{font-size:18px;color:var(--ink2);margin:0;max-width:60ch;line-height:1.7} .legal{max-width:780px;margin:0 auto;padding:48px 24px} .legal h2{font-family:var(--display);color:var(--green-d);font-size:1.5rem;margin:38px 0 14px;padding-bottom:9px;border-bottom:1px solid var(--line);font-weight:800} .legal p,.legal li{font-size:16px;color:#23262b;line-height:1.8} .legal ul{padding-left:22px}.legal li::marker{color:var(--gold)} .legal .upd{font-family:var(--mono);font-size:13px;color:var(--ink3)} .correction{border-left:3px solid var(--gold);padding:4px 0 4px 18px;margin:0 0 22px} .correction .date{font-family:var(--mono);font-size:13px;color:var(--gold);font-weight:700} .correction .old{color:var(--ink3);text-decoration:line-through} .correction .new{color:var(--green-d);font-weight:600} /* ---------- 页脚 ---------- */ .foot{background:var(--green-d);color:#bdcdc4;margin-top:64px;position:relative;overflow:hidden} .foot::before{content:"";position:absolute;inset:0;background:radial-gradient(50% 120% at 85% 0,rgba(201,162,74,.16),transparent 55%);pointer-events:none} .foot__grid{max-width:var(--wrap);margin:0 auto;padding:52px 24px 32px;display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:32px;position:relative} .foot__grid h4{color:#fff;font-size:13px;margin:0 0 15px;letter-spacing:1px;text-transform:uppercase;font-weight:700} .foot__grid a{display:block;color:#a3b6ab;font-size:14.5px;margin-bottom:10px} .foot__grid a:hover{color:var(--gold-l)} .foot .brand{justify-content:flex-start} .foot .brand__name{color:#fff;font-size:1.5rem} .foot .brand__seal{width:40px;height:40px;flex-basis:40px;font-size:21px} .foot__intro{font-size:14px;color:#a3b6ab;max-width:32ch;margin:15px 0 0;line-height:1.7} .foot__bottom{border-top:1px solid rgba(255,255,255,.1);position:relative} .foot__bottom .inner{max-width:var(--wrap);margin:0 auto;padding:22px 24px;font-size:12.5px;color:#86998e;line-height:1.7} .foot__bottom b{color:var(--gold-l)} .foot__bottom a{color:var(--gold-l)} /* ---------- 响应式 ---------- */ @media(max-width:960px){ .hero__inner{grid-template-columns:1fr;gap:34px;padding:48px 24px 44px} .hero__card{order:-1} .feature__card{grid-template-columns:1fr} .feature__media{min-height:220px} .layout{grid-template-columns:1fr;gap:38px} .sidebar{position:static} } @media(max-width:680px){ body{font-size:16px} .brand__name{font-size:1.7rem} .brand__seal{width:40px;height:40px;flex-basis:40px;font-size:21px} .nav__row a{padding:7px 12px;font-size:14px} .card-grid,.calc__grid,.calc__breakdown{grid-template-columns:1fr} .foot__grid{grid-template-columns:1fr 1fr;gap:26px} .feature__body,.calc{padding:26px 22px} .prose{font-size:16.5px} .hero h1{font-size:clamp(2rem,8vw,2.6rem)} } /* ============================================================ v3 首页「炸版」· 深色发光动态 hero(只在 body.home) ============================================================ */ .home .site-head{background:rgba(7,28,20,.62);backdrop-filter:saturate(140%) blur(13px);-webkit-backdrop-filter:saturate(140%) blur(13px);border-bottom:1px solid rgba(201,162,74,.16)} .home .brand__name{color:#fff} .home .masthead-tagline{color:#cfe0d6} .home .masthead-tagline b{color:#eccd73} .home .nav__row a{color:#d7e6dd} .home .nav__row a:hover,.home .nav__row a[aria-current="page"]{background:rgba(255,255,255,.13);color:#fff} .home .lsw-row a{color:#9fb6aa} .home .lsw-row a:hover{background:rgba(255,255,255,.08);color:#fff} .home .lsw-row a.on{color:#fff;background:rgba(255,255,255,.1);box-shadow:inset 0 0 0 1px rgba(201,162,74,.4)} .hero--stage{position:relative;overflow:hidden;border-bottom:0;color:#eaf3ec; background:radial-gradient(125% 120% at 50% -25%,#11543d 0%,#0b3526 46%,#061a13 100%)} .stage__bg{position:absolute;inset:0;overflow:hidden;pointer-events:none} .stage__bg .orb{position:absolute;border-radius:50%;filter:blur(74px);opacity:.62;animation:orb 16s ease-in-out infinite} .orb--1{width:520px;height:520px;left:-6%;top:-32%;background:radial-gradient(circle,#1fb094,transparent 64%)} .orb--2{width:600px;height:600px;right:-14%;top:-24%;background:radial-gradient(circle,#caa24c,transparent 60%);animation-delay:-6s} .orb--3{width:440px;height:440px;left:34%;bottom:-46%;background:radial-gradient(circle,#0e8a63,transparent 60%);animation-delay:-11s} @keyframes orb{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(34px,26px) scale(1.14)}} .hero--stage .hero__inner{position:relative;z-index:2;padding:80px 24px 96px;align-items:center} .hero--stage .hero__copy{min-width:0} .hero--stage .hero__kicker{color:#eccd73} .hero--stage .hero__kicker::before{background:#eccd73} .hero--stage h1{color:#fff;font-size:clamp(2.6rem,5.6vw,4.3rem);line-height:1.04;letter-spacing:-1.2px;margin:0 0 22px;font-weight:900} .hero--stage h1 .grad{background:linear-gradient(96deg,#f6d98c 0%,#eccd73 42%,#fff4d2 100%);-webkit-background-clip:text;background-clip:text;color:transparent;font-style:italic} .hero--stage .hero__sub{color:#bcd0c4;font-size:18px;max-width:40ch;margin:0 0 30px} .hero--stage .hero__cta{gap:14px} .hero--stage .hero__trust{margin:24px 0 0;font-size:12.5px;color:#7f9a8c;letter-spacing:.2px} .hero--stage .hero__trust b{color:#cfe0d6} .btn--glass{background:rgba(255,255,255,.08);color:#fff;box-shadow:inset 0 0 0 1.4px rgba(255,255,255,.3);backdrop-filter:blur(6px)} .btn--glass:hover{background:rgba(255,255,255,.17);color:#fff;transform:translateY(-2px)} .growth{position:relative;background:linear-gradient(180deg,rgba(10,40,29,.72),rgba(6,22,16,.74)); backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px); border:1px solid rgba(201,162,74,.28);border-radius:22px;padding:26px 28px 22px; box-shadow:0 44px 90px -42px rgba(0,0,0,.85),inset 0 1px 0 rgba(255,255,255,.07)} .growth__top{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px} .growth__label{font-size:12.5px;color:#9fb6aa;letter-spacing:.3px} .growth__apy{font-family:var(--mono);font-size:11.5px;color:#0b3526;background:linear-gradient(135deg,#f0d488,#e0b955);padding:4px 11px;border-radius:999px;font-weight:800;letter-spacing:.3px} .growth__num{font-family:var(--mono);font-size:2.9rem;font-weight:800;color:#fff;line-height:1;letter-spacing:-1px} .growth__num small{font-size:.95rem;color:#9fb6aa;font-weight:600;letter-spacing:0;margin-left:4px} .growth__chart{display:block;width:100%;height:118px;margin:16px 0 6px;overflow:visible} .growth__area{opacity:0;animation:gfade 1.1s ease .55s forwards} .growth__line{stroke-dasharray:100;stroke-dashoffset:100;filter:drop-shadow(0 0 6px rgba(236,205,115,.55));animation:gdraw 1.7s cubic-bezier(.36,.09,.2,1) .2s forwards} .growth__dot{opacity:0;filter:drop-shadow(0 0 7px rgba(255,255,255,.85));animation:gfade .4s ease 1.55s forwards} @keyframes gdraw{to{stroke-dashoffset:0}} @keyframes gfade{to{opacity:1}} .growth__legend{display:flex;justify-content:space-between;font-size:12px;color:#9fb6aa;font-family:var(--mono);border-top:1px solid rgba(255,255,255,.09);padding-top:13px;margin-top:6px} .growth__delta{color:#eccd73} @media(max-width:960px){ .hero--stage .hero__inner{grid-template-columns:1fr;gap:34px;padding:52px 22px 64px} .growth{order:2} } @media(prefers-reduced-motion:reduce){ .stage__bg .orb{animation:none} .growth__line{stroke-dashoffset:0;animation:none} .growth__area,.growth__dot{opacity:1;animation:none} }