/* ========================================================================== Fansgurus platform page common styles Source: extracted from the stabilized .pf platform-page system. Keep platform mocks (.yt-*, .ig-*, .fb-*, .tg-*, .tw-*) in each Twig file. ========================================================================== */ /* ========================================================================== Fansgurus 平台落地页主题 12 个平台页共用。换平台只改 .pf- 里的 5 个变量。 与新版首页 fg-theme.css 同源：色板、圆角、阴影、字号全部一致。 作用域：所有样式限定在 .pf 内，不污染后台旧模板与 bootstrap。 ========================================================================== */ .pf{ /* ===== 品牌三色：珊瑚粉 → 粉紫 → 淡紫（同 fg-theme.css） ===== */ --c1:#EA7A8A; --c2:#BE68C4; --c3:#9356FD; --c1r:234,122,138; --c2r:190,104,196; --c3r:147,86,253; --grad:linear-gradient(100deg,var(--c1) 0%,var(--c2) 52%,var(--c3) 100%); --grad-soft:linear-gradient(100deg,rgba(var(--c1r),.14),rgba(var(--c2r),.14),rgba(var(--c3r),.14)); --ink:#241A33; --inkr:36,26,51; --ink-2:#52465F; --ink-3:#786C86; --ink-4:#A99FB4; --page:#FBFAFE; --page-2:#F4F0FB; --paper:#FFFFFF; --line:rgba(var(--inkr),.09); --line-2:rgba(var(--inkr),.17); --key:#7B33D6; --key-deep:#6425B4; --key-soft:rgba(var(--c2r),.13); --key-tint:rgba(var(--c2r),.06); --ok:#12A150; --ok-soft:#EDFFF4; --ok-line:#AEE5C5; --ok-ink:#17613A; --sh-1:0 8px 24px -16px rgba(var(--c3r),.36); --sh-2:0 18px 50px -26px rgba(var(--c3r),.44); --sh-3:0 34px 80px -34px rgba(var(--c3r),.54); --r:12px; --r-l:18px; --r-xl:26px; --shell:1200px; --pad:22px; --sans:"PingFang SC","HarmonyOS Sans SC","Microsoft YaHei","Noto Sans SC",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif; --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace; /* 小号字号基线，公共模块只引用这里，避免满文件散落数字。 */ --fs-root:15px; --fs-xxs:11px; --fs-xs:12px; --fs-sm:13.2px; --fs-md:14.2px; --fs-body:14.4px; --fs-lead:15.4px; --fs-ui:14px; --fs-card-title:16.2px; --fs-title:clamp(24px,2.8vw,34px); --fs-hero-title:clamp(25px,2.45vw,32px); --fs-cta-title:clamp(23px,2.7vw,31px); /* 平台色默认值：不挂平台 class 时退回品牌紫，页面不会瞎 */ --pf:var(--c2); --pfr:var(--c2r); --pf-2:var(--c3); --pf-ink:#FFFFFF; --pf-grad:linear-gradient(100deg,var(--pf),var(--pf-2)); --pf-soft:rgba(var(--pfr),.07); --pf-line:rgba(var(--pfr),.2); /* 用来替换字典文案里 的小箭头 */ --ico-arrow:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E"); } @media (max-width:720px){ .pf{ --pad:16px } } /* ========================================================================== 平台身份：换平台只改这里 平台色只做身份标识（水印/徽标/标题渐变/数字/hover）， 页面主色始终是品牌渐变 --grad，不要用平台色铺大面积。 ========================================================================== */ .pf-youtube { --pf:#FF0000; --pfr:255,0,0; --pf-2:#C4302B } .pf-twitter { --pf:#0F1419; --pfr:15,20,25; --pf-2:#3D4852 } .pf-instagram{ --pf:#E1306C; --pfr:225,48,108; --pf-2:#C13584 } .pf-tiktok { --pf:#FE2C55; --pfr:254,44,85; --pf-2:#25F4EE } .pf-facebook { --pf:#1877F2; --pfr:24,119,242; --pf-2:#0C4A9E } .pf-telegram { --pf:#229ED9; --pfr:34,158,217; --pf-2:#1B7FAE } .pf-spotify { --pf:#1DB954; --pfr:29,185,84; --pf-2:#14833B } .pf-discord { --pf:#5865F2; --pfr:88,101,242; --pf-2:#3C45A5 } .pf-linkedin { --pf:#0A66C2; --pfr:10,102,194; --pf-2:#074B8F } .pf-reddit { --pf:#FF4500; --pfr:255,69,0; --pf-2:#C33A06 } .pf-github { --pf:#24292F; --pfr:36,41,47; --pf-2:#57606A } .pf-vk { --pf:#0077FF; --pfr:0,119,255; --pf-2:#0055B8 } /* ========================================================================== 基础重置（限定在 .pf 内） ========================================================================== */ .pf,.pf *,.pf *::before,.pf *::after{box-sizing:border-box} .pf{ background:var(--page);color:var(--ink);font-family:var(--sans); font-size:var(--fs-root);line-height:1.75;-webkit-font-smoothing:antialiased; font-feature-settings:"tnum";scroll-behavior:smooth; overflow-x:clip; } .pf h1,.pf h2,.pf h3,.pf h4,.pf p,.pf ul,.pf ol,.pf figure{margin:0} .pf ul,.pf ol{list-style:none;padding:0} .pf img{display:block;max-width:100%} .pf button{font:inherit;color:inherit} /* 旧主题的链接颜色会渗进来，一次性掐断 */ .pf a,.pf a:visited,.pf a:hover,.pf a:focus,.pf a:focus-visible{ color:inherit;text-decoration:none !important} .pf .shell{max-width:var(--shell);margin:0 auto;padding:0 var(--pad)} .pf .h2{font-size:var(--fs-title);line-height:1.22;font-weight:800;letter-spacing:-.032em} .pf .lead{font-size:var(--fs-lead);color:var(--ink-3);line-height:1.82} .pf .center{text-align:center} .pf .pf-cta.center{justify-content:center} .pf .pf-sec-note{margin:34px auto 0;max-width:760px} .pf .eyebrow{display:block;font-size:var(--fs-xxs);font-weight:700;letter-spacing:.22em; text-transform:uppercase;color:var(--key);margin-bottom:10px} /* 品牌渐变文字 / 平台色渐变文字 */ .pf .k{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent} .pf .kp{background:var(--pf-grad);-webkit-background-clip:text;background-clip:text;color:transparent} /* ========================================================================== 按钮（同 fg-theme.css） ========================================================================== */ .pf .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px; height:46px;padding:0 24px;border-radius:10px;border:1px solid transparent;cursor:pointer; font-size:var(--fs-ui);font-weight:700;transition:all .18s ease} .pf .btn-lg{height:54px;padding:0 34px;font-size:15px;border-radius:12px} .pf .btn-key{background:var(--grad);box-shadow:0 12px 28px -10px rgba(var(--c2r),.7); position:relative;overflow:hidden} .pf .btn-key,.pf .btn-key:visited,.pf .btn-key:hover, .pf .btn-key:focus,.pf .btn-key:focus-visible{color:#fff !important} .pf .btn-key::after{content:"";position:absolute;top:0;left:-120%;width:60%;height:100%; background:linear-gradient(100deg,transparent,rgba(255,255,255,.5),transparent);transform:skewX(-20deg)} .pf .btn-key:hover::after{animation:fg-sheen .75s ease} .pf .btn-key:hover{transform:translateY(-3px);box-shadow:0 20px 42px -12px rgba(var(--c2r),.85)} @keyframes fg-sheen{to{left:130%}} .pf .btn-line{background:var(--paper);border-color:var(--line-2)} .pf .btn-line,.pf .btn-line:visited,.pf .btn-line:hover, .pf .btn-line:focus,.pf .btn-line:focus-visible{color:var(--ink) !important} .pf .btn-line:hover{border-color:var(--ink-4);background:var(--page-2)} /* ========================================================================== 1. 首屏 ========================================================================== */ .pf-hero{position:relative;padding:125px 0 60px;overflow:hidden} @media(max-width:900px){.pf-hero{padding-top:122px}} /* 品牌光晕：保留原框架，只让底色轻微呼吸 */ .pf-hero::before{content:"";position:absolute;top:-330px;left:46%;transform:translateX(-50%); width:1000px;height:640px;border-radius:50%;pointer-events:none; background:radial-gradient(closest-side,rgba(var(--c2r),.18),transparent 72%); animation:pf-aura-soft 10s ease-in-out infinite alternate} /* 平台色光晕：当前平台身份，慢速呼吸 */ .pf-hero::after{content:"";position:absolute;top:-220px;right:-160px; width:680px;height:560px;border-radius:50%;pointer-events:none; background:radial-gradient(closest-side,rgba(var(--pfr),.15),transparent 70%); animation:pf-aura-red 9s ease-in-out infinite alternate} .pf-hero .shell{position:relative;z-index:3} /* 首页同款背景系统：曲线/点阵在内容和主卡片外侧活动 */ .pf-hero-fx{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none} .pf-chart{position:absolute;inset:0;opacity:.82; mask-image:radial-gradient(44% 52% at 29% 55%,transparent 30%,#000 76%),radial-gradient(28% 46% at 75% 52%,transparent 24%,#000 72%),linear-gradient(#000 0 0); mask-composite:intersect; -webkit-mask-image:radial-gradient(44% 52% at 29% 55%,transparent 30%,#000 76%),radial-gradient(28% 46% at 75% 52%,transparent 24%,#000 72%),linear-gradient(#000 0 0); -webkit-mask-composite:source-in,source-in} .pf-chart svg{width:100%;height:100%;display:block} .pf-chart .grid{stroke:rgba(var(--inkr),.035);stroke-width:1} .pf-chart .roll{animation:pf-chart-roll 34s linear infinite} .pf-chart .ln{fill:none;stroke-linecap:round;stroke-linejoin:round} .pf-chart .ln.a{stroke-width:1.5;opacity:.44} .pf-chart .ln.b{stroke-width:1.1;opacity:.28} .pf-chart .ln.c{stroke-width:1;opacity:.18} .pf-chart .nd{opacity:0;animation:pf-chart-node 34s linear infinite} .pf-chart .nd:nth-of-type(2){animation-delay:-27s}.pf-chart .nd:nth-of-type(3){animation-delay:-20s}.pf-chart .nd:nth-of-type(4){animation-delay:-13s}.pf-chart .nd:nth-of-type(5){animation-delay:-6s} .pf-chart-cursor{opacity:.6} .pf-chart-dots{position:absolute;inset:-30px;background-image:radial-gradient(rgba(var(--pfr),.12) 1px,transparent 1px); background-size:28px 28px;opacity:.42;animation:pf-dots-drift 24s linear infinite; mask-image:radial-gradient(58% 54% at 82% 26%,#000 2%,transparent 74%); -webkit-mask-image:radial-gradient(58% 54% at 82% 26%,#000 2%,transparent 74%)} .pf-chart-fade{position:absolute;left:0;right:0;bottom:0;height:150px;background:linear-gradient(to bottom,transparent,var(--page))} .pf-ambient-wave{position:absolute;left:0;right:0;top:0;height:270px;z-index:0;pointer-events:none;opacity:.58; background:linear-gradient(115deg,transparent 0 22%,rgba(var(--c1r),.11) 34%,rgba(var(--c3r),.085) 48%,transparent 62%); filter:blur(1px);animation:pf-ambient-wave 8s ease-in-out infinite alternate} .pf-sweep{position:absolute;top:-80px;bottom:-80px;width:150px;z-index:1;pointer-events:none; background:linear-gradient(90deg,transparent,rgba(255,255,255,.42),rgba(var(--c2r),.08),transparent); filter:blur(10px);opacity:.18;transform:rotate(18deg);animation:pf-sweep 11s ease-in-out infinite} .pf-light-streak{position:absolute;z-index:1;height:1px;border-radius:999px;background:linear-gradient(90deg,transparent,rgba(var(--pfr),.32),rgba(var(--c2r),.22),transparent); box-shadow:0 0 18px rgba(var(--pfr),.12);pointer-events:none;opacity:.5;animation:pf-streak-drift 7s ease-in-out infinite alternate} .pf-light-streak.one{top:18%;left:5%;width:360px;animation-delay:-1s} .pf-light-streak.two{top:30%;right:18%;width:260px;opacity:.34;animation-duration:7.4s;animation-delay:-2.4s} .pf-light-streak.three{top:10%;right:4%;width:180px;opacity:.3;animation-duration:5.8s;animation-delay:-3s} .pf-soft-dot{position:absolute;z-index:1;width:8px;height:8px;border-radius:50%;background:rgba(var(--pfr),.38); box-shadow:0 0 0 8px rgba(var(--pfr),.07),0 0 28px rgba(var(--pfr),.24);pointer-events:none;opacity:.52;animation:pf-soft-dot 5.6s ease-in-out infinite alternate} .pf-soft-dot.one{top:22%;left:32%;animation-delay:-.8s} .pf-soft-dot.two{top:15%;right:29%;width:7px;height:7px;background:rgba(var(--c3r),.36);box-shadow:0 0 0 8px rgba(var(--c3r),.07),0 0 28px rgba(var(--c3r),.22);animation-duration:6.4s;animation-delay:-2s} .pf-soft-dot.three{top:37%;right:9%;width:6px;height:6px;animation-duration:5s;animation-delay:-3s} /* 平台超大水印图标：后退到边缘，避免和主卡片堆叠 */ .pf-watermark{position:absolute;top:-80px;right:-130px;width:360px;height:360px; fill:var(--pf);opacity:.065;pointer-events:none;user-select:none;z-index:1;animation:pf-watermark-float 7.5s ease-in-out infinite alternate} @keyframes pf-chart-roll{to{transform:translateX(-360px)}} @keyframes pf-chart-node{0%,88%{opacity:0}4%{opacity:1}80%{opacity:.78}92%,100%{opacity:0}} @keyframes pf-dots-drift{to{background-position:28px 28px}} @keyframes pf-aura-soft{to{transform:translateX(-50%) translate(70px,48px) scale(1.08);opacity:.9}} @keyframes pf-aura-red{to{transform:translate(-76px,62px) scale(.95);opacity:.82}} @keyframes pf-watermark-float{to{transform:translate(-18px,22px) rotate(-4deg);opacity:.09}} @keyframes pf-streak-drift{to{transform:translateX(70px);opacity:.24}} @keyframes pf-soft-dot{to{transform:translate(22px,-26px) scale(1.35);opacity:.22}} @keyframes pf-ambient-wave{to{transform:translateX(8%) scaleY(1.12);opacity:.38}} @keyframes pf-sweep{0%{left:-18%;opacity:0}18%{opacity:.25}52%{opacity:.18}100%{left:110%;opacity:0}} @media(prefers-reduced-motion:reduce){ .pf-hero::before,.pf-hero::after,.pf-chart .roll,.pf-chart .nd,.pf-chart-cursor,.pf-chart-dots,.pf-ambient-wave,.pf-sweep,.pf-light-streak,.pf-soft-dot,.pf-watermark{animation:none!important} } @media(max-width:900px){ .pf-watermark{width:230px;height:230px;top:-10px;right:-40px} .pf-light-streak.one{top:14%;left:4%;width:230px}.pf-light-streak.two{top:26%;right:5%;width:190px}.pf-light-streak.three{display:none} .pf-sweep{display:none} } .pf-hero-g{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:54px;align-items:start} @media(max-width:900px){.pf-hero-g{grid-template-columns:1fr;gap:38px}} /* 面包屑 */ .pf .pf-crumb{font-size:var(--fs-sm);color:var(--ink-3);margin:0 0 30px} .pf-crumb a:hover{color:var(--key)} .pf-crumb i{font-style:normal;margin:0 7px;color:var(--ink-4)} /* 平台徽标：实心平台色，最直接的身份标识 */ .pf-badge{display:inline-flex;align-items:center;gap:10px;padding:7px 16px 7px 7px; border-radius:999px;background:var(--paper);border:1px solid var(--pf-line); box-shadow:0 8px 22px -14px rgba(var(--pfr),.5); font-size:var(--fs-md);font-weight:700;color:var(--ink-2);margin-bottom:26px} .pf-badge .ico{width:28px;height:28px;border-radius:9px;display:grid;place-items:center; background:var(--pf);color:var(--pf-ink);flex:0 0 28px} .pf-badge .ico svg{width:15px;height:15px;fill:currentColor} .pf-badge .live{display:inline-flex;align-items:center;gap:6px;padding-left:11px; margin-left:2px;border-left:1px solid var(--line);color:var(--ink-3);font-weight:600} .pf-badge .live i{width:6px;height:6px;border-radius:50%;background:#22C55E; font-style:normal;animation:pf-blink 1.8s ease-in-out infinite} @keyframes pf-blink{50%{opacity:.3}} .pf-hero h1{font-size:var(--fs-hero-title);line-height:1.3;font-weight:800; letter-spacing:-.03em;text-wrap:balance;margin-bottom:24px} .pf-hero .sub{margin-top:0;font-size:15px;font-weight:700;color:var(--ink-2);letter-spacing:-.02em} .pf-hero .desc{margin-top:28px;font-size:var(--fs-lead);color:var(--ink-3);line-height:1.86;max-width:720px} .pf-hero .desc strong{color:var(--ink-2);font-weight:700} /* 首屏简介必须完整展示，不能截断 */ .pf-hero .desc.clamp{display:block;overflow:visible} .pf-cta{display:flex;gap:12px;margin-top:34px;flex-wrap:wrap} /* 信任条：数字用平台色 */ .pf-trust{display:flex;gap:28px;margin-top:30px;padding-top:24px; border-top:1px solid var(--line);flex-wrap:wrap} .pf-trust div{min-width:82px} .pf-trust b{display:block;font-size:22px;font-weight:800;letter-spacing:-.03em;color:var(--pf); font-family:var(--mono);font-variant-numeric:tabular-nums} .pf-trust span{font-size:var(--fs-sm);color:var(--ink-3)} @media(max-width:768px){ .pf-hero .desc{font-size:13.6px;line-height:1.8} .pf p{font-size:13.6px;line-height:1.8} .pf-trust{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:24px;padding-top:20px} .pf-trust div{min-width:0;text-align:center} .pf-trust b{font-size:clamp(20px,7vw,28px);line-height:1;white-space:nowrap} .pf-trust span{display:block;margin-top:9px;font-size:11.5px;line-height:1.25;white-space:nowrap} } /* ========================================================================== 2. 平台原生感组件（通用骨架） .mock-* 所有平台共用，平台专属部分写在各自小节 ========================================================================== */ .mock{background:var(--paper);border:1px solid var(--line);border-radius:20px; box-shadow:var(--sh-2);padding:18px 18px 14px;position:sticky;top:100px} @media(max-width:900px){.mock{position:static}} .mock-top{display:flex;gap:11px;align-items:flex-start} .mock-av{width:44px;height:44px;border-radius:50%;flex:0 0 44px;background:var(--grad); display:grid;place-items:center;color:#fff;font-weight:800;font-size:16px} .mock-av-img{object-fit:contain;padding:5px;background:#fff;border:1px solid var(--line)} .mock-name{display:flex;align-items:center;gap:5px;font-size:var(--fs-ui);font-weight:800; color:var(--ink);letter-spacing:-.01em} .mock-verify{width:16px;height:16px;fill:var(--ink-4);flex:0 0 16px} .mock-handle{font-size:var(--fs-md);color:var(--ink-3);font-weight:400;margin-top:1px} .mock-growth{margin-top:14px;padding:13px 14px;border-radius:14px; background:var(--pf-soft);border:1px solid var(--pf-line)} .mock-growth-hd{display:flex;align-items:baseline;justify-content:space-between;gap:10px} .mock-growth-hd .lab{font-size:var(--fs-xs);font-weight:700;color:var(--ink-3); letter-spacing:.05em;text-transform:uppercase} .mock-growth-hd .up{display:inline-flex;align-items:center;gap:4px;font-size:var(--fs-xs);font-weight:800;color:var(--ok); font-family:var(--mono);letter-spacing:-.02em} .mock-growth-hd .up svg{width:11px;height:11px;fill:currentColor;flex:0 0 11px} .mock-count{font-size:29px;font-weight:800;color:var(--pf);letter-spacing:-.035em; font-family:var(--mono);font-variant-numeric:tabular-nums;line-height:1.15;margin-top:3px} .mock-spark{margin-top:9px;height:34px;width:100%;display:block} .mock-spark path.ln{fill:none;stroke:var(--pf);stroke-width:2;stroke-linecap:round;stroke-linejoin:round} .mock-spark path.ar{fill:var(--pf);opacity:.09} /* 互动数据栏：hover 跟平台色走，不写死某个平台的配色 */ .mock-acts{display:flex;justify-content:space-between;margin-top:13px;padding-top:11px; border-top:1px solid var(--line);color:var(--ink-3)} .mock-act{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-sm); font-family:var(--mono);font-variant-numeric:tabular-nums;transition:color .2s} .mock-act svg{width:16px;height:16px;fill:currentColor} .mock-act:hover{color:var(--pf)} .mock-act.on{color:var(--pf);font-weight:700} .mock-foot{margin-top:12px;font-size:var(--fs-xs);color:var(--ink-4);text-align:center;line-height:1.6} /* ========================================================================== 区块通用 scroll-margin-top 让锚点跳转后标题不被 sticky 导航盖住 ========================================================================== */ .pf-sec{padding:74px 0;scroll-margin-top:100px} .pf-sec.alt{background:var(--page-2);border-block:1px solid var(--line)} .pf-hd{max-width:700px;margin:0 auto 46px;text-align:center} .pf-hd .lead{margin-top:14px} /* 内容重的区块用左对齐头部，打破全页居中标题的单调感 */ .pf-hd-l{margin:0 0 42px;text-align:left;max-width:780px} @media(max-width:900px){.pf-sec{padding:56px 0}} @media(max-width:680px){.pf-sec{padding:46px 0}} /* 页内锚点：首页同款右侧圆点导航，不占正文空间 */ .pf-nav{position:fixed;right:34px;top:50%;z-index:90;transform:translateY(-50%)} .pf-anchor-menu{display:flex;flex-direction:column;align-items:center;gap:14px} .pf-anchor-menu a{position:relative;display:grid;place-items:center;width:28px;height:24px;padding:0; color:#C9C7CD;font-size:0;line-height:1;outline:0;transition:color .2s ease} .pf-anchor-menu a::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor; transition:width .2s ease,height .2s ease,box-shadow .2s ease,background .2s ease} .pf-anchor-menu a::after{content:attr(aria-label);position:absolute;right:calc(100% + 12px);top:50%;width:max-content;max-width:min(260px,calc(100vw - 92px)); overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--c1);font-size:15px;font-weight:800;line-height:1.2;letter-spacing:0;opacity:0;pointer-events:none; transform:translate(6px,-50%);transition:opacity .18s ease,transform .18s ease;z-index:1} .pf-anchor-menu a:hover, .pf-anchor-menu a:focus-visible{color:var(--ink-3)} .pf-anchor-menu a:hover::before, .pf-anchor-menu a:focus-visible::before{width:13px;height:13px;box-shadow:0 5px 14px -8px rgba(var(--inkr),.55)} .pf-anchor-menu a:hover::after, .pf-anchor-menu a:focus-visible::after, .pf-anchor-menu a[aria-current="true"]::after{opacity:1;transform:translate(0,-50%)} .pf-anchor-menu:has(a:hover) a[aria-current="true"]:not(:hover)::after, .pf-anchor-menu:has(a:focus-visible) a[aria-current="true"]:not(:focus-visible)::after{opacity:0;transform:translate(6px,-50%)} .pf-anchor-menu a[aria-current="true"]{color:var(--c2)} .pf-anchor-menu a[aria-current="true"]::before{width:15px;height:15px;background:var(--grad);box-shadow:0 5px 14px -6px rgba(var(--c2r),.76)} @media(max-width:1180px){.pf-nav{display:none}} /* ========================================================================== 3. 服务卡片 ========================================================================== */ .pf-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px} @media(max-width:1080px){.pf-grid{grid-template-columns:repeat(2,1fr)}} @media(max-width:680px){.pf-grid{grid-template-columns:1fr}} .pf-card{position:relative;background:var(--paper);border:1px solid var(--line); border-radius:var(--r-l);padding:26px 24px;box-shadow:var(--sh-1); transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease; display:flex;flex-direction:column;overflow:hidden} .pf-card::before{content:"";position:absolute;inset:0 0 auto;height:3px; background:linear-gradient(90deg,var(--pf),var(--c2));opacity:0;transition:opacity .22s} .pf-card:hover{transform:translateY(-5px); box-shadow:0 22px 52px -28px rgba(var(--pfr),.34),0 6px 16px -10px rgba(var(--inkr),.12); border-color:var(--pf-line)} .pf-card:hover::before{opacity:1} .pf-card .ico{width:46px;height:46px;border-radius:14px;display:grid;place-items:center; background:var(--grad-soft);border:1px solid rgba(var(--c2r),.18); color:var(--pf);margin-bottom:16px} .pf-card .ico svg{width:22px;height:22px;fill:none;stroke:currentColor; stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round} .pf-card h3{font-size:var(--fs-card-title);font-weight:800;letter-spacing:-.02em;line-height:1.5; margin-bottom:10px} .pf-card p{font-size:var(--fs-body);color:var(--ink-3);line-height:1.72} .pf-card .bd{display:flex;flex-direction:column;flex:1} /* ── 字典 desc 里带内联样式的价格条与按钮，在这里统一改写 ── 字典写死了 color:red 和一段渐变按钮的 inline style， 用高权重选择器盖掉，不必去动 12 个语种的文案。 价格条做成电商价签：虚线分隔，左说明右价格，底部对齐。 */ .pf-card .bd span[style]{ display:flex !important;align-items:baseline;justify-content:space-between;gap:12px; margin-top:auto !important;padding:15px 2px 0; background:none !important;border:0 !important;border-top:1px dashed var(--line-2) !important; border-radius:0 !important; color:var(--ink-4) !important;font-size:12px !important;font-weight:500;line-height:1.55} .pf-card .bd span[style] strong{color:var(--pf);font-family:var(--mono); font-size:20px;font-weight:800;letter-spacing:-.03em;white-space:nowrap} .pf-card .bd a[style]{ margin-top:14px !important;width:100% !important;height:41px; padding:0 !important;border-radius:10px !important; background:var(--page-2) !important;border:1px solid var(--line-2); color:var(--ink-2) !important;font-size:var(--fs-md) !important;font-weight:700 !important; display:inline-flex !important;align-items:center;justify-content:center;gap:6px; transition:background .2s,color .2s,border-color .2s,box-shadow .2s} .pf-card:hover .bd a[style]{background:var(--grad) !important;color:#fff !important; border-color:transparent;box-shadow:0 10px 24px -12px rgba(var(--c2r),.75)} /* ========================================================================== 下单步骤：桌面横向时间线，移动端两列卡片并隐藏连线 ========================================================================== */ .ogd-card{position:relative} .ogd-card .pf-hd{margin-bottom:44px} .pf-tl{position:relative} .pf-tl-row{display:grid;grid-template-columns:repeat(5,1fr);position:relative} .pf-tl-svg{position:absolute;left:0;top:0;width:100%;height:100%;z-index:1;overflow:visible} .pf-tl-svg path{fill:none;stroke:url(#ogdLineGrad);stroke-width:2;stroke-linecap:round; stroke-dasharray:6 5;animation:ogdFlow 1.1s linear infinite} .pf-tl-item{position:relative;z-index:2;padding:0 10px;text-align:center} .pf-tl-item:nth-of-type(odd) .pf-tl-card{margin-top:0} .pf-tl-item:nth-of-type(even) .pf-tl-card{margin-top:52px} .pf-tl-card{background:var(--paper);border:1px solid var(--line);border-radius:16px; padding:20px 14px 18px;box-shadow:var(--sh-1); transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease} .pf-tl-card:hover{transform:translateY(-5px);box-shadow:var(--sh-2);border-color:transparent} .pf-tl-item .num{display:grid;place-items:center;width:38px;height:38px;margin:0 auto 12px; border-radius:50%;background:var(--grad);color:#fff;font-family:var(--mono); font-size:15px;font-weight:800;box-shadow:0 10px 20px -8px rgba(var(--c3r),.5)} .pf-tl-card h3{font-size:14.5px;font-weight:820;letter-spacing:-.012em;margin:0 0 7px;line-height:1.36} .pf-tl-card p{font-size:var(--fs-sm);color:var(--ink-3);line-height:1.66} .pf-tl-card p a{color:var(--key);font-weight:700} @keyframes ogdFlow{to{stroke-dashoffset:-22}} @media(prefers-reduced-motion:reduce){ .pf-tl-svg path{animation:none} } @media(max-width:900px){ .ogd-card{padding:34px 24px;border-radius:22px} .ogd-card .pf-hd{margin-bottom:28px} .pf-tl-svg{display:none} .pf-tl-row{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 14px} .pf-tl-item{padding:0;text-align:center} .pf-tl-item:nth-of-type(odd) .pf-tl-card, .pf-tl-item:nth-of-type(even) .pf-tl-card{margin-top:0} .pf-tl-card{height:100%;display:block;padding:20px;border-radius:20px;background:var(--paper);border:1px solid var(--line);box-shadow:0 12px 30px -24px rgba(var(--inkr),.28)} .pf-tl-item .num{display:grid;margin:0 auto 12px;width:34px;height:34px;border-radius:50%; background:var(--grad);color:#fff;font-family:var(--mono);font-size:15px;font-weight:800;box-shadow:0 10px 20px -8px rgba(var(--c3r),.5)} .pf-tl-card h3{margin:0 0 7px;font-size:14.5px;line-height:1.35;letter-spacing:-.02em} .pf-tl-card p{margin:0;font-size:12.5px;line-height:1.66;color:var(--ink-3)} .pf-tl-card:hover{transform:none;box-shadow:0 12px 30px -24px rgba(var(--inkr),.28);border-color:var(--line)} } @media(max-width:680px){ .ogd-card{padding:24px 14px;border-radius:22px} .ogd-card .pf-hd{margin-bottom:20px} .pf-tl-row{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 10px} .pf-tl-card{padding:16px 12px;border-radius:18px} .pf-tl-item .num{width:30px;height:30px;margin-bottom:10px;font-size:14px} .pf-tl-card h3{font-size:13.5px;line-height:1.34} .pf-tl-card p{font-size:11.8px;line-height:1.62} } /* ========================================================================== 一站式涨粉：头部左文右图 + 图标卡片网格 + 编号水印 + 右下角箭头徽标 配色统一走品牌渐变（--grad/--key），不用平台红——大面积视觉场景平台色太抢 ========================================================================== */ .pf-growth-services .shell{position:relative} .pf-growth-services .gs-hd{display:grid;grid-template-columns:minmax(0,1fr) 300px; gap:48px;align-items:center;margin-bottom:8px} .pf-growth-services .pf-hd-l{max-width:none} @media(max-width:900px){ .pf-growth-services .gs-hd{grid-template-columns:1fr} .pf-growth-services .gs-visual{display:none} } /* 头部插画：3D 悬浮仪表盘卡片 —— 品牌渐变主卡 + 持续流动折线图 + 浮动数据徽章 */ .pf-growth-services .gs-visual{position:relative;width:300px;height:250px; margin-left:auto;perspective:900px} .pf-growth-services .gs-card{position:absolute;left:20px;top:14px;width:230px;height:200px; border-radius:24px;background:var(--grad);box-shadow:0 30px 60px -22px rgba(var(--c3r),.5); transform:rotateY(-14deg) rotateX(6deg);transform-style:preserve-3d; padding:20px;overflow:hidden; animation:gsFloat 4.5s ease-in-out infinite} .pf-growth-services .gs-card::before{content:"";position:absolute;inset:0; background:linear-gradient(135deg,rgba(255,255,255,.22),transparent 55%)} .pf-growth-services .gs-card-hd{position:relative;z-index:1;display:flex; align-items:flex-start;justify-content:space-between;color:#fff} .pf-growth-services .gs-card-hd>div{display:flex;flex-direction:column;gap:4px} .pf-growth-services .gs-card-hd b{font-size:24px;font-weight:800;letter-spacing:-.02em} .pf-growth-services .gs-card-hd span{font-size:11px;opacity:.85;font-weight:600} .pf-growth-services .gs-pulse{width:8px;height:8px;border-radius:50%;background:#fff; box-shadow:0 0 0 0 rgba(255,255,255,.7);animation:gsPulse 1.8s ease-out infinite} .pf-growth-services .gs-line{position:absolute;left:0;right:0;bottom:20px;z-index:1} .pf-growth-services .gs-line path.fill{opacity:.28} .pf-growth-services .gs-line path.stroke{stroke-dasharray:6 5; animation:gsFlow 1.4s linear infinite} .pf-growth-services .gs-badge{position:absolute;display:flex;align-items:center;gap:9px; padding:10px 14px;border-radius:14px;background:var(--paper); border:1px solid var(--line);box-shadow:var(--sh-2);z-index:2} .pf-growth-services .gs-badge b{display:block;font-size:14px;font-weight:800;color:var(--ink)} .pf-growth-services .gs-badge span{display:block;font-size:10.5px;color:var(--ink-3);font-weight:600} .pf-growth-services .gs-badge .ic{width:30px;height:30px;border-radius:9px;background:var(--grad-soft); display:grid;place-items:center;flex:none} .pf-growth-services .gs-badge .ic svg{width:16px;height:16px;fill:none;stroke:var(--key); stroke-width:2;stroke-linecap:round;stroke-linejoin:round} .pf-growth-services .gs-badge.b1{right:8px;top:0;animation:gsFloatFlat 4.5s ease-in-out .3s infinite} .pf-growth-services .gs-badge.b2{left:0;bottom:6px;animation:gsFloatFlat 4.5s ease-in-out 1.1s infinite} @keyframes gsFloat{0%,100%{transform:translateY(0) rotateY(-14deg) rotateX(6deg)} 50%{transform:translateY(-10px) rotateY(-14deg) rotateX(6deg)}} @keyframes gsFloatFlat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}} @keyframes gsPulse{0%{box-shadow:0 0 0 0 rgba(255,255,255,.7)}100%{box-shadow:0 0 0 9px rgba(255,255,255,0)}} @keyframes gsFlow{to{stroke-dashoffset:-22}} @media(prefers-reduced-motion:reduce){ .pf-growth-services .gs-card,.pf-growth-services .gs-badge, .pf-growth-services .gs-pulse,.pf-growth-services .gs-line path.stroke{animation:none} } .pf-growth-services .gs-list{margin-top:24px;display:grid; grid-template-columns:repeat(2,1fr);gap:18px;align-items:stretch} @media(max-width:900px){ .pf-growth-services .gs-list{grid-template-columns:1fr} } .pf-growth-services .gs-item{position:relative;display:flex;flex-direction:column; background:var(--paper);border:1px solid var(--line);border-radius:var(--r-l); padding:22px;box-shadow:var(--sh-1); transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease; overflow:hidden} .pf-growth-services .gs-item:hover{transform:translateY(-5px); border-color:rgba(var(--c2r),.22)} .pf-growth-services .gs-item .idx{position:absolute;right:22px;top:20px; font-family:var(--mono);font-size:36px;font-weight:800;line-height:1; color:var(--page-2);letter-spacing:-.02em;z-index:0} .pf-growth-services .gs-item .hd{position:relative;z-index:1;display:flex; align-items:center;column-gap:12px;margin-bottom:16px} .pf-growth-services .gs-item .ico{flex:none;width:44px;height:44px; border-radius:13px;background:var(--grad);display:grid;place-items:center; box-shadow:0 10px 20px -6px rgba(var(--c3r),.4)} .pf-growth-services .gs-item .ico svg{width:21px;height:21px;fill:none;stroke:#fff; stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} .pf-growth-services .gs-item .hd .tt{flex:1;min-width:0;height:44px; display:flex;flex-direction:column;justify-content:center} .pf-growth-services .gs-item .hd h3{margin:0;line-height:22px} .pf-growth-services .gs-item .hd .sub{margin:0;line-height:22px} .pf-growth-services .gs-item .bd{position:relative;z-index:1} .pf-growth-services .gs-item h3{font-size:16px;font-weight:800;letter-spacing:-.01em} .pf-growth-services .gs-item .sub{display:block;color:var(--key);font-size:var(--fs-sm);font-weight:700} .pf-growth-services .gs-item p{font-size:var(--fs-md);color:var(--ink-3);line-height:1.62} .pf-growth-services .gs-item p strong{color:var(--ink-2);font-weight:700} .pf-growth-services .gs-item ul{list-style:none;margin:9px 0 0;padding:0; display:flex;flex-direction:column;gap:6px} .pf-growth-services .gs-item li{position:relative;padding-left:18px; font-size:var(--fs-md);color:var(--ink-3);line-height:1.5} .pf-growth-services .gs-item li::before{content:"";position:absolute;left:0;top:7px; width:6px;height:6px;border-radius:50%;background:var(--grad)} .pf-growth-services .gs-item li strong{color:var(--ink-2);font-weight:700} /* ========================================================================== 为什么选我们：吉祥物+完整文案的渐变说明卡 + 两列清单 ========================================================================== */ .pf-why-card{display:flex;align-items:flex-start;gap:18px;margin-bottom:32px; padding:22px 26px;border-radius:20px;border:1px solid var(--line); background:linear-gradient(160deg,rgba(var(--c1r),.08),rgba(var(--c3r),.06) 60%,var(--page-2) 100%)} .pf-why-card img{width:64px;flex:none;filter:drop-shadow(0 10px 16px rgba(var(--inkr),.14))} .pf-why-card p{font-size:var(--fs-md);color:var(--ink-3);line-height:1.78;margin:0} .pf-why-card p strong{color:var(--ink-2);font-weight:700} @media(max-width:640px){ .pf-why-card{flex-direction:column;align-items:flex-start;gap:14px} } .pf-why-list{margin-top:32px;display:grid;grid-template-columns:repeat(2,1fr);gap:2px 28px} @media(max-width:900px){.pf-why-list{grid-template-columns:1fr}} .pf-why-item{display:flex;gap:12px;padding:16px 0;border-bottom:1px solid var(--line)} .pf-why-item .dot{flex:none;width:22px;height:22px;border-radius:50%;background:var(--grad); color:#fff;font-size:11px;font-weight:800;font-family:var(--mono); display:grid;place-items:center;margin-top:2px} .pf-why-item h3{font-size:16px;font-weight:850;letter-spacing:-.012em;margin:0 0 8px;line-height:1.36} .pf-why-item p{font-size:14px;color:var(--ink-3);line-height:1.72;margin:0} .pf-why-item p strong{color:var(--ink-2);font-weight:700} /* 富文本容器：desc 里可能有 ul/ol，模板不能外套 p。旧 p 规则保留给未迁移页面。 */ .pf .why-copy,.pf .rich-copy{font-size:var(--fs-md);color:var(--ink-3);line-height:1.68;margin:0;letter-spacing:0;font-weight:400} .pf .why-copy p,.pf .rich-copy p{margin:0 0 9px;font:inherit;color:inherit;line-height:inherit} .pf .why-copy p:last-child,.pf .rich-copy p:last-child{margin-bottom:0} .pf .why-copy strong,.pf .rich-copy strong{color:var(--ink-2);font-weight:700} .pf .why-copy ul,.pf .rich-copy ul,.pf .why-copy ol,.pf .rich-copy ol{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:6px} .pf .why-copy li,.pf .rich-copy li{position:relative;padding-left:18px;font-size:inherit;line-height:1.6;color:var(--ink-3);font-weight:400} .pf .why-copy li::before,.pf .rich-copy li::before{content:"";position:absolute;left:0;top:.72em;width:6px;height:6px;border-radius:50%;background:var(--grad);transform:translateY(-50%)} .pf .pf-why-item .why-copy{font-size:14px;line-height:1.72} .pf .pf-why-item .why-copy li{font-size:14px;line-height:1.68;padding-left:18px} .pf .pf-dur-card .rich-copy{font-size:13.8px;line-height:1.72} .pf .pf-dur-card .rich-copy li{font-size:13.8px;line-height:1.62} /* ========================================================================== 效果持续多久：浅色品牌卡片网格 + 时间轴对比图（掉粉衰减 vs 长期稳定） ========================================================================== */ .pf-dur-hd{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:44px;align-items:center; margin-bottom:36px;padding:40px 44px;border-radius:30px; box-shadow:0 20px 46px -30px rgba(var(--c3r),.4); background:linear-gradient(155deg,rgba(var(--c1r),.08),rgba(var(--c3r),.07) 60%,var(--page-2))} @media(max-width:820px){.pf-dur-hd{grid-template-columns:1fr;padding:32px 28px}} .pf-dur-hd .eyebrow-pill{display:inline-flex;align-items:center;gap:7px;font-size:11px;font-weight:800; letter-spacing:.05em;color:var(--key);background:var(--paper);border:1px solid rgba(var(--inkr),.1); padding:7px 14px;border-radius:99px;text-transform:uppercase;margin-bottom:20px} .pf-dur-hd .eyebrow-pill svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8; stroke-linecap:round;stroke-linejoin:round} .pf-dur-hd h2{font-size:27px;font-weight:800;letter-spacing:-.018em;margin:0 0 16px;line-height:1.38;color:var(--ink)} .pf-dur-hd h2 .hi{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent} .pf-service-duration .pf-dur-hd p{max-width:760px;font-size:12.8px;color:var(--ink-3);line-height:1.72;margin:0 0 8px;letter-spacing:0} .pf-service-duration .pf-dur-hd p strong{color:#D6407A;font-weight:700} .pf-dur-chart{background:var(--paper);border-radius:22px; box-shadow:0 16px 34px -20px rgba(var(--c3r),.3);padding:22px 22px 16px;overflow:hidden} .pf-dur-chart .legend{display:flex;gap:16px;margin-bottom:10px} .pf-dur-chart .lg-item{display:inline-flex;align-items:center;gap:6px;font-size:10.5px;font-weight:700;color:var(--ink-3)} .pf-dur-chart .lg-dot{width:9px;height:9px;border-radius:50%;flex:none} .pf-dur-chart .lg-dim{background:rgba(var(--inkr),.28)} .pf-dur-chart .lg-brand{background:var(--grad)} .pf-dur-chart svg{width:100%;height:150px;display:block} .pf-dur-chart .decay-line{animation:pfDurDecay 3.6s ease-in-out infinite} @keyframes pfDurDecay{0%,100%{opacity:.55}50%{opacity:.85}} .pf-dur-chart .trend-line{stroke-dasharray:360;stroke-dashoffset:360; animation:pfDurDraw 3.4s ease-out forwards infinite} @keyframes pfDurDraw{0%{stroke-dashoffset:360}60%{stroke-dashoffset:0}100%{stroke-dashoffset:0}} .pf-dur-chart .pulse-dot{animation:pfDurGlow 2.2s ease-in-out infinite} .pf-dur-chart .pulse-ring{animation:pfDurRing 2.2s ease-out infinite;transform-origin:150px 40px} .pf-dur-chart .pulse-dot.delay2,.pf-dur-chart .pulse-ring.delay2{animation-delay:1.1s;transform-origin:230px 40px} @keyframes pfDurGlow{0%,100%{opacity:.85}50%{opacity:1}} @keyframes pfDurRing{0%{opacity:.6;transform:scale(1)}100%{opacity:0;transform:scale(2.8)}} .pf-dur-chart .timeline{display:flex;justify-content:space-between;margin-top:4px;padding-top:10px; border-top:1px solid var(--line)} .pf-dur-chart .timeline span{font-size:10px;color:var(--ink-4);font-weight:700;opacity:1} @media(prefers-reduced-motion:reduce){ .pf-dur-chart .trend-line{animation:none;stroke-dashoffset:0} .pf-dur-chart .pulse-ring{animation:none;opacity:0} .pf-dur-chart .decay-line{animation:none;opacity:.7} } .pf-dur-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:stretch} @media(max-width:920px){.pf-dur-grid{grid-template-columns:1fr 1fr}} @media(max-width:600px){.pf-dur-grid{grid-template-columns:1fr}} /* 用缓慢移动的光带和网格给整块内容增加空间感，不干扰卡片阅读。 */ .pf-service-duration{position:relative;isolation:isolate;overflow:hidden; background:linear-gradient(180deg,var(--page) 0%,#F8F5FC 48%,var(--page) 100%)} .pf-service-duration::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none; background:linear-gradient(106deg,transparent 18%,rgba(var(--c1r),.055) 40%,rgba(var(--c3r),.08) 52%,transparent 78%); background-size:220% 100%;animation:pfDurSweep 16s ease-in-out infinite} .pf-service-duration::after{content:"";position:absolute;inset:-30px 0;z-index:0;pointer-events:none;opacity:.3; background-image:linear-gradient(rgba(var(--c3r),.045) 1px,transparent 1px), linear-gradient(90deg,rgba(var(--c3r),.045) 1px,transparent 1px); background-size:56px 56px;mask-image:linear-gradient(to bottom,transparent,black 20%,black 80%,transparent); animation:pfDurGridShift 20s linear infinite} .pf-service-duration>.shell{position:relative;z-index:1} @keyframes pfDurSweep{0%,100%{background-position:120% 0}50%{background-position:-20% 0}} @keyframes pfDurGridShift{to{background-position:56px 56px,56px 56px}} @media(max-width:900px){ .pf-service-duration{background:linear-gradient(180deg,var(--page) 0%,#FAF7FD 48%,var(--page) 100%)} .pf-service-duration::before{display:none} .pf-service-duration::after{display:none} } @media(max-width:680px){ .pf-service-duration .pf-dur-hd{padding:30px 24px;border-radius:24px; background:linear-gradient(155deg,rgba(var(--c1r),.07),rgba(var(--c3r),.06) 62%,var(--paper)); box-shadow:0 16px 36px -30px rgba(var(--inkr),.28)} } .pf-dur-card{position:relative;display:flex;flex-direction:column;background:var(--paper);border-radius:20px;padding:27px 25px; box-shadow:0 12px 28px -18px rgba(var(--inkr),.2);transition:transform .25s,box-shadow .25s} .pf-dur-card:hover{transform:translateY(-4px);box-shadow:0 22px 42px -18px rgba(var(--inkr),.28)} .pf-dur-card .n{position:absolute;top:22px;right:24px;font-family:var(--mono);font-size:17px; font-weight:800;color:rgba(var(--inkr),.13);line-height:1} .pf-dur-card .row1{display:flex;align-items:center;gap:13px;margin-bottom:15px;padding-right:30px} .pf-dur-card .ic{width:45px;height:45px;border-radius:14px;display:grid;place-items:center;flex:none; font-size:22px;line-height:1;animation:pfDurBreathe 4.5s ease-in-out infinite} .pf-dur-card .ic svg{width:22.5px;height:22.5px;fill:none;stroke:var(--key);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} .pf-dur-card .ic-rose{background:#FBE4EA} .pf-dur-card .ic-violet{background:#EDE3FB} @keyframes pfDurBreathe{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-3px) scale(1.05)}} .pf-dur-grid .pf-dur-card:nth-child(2) .ic{animation-delay:.5s} .pf-dur-grid .pf-dur-card:nth-child(3) .ic{animation-delay:1s} .pf-dur-grid .pf-dur-card:nth-child(4) .ic{animation-delay:1.5s} .pf-dur-grid .pf-dur-card:nth-child(5) .ic{animation-delay:2s} .pf-dur-grid .pf-dur-card:nth-child(6) .ic{animation-delay:2.5s} .pf-service-duration .pf-dur-card h3{flex:1;min-width:0;font-size:14px;font-weight:700;letter-spacing:0;margin:0;line-height:1.4;color:var(--ink)} .pf-dur-card .dash{width:19px;height:3px;border-radius:2px;background:#D6407A;margin:0 0 12px} .pf-service-duration .pf-dur-card p{font-size:12.35px;color:#6D6478;line-height:1.7;letter-spacing:0;margin:0} .pf-service-duration .pf-dur-card p strong{color:var(--ink-2);font-weight:700} .pf-service-duration .pf-dur-card p+p{margin-top:9px} .pf-service-duration .pf-dur-card ul{margin:10px 0 0;padding-left:17px;font-size:12.2px;color:#6D6478;line-height:1.68;letter-spacing:0} .pf-service-duration .pf-dur-card ul li{margin-bottom:5px} .pf-service-duration .pf-dur-card ul li::marker{color:#D6407A} .pf-service-duration .pf-dur-card ul li strong{color:var(--ink-2);font-weight:700} .pf-dur-closing{margin-top:28px;display:flex;align-items:center;gap:22px; padding:26px 32px;border-radius:22px;box-shadow:0 14px 32px -22px rgba(var(--c3r),.35); background:linear-gradient(100deg,rgba(var(--c1r),.11),rgba(var(--c3r),.12))} .pf-dur-closing .ic{width:46px;height:46px;border-radius:15px;flex:none;display:grid;place-items:center; font-size:21px;line-height:1;background:#FBE4EA;box-shadow:0 8px 16px -8px rgba(214,64,122,.35)} .pf-dur-closing .ic svg{width:23px;height:23px;fill:none;stroke:var(--key);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} .pf-service-duration .pf-dur-closing p{flex:1;font-size:12.5px;color:var(--ink-2);line-height:1.72;margin:0} .pf-service-duration .pf-dur-closing p strong{color:var(--ink);font-weight:800} .pf-dur-closing .spark{flex:none;color:var(--c2);display:inline-flex;align-items:center; animation:pfDurTwinkle 2.6s ease-in-out infinite} .pf-dur-closing .spark svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} @keyframes pfDurTwinkle{0%,100%{opacity:.5;transform:scale(1) rotate(0)}50%{opacity:1;transform:scale(1.18) rotate(12deg)}} @media(max-width:680px){.pf-dur-closing{flex-direction:column;align-items:flex-start;gap:16px}} @media(prefers-reduced-motion:reduce){ .pf-dur-card .ic{animation:none} .pf-dur-closing .spark{animation:none;opacity:.75} .pf-service-duration::before,.pf-service-duration::after{animation:none} } /* ========================================================================== 6. FAQ ========================================================================== */ .pf-faq{max-width:900px;margin:0 auto;display:grid;grid-template-columns:repeat(2,1fr); gap:12px;align-items:start} @media(max-width:860px){.pf-faq{grid-template-columns:1fr}} .pf-q{background:var(--paper);border:1px solid var(--line);border-radius:var(--r); overflow:hidden;transition:border-color .2s,box-shadow .2s} .pf-q[open]{border-color:var(--pf-line);box-shadow:0 10px 30px -22px rgba(var(--pfr),.5)} .pf-q summary{display:flex;align-items:center;justify-content:space-between;gap:14px; padding:17px 20px;cursor:pointer;font-size:14px;font-weight:700;line-height:1.5; letter-spacing:-.015em;list-style:none;transition:color .2s} .pf-q summary::-webkit-details-marker{display:none} .pf-q summary::marker{content:""} .pf-q summary:hover{color:var(--key)} .pf-q summary::after{content:"";flex:0 0 9px;width:9px;height:9px; border-right:2px solid var(--ink-4);border-bottom:2px solid var(--ink-4); transform:rotate(45deg) translateY(-2px);transition:transform .25s,border-color .2s} .pf-q[open] summary::after{transform:rotate(-135deg) translateY(-2px);border-color:var(--pf)} .pf-q .a{padding:0 20px 18px;font-size:var(--fs-md);color:var(--ink-3);line-height:1.78} /* ========================================================================== 7. 相关文章 ========================================================================== */ .pf-posts{display:grid;grid-template-columns:repeat(3,1fr);gap:20px} @media(max-width:900px){.pf-posts{grid-template-columns:repeat(2,1fr)}} @media(max-width:620px){.pf-posts{grid-template-columns:1fr}} .pf-post{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-l); overflow:hidden;box-shadow:var(--sh-1);display:flex;flex-direction:column; transition:transform .22s,box-shadow .22s,border-color .22s} .pf-post:hover{transform:translateY(-4px);box-shadow:var(--sh-2);border-color:var(--pf-line)} .pf-post img{width:100%;height:170px;object-fit:cover} .pf-post .bd{padding:18px 18px 16px;display:flex;flex-direction:column;flex:1} .pf-post h3{font-size:14px;font-weight:800;line-height:1.48;letter-spacing:-.015em;margin-bottom:8px} .pf-post p{font-size:12.5px;color:var(--ink-3);line-height:1.66;flex:1} .pf-post .mt{display:flex;align-items:center;justify-content:space-between;gap:10px; margin-top:14px;padding-top:12px;border-top:1px solid var(--line);font-size:12px;color:var(--ink-4)} .pf-post .au{display:inline-flex;align-items:center;gap:7px;min-width:0} .pf-post .au img{width:22px;height:22px;height:22px;border-radius:50%;object-fit:cover;flex:0 0 22px} /* ========================================================================== 8. 客户评价（横向滑动） ========================================================================== */ .pf-reviews{position:relative;overflow:hidden; background:linear-gradient(180deg,var(--page) 0%,#F7F3FC 54%,var(--page) 100%)} .pf-reviews::before{content:"";position:absolute;left:50%;top:118px;transform:translateX(-50%); width:min(980px,86vw);height:280px;border-radius:50%;pointer-events:none; background:radial-gradient(closest-side,rgba(var(--c3r),.12),transparent 72%)} .pf-reviews>.shell{position:relative;z-index:1} .pf-reviews .pf-hd{margin-bottom:34px} .pf-reviews .pf-hd .lead{font-size:13.5px;line-height:1.66;color:var(--ink-3)} .pf-reviews .pf-hd .lead a{display:inline-flex;align-items:center;gap:5px;color:var(--key);font-weight:700} .pf-rev-wrap{position:relative} .pf-rev{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(330px,360px);gap:22px; overflow-x:auto;scrollbar-width:none;padding:10px 2px 22px;scroll-snap-type:x mandatory} .pf-rev::-webkit-scrollbar{display:none} @media(max-width:1080px){.pf-rev{grid-auto-columns:minmax(310px,46%)}} @media(max-width:680px){.pf-rev{grid-auto-columns:minmax(282px,88%);gap:16px}} .pf-rev-card{position:relative;scroll-snap-align:start;background:linear-gradient(180deg,#fff 0%,#FFFDFF 100%); border:1px solid rgba(var(--inkr),.08);border-radius:24px;padding:22px 24px 18px; box-shadow:0 18px 46px -32px rgba(var(--inkr),.34);display:flex;flex-direction:column; min-height:336px;overflow:hidden;transition:transform .22s,box-shadow .22s,border-color .22s} .pf-rev-card::before{content:"";position:absolute;inset:0 0 auto;height:4px; background:var(--grad);opacity:0;transition:opacity .22s} .pf-rev-card::after{content:"“";position:absolute;right:20px;bottom:-36px; font-family:Georgia,serif;font-size:132px;line-height:1;color:rgba(var(--c3r),.055);pointer-events:none} .pf-rev-card:hover{transform:translateY(-5px);box-shadow:0 26px 58px -32px rgba(var(--c3r),.35); border-color:rgba(var(--c2r),.26)} .pf-rev-card:hover::before{opacity:1} .pf-rev-hd{position:relative;z-index:1;display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:12px} .pf-rev-user{display:flex;align-items:center;gap:12px;min-width:0;flex:1} .pf-rev-av{width:42px;height:42px;border-radius:50%;flex:0 0 42px;background:var(--grad); display:grid;place-items:center;color:#fff;font-weight:800;font-size:13px;letter-spacing:.02em; box-shadow:0 11px 20px -12px rgba(var(--c3r),.7)} .pf-rev-nm{font-size:14px;font-weight:800;letter-spacing:-.01em;color:var(--ink); overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:150px} .pf-rev-ct{font-size:12px;color:var(--ink-4);line-height:1.45;margin-top:2px} .pf-rev-pf{flex:0 0 auto;padding:5px 13px;border-radius:999px;background:#FFF5F6; border:1px solid rgba(255,0,0,.18);color:var(--pf);font-size:11.5px;font-weight:800;white-space:nowrap} .pf-rev-star{position:relative;z-index:1;display:flex;gap:3px;color:#F3A323;margin-bottom:11px} .pf-rev-star svg{width:14px;height:14px;fill:currentColor;flex:0 0 14px} .pf-rev-star .off{color:var(--line-2)} .pf-reviews .pf-rev-tx{position:relative;z-index:1;font-size:12.5px;color:#70677D; line-height:1.68;letter-spacing:0;margin:0;flex:1;display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden} .pf-rev-ft{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:10px; margin-top:14px;padding-top:12px;border-top:1px solid rgba(var(--inkr),.08);font-size:12px;color:var(--ink-4)} .pf-rev-like{display:inline-flex;align-items:center;gap:7px;background:none;border:0;cursor:pointer; color:var(--ink-4);font-size:12px;transition:color .2s} .pf-rev-like:hover,.pf-rev-like.on{color:#D6407A} .pf-rev-like svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8} .pf-rev-like.on svg{fill:currentColor} /* 左右滚动按钮：桌面可点，移动端隐藏（直接手滑） */ .pf-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:5; width:44px;height:44px;border-radius:50%;border:1px solid rgba(var(--inkr),.08); background:rgba(255,255,255,.92);color:var(--ink-2);cursor:pointer; display:grid;place-items:center;box-shadow:0 14px 30px -18px rgba(var(--inkr),.35); backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px); transition:color .2s,border-color .2s,opacity .2s,box-shadow .2s,transform .2s} .pf-arrow:hover{color:var(--pf);border-color:rgba(255,0,0,.18);box-shadow:0 20px 38px -20px rgba(var(--c3r),.35)} .pf-arrow:disabled{opacity:.34;cursor:default} .pf-arrow:disabled:hover{color:var(--ink-2);border-color:rgba(var(--inkr),.08);box-shadow:0 14px 30px -18px rgba(var(--inkr),.35)} .pf-arrow svg{width:16px;height:16px;fill:currentColor} .pf-arrow.prev{left:-22px;transform:translateY(-50%) rotate(180deg)} .pf-arrow.next{right:-22px} @media(max-width:1260px){.pf-arrow.prev{left:8px}.pf-arrow.next{right:8px}} @media(max-width:680px){.pf-arrow{display:none}.pf-rev-card{min-height:auto;padding:20px 20px 17px}} /* ========================================================================== 9. 底部 CTA ========================================================================== */ .pf-final{position:relative;display:flex;flex-direction:column;align-items:center;padding:58px 40px;border-radius:var(--r-xl); background:linear-gradient(100deg,#EA7A8A 0%,#BE68C4 48%,#9356FD 100%); background-size:180% 180%;color:#fff;text-align:center;overflow:hidden;box-shadow:var(--sh-3); animation:pfFinalGradient 7s ease-in-out infinite} .pf-final::before{content:"";position:absolute;top:-170px;right:-95px;width:470px;height:470px; border-radius:50%;background:rgba(255,255,255,.15);animation:pfFinalOrb 6s ease-in-out infinite} .pf-final::after{content:"";position:absolute;bottom:-180px;left:-80px;width:380px;height:380px; border-radius:50%;background:rgba(255,255,255,.1);animation:pfFinalOrb 7.5s ease-in-out -1.2s infinite} .pf-final .bgico{position:absolute;right:44px;top:50%;transform:translateY(-50%); width:210px;height:210px;fill:currentColor;opacity:.13;pointer-events:none; animation:pfFinalIcon 5.5s ease-in-out infinite} .pf-final > *{position:relative;z-index:2} .pf-final h2{font-size:var(--fs-cta-title);font-weight:800;letter-spacing:-.03em;line-height:1.3; color:#fff;text-shadow:0 2px 18px rgba(36,26,51,.22)} .pf-final p{width:100%;margin-top:14px;font-size:14.5px;color:rgba(255,255,255,.92); max-width:640px;margin-inline:auto;line-height:1.85;text-align:center;text-wrap:balance;text-shadow:0 1px 12px rgba(36,26,51,.16)} .pf-final .btn{margin-top:26px;background:#fff;box-shadow:0 16px 36px -14px rgba(0,0,0,.45); animation:pfFinalBtn 2.8s ease-in-out infinite} .pf-final .btn,.pf-final .btn:visited,.pf-final .btn:hover, .pf-final .btn:focus{color:var(--key) !important} .pf-final .btn:hover{transform:translateY(-3px);box-shadow:0 22px 46px -14px rgba(0,0,0,.55)} @keyframes pfFinalGradient{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}} @keyframes pfFinalOrb{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-24px,18px) scale(1.08)}} @keyframes pfFinalIcon{0%,100%{transform:translateY(-50%) scale(1);opacity:.11}50%{transform:translateY(-50%) scale(1.08);opacity:.2}} @keyframes pfFinalBtn{0%,100%{box-shadow:0 16px 36px -14px rgba(0,0,0,.45)}50%{box-shadow:0 22px 46px -12px rgba(255,255,255,.28),0 18px 42px -16px rgba(0,0,0,.48)}} @media(max-width:680px){.pf-final{padding:42px 22px;border-radius:22px} .pf-final .bgico{display:none}} @media(prefers-reduced-motion:reduce){.pf-final,.pf-final::before,.pf-final::after,.pf-final .bgico,.pf-final .btn{animation:none}} /* ========================================================================== 无障碍与交互细节 ========================================================================== */ .pf a:focus-visible,.pf button:focus-visible,.pf summary:focus-visible{ outline:2px solid var(--key);outline-offset:3px;border-radius:8px} /* 尊重系统的"减弱动效"设置 */ @media(prefers-reduced-motion:reduce){ .pf *,.pf *::before,.pf *::after{animation-duration:.01ms !important; animation-iteration-count:1 !important;transition-duration:.01ms !important; scroll-behavior:auto !important} .pf-card:hover,.pf-post:hover,.pf-rev-card:hover{transform:none} } /* 触屏设备去掉 hover 位移，避免点一下卡住 */ @media(hover:none){ .pf-card:hover,.pf-post:hover,.pf-rev-card:hover{transform:none} .pf .btn-key:hover{transform:none} } .pf ::selection{background:rgba(var(--c2r),.22);color:var(--ink)} /* 首页同款斜切滚动横条 */ .pf-banner{position:relative;z-index:3;margin:-10px 0 18px;padding:15px 0; background:var(--grad);color:#fff;overflow:hidden;transform:rotate(-1.4deg); box-shadow:0 18px 44px -32px rgba(var(--c3r),.62)} .pf-banner-track{display:flex;width:max-content;min-width:100%;animation:pfBannerMarch 36s linear infinite} .pf-banner-track span{display:inline-flex;align-items:center;gap:14px;padding:0 24px; font-size:14px;font-weight:800;white-space:nowrap;color:#fff;text-shadow:0 1px 14px rgba(36,26,51,.16)} .pf-banner-track i{width:5px;height:5px;border-radius:50%;background:currentColor;opacity:.5;font-style:normal;flex:0 0 5px} @keyframes pfBannerMarch{to{transform:translateX(-25%)}} @media(max-width:720px){.pf-banner{margin:0 0 10px;padding:12px 0;transform:rotate(-1.2deg)} .pf-banner-track span{font-size:12px;gap:11px;padding:0 16px}} .pf-scrollbar{position:fixed;top:0;left:0;z-index:200;width:0;height:3px; background:var(--grad);box-shadow:0 0 18px rgba(var(--c2r),.48);transition:width .1s linear}