/* ============================================================ Shopify Integration (/shopify-integration => View/toonies/Index/shopify_integration.html) 261030++ 由设计稿 assets/sfy.css 迁入(第二版:新增视频教程 + 灯箱);前缀 sfy-, 与 dist.css(da-*) / pages.css(.crumb) 搭配。 与设计稿的差异只有两处,都在文件末尾: a) 截图框(.guide-shot)样式原在设计稿的 help.css 里,站内没有这份文件,这里自带一份, 避免为了三个框再引一份会波及其它选择器的整页样式; b) 新增 .sfy-m*「界面小样」,用于截图未就位时占位(替代设计稿的文字占位块)。 ============================================================ */ .sfy-wrap{overflow:hidden} .sfy-wrap .container{max-width:1180px} :root{--sfy-green:#5e8e3e;--sfy-green2:#95bf47} /* ============================================================ 1. HERO ============================================================ */ .sfy-hero{position:relative;color:#fff;isolation:isolate; background:linear-gradient(158deg,#0d1420 0%,#10231a 48%,#0b1017 100%)} .sfy-hero::before{content:"";position:absolute;inset:-20% -10% 0;z-index:-2; background:radial-gradient(560px 400px at 84% 2%,rgba(149,191,71,.5),transparent 60%), radial-gradient(520px 380px at 6% 100%,rgba(185,31,66,.4),transparent 62%); filter:blur(6px);animation:sfyAur 15s ease-in-out infinite alternate} @keyframes sfyAur{0%{transform:translate3d(0,0,0)}100%{transform:translate3d(3%,-2%,0) scale(1.05)}} .sfy-hero::after{content:"";position:absolute;inset:0;z-index:-1;opacity:.5; background-image:radial-gradient(circle at 1px 1px,rgba(255,255,255,.15) 1px,transparent 0); background-size:26px 26px;-webkit-mask-image:linear-gradient(180deg,#000,transparent 84%); mask-image:linear-gradient(180deg,#000,transparent 84%)} .sfy-hero-inner{position:relative;padding:74px 0 86px;display:grid;grid-template-columns:1.08fr .92fr;gap:44px;align-items:center} .sfy-hero .da-eyebrow{color:#dcf0bd;background:rgba(149,191,71,.18)} .sfy-hero h1{font-size:clamp(2.1rem,4.4vw,3.4rem);font-weight:800;line-height:1.08;letter-spacing:-.03em;margin:20px 0 16px;color:#fff} .sfy-hero h1 em{font-style:normal;background:linear-gradient(90deg,#b5e06a,#ffd0a3);-webkit-background-clip:text; background-clip:text;-webkit-text-fill-color:transparent} .sfy-hero .lead{font-size:1.12rem;line-height:1.7;color:rgba(255,255,255,.82);max-width:520px;margin:0 0 26px} .sfy-hero-cta{display:flex;flex-wrap:wrap;gap:12px} .sfy-hero-cta .da-btn.primary{background:var(--sfy-green2);color:#0b2010} .sfy-hero-cta .da-btn.ghost{color:#fff;border-color:rgba(255,255,255,.28);background:rgba(255,255,255,.07)} .sfy-hero-cta .da-btn.ghost:hover{background:rgba(255,255,255,.14)} .sfy-hero-meta{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:26px;color:rgba(255,255,255,.72);font-size:.9rem;font-weight:500} .sfy-hero-meta span{display:inline-flex;align-items:center;gap:7px} .sfy-hero-meta i{color:var(--sfy-green2)} /* hero flow diagram */ .sfy-flowd{position:relative;display:flex;align-items:center;justify-content:center;gap:0} .sfy-node{width:118px;height:118px;border-radius:24px;background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.16);backdrop-filter:blur(10px);display:flex;flex-direction:column; align-items:center;justify-content:center;gap:8px;text-align:center;box-shadow:0 20px 50px rgba(0,0,0,.35); animation:sfyFloat 6s ease-in-out infinite} .sfy-node:nth-child(3){animation-delay:.9s} .sfy-node:nth-child(5){animation-delay:1.8s} @keyframes sfyFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}} .sfy-node i{font-size:1.9rem} .sfy-node.shop i{color:var(--sfy-green2)} .sfy-node.api i{color:#7aa2ff} .sfy-node.fac i{color:#ff9db6} .sfy-node b{font-size:.78rem;font-weight:700;color:#fff} .sfy-node span{font-size:.68rem;color:rgba(255,255,255,.6)} .sfy-arrow{flex:1;min-width:26px;height:2px;position:relative; background:repeating-linear-gradient(90deg,rgba(255,255,255,.45) 0 7px,transparent 7px 14px)} .sfy-arrow i{position:absolute;right:-4px;top:-9px;color:rgba(255,255,255,.6);font-size:1rem} .sfy-arrow .dot{position:absolute;top:-4px;left:0;width:9px;height:9px;border-radius:50%;background:var(--sfy-green2); box-shadow:0 0 12px var(--sfy-green2);animation:sfyRun 3s linear infinite} @keyframes sfyRun{0%{left:0}100%{left:100%}} /* ============================================================ 2. PHASES (Connect / Import / Fulfil) ============================================================ */ .sfy-phases{display:grid;grid-template-columns:repeat(3,1fr);gap:22px} .sfy-phase{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:28px 26px; transition:transform .2s ease,box-shadow .2s ease} .sfy-phase:hover{transform:translateY(-6px);box-shadow:0 22px 46px rgba(20,32,43,.1)} .sfy-phase .pn{position:absolute;top:22px;right:24px;font-size:2.4rem;font-weight:800;color:var(--bg-soft,#eef2f6);line-height:1} .sfy-phase .ic{width:54px;height:54px;border-radius:15px;display:grid;place-items:center;font-size:1.5rem;color:#fff;margin-bottom:16px} .sfy-phase:nth-child(1) .ic{background:linear-gradient(135deg,var(--sfy-green),var(--sfy-green2))} .sfy-phase:nth-child(2) .ic{background:linear-gradient(135deg,#2e6cf6,#5b8dff)} .sfy-phase:nth-child(3) .ic{background:linear-gradient(135deg,var(--brand),var(--brand-dark))} .sfy-phase h3{font-size:1.16rem;font-weight:700;color:var(--ink);margin:0 0 8px} .sfy-phase p{font-size:.94rem;color:var(--muted);line-height:1.6;margin:0} /* ============================================================ 3. GUIDE (reuses help.css guide-step / guide-shot) ============================================================ */ .sfy-guide{max-width:900px;margin:0 auto} .sfy-stage{display:flex;align-items:center;gap:14px;margin:6px 0 20px} .sfy-stage .b{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;font-size:1.1rem;color:#fff;flex-shrink:0} .sfy-stage.s1 .b{background:linear-gradient(135deg,var(--sfy-green),var(--sfy-green2))} .sfy-stage.s2 .b{background:linear-gradient(135deg,#2e6cf6,#5b8dff)} .sfy-stage.s3 .b{background:linear-gradient(135deg,var(--brand),var(--brand-dark))} .sfy-stage h2{font-size:1.3rem;font-weight:800;color:var(--ink);margin:0;letter-spacing:-.01em} .sfy-stage span{font-size:.82rem;color:var(--muted)} .sfy-stage .line{flex:1;height:1px;background:var(--line)} /* ============================================================ 3b. SETUP STEPPER (text, no screenshots) ============================================================ */ .sfy-setup{display:grid;grid-template-columns:1fr 1fr;gap:26px;align-items:start} @media(max-width:991px){.sfy-setup{grid-template-columns:1fr}} .sfy-steps{position:relative;padding-left:6px} .sfy-gh{display:flex;align-items:center;gap:11px;margin:4px 0 12px} .sfy-gh .b{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;font-size:.95rem;color:#fff;flex-shrink:0} .sfy-gh.s1 .b{background:linear-gradient(135deg,var(--sfy-green),var(--sfy-green2))} .sfy-gh.s2 .b{background:linear-gradient(135deg,#2e6cf6,#5b8dff)} .sfy-gh.s3 .b{background:linear-gradient(135deg,var(--brand),var(--brand-dark))} .sfy-gh h3{font-size:1.02rem;font-weight:800;color:var(--ink);margin:0} .sfy-gh span{font-size:.76rem;color:var(--muted)} .sfy-ol{list-style:none;counter-reset:s;margin:0 0 22px;padding:0 0 0 6px;border-left:2px solid var(--line)} .sfy-ol li{counter-increment:s;position:relative;padding:0 0 16px 28px;font-size:.92rem;color:var(--body);line-height:1.55} .sfy-ol li::before{content:counter(s);position:absolute;left:-15px;top:-2px;width:26px;height:26px;border-radius:50%; background:#fff;border:2px solid var(--brand-soft);color:var(--brand);font-size:.76rem;font-weight:800; display:grid;place-items:center} .sfy-ol li:last-child{padding-bottom:4px} .sfy-ol li b{color:var(--ink)} .sfy-ol li .kbd{font-family:Consolas,monospace;font-size:.84em;background:var(--bg-soft,#f5f7fa);border:1px solid var(--line); border-radius:5px;padding:1px 6px;color:var(--ink)} /* "under the hood" explainer cards (fill the left column intelligently) */ .sfy-exp{background:#fff;border:1px solid var(--line);border-radius:13px;padding:16px 18px;margin-bottom:12px; border-left:3px solid var(--brand)} .sfy-exp h4{display:flex;align-items:center;gap:9px;font-size:.95rem;font-weight:800;color:var(--ink);margin:0 0 6px} .sfy-exp h4 i{color:var(--brand)} .sfy-exp p{margin:0;font-size:.88rem;color:var(--muted);line-height:1.6} .sfy-exp p b{color:var(--ink)} .sfy-eps{margin-top:14px} .sfy-eps .l{display:block;font-size:.72rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:9px} .sfy-eps code{display:inline-block;font-family:Consolas,monospace;font-size:.78rem;color:var(--brand); background:var(--brand-soft,#fbecef);border:1px solid rgba(185,31,66,.18);border-radius:7px;padding:5px 10px;margin:0 7px 7px 0} /* code window */ .sfy-codecol{position:sticky;top:86px} @media(max-width:991px){.sfy-codecol{position:static}} .sfy-win{background:#0c1220;border:1px solid rgba(255,255,255,.1);border-radius:14px;overflow:hidden; box-shadow:0 24px 54px rgba(0,0,0,.22);margin-bottom:16px;font-family:"SFMono-Regular",Consolas,Menlo,monospace} .sfy-win-bar{display:flex;align-items:center;gap:7px;padding:11px 14px;background:#131b2c;border-bottom:1px solid rgba(255,255,255,.08)} .sfy-win-bar .d{width:10px;height:10px;border-radius:50%} .sfy-win-bar .d.r{background:#ff5f57}.sfy-win-bar .d.y{background:#febc2e}.sfy-win-bar .d.g{background:#28c840} .sfy-win-bar .fn{margin-left:7px;font-size:.76rem;color:rgba(255,255,255,.52)} .sfy-win-bar .tagr{margin-left:auto;font-size:.68rem;color:#9ae6b4;background:rgba(18,183,106,.14); border:1px solid rgba(18,183,106,.3);border-radius:999px;padding:3px 9px} .sfy-code{margin:0;padding:16px 18px;font-size:.8rem;line-height:1.7;color:#c8d3e6;white-space:pre;overflow-x:auto} .sfy-code .c{color:#5b6b86}.sfy-code .k{color:#ff9db6}.sfy-code .s{color:#9ae6b4}.sfy-code .n{color:#f7c873} .sfy-code .p{color:#7aa2ff}.sfy-code .fn{color:#8be9fd}.sfy-code .m{color:#e8eef7;font-weight:700} /* ============================================================ 4. CAPABILITIES (reuses da-grid/da-adv) + SYNC LOOP ============================================================ */ .sfy-loop{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center; background:var(--bg-soft,#f5f7fa);border-radius:var(--radius-lg);padding:38px} .sfy-loop h2{font-size:clamp(1.5rem,2.6vw,2.1rem);font-weight:800;letter-spacing:-.02em;color:var(--ink);margin:0 0 12px} .sfy-loop p{color:var(--muted);line-height:1.7;margin:0 0 18px} .sfy-loop ul{list-style:none;padding:0;margin:0} .sfy-loop li{display:flex;gap:10px;align-items:flex-start;font-size:.95rem;color:var(--body);padding:7px 0} .sfy-loop li i{color:var(--sfy-green);margin-top:2px} .sfy-hub{position:relative;width:100%;max-width:340px;aspect-ratio:1;margin:0 auto} @keyframes sfySpin{to{transform:rotate(360deg)}} .sfy-hub .ring{position:absolute;inset:16%;border:2px dashed var(--line);border-radius:50%;animation:sfySpin 22s linear infinite} .sfy-hub .ring::before{content:"";position:absolute;top:-6px;left:50%;transform:translateX(-50%);width:10px;height:10px; border-radius:50%;background:var(--brand);box-shadow:0 0 12px rgba(185,31,66,.6)} .sfy-hub .hub{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:104px;height:104px;border-radius:50%; background:linear-gradient(135deg,var(--brand),var(--brand-dark));color:#fff;display:flex;flex-direction:column; align-items:center;justify-content:center;text-align:center;box-shadow:0 18px 36px rgba(185,31,66,.32);z-index:3} .sfy-hub .hub i{font-size:1.5rem;animation:sfySpin 6s linear infinite} .sfy-hub .hub b{font-size:.82rem;font-weight:800;margin-top:3px;line-height:1} .sfy-hub .hub em{font-style:normal;font-size:.66rem;opacity:.85} .sfy-hub .node{position:absolute;display:flex;flex-direction:column;align-items:center;gap:3px;background:#fff; border:1px solid var(--line);border-radius:12px;padding:9px 11px;box-shadow:0 10px 22px rgba(20,32,43,.1);z-index:2;min-width:84px; transition:transform .2s ease,box-shadow .2s ease} .sfy-hub .node:hover{transform:scale(1.06);box-shadow:0 14px 28px rgba(20,32,43,.16)} .sfy-hub .node i{font-size:1.1rem} .sfy-hub .node em{font-style:normal;font-size:.72rem;font-weight:700;color:var(--ink)} .sfy-hub .node.n{top:0;left:50%;transform:translate(-50%,0)}.sfy-hub .node.n i{color:var(--sfy-green)} .sfy-hub .node.e{right:0;top:50%;transform:translate(0,-50%)}.sfy-hub .node.e i{color:#2e6cf6} .sfy-hub .node.s{bottom:0;left:50%;transform:translate(-50%,0)}.sfy-hub .node.s i{color:var(--brand)} .sfy-hub .node.w{left:0;top:50%;transform:translate(0,-50%)}.sfy-hub .node.w i{color:#f5a623} .sfy-hub .node.n:hover{transform:translate(-50%,0) scale(1.06)} .sfy-hub .node.s:hover{transform:translate(-50%,0) scale(1.06)} .sfy-hub .node.e:hover{transform:translate(0,-50%) scale(1.06)} .sfy-hub .node.w:hover{transform:translate(0,-50%) scale(1.06)} @media(max-width:767px){.sfy-loop{grid-template-columns:1fr;gap:30px}.sfy-hub{max-width:300px}} /* scroll reveal */ .reveal{opacity:0;transform:translateY(22px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)} .reveal.in{opacity:1;transform:none} .reveal.d1{transition-delay:.08s}.reveal.d2{transition-delay:.16s}.reveal.d3{transition-delay:.24s} @media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}} /* ============================================================ 4b. PROFIT CALCULATOR (interactive) ============================================================ */ .sfy-calc{position:relative;overflow:hidden;border-radius:var(--radius-lg);color:#fff; background:radial-gradient(700px 400px at 85% -10%,rgba(149,191,71,.28),transparent 60%), linear-gradient(160deg,#0f1720,#141f2c)} .sfy-calc::before{content:"";position:absolute;inset:0;opacity:.3; background-image:radial-gradient(circle at 1px 1px,rgba(255,255,255,.1) 1px,transparent 0);background-size:26px 26px; -webkit-mask-image:linear-gradient(90deg,transparent,#000);mask-image:linear-gradient(90deg,transparent,#000)} .sfy-calc-in{position:relative;display:grid;grid-template-columns:1fr .9fr;gap:40px;padding:38px 40px} @media(max-width:850px){.sfy-calc-in{grid-template-columns:1fr;gap:28px;padding:30px 24px}} /* color:#fff 必须显式写:全局 style.css 的 h1-h6{color:var(--ink)} 会盖掉 .sfy-calc 的继承色, 深色卡片上的标题否则会变成近黑字,几乎看不见 */ .sfy-calc h2{font-size:clamp(1.5rem,2.6vw,2rem);font-weight:800;letter-spacing:-.02em;margin:0 0 8px;color:#fff} .sfy-calc .sub{color:rgba(255,255,255,.72);font-size:.96rem;line-height:1.6;margin:0 0 22px} .sfy-ctrl{margin-bottom:20px} .sfy-ctrl .top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:9px} .sfy-ctrl label{font-size:.9rem;font-weight:600;color:rgba(255,255,255,.88)} .sfy-ctrl .val{font-size:1.1rem;font-weight:800;color:#b5e06a} .sfy-range{-webkit-appearance:none;appearance:none;width:100%;height:7px;border-radius:999px;outline:none; background:rgba(255,255,255,.16)} .sfy-range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:22px;height:22px;border-radius:50%; background:#fff;border:4px solid var(--brand);cursor:pointer;box-shadow:0 4px 12px rgba(0,0,0,.35)} .sfy-range::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:#fff;border:4px solid var(--brand);cursor:pointer} /* result card */ .sfy-result{background:#fff;border-radius:16px;padding:26px;color:var(--ink);box-shadow:0 26px 54px rgba(0,0,0,.3); display:flex;flex-direction:column;justify-content:center} .sfy-result .big-l{font-size:.78rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)} .sfy-result .big{font-size:clamp(2.2rem,5vw,3rem);font-weight:800;letter-spacing:-.03em;color:var(--brand);line-height:1;margin:4px 0 2px} .sfy-result .big small{font-size:1rem;font-weight:700;color:var(--muted)} .sfy-result .per{font-size:.85rem;color:var(--muted);margin-bottom:18px} .sfy-split{height:14px;border-radius:999px;overflow:hidden;display:flex;background:var(--bg-soft,#f5f7fa);margin-bottom:8px} .sfy-split .cost{background:#cbd5e1;height:100%} .sfy-split .profit{background:linear-gradient(90deg,var(--sfy-green),var(--sfy-green2));height:100%;transition:width .35s ease} .sfy-split-key{display:flex;justify-content:space-between;font-size:.78rem;color:var(--muted)} .sfy-split-key b{color:var(--ink)} .sfy-rrow{display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-top:1px dashed var(--line);font-size:.9rem} .sfy-rrow:first-of-type{border-top:0} .sfy-rrow span{color:var(--body)}.sfy-rrow b{font-weight:800;color:var(--ink)} .sfy-rrow b.g{color:var(--sfy-green)} .sfy-calc-note{position:relative;font-size:.78rem;color:rgba(255,255,255,.55);margin:16px 0 0} /* ============================================================ 5. FUNDS NOTE ============================================================ */ .sfy-fund{display:flex;gap:14px;align-items:flex-start;max-width:900px;margin:0 auto; background:rgba(245,166,35,.09);border:1px solid rgba(245,166,35,.35);border-left:4px solid #f5a623; border-radius:14px;padding:18px 22px} .sfy-fund i{color:#b9740a;font-size:1.4rem;margin-top:1px;flex-shrink:0} .sfy-fund b{color:var(--ink)} .sfy-fund p{margin:4px 0 0;color:var(--muted);font-size:.92rem;line-height:1.6} /* ============================================================ RESPONSIVE ============================================================ */ @media(max-width:991px){ .sfy-hero-inner{grid-template-columns:1fr;gap:30px;padding:54px 0 70px} .sfy-flowd{margin-top:6px} .sfy-phases{grid-template-columns:1fr;max-width:460px;margin:0 auto} } @media(max-width:575px){ .sfy-node{width:92px;height:92px;border-radius:18px} .sfy-node i{font-size:1.5rem} } /* screenshot column (replaces code windows) */ .sfy-shots .guide-shot{margin:0 0 16px} .sfy-shots .guide-shot:last-child{margin-bottom:0} /* 261030++ 有真封面时(给 .sfy-video 加 .has-poster): 设计稿的封面是 picsum 随机图,所以要整块压到 .42 才不抢标题;换成真截图后正常显示, 只留底部渐变保证标题/副标题可读。object-fit:contain 是为了不把后台截图裁掉边角。 */ .sfy-video.has-poster img{opacity:1;object-fit:contain;background:#0b1219} .sfy-video.has-poster .veil{background:linear-gradient(180deg,rgba(8,12,18,.10) 0%,rgba(8,12,18,.16) 40%,rgba(8,12,18,.86) 100%)} /* 261030++ 播放框暂不接视频时加 .is-idle:保持设计稿的静态外观,但不要装成可点的控件 */ .sfy-video.is-idle{cursor:default} .sfy-video.is-idle:hover .sfy-play{transform:translate(-50%,-50%)} /* 播放键那两圈脉冲也停掉:一直闪的按钮会让人以为点得动 */ .sfy-video.is-idle .sfy-play::before,.sfy-video.is-idle .sfy-play::after{animation:none} /* 灯箱里的