/* ========================================================================== KPOP.WANG · 全站统一页脚（共享组件） -------------------------------------------------------------------------- 用法：页面 前插入 .kp-foot 结构， 引入本文件。 设计：完全自带命名空间(.kp-foot__*)与 CSS 变量(--kpf-*)， 不依赖页面 CSS，可与 style.css(黑金皮肤) / kp-mobile.css 共存。 ⚠️ 刻意避开 .footer / .copyright / .footer-grid 等类名， 因为 style.css 有 `.footer .copyright{...!important}` 会污染。 响应式：PC ≥1101 → 4 列；768–1100 → 品牌整行 + 3 列；≤767 → 品牌整行 + 3 列(紧凑) ========================================================================== */ .kp-foot{ --kpf-bg:#f5f5f5; --kpf-line:#e8e8e8; --kpf-title:#262626; --kpf-text:rgba(0,0,0,.65); --kpf-muted:rgba(0,0,0,.45); --kpf-blue:#1677ff; --kpf-blue-dark:#0958d9; background:var(--kpf-bg); padding:60px 0 26px; color:var(--kpf-muted); font-family:-apple-system,BlinkMacSystemFont,'Segoe UI','PingFang SC','Hiragino Sans GB','Microsoft YaHei',sans-serif; font-size:.88rem; line-height:1.7; -webkit-font-smoothing:antialiased; text-align:left; } .kp-foot *{box-sizing:border-box;} .kp-foot__inner{max-width:1200px;margin:0 auto;padding:0 44px;} .kp-foot__grid{ display:grid; grid-template-columns:2.2fr 1fr 1fr 1.2fr; gap:50px; margin-bottom:44px; } /* ---------- 品牌块 ---------- */ .kp-foot__brand{min-width:0;} .kp-foot__logo{ font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI','PingFang SC','Microsoft YaHei',sans-serif; font-size:1.55rem;font-weight:900;letter-spacing:-.02em;line-height:1.2; color:var(--kpf-title);margin-bottom:12px; } .kp-foot__logo span{color:var(--kpf-blue);} .kp-foot__brand p{ margin:0;max-width:360px; color:var(--kpf-muted);font-size:.88rem;line-height:1.85; } .kp-foot__social{display:flex;align-items:center;gap:14px;margin-top:16px;} .kp-foot__social a{ display:inline-block;min-height:auto;min-width:0; font-size:1.28rem;line-height:1;color:inherit;text-decoration:none; transition:transform .25s ease; } .kp-foot__social a:hover{transform:translateY(-2px);} /* ---------- 导航列 ---------- */ .kp-foot__col{min-width:0;} .kp-foot__col h4{ margin:0 0 16px; font-size:.95rem;font-weight:700;line-height:1.3; color:var(--kpf-title); } .kp-foot__col a{ display:block; color:var(--kpf-text);text-decoration:none; font-size:.86rem;line-height:1.6; margin-bottom:8px; transition:color .2s ease; } .kp-foot__col a:hover{color:var(--kpf-blue);} /* ---------- 版权 + 备案 ---------- */ .kp-foot__copy{ border-top:1px solid var(--kpf-line); padding-top:24px;text-align:center; color:var(--kpf-muted);font-size:.8rem;line-height:1.7; } .kp-foot__mark{color:var(--kpf-blue);font-weight:600;} .kp-foot__icp{margin-top:6px;text-align:center;font-size:.78rem;line-height:1.6;} .kp-foot__icp a{color:var(--kpf-muted);text-decoration:none;} .kp-foot__icp a:hover{color:var(--kpf-blue);} /* ---------- 中屏：品牌整行 + 3 列 ---------- */ @media (max-width:1100px){ .kp-foot__inner{padding:0 30px;} .kp-foot__grid{grid-template-columns:repeat(3,1fr);gap:36px 26px;} .kp-foot__brand{grid-column:1 / -1;} .kp-foot__brand p{max-width:560px;} } /* ---------- 移动端：紧凑 ---------- */ @media (max-width:767px){ .kp-foot{padding:40px 0 20px;} .kp-foot__inner{padding:0 18px;} .kp-foot__grid{grid-template-columns:repeat(3,1fr);gap:24px 14px;margin-bottom:26px;} .kp-foot__brand{grid-column:1 / -1;} .kp-foot__logo{font-size:1.3rem;} .kp-foot__brand p{max-width:none;font-size:.84rem;line-height:1.75;} .kp-foot__social{margin-top:12px;gap:16px;} .kp-foot__col h4{margin-bottom:9px;font-size:.9rem;} .kp-foot__col a{ min-height:30px;min-width:0;margin-bottom:0; display:flex;align-items:center; font-size:.82rem;line-height:1.45; } .kp-foot__copy{padding-top:16px;font-size:.75rem;line-height:1.65;} .kp-foot__icp{font-size:.73rem;} } /* ---------- 超窄屏兜底 ---------- */ @media (max-width:360px){ .kp-foot__grid{grid-template-columns:repeat(2,1fr);} }