Gradient Footer Panel

.x-gfp{--ink:#1C1C1A;--mut:#5F5F5B;--line:#E9E7E1;--cream:#FCFBF8;--card:#F5F4EF;--blue:#4C7DFF;--pink:#FF66CC;--red:#FF2E63;--org:#FF7A1A;font-family:"Inter","Noto Sans SC","PingFang SC","Microsoft YaHei",system-ui,sans-serif;-webkit-font-smoothing:antialiased;text-align:left;color:var(--ink)}.x-gfp,.x-gfp *{box-sizing:border-box}.x-gfp a{color:inherit;text-decoration:none}.x-gfp button{font:inherit;cursor:pointer;color:inherit}.x-gfp img{display:block;max-width:100%}.x-gfp .cmp{position:relative;width:100%;max-width:720px;margin:0 auto;background:rgba(255,255,255,.96);border-radius:28px;padding:16px 14px 12px 20px;box-shadow:0 1px 0 rgba(255,255,255,.8) inset,0 24px 60px -24px rgba(40,20,80,.35),0 0 0 1px rgba(20,20,20,.05);text-align:left;transition:box-shadow .3s}.x-gfp .cmp:focus-within{box-shadow:0 0 0 4px rgba(76,125,255,.18),0 24px 60px -24px rgba(40,20,80,.35)}.x-gfp .cmp-f{position:relative}.x-gfp .cmp textarea{width:100%;border:0;outline:0;resize:none;background:transparent;font:inherit;font-size:16px;line-height:1.5;color:var(--ink);padding:0;min-height:48px}.x-gfp .cmp-ph{position:absolute;left:0;top:0;font-size:16px;line-height:1.5;color:#8A8A85;pointer-events:none;white-space:nowrap;overflow:hidden;max-width:100%}.x-gfp .cmp-ph b{font-weight:400}.x-gfp .cmp-c{display:inline-block;width:1.5px;height:17px;background:#8A8A85;vertical-align:-3px;margin-left:1px;animation:cmpB 1s steps(1) infinite}.x-gfp .cmp.has .cmp-ph{opacity:0}@keyframes cmpB{50%{opacity:0}}.x-gfp .cmp-bar{display:flex;align-items:center;gap:6px;margin-top:4px}.x-gfp .cmp-sp{flex:1}.x-gfp .cmp-add{width:30px;height:30px;border-radius:50%;border:1px solid var(--line);background:#fff;display:grid;place-items:center;color:#6B6B66;transition:background .2s}.x-gfp .cmp-add:hover{background:var(--card)}.x-gfp .cmp-mode{position:relative}.x-gfp .cmp-mb{display:flex;align-items:center;gap:4px;height:30px;padding:0 10px;border:0;background:transparent;border-radius:10px;font-size:13px;color:#5F5F5B}.x-gfp .cmp-mb:hover{background:var(--card)}.x-gfp .cmp-mb svg{transition:transform .2s}.x-gfp .cmp-mode.open .cmp-mb svg{transform:rotate(180deg)}.x-gfp .cmp-menu{position:absolute;right:0;top:36px;z-index:5;min-width:120px;background:#fff;border-radius:12px;padding:6px;box-shadow:0 12px 32px -8px rgba(0,0,0,.2),0 0 0 1px rgba(0,0,0,.05);opacity:0;transform:translateY(-4px);pointer-events:none;transition:.18s}.x-gfp .cmp-mode.open .cmp-menu{opacity:1;transform:none;pointer-events:auto}.x-gfp .cmp-menu button{display:block;width:100%;text-align:left;border:0;background:transparent;padding:7px 10px;border-radius:8px;font-size:13px}.x-gfp .cmp-menu button:hover{background:var(--card)}.x-gfp .cmp-menu button.on{font-weight:600}.x-gfp .cmp-mic{width:30px;height:30px;border:0;background:transparent;border-radius:50%;display:grid;place-items:center;color:#6B6B66}.x-gfp .cmp-mic:hover{background:var(--card)}.x-gfp .cmp-mic.rec{color:var(--red);animation:cmpP 1.2s infinite}@keyframes cmpP{50%{box-shadow:0 0 0 6px rgba(255,46,99,.15)}}.x-gfp .cmp-go{width:30px;height:30px;border:0;border-radius:50%;background:#1C1C1A;color:#fff;display:grid;place-items:center;opacity:.25;transition:opacity .2s,transform .2s}.x-gfp .cmp.has .cmp-go{opacity:1}.x-gfp .cmp.sent .cmp-go{transform:translateY(-3px)}.x-gfp .lg{display:inline-block;width:30px;height:30px;flex:none}.x-gfp .lg svg{width:100%;height:100%;display:block}.x-gfp{position:relative;width:100%;padding:70px 32px 32px;overflow:hidden;isolation:isolate;background:var(--cream)}.x-gfp .gfp-bg{position:absolute;inset:0;z-index:-1;background:radial-gradient(130% 60% at 50% 34%,#FCFBF8 30%,rgba(252,251,248,0) 55%),linear-gradient(180deg,#FCFBF8 0%,#B9C8FF 26%,#5B7CFF 38%,#FF66CC 60%,#FF2E63 80%,#FF7A1A 100%);background-size:100% 100%;animation:gfpS 14s ease-in-out infinite alternate}@keyframes gfpS{to{filter:hue-rotate(-12deg) saturate(1.1)}}.x-gfp .gfp-cta{text-align:center;max-width:620px;margin:0 auto 64px}.x-gfp .gfp-cta small{display:block;font-size:14px;color:#6B6B66;margin-bottom:8px}.x-gfp h2{margin:0 0 26px;font-size:clamp(26px,3vw,34px);font-weight:600;letter-spacing:-.03em}.x-gfp .cmp{max-width:580px;border-radius:22px}.x-gfp .gfp-card{display:grid;grid-template-columns:1.1fr repeat(5,1fr);gap:24px;max-width:1280px;margin:0 auto;padding:30px 30px 26px;background:#F6F4EE;border-radius:18px;box-shadow:0 30px 60px -30px rgba(0,0,0,.25)}.x-gfp .gfp-l{display:flex;flex-direction:column;justify-content:space-between;gap:20px}.x-gfp nav b{display:block;font-size:13px;font-weight:600;margin-bottom:14px}.x-gfp nav a{display:block;font-size:13px;color:#6B6B66;margin-bottom:9px;transition:color .2s}.x-gfp nav a:hover{color:#1C1C1A}.x-gfp .gfp-lang{position:relative;align-self:flex-start}.x-gfp .gfp-lb{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 10px;border-radius:9px;border:0;background:#fff;box-shadow:0 0 0 1px var(--line);font-size:12px}.x-gfp .gfp-lm{position:absolute;left:0;bottom:36px;min-width:130px;background:#fff;border-radius:10px;padding:5px;box-shadow:0 12px 30px -8px rgba(0,0,0,.2),0 0 0 1px rgba(0,0,0,.05);opacity:0;transform:translateY(4px);pointer-events:none;transition:.18s}.x-gfp .gfp-lang.open .gfp-lm{opacity:1;transform:none;pointer-events:auto}.x-gfp .gfp-lm button{display:block;width:100%;text-align:left;border:0;background:transparent;padding:6px 10px;border-radius:7px;font-size:12px}.x-gfp .gfp-lm button:hover{background:var(--card)}.x-gfp .gfp-lm button.on{font-weight:600}@media (max-width:900px){.x-gfp{padding:56px 14px 14px}.x-gfp .gfp-card{grid-template-columns:repeat(2,1fr);padding:24px 20px}.x-gfp .gfp-l{grid-column:1/-1;flex-direction:row;align-items:center}}@media (prefers-reduced-motion:reduce){.x-gfp *,.x-gfp *::before,.x-gfp *::after{animation:none!important;transition:none!important}}.x-gfp{width:1200px;max-width:100%;box-sizing:border-box}

(root) => {const cl=[];const cmpInit=(f,list,cl)=>{if(!f)return;const ta=f.querySelector('textarea'),t=f.querySelector('.cmp-t'),md=f.querySelector('.cmp-mode'),mb=f.querySelector('.cmp-mb'),mic=f.querySelector('.cmp-mic');let li=0,ci=list[0].length,del=false,tm;
const red=matchMedia('(prefers-reduced-motion: reduce)').matches;
const tick=()=>{const w=list[li];if(red){t.textContent=w;return}if(!del){if(ci>=w.length){t.textContent=w;del=true;tm=setTimeout(tick,2200);return}ci++;t.textContent=w.slice(0,ci);if(ci>=w.length){del=true;tm=setTimeout(tick,1600);return}}else{ci--;t.textContent=w.slice(0,ci);if(ci<=0){del=false;li=(li+1)%list.length}}tm=setTimeout(tick,del?35:85)};tick();
const upd=()=>f.classList.toggle('has',ta.value.trim().length>0);ta.addEventListener('input',upd);
const tog=e=>{e.stopPropagation();md.classList.toggle('open')};mb.addEventListener('click',tog);
const pick=e=>{const b=e.target.closest('.cmp-menu button');if(!b)return;md.querySelectorAll('.cmp-menu button').forEach(x=>x.classList.toggle('on',x===b));mb.querySelector('span').textContent=b.textContent;md.classList.remove('open')};md.addEventListener('click',pick);
const out=()=>md.classList.remove('open');document.addEventListener('click',out);
const mc=()=>mic.classList.toggle('rec');mic.addEventListener('click',mc);
const sub=e=>{e.preventDefault();f.classList.add('sent');setTimeout(()=>{f.classList.remove('sent');ta.value='';upd()},500)};f.addEventListener('submit',sub);
cl.push(()=>{clearTimeout(tm);document.removeEventListener('click',out)})};cmpInit(root.querySelector('.cmp'),["一个读书会报名页…","一家咖啡馆的会员系统…","团队周报自动汇总工具…"],cl);
const lg=root.querySelector('.gfp-lang'),lb=root.querySelector('.gfp-lb');const t=e=>{e.stopPropagation();lg.classList.toggle('open')};lb.addEventListener('click',t);
const p=e=>{const b=e.target.closest('.gfp-lm button');if(!b)return;lg.querySelectorAll('.gfp-lm button').forEach(x=>x.classList.toggle('on',x===b));lb.querySelector('span').textContent=b.textContent;lg.classList.remove('open')};lg.addEventListener('click',p);
…