/* ========================================================================== * 書香 B2B 官网 · 设计系统 shuxiang.css * 方向 C —— 东方图形 / 强结构（陈幼坚「东情西韵」哲学） * 来源：design-demos/C-东方图形/{index,alliance}.html 的样式，按块去重合并 * * 视觉母题：竹节（分节双线）· 香篆（回旋路径）· 四时（季节栅格） * · 工笔留白（信息密度错落）· 竹简编绳（串起区块的那根线） * 栅格：12 列可见栏线 + 外双框；粗细线分级 1px 分格 / 2-3px 分区 * 色彩：蛙绿 #22A585 与中国红 #99200B 是唯二强色，其余只作底与过渡 * ========================================================================== */ /* ============================ 0. 变量与基础 ============================ */ :root{ --ink:#1A1614; --green:#22A585; --red:#99200B; --rice:#F3E4C7; --celadon:#E1EDC5; --tan:#EED6B2; --paper:#FCF8F1; --ink-70:rgba(26,22,20,.70); --ink-55:rgba(26,22,20,.55); --line: rgba(26,22,20,.18); --line-2:rgba(26,22,20,.34); --line-3:rgba(26,22,20,.62); --serif:"Noto Serif SC","Source Han Serif SC","STSong","SimSun",serif; --kai:"STKaiti","KaiTi","Noto Serif SC",serif; --sans:"Noto Sans SC","Microsoft YaHei","PingFang SC",sans-serif; --num:"Cormorant Garamond","Noto Serif SC",serif; --gut:40px; } *,*::before,*::after{box-sizing:border-box;} html{-webkit-text-size-adjust:100%;} body{ margin:0;background:var(--rice);color:var(--ink); font-family:var(--sans);font-size:15px;line-height:1.75; overflow-x:hidden; } img{display:block;max-width:100%;} a{color:inherit;text-decoration:none;} h1,h2,h3,h4,p,ul,ol,figure,blockquote{margin:0;padding:0;} ul,ol{list-style:none;} ::selection{background:var(--green);color:#fff;} /* ============================ 1. 栅格 / 结构 ============================ */ .wrap{width:min(1440px,100%);margin:0 auto;padding:0 var(--gut);position:relative;} /* 可见栏线：12 列 + 外双框 —— 这就是本版的骨架 */ .rail{position:relative;} .rail::before,.rail::after{ content:"";position:absolute;top:0;bottom:0;width:1px;background:var(--line);z-index:0;} .rail::before{left:var(--gut);} .rail::after{right:var(--gut);} .cols12{ position:absolute;inset:0 var(--gut);display:grid;grid-template-columns:repeat(12,minmax(0,1fr)); pointer-events:none;z-index:0; } .cols12 span{border-right:1px solid var(--line);} .cols12 span:last-child{border-right:0;} .layer{position:relative;z-index:1;} .grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:0;} .c3{grid-column:span 3;} .c4{grid-column:span 4;} .c5{grid-column:span 5;} .c6{grid-column:span 6;} .c7{grid-column:span 7;} .c8{grid-column:span 8;} .c9{grid-column:span 9;} .c12{grid-column:span 12;} /* 窄屏：强网格降级为单栏，栏线不再有意义 */ @media (max-width:1024px){ .c3,.c4,.c5,.c6,.c7,.c8,.c9{grid-column:span 12;} .cols12{display:none;} .rail::before,.rail::after{display:none;} } /* 竹节：分段环 —— 区块之间的横向双线 */ .joint{border-top:1px solid var(--line-2);} .joint-strip{height:9px;border-top:1px solid var(--line-2);border-bottom:1px solid var(--line);background:transparent;} /* 竹简编绳：串起区块与时间轴的那根线 */ .cord{height:0;border-top:1px dashed var(--line-2);position:relative;} .cord::after{content:"";position:absolute;left:0;right:0;top:2px;border-top:1px solid var(--line);} /* ============================ 2. 几何纹样系统 ============================ */ .motif-field{ position:absolute;inset:0;pointer-events:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'%3E%3Cg fill='none' stroke='%231A1614' stroke-width='1' opacity='.55'%3E%3Cellipse cx='46' cy='46' rx='40' ry='11' transform='rotate(-38 46 46)'/%3E%3Cellipse cx='46' cy='46' rx='40' ry='11' transform='rotate(38 46 46)'/%3E%3Cpath d='M46 34 V140'/%3E%3C/g%3E%3C/svg%3E"); background-size:140px 140px;opacity:.10; } .motif-chrys{ position:absolute;inset:0;pointer-events:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cg fill='none' stroke='%231A1614' stroke-width='1' opacity='.6'%3E%3Ccircle cx='90' cy='90' r='8'/%3E%3Ccircle cx='90' cy='90' r='26'/%3E%3Cpath d='M90 90 L90 4 M90 90 L151 29 M90 90 L176 90 M90 90 L151 151 M90 90 L90 176 M90 90 L29 151 M90 90 L4 90 M90 90 L29 29'/%3E%3C/g%3E%3C/svg%3E"); background-size:180px 180px;opacity:.09; } .motif-mask{position:absolute;inset:0;pointer-events:none;opacity:.60; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M0 24 L24 0' stroke='%231A1614' stroke-width='.6' opacity='.5'/%3E%3C/svg%3E"); } /* ============================ 3. 通用元件 ============================ */ .tag{ display:inline-block;font-size:12px;letter-spacing:.18em;line-height:1; padding:6px 10px;border:1px solid var(--line-2);color:var(--ink-70); font-family:var(--sans);background:transparent; } .tag--g{color:#fff;background:var(--green);border-color:var(--green);} .tag--r{color:#fff;background:var(--red);border-color:var(--red);} .num{font-family:var(--num);font-weight:600;letter-spacing:.02em;} .vert{writing-mode:vertical-rl;text-orientation:upright;letter-spacing:.28em;font-family:var(--kai);} /* 方印：所有强调点的收口 */ .seal{ width:78px;height:78px;background:var(--red);color:#fff; display:grid;place-content:center;text-align:center; font-family:var(--kai);font-size:19px;line-height:1.3;letter-spacing:.14em; writing-mode:vertical-rl;text-orientation:upright; border:0;box-shadow:0 0 0 1px rgba(153,32,11,.35); } .btn{ display:inline-flex;align-items:center;gap:10px; padding:15px 26px;font-size:15px;letter-spacing:.08em; border:1px solid var(--ink);background:transparent;color:var(--ink); font-family:var(--sans);cursor:pointer;transition:.18s; } .btn:hover{background:var(--ink);color:var(--rice);} .btn--g{background:var(--green);border-color:var(--green);color:#fff;} .btn--g:hover{background:var(--ink);border-color:var(--ink);color:#fff;} .btn--r{background:var(--red);border-color:var(--red);color:#fff;} .btn--r:hover{background:var(--ink);border-color:var(--ink);} .btn .arw{font-family:var(--num);font-size:18px;} /* 图片框：所有图都必须被「框」在版面里 */ .frame{border:1px solid var(--line-2);background:var(--paper);position:relative;} .frame img{width:100%;height:100%;object-fit:cover;} /* 带字原图：裁掉文字区（红线要求），不靠叠字遮字 */ .frame img.crop-b{object-position:center bottom;} .frame img.crop-t{object-position:center top;} .frame .cap{ position:absolute;left:0;bottom:0;background:var(--paper);border-top:1px solid var(--line-2); border-right:1px solid var(--line-2);padding:5px 10px;font-size:12px;letter-spacing:.06em;color:var(--ink-70); } figcaption{font-size:12px;color:var(--ink-55);letter-spacing:.06em;padding-top:8px;line-height:1.6;} .ratio-a{aspect-ratio:3/4;} .ratio-b{aspect-ratio:4/3;} .ratio-c{aspect-ratio:1/1;} .ratio-d{aspect-ratio:16/9;} /* 诚实占位 */ .ph{ border:1px dashed var(--line-2);background: repeating-linear-gradient(45deg,transparent 0 8px,rgba(26,22,20,.05) 8px 9px); display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px; color:var(--ink-55);text-align:center;padding:14px; } .ph b{font-weight:500;font-size:13px;letter-spacing:.06em;color:var(--ink-70);} .ph small{font-size:12px;line-height:1.5;} /* 区块头 */ /* 注意：.sec 只改上下内距，绝不能覆盖 .wrap 的左右版心内距 */ .sec{padding-top:78px;padding-bottom:78px;position:relative;} .sec-head{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:end;gap:20px; border-top:3px solid var(--ink);padding-top:14px;margin-bottom:34px;position:relative;} .sec-head .idx{font-family:var(--kai);font-size:15px;letter-spacing:.3em;color:var(--red);padding-bottom:6px;} .sec-head h2{font-family:var(--serif);font-weight:900;font-size:clamp(28px,2.6vw,40px);line-height:1.1;letter-spacing:.02em;} .sec-head .sub{grid-column:2;font-size:14px;color:var(--ink-70);letter-spacing:.06em;padding-top:8px;} .sec-head .side{font-size:12px;letter-spacing:.24em;color:var(--ink-55);text-align:right;white-space:nowrap;padding-bottom:4px;} @media (max-width:1024px){ .sec{padding-top:60px;padding-bottom:60px;} .sec-head{grid-template-columns:1fr;gap:8px;} .sec-head .sub{grid-column:1;} .sec-head .side{display:none;} } /* ============================ 4. 顶栏 ============================ */ .topbar{background:var(--ink);color:rgba(243,228,199,.80);font-size:12px;letter-spacing:.14em;} .topbar .wrap{display:flex;justify-content:space-between;align-items:center;height:34px;gap:20px;flex-wrap:wrap;} .topbar .rt{display:flex;gap:18px;} .topbar .dot{color:var(--green);} .hdr{position:sticky;top:0;z-index:40;background:rgba(243,228,199,.97);backdrop-filter:blur(6px); border-bottom:1px solid var(--line-2);} .hdr-top{display:flex;align-items:center;gap:24px;padding-top:14px;padding-bottom:14px;} .brand{display:flex;align-items:center;gap:16px;} .brand .plate{background:#fff;border:1px solid var(--line-2);padding:7px 12px;display:block;} .brand .plate img{width:158px;height:auto;} .brand .subnote{font-size:11px;letter-spacing:.12em;color:var(--ink-55);padding-top:6px;} .hdr-slogan{margin-left:auto;font-family:var(--kai);font-size:16px;letter-spacing:.18em;color:var(--ink-70);white-space:nowrap;} .hdr .act{display:flex;align-items:center;} /* 10 格导航带：整站骨架，每格一栏线 */ .hdr-nav{border-top:1px solid var(--line-2);} .nav ul{display:flex;width:100%;} .nav li{flex:1;position:relative;} .nav a{display:block;padding:12px 6px;text-align:center;font-size:15px;letter-spacing:.04em;color:var(--ink-70);white-space:nowrap;} .nav li::after{content:"";position:absolute;right:0;top:8px;bottom:8px;width:1px;background:var(--line);} .nav li:last-child::after{display:none;} .nav a:hover{color:var(--green);background:var(--celadon);} .nav a.cur{color:var(--ink);font-weight:500;background:var(--celadon);box-shadow:inset 0 -2px 0 var(--green);} @media (max-width:1200px){ .hdr-slogan{display:none;} .nav a{font-size:14px;padding:11px 4px;} .brand .plate img{width:132px;} } @media (max-width:1024px){ .hdr{position:static;} .hdr-top{padding-top:10px;padding-bottom:10px;} /* 窄屏导航改为 5×2 网格，10 页骨架一屏看全 */ .nav ul{width:100%;flex-wrap:wrap;} .nav li{flex:0 0 20%;} .nav li:nth-child(5n)::after{display:none;} .nav li:nth-child(n+6){border-top:1px solid var(--line);} .nav a{padding:11px 4px;font-size:14px;} .nav li::after{top:8px;bottom:8px;} } @media (max-width:640px){ :root{--gut:18px;} .topbar .wrap{height:auto;padding:6px 0;row-gap:2px;font-size:11px;} .topbar .rt{display:none;} .brand .plate img{width:120px;} .brand .subnote{display:none;} .hdr .act .btn{padding:11px 16px;font-size:14px;} .nav li{flex:0 0 33.3333%;} .nav li:nth-child(3n)::after{display:none;} .nav li:nth-child(n+4){border-top:1px solid var(--line);} .nav a{font-size:13px;padding:10px 2px;} } /* ============================ 5. HERO ============================ */ .hero{position:relative;padding:0 0 0;overflow:hidden;} .hero .grid{align-items:stretch;} .hero-type{background:transparent;padding:52px 46px 46px 0;position:relative;border-right:1px solid var(--line);} .glyph-bg{ position:absolute;right:-.06em;bottom:-.28em;z-index:0; font-family:var(--serif);font-weight:900;font-size:clamp(230px,20vw,330px);line-height:.8; color:var(--ink);opacity:.07;pointer-events:none;letter-spacing:-.04em; } .hero-type .eyebrow{display:flex;align-items:center;gap:12px;font-size:12px;letter-spacing:.24em;color:var(--ink-55);} .hero-type .eyebrow i{display:block;width:44px;height:1px;background:var(--line-3);} .hero h1{ font-family:var(--serif);font-weight:900;font-size:clamp(46px,5.6vw,88px);line-height:1.06; letter-spacing:.02em;margin:20px 0 0;position:relative;z-index:1; } .hero h1 em{font-style:normal;color:var(--green);} .hero .lead{ margin-top:22px;max-width:44ch;font-size:15px;line-height:1.85;color:var(--ink-70);position:relative;z-index:1; } .hero .lead b{font-weight:500;color:var(--ink);} .hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:30px;position:relative;z-index:1;} .hero-meta{display:flex;gap:0;margin-top:34px;border-top:1px solid var(--line-2);position:relative;z-index:1;} .hero-meta div{flex:1;padding:14px 16px 0 0;border-right:1px solid var(--line);} .hero-meta div:last-child{border-right:0;} .hero-meta dt{font-size:12px;letter-spacing:.16em;color:var(--ink-55);} .hero-meta dd{margin:2px 0 0;font-size:14px;color:var(--ink);} .hero-vis{position:relative;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);grid-template-rows:auto auto;gap:0;} .hero-vis .frame{border-top:0;border-right:0;} .hero-vis .f1{grid-row:span 2;} .hero-vis .f2{border-left:1px solid var(--line);border-bottom:1px solid var(--line);} .hero-vis .f3{border-left:1px solid var(--line);} .hero-vis .stamp{position:absolute;right:0;bottom:0;z-index:3;} .hero-strip{ border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2);background:var(--celadon); padding:22px 0;display:flex;align-items:center;gap:26px;flex-wrap:wrap; } .hero-strip h2{font-family:var(--serif);font-weight:900;font-size:clamp(26px,3.1vw,44px);letter-spacing:.14em;line-height:1.2;} .hero-strip p{font-size:13px;color:var(--ink-70);letter-spacing:.1em;} .hero-strip .vert{font-size:13px;max-height:120px;color:var(--green);} .hero-strip .sp{flex:1;} @media (max-width:1024px){ .hero-type{border-right:0;border-bottom:1px solid var(--line);padding:34px 0 28px;} .glyph-bg{font-size:44vw;opacity:.05;} .hero-vis{grid-template-columns:minmax(0,1fr) minmax(0,1fr);} .hero-vis .f1{grid-row:auto;} .hero-vis .frame{border:1px solid var(--line);} } @media (max-width:640px){ .hero-vis{grid-template-columns:1fr;} .hero-meta{flex-wrap:wrap;} .hero-meta div{flex:1 1 45%;padding-right:12px;border-right:0;} .hero-meta div:nth-child(2n+1){border-right:1px solid var(--line);} .hero-cta .btn{flex:1 1 100%;justify-content:center;} } /* ============================ 6. 信任数据条 ============================ */ .datas{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2);} .datas .d{padding:26px 16px 24px;border-right:1px solid var(--line);position:relative;} .datas .d:last-child{border-right:0;} .datas .d:hover{background:var(--tan);} .datas .v{font-family:var(--num);font-weight:700;font-size:clamp(28px,2.6vw,40px);line-height:1;color:var(--green);letter-spacing:-.01em;} .datas .v i{font-style:normal;font-size:.52em;padding-left:2px;} .datas .l{font-size:12px;letter-spacing:.14em;color:var(--ink-55);padding-top:10px;} .datas .n{font-size:12px;color:var(--ink-70);padding-top:4px;line-height:1.5;} @media (max-width:1024px){ .datas{grid-template-columns:repeat(4,minmax(0,1fr));} .datas .d{border-bottom:1px solid var(--line);} } @media (max-width:640px){ .datas{grid-template-columns:repeat(2,minmax(0,1fr));} .datas .d:nth-child(2n){border-right:0;} .datas .d{padding:20px 12px;} } /* ============================ 7. 创香哲学 / 四时 ============================ */ .philo{background:var(--tan);} .philo-grid{display:grid;grid-template-columns:auto minmax(0,1fr) 300px;gap:0;} .philo-vert{border-right:1px solid var(--line);padding-right:30px;display:flex;gap:20px;} .philo-vert .vert{font-size:clamp(20px,1.7vw,24px);letter-spacing:.2em;max-height:440px;color:var(--ink);font-weight:700;} .philo-main{padding:0 34px;} .philo-main .big{font-family:var(--serif);font-weight:700;font-size:clamp(20px,2vw,28px);line-height:1.5;letter-spacing:.04em;} .philo-main .big span{color:var(--green);} .twohold{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0;margin-top:26px;border-top:1px solid var(--line-2);} .twohold div{padding:18px 22px 0 0;border-right:1px solid var(--line);} .twohold div:last-child{border-right:0;} .twohold h4{font-family:var(--kai);font-size:19px;letter-spacing:.1em;} .twohold p{font-size:13px;color:var(--ink-70);line-height:1.7;padding-top:6px;} .four{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:30px;border:1px solid var(--line-2);} .four .cell{border-right:1px solid var(--line);background:var(--paper);display:flex;flex-direction:column;} .four .cell:last-child{border-right:0;} .four .cell h5{font-family:var(--kai);font-size:22px;letter-spacing:.2em;padding:12px 14px 8px;} .four .cell p{font-size:12px;color:var(--ink-70);padding:0 14px 12px;line-height:1.6;} .four .cell .frame{border:0;border-top:1px solid var(--line);} .philo-aside{border-left:1px solid var(--line);padding-left:26px;} .utfive{border-top:1px solid var(--line-2);} .utfive li{display:flex;gap:12px;padding:9px 0;border-bottom:1px solid var(--line);font-size:13px;} .utfive li em{font-style:normal;font-family:var(--num);font-weight:700;color:var(--green);font-size:15px;min-width:22px;} .utfive li span{color:var(--ink-70);} @media (max-width:1024px){ .philo-grid{grid-template-columns:1fr;gap:26px;} .philo-vert{border-right:0;justify-content:flex-start;padding-right:0;} .philo-vert .vert{max-height:none;writing-mode:horizontal-tb;letter-spacing:.12em;white-space:nowrap;font-size:18px;} .philo-main{padding:0;} .philo-aside{border-left:0;padding-left:0;} .four{grid-template-columns:repeat(2,minmax(0,1fr));} .four .cell:nth-child(2n){border-right:0;} .four .cell:nth-child(-n+2){border-bottom:1px solid var(--line);} } @media (max-width:640px){ .twohold{grid-template-columns:1fr;} .twohold div{border-right:0;border-bottom:1px solid var(--line);} } /* ============================ 8. 产品体系 ============================ */ .prods{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border:1px solid var(--line-2);background:var(--paper);} .prod{border-right:1px solid var(--line);padding:0;display:flex;flex-direction:column;} .prod:last-child{border-right:0;} .prod-hd{padding:20px 22px 16px;border-bottom:1px solid var(--line-2);position:relative;} .prod-hd .no{font-family:var(--kai);font-size:13px;letter-spacing:.24em;color:var(--red);} .prod-hd h3{font-family:var(--serif);font-weight:700;font-size:26px;letter-spacing:.04em;padding-top:6px;} .prod-hd .meta{font-size:12px;color:var(--ink-55);letter-spacing:.1em;padding-top:2px;} .prod-hd p{font-family:var(--kai);font-size:15px;color:var(--ink-70);line-height:1.7;padding-top:10px;} .prod .frame{border:0;border-bottom:1px solid var(--line);} .prod figure{margin:0;} .prod-bd{padding:16px 22px 22px;flex:1;display:flex;flex-direction:column;} .prod-bd .ph{margin-top:auto;} .list2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);border-top:1px solid var(--line-2);} .list2 li{border-bottom:1px solid var(--line);border-right:1px solid var(--line);padding:9px 10px;} .list2 li:nth-child(2n){border-right:0;} .list2 li b{display:block;font-family:var(--serif);font-weight:500;font-size:16px;letter-spacing:.04em;} .list2 li span{display:block;font-size:12px;color:var(--ink-55);line-height:1.5;padding-top:2px;} .prod-note{font-size:12px;color:var(--ink-70);line-height:1.7;padding-top:12px;} .prod .ph{margin-top:14px;min-height:96px;} .cta-line{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 22px;border-top:1px solid var(--line-2);font-size:13px;} .cta-line a{color:var(--green);letter-spacing:.08em;} @media (max-width:1024px){ .prods{grid-template-columns:1fr;} .prod{border-right:0;border-bottom:1px solid var(--line-2);} .prod:last-child{border-bottom:0;} } /* ============================ 9. 品牌联盟 ============================ */ .allies{background:var(--ink);color:var(--rice);position:relative;overflow:hidden;} .allies .sec-head{border-top-color:var(--rice);} .allies .sec-head .idx{color:var(--red);} .allies .sec-head .sub,.allies .sec-head .side{color:rgba(243,228,199,.6);} .allies .sec-head h2{color:var(--rice);} .dir4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid rgba(243,228,199,.28);border-bottom:1px solid rgba(243,228,199,.28);} .dir4 .d{padding:26px 22px 28px;border-right:1px solid rgba(243,228,199,.22);position:relative;} .dir4 .d:last-child{border-right:0;} .dir4 .d img.deco{width:34px;height:auto;opacity:.85;margin-bottom:14px;} .dir4 .d h3{font-family:var(--serif);font-weight:700;font-size:24px;letter-spacing:.06em;} .dir4 .d p{font-size:13px;line-height:1.8;color:rgba(243,228,199,.72);padding-top:8px;} .dir4 .d .en{font-family:var(--num);font-size:13px;letter-spacing:.18em;color:var(--green);padding-top:12px;} .modes{margin-top:40px;border:1px solid rgba(243,228,199,.22);} .modes .row{display:grid;grid-template-columns:150px minmax(0,1fr) minmax(0,1.1fr);border-bottom:1px solid rgba(243,228,199,.22);} .modes .row:last-child{border-bottom:0;} .modes .row .k{padding:18px 20px;border-right:1px solid rgba(243,228,199,.22);background:rgba(243,228,199,.05);} .modes .row .k h4{font-family:var(--serif);font-weight:700;font-size:19px;letter-spacing:.06em;} .modes .row .k em{font-style:normal;display:block;font-size:12px;color:rgba(243,228,199,.70);letter-spacing:.14em;padding-top:4px;} .modes .row .v{padding:18px 20px;border-right:1px solid rgba(243,228,199,.22);font-size:14px;line-height:1.8;color:rgba(243,228,199,.86);} .modes .row .t{padding:18px 20px;font-size:13px;color:rgba(243,228,199,.66);line-height:1.8;} .allies .foot-cta{display:flex;align-items:center;justify-content:space-between;gap:18px;padding-top:30px;flex-wrap:wrap;} .allies .foot-cta p{font-family:var(--kai);font-size:18px;letter-spacing:.08em;color:rgba(243,228,199,.85);} @media (max-width:1024px){ .dir4{grid-template-columns:repeat(2,minmax(0,1fr));} .dir4 .d:nth-child(2n){border-right:0;} .dir4 .d:nth-child(-n+2){border-bottom:1px solid rgba(243,228,199,.22);} .modes .row{grid-template-columns:1fr;} .modes .row .k,.modes .row .v{border-right:0;border-bottom:1px solid rgba(243,228,199,.22);} } /* ============================ 10. 案例 ============================ */ .cases{border-top:1px solid var(--line-2);} .case-row{display:grid;grid-template-columns:92px 220px minmax(0,1fr) 170px;align-items:stretch; border-bottom:1px solid var(--line);} .case-row:hover{background:var(--celadon);} .case-row .idx{display:flex;align-items:center;padding:22px 18px;border-right:1px solid var(--line);} .case-row .idx span{font-family:var(--num);font-weight:700;font-size:26px;color:var(--green);} .case-row .th{padding:22px 20px 22px 0;} .case-row .th .frame{border:1px solid var(--line-2);} .case-row .bd{padding:22px 24px;border-left:1px solid var(--line);} .case-row .bd h3{font-family:var(--serif);font-weight:700;font-size:26px;letter-spacing:.04em;} .case-row .bd p{font-size:14px;color:var(--ink-70);line-height:1.8;padding-top:6px;} .case-row .bd .kw{font-size:12px;color:var(--ink-55);letter-spacing:.1em;padding-top:8px;} .case-row .sd{padding:22px 0 22px 22px;border-left:1px solid var(--line);display:flex;flex-direction:column;justify-content:center;gap:8px;} @media (max-width:1024px){ .case-row{grid-template-columns:64px minmax(0,1fr);} .case-row .idx{padding:18px 10px;} .case-row .th{display:none;} .case-row .bd{padding:18px 16px;border-left:1px solid var(--line);} .case-row .sd{grid-column:1 / -1;border-left:0;border-top:1px solid var(--line);padding:14px 16px;flex-direction:row;flex-wrap:wrap;} } @media (max-width:640px){ .case-row{grid-template-columns:52px minmax(0,1fr);} .case-row .bd h3{font-size:21px;} } /* ============================ 11. 她力量 ============================ */ .her{background:var(--celadon);} .her-grid{display:grid;grid-template-columns:320px minmax(0,1fr);gap:0;} .her-grid .frame{border:1px solid var(--line-2);} .her-bd{padding:0 0 0 34px;} .her-bd h3{font-family:var(--serif);font-weight:900;font-size:clamp(26px,2.6vw,38px);letter-spacing:.03em;line-height:1.25;} .her-bd h3 span{color:var(--red);} .her-bd > p{font-size:14px;color:var(--ink-70);line-height:1.85;padding-top:14px;max-width:58ch;} .nine{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:26px;border-top:1px solid var(--line-2);border-left:1px solid var(--line);} .nine li{border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:12px 14px;display:flex;gap:10px;align-items:flex-start;} .nine li em{font-style:normal;font-family:var(--num);font-weight:700;color:var(--green);font-size:15px;} .nine li span{font-size:13px;line-height:1.6;color:var(--ink-70);} @media (max-width:1024px){ .her-grid{grid-template-columns:minmax(0,1fr);} .her-bd{padding:24px 0 0;} .nine{grid-template-columns:repeat(2,minmax(0,1fr));} } @media (max-width:640px){ .nine{grid-template-columns:minmax(0,1fr);} } /* ============================ 12. 客户字标墙 ============================ */ .wall{border-top:1px solid var(--line-2);} /* 品牌一句两栏 */ .sayL{padding-right:34px;border-right:1px solid var(--line);} .sayR{padding-left:34px;} /* 品牌四条 + 创始人 */ .brand-kv{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--line-2);} .brand-kv > div{padding:16px 18px 0 0;border-right:1px solid var(--line);} .brand-kv > div:last-child{border-right:0;} .brand-kv dt{font-size:12px;letter-spacing:.16em;color:var(--ink-55);} .brand-kv dd{margin:4px 0 0;font-size:14px;} .brand-kv dd.s{font-family:var(--serif);font-weight:700;font-size:20px;} .founder{margin-top:26px;border:1px solid var(--line-2);background:var(--paper);padding:22px 24px; display:grid;grid-template-columns:minmax(0,1fr) 168px;gap:22px;align-items:center;} .founder .quote{font-family:var(--kai);font-size:20px;line-height:1.7;letter-spacing:.04em;} .founder .bio{font-size:13px;color:var(--ink-70);line-height:1.8;padding-top:10px;} .founder .bio b{font-weight:500;} .founder .ph{min-height:130px;} @media (max-width:1024px){ .brand-kv{grid-template-columns:repeat(2,minmax(0,1fr));} .brand-kv > div{padding-bottom:14px;} .brand-kv > div:nth-child(2n){border-right:0;} .founder{grid-template-columns:minmax(0,1fr);} .founder .ph{min-height:96px;} } @media (max-width:1024px){ .sayL{padding-right:0;border-right:0;border-bottom:1px solid var(--line);padding-bottom:26px;margin-bottom:26px;} .sayR{padding-left:0;} } .wall-row{display:grid;grid-template-columns:150px minmax(0,1fr);border-bottom:1px solid var(--line);} .wall-row:last-child{border-bottom:0;} .wall-row .lb{padding:16px 18px;border-right:1px solid var(--line);font-size:12px;letter-spacing:.18em;color:var(--ink-55);} .wall-row .vs{padding:14px 18px;display:flex;flex-wrap:wrap;gap:0;} .wall-row .vs i{ font-style:normal;font-size:14px;letter-spacing:.04em;color:var(--ink-70); padding:4px 14px;border:1px solid var(--line);margin:0 -1px -1px 0;background:var(--paper); white-space:nowrap; } @media (max-width:640px){ .wall-row{grid-template-columns:minmax(0,1fr);} .wall-row .lb{border-right:0;border-bottom:1px solid var(--line);} } /* ============================ 13. 页脚 ============================ */ .ftr{background:var(--ink);color:rgba(243,228,199,.72);} .ftr .joint-strip{border-color:rgba(243,228,199,.3);} .ftr-in{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1.25fr);gap:0;padding:52px 0 34px;} .ftr-in .col{padding-right:28px;border-right:1px solid rgba(243,228,199,.16);} .ftr-in .col:last-child{border-right:0;padding-right:0;} .ftr h5{font-family:var(--serif);font-weight:700;color:var(--rice);font-size:15px;letter-spacing:.16em; padding-bottom:12px;border-bottom:1px solid rgba(243,228,199,.16);margin-bottom:12px;} .ftr p,.ftr li{font-size:13px;line-height:1.85;} .ftr a:hover{color:var(--green);} .logo-dark{background:#fff;padding:10px 14px;display:inline-block;margin-bottom:14px;} .logo-dark img{width:172px;} .ftr small{display:block;font-size:11px;letter-spacing:.08em;color:rgba(243,228,199,.62);padding-top:6px;} .ftr .navlist li a{font-size:13px;line-height:2;} .ch6{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border:1px solid rgba(243,228,199,.18);} .ch6 .q{border-right:1px solid rgba(243,228,199,.18);border-bottom:1px solid rgba(243,228,199,.18);padding:10px;} .ch6 .q:nth-child(3n){border-right:0;} .ch6 .q:nth-child(n+4){border-bottom:0;} .ch6 .ph{border-color:rgba(243,228,199,.4);background:none;aspect-ratio:1/1;color:rgba(243,228,199,.6);} .ch6 .ph b{color:rgba(243,228,199,.85);} .ftr-bot{border-top:1px solid rgba(243,228,199,.2);padding:18px 0 30px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:12px;letter-spacing:.06em;} @media (max-width:1024px){ .ftr-in{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:26px 0;} .ftr-in .col:nth-child(2n){border-right:0;padding-right:0;} } @media (max-width:640px){ .ftr-in{grid-template-columns:1fr;} .ftr-in .col{border-right:0;padding-right:0;} .ch6{grid-template-columns:repeat(3,minmax(0,1fr));} } /* ============================ 0. 变量与基础 ============================ */ :root{ --ink:#1A1614; --green:#22A585; --red:#99200B; --rice:#F3E4C7; --celadon:#E1EDC5; --tan:#EED6B2; --paper:#FCF8F1; --ink-70:rgba(26,22,20,.70); --ink-55:rgba(26,22,20,.55); --line:rgba(26,22,20,.18); --line-2:rgba(26,22,20,.34); --line-3:rgba(26,22,20,.62); --serif:"Noto Serif SC","Source Han Serif SC","STSong","SimSun",serif; --kai:"STKaiti","KaiTi","Noto Serif SC",serif; --sans:"Noto Sans SC","Microsoft YaHei","PingFang SC",sans-serif; --num:"Cormorant Garamond","Noto Serif SC",serif; --gut:40px; } *,*::before,*::after{box-sizing:border-box;} html{-webkit-text-size-adjust:100%;} body{margin:0;background:var(--rice);color:var(--ink); font-family:var(--sans);font-size:15px;line-height:1.75;overflow-x:hidden;} img{display:block;max-width:100%;} a{color:inherit;text-decoration:none;} h1,h2,h3,h4,p,ul,ol,figure,blockquote,dl,dd{margin:0;padding:0;} ul,ol{list-style:none;} ::selection{background:var(--green);color:#fff;} /* ============================ 1. 栅格 ============================ */ .wrap{width:min(1440px,100%);margin:0 auto;padding:0 var(--gut);position:relative;} .rail{position:relative;} .rail::before,.rail::after{content:"";position:absolute;top:0;bottom:0;width:1px;background:var(--line);z-index:0;} .rail::before{left:var(--gut);} .rail::after{right:var(--gut);} .cols12{position:absolute;inset:0 var(--gut);display:grid;grid-template-columns:repeat(12,minmax(0,1fr));pointer-events:none;z-index:0;} .cols12 span{border-right:1px solid var(--line);} .cols12 span:last-child{border-right:0;} .layer{position:relative;z-index:1;} .grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:0;} .c3{grid-column:span 3;} .c4{grid-column:span 4;} .c5{grid-column:span 5;} .c6{grid-column:span 6;} .c7{grid-column:span 7;} .c8{grid-column:span 8;} .c12{grid-column:span 12;} /* 窄屏：强网格降级为单栏，栏线不再有意义 */ @media (max-width:1024px){ .c3,.c4,.c5,.c6,.c7,.c8,.c9{grid-column:span 12;} .cols12{display:none;} .rail::before,.rail::after{display:none;} } .joint-strip{height:9px;border-top:1px solid var(--line-2);border-bottom:1px solid var(--line);} .cord{height:0;border-top:1px dashed var(--line-2);position:relative;} .cord::after{content:"";position:absolute;left:0;right:0;top:2px;border-top:1px solid var(--line);} /* ============================ 2. 几何纹样 ============================ */ .motif-field{position:absolute;inset:0;pointer-events:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'%3E%3Cg fill='none' stroke='%231A1614' stroke-width='1' opacity='.55'%3E%3Cellipse cx='46' cy='46' rx='40' ry='11' transform='rotate(-38 46 46)'/%3E%3Cellipse cx='46' cy='46' rx='40' ry='11' transform='rotate(38 46 46)'/%3E%3Cpath d='M46 34 V140'/%3E%3C/g%3E%3C/svg%3E"); background-size:140px 140px;opacity:.10;} .motif-chrys{position:absolute;inset:0;pointer-events:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cg fill='none' stroke='%231A1614' stroke-width='1' opacity='.6'%3E%3Ccircle cx='90' cy='90' r='8'/%3E%3Ccircle cx='90' cy='90' r='26'/%3E%3Cpath d='M90 90 L90 4 M90 90 L151 29 M90 90 L176 90 M90 90 L151 151 M90 90 L90 176 M90 90 L29 151 M90 90 L4 90 M90 90 L29 29'/%3E%3C/g%3E%3C/svg%3E"); background-size:180px 180px;opacity:.09;} /* ============================ 3. 元件 ============================ */ .tag{display:inline-block;font-size:12px;letter-spacing:.18em;line-height:1;padding:6px 10px; border:1px solid var(--line-2);color:var(--ink-70);} .tag--g{color:#fff;background:var(--green);border-color:var(--green);} .tag--r{color:#fff;background:var(--red);border-color:var(--red);} .vert{writing-mode:vertical-rl;text-orientation:upright;letter-spacing:.28em;font-family:var(--kai);} .seal{width:78px;height:78px;background:var(--red);color:#fff;display:grid;place-content:center;text-align:center; font-family:var(--kai);font-size:19px;line-height:1.3;letter-spacing:.14em;writing-mode:vertical-rl;text-orientation:upright;border:0;} .btn{display:inline-flex;align-items:center;gap:10px;padding:15px 26px;font-size:15px;letter-spacing:.08em; border:1px solid var(--ink);background:transparent;color:var(--ink);font-family:var(--sans);cursor:pointer;transition:.18s;} .btn:hover{background:var(--ink);color:var(--rice);} .btn--g{background:var(--green);border-color:var(--green);color:#fff;} .btn--g:hover{background:var(--ink);border-color:var(--ink);} .btn--r{background:var(--red);border-color:var(--red);color:#fff;} .btn--r:hover{background:var(--ink);border-color:var(--ink);} .btn .arw{font-family:var(--num);font-size:18px;} .frame{border:1px solid var(--line-2);background:var(--paper);position:relative;} .frame img{width:100%;height:100%;object-fit:cover;} .frame .cap{position:absolute;left:0;bottom:0;background:var(--paper);border-top:1px solid var(--line-2); border-right:1px solid var(--line-2);padding:5px 10px;font-size:12px;letter-spacing:.06em;color:var(--ink-70);} figcaption{font-size:12px;color:var(--ink-55);letter-spacing:.06em;padding-top:8px;line-height:1.6;} .ratio-a{aspect-ratio:3/4;} .ratio-b{aspect-ratio:4/3;} .ratio-d{aspect-ratio:16/9;} .ph{border:1px dashed var(--line-2); background:repeating-linear-gradient(45deg,transparent 0 8px,rgba(26,22,20,.05) 8px 9px); display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px; color:var(--ink-55);text-align:center;padding:14px;} .ph b{font-weight:500;font-size:13px;letter-spacing:.06em;color:var(--ink-70);} .ph small{font-size:12px;line-height:1.5;} .sec{padding-top:78px;padding-bottom:78px;position:relative;} .sec-head{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:end;gap:20px; border-top:3px solid var(--ink);padding-top:14px;margin-bottom:34px;} .sec-head .idx{font-family:var(--kai);font-size:15px;letter-spacing:.3em;color:var(--red);padding-bottom:6px;} .sec-head h2{font-family:var(--serif);font-weight:900;font-size:clamp(28px,2.6vw,40px);line-height:1.1;letter-spacing:.02em;} .sec-head .sub{grid-column:2;font-size:14px;color:var(--ink-70);letter-spacing:.06em;padding-top:8px;} .sec-head .side{font-size:12px;letter-spacing:.24em;color:var(--ink-55);text-align:right;white-space:nowrap;padding-bottom:4px;} @media (max-width:1024px){.sec{padding-top:60px;padding-bottom:60px;}.sec-head{grid-template-columns:1fr;gap:8px;}.sec-head .sub{grid-column:1;}.sec-head .side{display:none;}} /* ============================ 4. 顶栏 ============================ */ .topbar{background:var(--ink);color:rgba(243,228,199,.80);font-size:12px;letter-spacing:.14em;} .topbar .wrap{display:flex;justify-content:space-between;align-items:center;height:34px;gap:20px;flex-wrap:wrap;} .topbar .dot{color:var(--green);} .hdr{position:sticky;top:0;z-index:40;background:rgba(243,228,199,.97);backdrop-filter:blur(6px);border-bottom:1px solid var(--line-2);} .hdr-top{display:flex;align-items:center;gap:24px;padding-top:14px;padding-bottom:14px;} .brand{display:flex;align-items:center;gap:16px;} .brand .plate{background:#fff;border:1px solid var(--line-2);padding:7px 12px;display:block;} .brand .plate img{width:158px;height:auto;} .brand .subnote{font-size:11px;letter-spacing:.12em;color:var(--ink-55);padding-top:6px;} .hdr-slogan{margin-left:auto;font-family:var(--kai);font-size:16px;letter-spacing:.18em;color:var(--ink-70);white-space:nowrap;} .hdr .act{display:flex;align-items:center;} .hdr-nav{border-top:1px solid var(--line-2);} .nav ul{display:flex;width:100%;} .nav li{flex:1;position:relative;} .nav a{display:block;padding:12px 6px;text-align:center;font-size:15px;letter-spacing:.04em;color:var(--ink-70);white-space:nowrap;} .nav li::after{content:"";position:absolute;right:0;top:8px;bottom:8px;width:1px;background:var(--line);} .nav li:last-child::after{display:none;} .nav a:hover{color:var(--green);background:var(--celadon);} .nav a.cur{color:var(--ink);font-weight:500;background:var(--celadon);box-shadow:inset 0 -2px 0 var(--green);} @media (max-width:1200px){.hdr-slogan{display:none;}.nav a{font-size:14px;padding:11px 4px;}.brand .plate img{width:132px;}} @media (max-width:1024px){ .hdr{position:static;} .hdr-top{padding-top:10px;padding-bottom:10px;} .nav ul{width:100%;flex-wrap:wrap;} .nav li{flex:0 0 20%;} .nav li:nth-child(5n)::after{display:none;} .nav li:nth-child(n+6){border-top:1px solid var(--line);} .nav a{padding:11px 4px;font-size:14px;} .nav li::after{top:8px;bottom:8px;} } @media (max-width:640px){:root{--gut:18px;}.phead h1{font-size:29px;letter-spacing:.04em;}.topbar .wrap{height:auto;padding:6px 0;font-size:11px;}.topbar .rt{display:none;}.brand .plate img{width:120px;}.brand .subnote{display:none;}.hdr .act .btn{padding:11px 16px;font-size:14px;} .nav li{flex:0 0 33.3333%;} .nav li:nth-child(3n)::after{display:none;} .nav li:nth-child(n+4){border-top:1px solid var(--line);} .nav a{font-size:13px;padding:10px 2px;} } /* ============================ 5. 页头 ============================ */ .crumbs{display:flex;align-items:center;gap:10px;font-size:12px;letter-spacing:.14em;color:var(--ink-55);padding:22px 0 18px;} .crumbs a:hover{color:var(--green);} .phead{position:relative;overflow:hidden;} .phead .grid{align-items:stretch;} .phead-type{padding:8px 44px 30px 0;border-right:1px solid var(--line);position:relative;} .phead h1{font-family:var(--serif);font-weight:900;font-size:clamp(40px,5vw,76px);line-height:1.14;letter-spacing:.06em;position:relative;z-index:1;} .phead h1 em{font-style:normal;color:var(--green);} .phead .sub{font-family:var(--kai);font-size:clamp(17px,1.7vw,22px);letter-spacing:.1em;color:var(--ink-70);padding-top:16px;position:relative;z-index:1;} .phead .note{font-size:14px;line-height:1.9;color:var(--ink-70);padding-top:18px;max-width:46ch;position:relative;z-index:1;} .phead .kv{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:32px;border-top:1px solid var(--line-2);position:relative;z-index:1;} .phead .kv div{padding:14px 16px 0 0;border-right:1px solid var(--line);} .phead .kv div:last-child{border-right:0;} .phead .kv b{display:block;font-family:var(--num);font-weight:700;font-size:30px;color:var(--green);line-height:1;} .phead .kv span{display:block;font-size:12px;letter-spacing:.14em;color:var(--ink-55);padding-top:4px;} .glyph-bg{position:absolute;right:-.05em;bottom:-.3em;z-index:0;font-family:var(--serif);font-weight:900; font-size:clamp(200px,18vw,300px);line-height:.8;color:var(--ink);opacity:.07;pointer-events:none;letter-spacing:-.04em;} .phead-vis{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 130px;gap:0;padding-left:1px;} .phead-vis .frame{border:1px solid var(--line);} .phead-vis .deco{border:1px solid var(--line);border-left:0;background:var(--celadon);display:grid;place-content:center;} .phead-vis .deco img{width:64px;opacity:.9;} @media (max-width:1024px){ .phead-type{border-right:0;border-bottom:1px solid var(--line);padding-right:0;padding-bottom:26px;} .glyph-bg{font-size:40vw;opacity:.05;} .phead .kv{grid-template-columns:repeat(3,minmax(0,1fr));} } @media (max-width:640px){.phead .kv{grid-template-columns:1fr;}.phead .kv div{border-right:0;border-bottom:1px solid var(--line);padding-bottom:12px;}.phead-vis{grid-template-columns:1fr;}.phead-vis .deco{border-left:1px solid var(--line);border-top:0;padding:10px;}} /* ============================ 6. 四类合作方向 ============================ */ .dir-table{border:1px solid var(--line-2);background:var(--paper);} .dir-row{display:grid;grid-template-columns:130px 300px minmax(0,1fr) minmax(0,1fr);border-bottom:1px solid var(--line-2);} .dir-row:last-child{border-bottom:0;} .dir-row .num-cell{background:var(--celadon);border-right:1px solid var(--line-2);padding:20px 16px; display:flex;flex-direction:column;justify-content:space-between;} .dir-row .num-cell .ico{width:38px;height:38px;color:var(--green);} .dir-row .num-cell em{font-style:normal;font-family:var(--num);font-weight:700;font-size:30px;color:var(--ink);line-height:1;} .dir-row .t{padding:20px 22px;border-right:1px solid var(--line-2);} .dir-row .t h3{font-family:var(--serif);font-weight:700;font-size:28px;letter-spacing:.05em;} .dir-row .t .en{font-family:var(--num);font-size:13px;letter-spacing:.18em;color:var(--green);padding-top:6px;} .dir-row .t figure{margin-top:14px;} .dir-row .t figure .frame{border:1px solid var(--line-2);} .dir-row .c{padding:20px 22px;border-right:1px solid var(--line-2);} .dir-row .c h4{font-size:12px;letter-spacing:.18em;color:var(--ink-55);padding-bottom:8px;} .dir-row .c p{font-family:var(--kai);font-size:16px;line-height:1.85;letter-spacing:.02em;} .dir-row .m{padding:20px 22px;} .dir-row .m ul li{font-size:13px;line-height:1.75;padding:3px 0 3px 16px;position:relative;color:var(--ink-70);} .dir-row .m ul li::before{content:"";position:absolute;left:0;top:13px;width:8px;height:1px;background:var(--green);} @media (max-width:1200px){.dir-row{grid-template-columns:110px 240px minmax(0,1fr) minmax(0,1fr);}} @media (max-width:1024px){ .dir-row{grid-template-columns:1fr;} .dir-row .num-cell{flex-direction:row;align-items:center;gap:14px;border-right:0;border-bottom:1px solid var(--line-2);} .dir-row .t,.dir-row .c{border-right:0;border-bottom:1px solid var(--line);} } /* ============================ 7. 五类合作模式 ============================ */ .modes{border:1px solid var(--line-2);background:var(--paper);} .modes .row{display:grid;grid-template-columns:210px minmax(0,1.1fr) minmax(0,1.1fr) 220px;border-bottom:1px solid var(--line);} .modes .row.hd{background:var(--tan);} .modes .row:last-child{border-bottom:0;} .modes .cell{padding:16px 20px;border-right:1px solid var(--line);} .modes .cell:last-child{border-right:0;} .modes .row.hd .cell{font-size:12px;letter-spacing:.18em;color:var(--ink-55);padding:12px 20px;} .modes .cell h4{font-family:var(--serif);font-weight:700;font-size:20px;letter-spacing:.05em;} .modes .cell .en{font-size:12px;letter-spacing:.16em;color:var(--ink-55);padding-top:2px;} .modes .cell p,.modes .cell li{font-size:13px;line-height:1.8;color:var(--ink-70);} .modes .cell li{padding-left:14px;position:relative;} .modes .cell li::before{content:"";position:absolute;left:0;top:12px;width:7px;height:1px;background:var(--green);} .modes .cell .tags{display:flex;flex-wrap:wrap;gap:6px;} @media (max-width:1024px){ .modes .row{grid-template-columns:minmax(0,1fr) minmax(0,1fr);} .modes .row.hd{display:none;} .modes .cell{border-bottom:1px solid var(--line);} .modes .cell:nth-child(2n){border-right:0;} } /* ============================ 8. 能力背书 ============================ */ .creds{background:var(--tan);} .cred-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2);} .cred-grid .cd{padding:26px 20px;border-right:1px solid var(--line);} .cred-grid .cd:last-child{border-right:0;} .cred-grid .cd svg{width:34px;height:34px;color:var(--green);} .cred-grid .cd h4{font-family:var(--serif);font-weight:700;font-size:20px;letter-spacing:.05em;padding-top:14px;} .cred-grid .cd p{font-size:13px;line-height:1.75;color:var(--ink-70);padding-top:8px;} @media (max-width:1024px){.cred-grid{grid-template-columns:repeat(2,minmax(0,1fr));}.cred-grid .cd:nth-child(2n){border-right:0;}.cred-grid .cd{border-bottom:1px solid var(--line);}} @media (max-width:640px){.cred-grid{grid-template-columns:1fr;}.cred-grid .cd{border-right:0;}} /* ============================ 9. 合作流程（编绳串起五枚竹片） ============================ */ .flow{position:relative;padding:54px 0 10px;} .flow .cord{position:absolute;left:0;right:0;top:112px;} .flow-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));position:relative;} .flow-grid .st{border-right:1px solid var(--line);padding:0 18px 26px 0;} .flow-grid .st:last-child{border-right:0;} .flow-grid .st .sl{position:relative;z-index:1;width:52px;height:52px;background:var(--red);color:#fff;display:grid;place-content:center; font-family:var(--kai);font-size:20px;letter-spacing:.02em;} .flow-grid .st:nth-child(even) .sl{background:var(--green);} .flow-grid .st .sl-o{width:52px;height:52px;border:1px solid var(--line-2);background:transparent;position:relative;margin:-52px 0 0 9px;z-index:0;} .flow-grid .st h4{font-family:var(--serif);font-weight:700;font-size:22px;letter-spacing:.05em;padding-top:22px;} .flow-grid .st p{font-size:13px;line-height:1.8;color:var(--ink-70);padding-top:8px;} .flow-grid .st .no{font-family:var(--num);font-weight:700;font-size:13px;letter-spacing:.2em;color:var(--ink-55);padding-top:10px;} @media (max-width:1024px){ .flow .cord{display:none;} .flow-grid{grid-template-columns:repeat(2,minmax(0,1fr));} .flow-grid .st{border-bottom:1px solid var(--line);} .flow-grid .st:nth-child(2n){border-right:0;} } @media (max-width:640px){.flow-grid{grid-template-columns:1fr;}.flow-grid .st{border-right:0;}.flow-grid .st .sl-o{display:none;}} /* ============================ 10. 案例 ============================ */ .cases{border-top:1px solid var(--line-2);} .case-row{display:grid;grid-template-columns:92px 240px minmax(0,1fr) 240px;align-items:stretch;border-bottom:1px solid var(--line);} .case-row:hover{background:var(--celadon);} .case-row .idx{display:flex;align-items:center;padding:22px 18px;border-right:1px solid var(--line);} .case-row .idx span{font-family:var(--num);font-weight:700;font-size:26px;color:var(--green);} .case-row .th{padding:22px 20px 22px 0;} .case-row .bd{padding:22px 24px;border-left:1px solid var(--line);} .case-row .bd h3{font-family:var(--serif);font-weight:700;font-size:26px;letter-spacing:.04em;} .case-row .bd p{font-size:14px;color:var(--ink-70);line-height:1.8;padding-top:6px;} .case-row .sd{padding:22px 24px;border-left:1px solid var(--line);} .case-row .sd h5{font-size:12px;letter-spacing:.18em;color:var(--ink-55);} .case-row .sd p{font-size:13px;line-height:1.8;color:var(--ink-70);padding-top:6px;} .case-row .sd .tags{padding-top:10px;display:flex;flex-wrap:wrap;gap:6px;} @media (max-width:1200px){.case-row{grid-template-columns:80px 200px minmax(0,1fr) 200px;}} @media (max-width:1024px){ .case-row{grid-template-columns:64px minmax(0,1fr);} .case-row .th{display:none;} .case-row .bd{padding:18px 16px;border-left:1px solid var(--line);} .case-row .sd{grid-column:1/-1;border-left:0;border-top:1px solid var(--line);padding:14px 16px;} } @media (max-width:640px){.case-row{grid-template-columns:52px minmax(0,1fr);}.case-row .bd h3{font-size:21px;}} /* ============================ 11. 表单 ============================ */ .apply{background:var(--ink);color:var(--rice);} .apply .sec-head{border-top-color:var(--rice);} .apply .sec-head h2{color:var(--rice);} .apply .sec-head .sub,.apply .sec-head .side{color:rgba(243,228,199,.6);} .form-wrap{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:0;} .form{border:1px solid rgba(243,228,199,.24);background:rgba(243,228,199,.03);} .frow{display:grid;grid-template-columns:150px minmax(0,1fr);border-bottom:1px solid rgba(243,228,199,.22);} .frow:last-child{border-bottom:0;} .frow label{padding:16px 18px;border-right:1px solid rgba(243,228,199,.22);font-size:13px;letter-spacing:.14em; color:rgba(243,228,199,.72);display:flex;align-items:center;gap:6px;} .frow label i{color:var(--red);font-style:normal;} .frow .ctl{padding:10px 16px;} .frow input,.frow select,.frow textarea{ width:100%;background:transparent;border:0;color:var(--rice);font-family:var(--sans);font-size:15px; padding:6px 0;outline:none; } .frow select option{color:#1A1614;} .frow textarea{resize:vertical;min-height:88px;line-height:1.7;} .frow input::placeholder,.frow textarea::placeholder{color:rgba(243,228,199,.35);} .frow input:focus,.frow select:focus,.frow textarea:focus{border-bottom:1px solid var(--green);} .form-foot{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap; padding:18px;border-top:1px solid rgba(243,228,199,.22);} .form-foot p{font-size:12px;color:rgba(243,228,199,.6);line-height:1.8;max-width:52ch;} .form-msg{font-size:13px;color:var(--green);padding-top:10px;min-height:1.6em;} .apply-side{border:1px solid rgba(243,228,199,.24);border-left:0;padding:26px 24px;} .apply-side h4{font-family:var(--serif);font-weight:700;font-size:19px;letter-spacing:.06em; padding-bottom:12px;border-bottom:1px solid rgba(243,228,199,.22);} .apply-side dl div{padding:14px 0;border-bottom:1px solid rgba(243,228,199,.16);} .apply-side dt{font-size:12px;letter-spacing:.16em;color:rgba(243,228,199,.70);} .apply-side dd{margin:2px 0 0;font-size:14px;line-height:1.7;color:rgba(243,228,199,.86);} @media (max-width:1024px){ .form-wrap{grid-template-columns:1fr;} .apply-side{border-left:1px solid rgba(243,228,199,.24);border-top:0;} .frow{grid-template-columns:1fr;} .frow label{border-right:0;border-bottom:1px solid rgba(243,228,199,.16);padding:12px 16px 8px;} .frow .ctl{padding:4px 16px 14px;} } /* ============================ 12. 客户字标墙 ============================ */ .wall{border-top:1px solid var(--line-2);} .wall-row{display:grid;grid-template-columns:150px minmax(0,1fr);border-bottom:1px solid var(--line);} .wall-row:last-child{border-bottom:0;} .wall-row .lb{padding:16px 18px;border-right:1px solid var(--line);font-size:12px;letter-spacing:.18em;color:var(--ink-55);} .wall-row .vs{padding:14px 18px;display:flex;flex-wrap:wrap;} .wall-row .vs i{font-style:normal;font-size:14px;letter-spacing:.04em;color:var(--ink-70); padding:4px 14px;border:1px solid var(--line);margin:0 -1px -1px 0;background:var(--paper);white-space:nowrap;} @media (max-width:640px){.wall-row{grid-template-columns:1fr;}.wall-row .lb{border-right:0;border-bottom:1px solid var(--line);}} /* ============================ 13. 页脚 ============================ */ .ftr{background:var(--ink);color:rgba(243,228,199,.72);} .ftr-in{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1.25fr);gap:0;padding:52px 0 34px;} .ftr-in .col{padding-right:28px;border-right:1px solid rgba(243,228,199,.16);} .ftr-in .col:last-child{border-right:0;padding-right:0;} .ftr h5{font-family:var(--serif);font-weight:700;color:var(--rice);font-size:15px;letter-spacing:.16em; padding-bottom:12px;border-bottom:1px solid rgba(243,228,199,.16);margin-bottom:12px;} .ftr p,.ftr li{font-size:13px;line-height:1.85;} .ftr a:hover{color:var(--green);} .logo-dark{background:#fff;padding:10px 14px;display:inline-block;margin-bottom:14px;} .logo-dark img{width:172px;} .ftr small{display:block;font-size:11px;letter-spacing:.08em;color:rgba(243,228,199,.62);padding-top:6px;} .ftr .navlist li a{font-size:13px;line-height:2;} .ch6{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border:1px solid rgba(243,228,199,.18);} .ch6 .q{border-right:1px solid rgba(243,228,199,.18);border-bottom:1px solid rgba(243,228,199,.18);padding:10px;} .ch6 .q:nth-child(3n){border-right:0;} .ch6 .q:nth-child(n+4){border-bottom:0;} .ch6 .ph{border-color:rgba(243,228,199,.4);background:none;aspect-ratio:1/1;color:rgba(243,228,199,.6);} .ch6 .ph b{color:rgba(243,228,199,.85);} .ftr-bot{border-top:1px solid rgba(243,228,199,.2);padding:18px 0 30px;display:flex;justify-content:space-between; gap:16px;flex-wrap:wrap;font-size:12px;letter-spacing:.06em;} @media (max-width:1024px){.ftr-in{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:26px 0;}.ftr-in .col:nth-child(2n){border-right:0;padding-right:0;}} @media (max-width:640px){.ftr-in{grid-template-columns:1fr;}.ftr-in .col{border-right:0;padding-right:0;}} /* ============================ 100. 补充变量与滚动动画 ============================ */ :root{ --ease:cubic-bezier(.22,.61,.36,1); --dur:.8s; --hdr-h:118px; /* 顶栏 + 主导航的大致高度，供锚点偏移使用 */ } html{scroll-padding-top:calc(var(--hdr-h) + 12px);} /* 入场动画：竹子一节一节往上长 —— 逐段错位淡入，不做弹跳 */ .reveal{opacity:0;transform:translateY(20px); transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease);} .reveal.in{opacity:1;transform:none;} .reveal[data-d="1"]{transition-delay:.08s;} .reveal[data-d="2"]{transition-delay:.16s;} .reveal[data-d="3"]{transition-delay:.24s;} .reveal[data-d="4"]{transition-delay:.32s;} /* 自左向右展开的一根线（竹节环的生长） */ .reveal-l{opacity:0;transform:scaleX(0);transform-origin:left center; transition:opacity .6s var(--ease),transform .9s var(--ease);} .reveal-l.in{opacity:1;transform:scaleX(1);} @media (prefers-reduced-motion:reduce){ .reveal,.reveal-l{opacity:1 !important;transform:none !important;transition:none !important;} html{scroll-behavior:auto;} } /* ============================ 101. 卡片网格（通用） ============================ */ .cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border:1px solid var(--line-2);background:var(--paper);} .cards .cd{border-right:1px solid var(--line);border-bottom:1px solid var(--line);display:flex;flex-direction:column;} .cards .cd:nth-child(3n){border-right:0;} .cards .cd:nth-last-child(-n+3){border-bottom:0;} .cards .cd .frame{border:0;border-bottom:1px solid var(--line);} .cards .cd .b{padding:20px 22px 24px;} .cards .cd h4{font-family:var(--serif);font-weight:700;font-size:21px;letter-spacing:.08em;} .cards .cd .en{font-family:var(--num);font-size:12px;letter-spacing:.18em;color:var(--ink-55);padding-top:3px;} .cards .cd p{font-size:13px;line-height:1.8;color:var(--ink-70);padding-top:10px;} .cards .cd .mt{margin-top:auto;padding-top:14px;} .cards--2{grid-template-columns:repeat(2,minmax(0,1fr));} .cards--2 .cd:nth-child(3n){border-right:1px solid var(--line);} .cards--2 .cd:nth-last-child(-n+3){border-bottom:1px solid var(--line);} .cards--2 .cd:nth-child(2n){border-right:0;} .cards--2 .cd:nth-last-child(-n+2){border-bottom:0;} .cards--4{grid-template-columns:repeat(4,minmax(0,1fr));} .cards--4 .cd:nth-child(3n){border-right:1px solid var(--line);} .cards--4 .cd:nth-last-child(-n+3){border-bottom:1px solid var(--line);} .cards--4 .cd:nth-child(4n){border-right:0;} .cards--4 .cd:nth-last-child(-n+4){border-bottom:0;} @media (max-width:1200px){ .cards--4{grid-template-columns:repeat(2,minmax(0,1fr));} .cards--4 .cd:nth-child(4n){border-right:1px solid var(--line);} .cards--4 .cd:nth-last-child(-n+4){border-bottom:1px solid var(--line);} .cards--4 .cd:nth-child(2n){border-right:0;} .cards--4 .cd:nth-last-child(-n+2){border-bottom:0;} } @media (max-width:1024px){ .cards,.cards--2,.cards--4{grid-template-columns:repeat(2,minmax(0,1fr));} .cards .cd:nth-child(3n),.cards--4 .cd:nth-child(4n){border-right:1px solid var(--line);} .cards .cd:nth-last-child(-n+3),.cards--4 .cd:nth-last-child(-n+4){border-bottom:1px solid var(--line);} .cards .cd:nth-child(2n),.cards--2 .cd:nth-child(2n),.cards--4 .cd:nth-child(2n){border-right:0;} .cards .cd:nth-last-child(-n+2),.cards--2 .cd:nth-last-child(-n+2),.cards--4 .cd:nth-last-child(-n+2){border-bottom:0;} } @media (max-width:640px){ .cards,.cards--2,.cards--4{grid-template-columns:1fr;} .cards .cd,.cards--2 .cd,.cards--4 .cd{border-right:0 !important;} .cards .cd:nth-last-child(n+2),.cards--2 .cd:nth-last-child(n+2),.cards--4 .cd:nth-last-child(n+2){border-bottom:1px solid var(--line);} } /* ============================ 102. Tab / 筛选切换 ============================ */ .tabs{display:flex;border:1px solid var(--line-2);border-bottom:0;background:var(--paper);} .tabs button{ flex:1;padding:15px 12px;background:transparent;border:0;border-right:1px solid var(--line); font-family:var(--serif);font-weight:700;font-size:17px;letter-spacing:.1em;color:var(--ink-55); cursor:pointer;transition:.18s;text-align:center; } .tabs button:last-child{border-right:0;} .tabs button:hover{color:var(--ink);background:var(--celadon);} .tabs button[aria-selected="true"]{color:var(--ink);background:var(--celadon);box-shadow:inset 0 -3px 0 var(--green);} .tabs button small{display:block;font-family:var(--num);font-size:12px;letter-spacing:.14em;color:var(--ink-55);padding-top:3px;font-weight:400;} @media (max-width:640px){ .tabs{flex-wrap:wrap;} .tabs button{flex:0 0 50%;border-bottom:1px solid var(--line);font-size:15px;padding:12px 8px;} .tabs button:nth-child(2n){border-right:0;} } .panel{display:none;} .panel.on{display:block;animation:fadeUp .5s var(--ease) both;} @keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}} /* ============================ 103. 时间轴（发展历程） ============================ */ .tl{position:relative;padding-left:0;} .tl .ev{position:relative;padding:0 0 30px 30px;border-left:1px solid var(--line-2);} .tl .ev:last-child{border-left-color:transparent;padding-bottom:0;} .tl .ev::before{content:"";position:absolute;left:-6.5px;top:7px;width:12px;height:12px;background:var(--green);} .tl .ev:nth-child(even)::before{background:var(--red);} .tl .ev .yr{font-family:var(--num);font-weight:700;font-size:30px;line-height:1;color:var(--ink);letter-spacing:.01em;} .tl .ev h4{font-family:var(--serif);font-weight:700;font-size:19px;letter-spacing:.06em;padding-top:6px;} .tl .ev p{font-size:13px;line-height:1.8;color:var(--ink-70);padding-top:6px;max-width:62ch;} /* ============================ 104. 四时 / 季节条 ============================ */ .season{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2);} .season .s{border-right:1px solid var(--line);background:var(--paper);display:flex;flex-direction:column;} .season .s:last-child{border-right:0;} .season .s .hd{padding:12px 16px;border-bottom:1px solid var(--line);display:flex;align-items:baseline;gap:10px;} .season .s .hd b{font-family:var(--kai);font-size:24px;font-weight:400;letter-spacing:.2em;} .season .s .hd span{font-family:var(--num);font-size:12px;letter-spacing:.18em;color:var(--green);} .season .s .frame{border:0;} .season .s .bd{padding:14px 16px 18px;} .season .s .bd p{font-size:13px;line-height:1.75;color:var(--ink-70);} @media (max-width:1024px){ .season{grid-template-columns:repeat(2,minmax(0,1fr));} .season .s:nth-child(2n){border-right:0;} .season .s:nth-child(-n+2){border-bottom:1px solid var(--line);} } @media (max-width:640px){.season{grid-template-columns:1fr;}.season .s{border-right:0 !important;border-bottom:1px solid var(--line);}.season .s:last-child{border-bottom:0;}} /* ============================ 105. 产品明细表（配方 / 功效） ============================ */ .spec{border:1px solid var(--line-2);background:var(--paper);} .spec .r{display:grid;grid-template-columns:180px minmax(0,1fr);border-bottom:1px solid var(--line);} .spec .r:last-child{border-bottom:0;} .spec .r dt{padding:14px 18px;border-right:1px solid var(--line);font-size:12px;letter-spacing:.18em;color:var(--ink-55);background:var(--tan);} .spec .r dd{padding:14px 18px;font-size:14px;line-height:1.8;color:var(--ink-70);} @media (max-width:640px){.spec .r{grid-template-columns:1fr;}.spec .r dt{border-right:0;border-bottom:1px solid var(--line);}} /* ============================ 106. 步骤 / 流程（竖排编号） ============================ */ .steps{border-top:1px solid var(--line-2);} .steps .sp{display:grid;grid-template-columns:96px minmax(0,1fr) 260px;gap:0;border-bottom:1px solid var(--line);} .steps .sp:last-child{border-bottom:0;} .steps .sp .no{font-family:var(--num);font-weight:700;font-size:34px;color:var(--green);padding:22px 18px;border-right:1px solid var(--line);line-height:1;} .steps .sp:nth-child(even) .no{color:var(--red);} .steps .sp .bd{padding:22px 26px;border-right:1px solid var(--line);} .steps .sp .bd h4{font-family:var(--serif);font-weight:700;font-size:22px;letter-spacing:.06em;} .steps .sp .bd p{font-size:14px;line-height:1.85;color:var(--ink-70);padding-top:8px;} .steps .sp .sd{padding:22px 24px;} .steps .sp .sd h5{font-size:12px;letter-spacing:.18em;color:var(--ink-55);padding-bottom:8px;} .steps .sp .sd li{font-size:13px;line-height:1.8;color:var(--ink-70);padding:2px 0 2px 15px;position:relative;} .steps .sp .sd li::before{content:"";position:absolute;left:0;top:13px;width:8px;height:1px;background:var(--green);} @media (max-width:1024px){ .steps .sp{grid-template-columns:70px minmax(0,1fr);} .steps .sp .bd{border-right:0;} .steps .sp .sd{grid-column:1/-1;border-top:1px solid var(--line);padding:16px 18px;} } /* ============================ 107. 门店 / 渠道卡 ============================ */ .stores{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border:1px solid var(--line-2);background:var(--paper);} .stores .st{border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:24px 26px;} .stores .st:nth-child(2n){border-right:0;} .stores .st:nth-last-child(-n+2){border-bottom:0;} .stores .st .tp{display:flex;align-items:baseline;justify-content:space-between;gap:12px;border-bottom:1px solid var(--line);padding-bottom:10px;} .stores .st h4{font-family:var(--serif);font-weight:700;font-size:21px;letter-spacing:.08em;} .stores .st .kind{font-size:12px;letter-spacing:.16em;color:var(--green);white-space:nowrap;} .stores .st address{font-style:normal;font-size:14px;line-height:1.8;color:var(--ink-70);padding-top:12px;} .stores .st .tel{font-family:var(--num);font-size:16px;letter-spacing:.06em;padding-top:8px;} @media (max-width:640px){.stores{grid-template-columns:1fr;}.stores .st{border-right:0 !important;}} /* ============================ 108. 二维码占位（线上渠道） ============================ */ .qrs{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));border:1px solid rgba(243,228,199,.22);} .qrs .q{border-right:1px solid rgba(243,228,199,.22);padding:16px 12px;text-align:center;} .qrs .q:last-child{border-right:0;} .qrs .q .ph{aspect-ratio:1/1;max-width:120px;margin:0 auto 12px;} .qrs .q b{display:block;font-size:14px;letter-spacing:.1em;color:rgba(243,228,199,.9);font-weight:400;} @media (max-width:1024px){.qrs{grid-template-columns:repeat(3,minmax(0,1fr));}.qrs .q:nth-child(3n){border-right:0;}.qrs .q{border-bottom:1px solid rgba(243,228,199,.22);}} @media (max-width:640px){.qrs{grid-template-columns:repeat(2,minmax(0,1fr));}.qrs .q:nth-child(3n){border-right:1px solid rgba(243,228,199,.22);}.qrs .q:nth-child(2n){border-right:0;}} /* ============================ 109. FAQ 手风琴 ============================ */ .faq{border-top:1px solid var(--line-2);} .faq details{border-bottom:1px solid var(--line);} .faq summary{ padding:18px 4px;cursor:pointer;list-style:none; font-family:var(--serif);font-weight:700;font-size:17px;letter-spacing:.05em; display:flex;align-items:center;justify-content:space-between;gap:18px; } .faq summary::-webkit-details-marker{display:none;} .faq summary::after{content:"＋";font-family:var(--num);font-size:22px;color:var(--green);flex:0 0 auto;} .faq details[open] summary::after{content:"－";color:var(--red);} .faq details[open] summary{color:var(--green);} .faq .a{padding:0 40px 20px 4px;font-size:14px;line-height:1.85;color:var(--ink-70);max-width:78ch;} /* ============================ 110. 引语 / 语录 ============================ */ .quote{border-left:3px solid var(--red);padding:4px 0 4px 22px;font-family:var(--kai); font-size:clamp(19px,2vw,27px);line-height:1.75;letter-spacing:.06em;} .quote cite{display:block;font-style:normal;font-family:var(--sans);font-size:12px; letter-spacing:.18em;color:var(--ink-55);padding-top:14px;} /* ============================ 111. 侧栏目录（长页面锚点导航） ============================ */ .toc{position:sticky;top:96px;border:1px solid var(--line-2);background:var(--paper);} .toc h5{font-size:12px;letter-spacing:.2em;color:var(--ink-55);padding:14px 18px;border-bottom:1px solid var(--line);} .toc a{display:block;padding:11px 18px;font-size:14px;border-bottom:1px solid var(--line);color:var(--ink-70);transition:.18s;} .toc a:last-child{border-bottom:0;} .toc a:hover{background:var(--celadon);} .toc a.on{color:var(--ink);background:var(--celadon);box-shadow:inset 3px 0 0 var(--green);} @media (max-width:1024px){.toc{display:none;}} .with-toc{display:grid;grid-template-columns:240px minmax(0,1fr);gap:40px;align-items:start;} @media (max-width:1024px){.with-toc{grid-template-columns:1fr;gap:0;}} /* ============================ 112. 图集画廊 ============================ */ .gal{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border:1px solid var(--line-2);} .gal .frame{border-right:1px solid var(--line);border-bottom:1px solid var(--line);} .gal .frame:nth-child(3n){border-right:0;} .gal .frame:nth-last-child(-n+3){border-bottom:0;} @media (max-width:1024px){ .gal{grid-template-columns:repeat(2,minmax(0,1fr));} .gal .frame:nth-child(3n){border-right:1px solid var(--line);} .gal .frame:nth-last-child(-n+3){border-bottom:1px solid var(--line);} .gal .frame:nth-child(2n){border-right:0;} .gal .frame:nth-last-child(-n+2){border-bottom:0;} } /* ============================ 113. 提示条 / 注释 ============================ */ /* 注意：类名叫 .tip 而不是 .note —— .note 已被内页页头（.phead .note）占用 */ .tip{display:flex;gap:12px;align-items:flex-start;border:1px solid var(--line-2); background:var(--celadon);padding:14px 18px;font-size:13px;line-height:1.75;color:var(--ink-70);} .tip b{font-weight:500;color:var(--ink);} .tip .mark{flex:0 0 auto;font-family:var(--kai);font-size:16px;color:var(--green);letter-spacing:.1em;} /* ============================ 114. 移动端常驻 CTA 条 ============================ */ .mcta{position:fixed;left:0;right:0;bottom:0;z-index:70;display:none; background:var(--ink);border-top:1px solid rgba(243,228,199,.2);} .mcta a{flex:1;display:block;text-align:center;color:var(--rice);padding:14px 10px; font-size:15px;letter-spacing:.08em;} .mcta a:first-child{border-right:1px solid rgba(243,228,199,.2);} .mcta a.hot{background:var(--green);color:#fff;} @media (max-width:640px){ .mcta{display:flex;} body{padding-bottom:56px;} } /* ============================ 115. 内页通用排版补充 ============================ */ .prose{max-width:76ch;} .prose p{font-size:15px;line-height:1.95;color:var(--ink-70);padding-bottom:16px;} .prose p:last-child{padding-bottom:0;} .prose h3{font-family:var(--serif);font-weight:700;font-size:22px;letter-spacing:.06em;padding:22px 0 10px;} .prose strong{font-weight:500;color:var(--ink);} .kv2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid var(--line-2);} .kv2 div{padding:14px 18px 14px 0;border-bottom:1px solid var(--line);} .kv2 dt{font-size:12px;letter-spacing:.16em;color:var(--ink-55);} .kv2 dd{font-size:15px;line-height:1.7;padding-top:3px;} @media (max-width:640px){.kv2{grid-template-columns:1fr;}} /* ============================ 117. 首页深色区样式修复 ============================ */ /* 背景：index 与 alliance 两个样板页各有一套 .modes / .case-row .sd 定义， 合并后互相覆盖。此处用更高特异性把首页（深色底）那一套钉死，避免「浅底浅字」不可读。 */ .allies .modes{background:transparent;border-color:rgba(243,228,199,.22);} .allies .modes .row{grid-template-columns:150px minmax(0,1fr) minmax(0,1.1fr); border-bottom-color:rgba(243,228,199,.22);} .allies .modes .row .k{background:rgba(243,228,199,.06);border-right-color:rgba(243,228,199,.22);} .allies .modes .row .k h4{color:var(--rice);} .allies .modes .row .k em{color:rgba(243,228,199,.62);} .allies .modes .row .v{border-right-color:rgba(243,228,199,.22);color:rgba(243,228,199,.88);} .allies .modes .row .t{color:rgba(243,228,199,.66);} @media (max-width:1024px){ .allies .modes .row{grid-template-columns:1fr;} .allies .modes .row .k,.allies .modes .row .v{border-right:0;border-bottom:1px solid rgba(243,228,199,.16);} } /* 首页案例区的标签列（内页那套把它改成了块级） */ .cases .case-row .sd{display:flex;flex-direction:column;justify-content:center;gap:8px; padding:22px 24px;border-left:1px solid var(--line);} @media (max-width:1024px){ .cases .case-row .sd{grid-column:1/-1;border-left:0;border-top:1px solid var(--line); flex-direction:row;flex-wrap:wrap;justify-content:flex-start;padding:14px 16px;} } /* ============================ 116. 她力量 / 招募区（首页） ============================ */ .she{background:var(--paper);} .she-grid{display:grid;grid-template-columns:minmax(0,1.25fr) 300px;gap:44px;align-items:start;} .she-l .big2{font-family:var(--serif);font-weight:700;font-size:clamp(20px,1.9vw,28px);line-height:1.6;letter-spacing:.04em;} .she-l .p2{font-size:14px;line-height:1.9;color:var(--ink-70);padding-top:14px;max-width:62ch;} .she-r .frame{border:1px solid var(--line-2);} @media (max-width:1024px){ .she-grid{grid-template-columns:1fr;gap:28px;} .she-r{max-width:460px;} } /* ============================ 117. 顶栏吸顶修正（仅导航条常驻） ============================ */ /* 问题：原实现整个 .hdr（LOGO 区 118px + 导航 51px = 170px）常驻吸顶， 在 900px 高的视口下固定占掉近 1/5 屏，滚动时持续遮挡正文。 思路：不动 DOM、不销毁品牌区 —— .hdr 依旧占满 170px 文档流， 因此高度不变、正文不会因吸顶收缩而上下跳动； 只把 sticky 的 top 下移成「LOGO 区高度的负值」， LOGO 区便随滚动平滑移出视口，最终只剩 51px 的 10 格导航条常驻。 偏移量由 JS 写入 --sx-hdr-top（读 .hdr-top 实测高度）， 以适配各断点与字体加载差异；JS 未执行时回退 0px，等价于原行为，兜底安全。 */ @media (min-width:1025px){ .hdr{top:calc(-1 * var(--sx-hdr-top,0px));} } /* ============================ 118. SEO 辅助类 ============================ */ /* .sx-sr：视觉上不可见，但搜索引擎与屏幕阅读器仍能读取。 作用是把偏口语的 H1 主标补充为含核心词的完整表述（如首页「享自在 · 就书香」 补充成「…｜書香中式植物精油品牌招商」）， 既不破坏设计，也让每页 H1 只有一个且语义完整。 */ .sx-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;} /* ============================ 119. GEO 常见问题序号 ============================ */ /* 给 FAQ 手风琴加编号，同时保持 summary 的 space-between 布局不被破坏： 序号固定宽度，问题文本 flex:1 吃掉剩余空间，让「＋」号仍停在右侧。 */ .faq .geo-q-n{flex:0 0 auto;font-family:var(--num);font-size:13px;letter-spacing:.14em; color:var(--ink-55);padding-right:4px;} .faq .geo-q-t{flex:1 1 auto;} .faq details[open] .geo-q-n{color:var(--red);} /* ============================ 120. GEO 硬数据语义化 ============================ */ /* .datas 已从 div 改为 dl > div > (dt + dd + dd)，让「术语—值」成为机器可读结构。 视觉顺序原本是「值在上、术语在下」，而 dl 规范要求 dt 在 dd 之前， 故改成 flex 列 + order 把值提回顶部，视觉零变化。 dd 默认有 40px 左外边距，必须清零，否则整块会右移。 */ .datas .d{display:flex;flex-direction:column;} .datas dt,.datas dd{margin:0;} .datas .v{order:-1;} /* ============================ 102. 板块动画系统 ============================ * 动效不是装饰，是内容的第二次表达。六种变体各自对应一个视觉母题： * rise 上浮淡入 —— 竹节拔高：最通用，用于文字块与卡片 * head 墨迹显影 —— 板块标题自左擦出，粗线随之长出（clip-path） * wipe 墨迹显影 —— 图片框自左擦出，框内图像由 1.08 回落至 1 * seal 落印 —— 印章落下的短促微缩放，用于徽标/方印/小标签 * unroll 竹简展开 —— 纵向展卷，用于全宽长条区块 * line 竹节环线 —— 横线自左生长，用于分隔线与时间轴连线 * sl/sr 竹简分展 —— 左右对开，用于左右分栏 * * 安全设计：初始隐藏态只在 html.sx-ready 下生效。 * · sx-ready 由 内联脚本在首次绘制前打上 —— 无闪烁 * · 主脚本 3 秒内未启动则自动摘掉 sx-ready —— JS 挂了内容照样可读 * ·