/* 粤湾宽带 · 主题样式 视觉规范 v2 —— 来源：设计稿 design/t1-zhongshan.html / t4-guzhen.html ------------------------------------------------------------ v2 变更（2026-09-29）： 1. 栅格 1000px → 1180px，移动端间距统一走 --gut 2. 首屏 Hero 由浅蓝渐变改为满幅深色渐变 + 双光晕，白字大字标题 3. 速览条改为上浮卡片（负 margin 压在 Hero 下沿） 4. 区块间距 34 → 56px，正文基准 15 → 15.5px，各级标题同步放大 5. 表格、卡片、FAQ、表单统一加阴影层次与更大圆角 6. 页脚改为深色渐变 7. 新增配图：首屏背景图（.hero .herobg）、图文两栏（.figrow/.fig）、 设备卡（.devices/.device）、转化图带（.ctaband）、流量卡标题两栏（.simhead） ------------------------------------------------------------ */ :root{ /* 栅格与节奏 */ --maxw:1180px; --gut:22px; /* 主色 */ --brand:#16588E; --brand-d:#0F3E66; --brand-dd:#0A2C49; --brand-l:#E8F1F8; --accent:#E4690B; --accent-d:#C5580A; --accent-l:#FDF1E6; --ink:#14171B; --ink2:#565D66; --ink3:#868E98; --line:#E3E7EC; --line2:#EEF1F5; --bg:#FFFFFF; --bg2:#F4F6F9; --good:#1F7A4D; --good-l:#E9F5EF; /* 阴影层次 */ --sh1:0 1px 2px rgba(16,24,40,.05); --sh2:0 2px 4px rgba(16,24,40,.04),0 14px 30px -10px rgba(16,24,40,.12); --sh3:0 10px 26px -8px rgba(228,105,11,.5); --r:12px; } *{box-sizing:border-box;-webkit-tap-highlight-color:transparent} html{scroll-behavior:smooth} body{ margin:0;background:var(--bg2);color:var(--ink); font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif; font-size:15.5px;line-height:1.72;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility; } img{max-width:100%;height:auto} a{color:var(--brand)} .wrap{ max-width:var(--maxw);margin:0 auto;background:var(--bg);min-height:100vh; box-shadow:0 0 70px rgba(10,44,73,.08); } /* ---------- 头部 ---------- */ header.top{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.92);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)} .topin{max-width:var(--maxw);margin:0 auto;padding:14px var(--gut);display:flex;align-items:center;gap:16px} .logo{display:inline-flex;align-items:center;font-size:19px;font-weight:700;letter-spacing:-.025em;color:var(--brand-dd);text-decoration:none;white-space:nowrap} .logo::before{ content:"";width:23px;height:23px;border-radius:7px;flex:none;margin-right:9px; background:linear-gradient(135deg,#2C7CB8 0%,var(--brand-d) 55%,var(--brand-dd) 100%); box-shadow:inset 0 -10px 14px -10px rgba(0,0,0,.5); } .logo em{font-style:normal;color:var(--ink3);font-size:12.5px;font-weight:400;margin-left:8px;letter-spacing:0} .topnav{margin-left:10px;display:flex;gap:2px;overflow-x:auto;scrollbar-width:none} .topnav::-webkit-scrollbar{display:none} .topnav a{font-size:14px;color:var(--ink2);text-decoration:none;padding:7px 11px;border-radius:8px;white-space:nowrap} .topnav a:hover{background:var(--bg2);color:var(--brand)} .topcta{margin-left:auto;display:flex;gap:10px;align-items:center} .tel-top{font-size:15px;font-weight:700;color:var(--brand-d);text-decoration:none;white-space:nowrap;letter-spacing:-.01em} /* ---------- 顶部公告条 ---------- 位置：粘性导航栏下方、面包屑上方。 作用是把「客服时间 / 资费口径 / 回电时效」这类容易引起误解的信息前置。 只放事实性内容，不做促销位。多条时由 main.js 轮换（.on 切类）。 */ .noticebar{ display:flex;align-items:center;gap:10px;padding:9px var(--gut);margin:0; background:linear-gradient(90deg,#FDF6EC 0%,#FBF8F3 100%); border-bottom:1px solid #F0E4CE; font-size:13px;color:#7A5A17;line-height:1.6; } .noticebar .nb-ico{ flex:none;width:18px;height:18px;border-radius:50%; display:inline-flex;align-items:center;justify-content:center; background:#F1DDB4;color:#8A6100; } .noticebar .nb-ico svg{display:block} .noticebar .nb-body{flex:1;min-width:0} /* 多条轮换时固定高度 + 单行省略，避免文字长短不一导致整条高度跳动。 判据用 data-rotate 属性而不是加一个 .multi 类：那个类由 PHP 三元拼出来， 静态扫描看不到，会被误判成死样式。 */ .noticebar[data-rotate="1"] .nb-body{height:21px;overflow:hidden} .noticebar .nb-line{display:none} .noticebar .nb-line.on{display:block} .noticebar[data-rotate="1"] .nb-line{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /* ---------- 按钮 ---------- */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:7px;border:0;border-radius:10px; font-size:14.5px;font-weight:500;padding:10px 18px;cursor:pointer;text-decoration:none;font-family:inherit; white-space:nowrap;transition:background .16s,box-shadow .16s,border-color .16s; } .btn-a{background:var(--accent);color:#fff;box-shadow:var(--sh3)} .btn-a:hover{background:var(--accent-d)} .btn-b{background:var(--brand);color:#fff} .btn-b:hover{background:var(--brand-d)} .btn-o{background:#fff;color:var(--brand);border:1px solid var(--line)} .btn-o:hover{border-color:#C9DCEA} .btn-sm{padding:8px 14px;font-size:13.5px;border-radius:8px} .btn-lg{padding:14px 30px;font-size:16px;border-radius:12px;width:auto} /* 「联系客服」那一格：跟「电话咨询」并排放在手机底栏里， 两个按钮长得一样会让人以为点错了，所以用绿色字区分一下。 颜色只是视觉提示，不代表任何官方关系。 */ .btn-wx{color:#17A34A;border-color:#CBE8D5} .btn-wx:hover{border-color:#A9D8BA} /* ---------- 面包屑 ---------- */ .crumb{font-size:12.5px;color:var(--ink3);padding:16px var(--gut) 0} .crumb a{color:var(--ink3);text-decoration:none} .crumb a:hover{color:var(--brand)} .crumb span.sep{margin:0 6px;color:#C9D0D8} /* ---------- H1 区（满幅深色首屏 + 背景图） ---------- */ .hero{ position:relative;overflow:hidden;color:#fff; padding:46px var(--gut) 58px; background: radial-gradient(closest-side,rgba(93,178,255,.30),rgba(93,178,255,0)) 84% -22%/920px 440px no-repeat, radial-gradient(closest-side,rgba(228,105,11,.24),rgba(228,105,11,0)) 0% 122%/640px 360px no-repeat, linear-gradient(135deg,#135078 0%,#0E3F63 52%,#0A2C49 100%); } /* 背景图铺满整个首屏。图本身越暗越好，对比度由下面那层遮罩兜底 */ .hero .herobg{ position:absolute;inset:0;width:100%;height:100%;z-index:0; object-fit:cover;object-position:center right; } /* 左侧压暗、右侧留亮：标题在左，视觉重心在右 */ .hero::before{ content:"";position:absolute;inset:0;z-index:1;pointer-events:none; background: linear-gradient(90deg,rgba(8,34,57,.90) 0%,rgba(8,34,57,.80) 30%,rgba(9,40,66,.56) 60%,rgba(9,40,66,.38) 100%), linear-gradient(180deg,rgba(8,34,57,.30) 0%,rgba(8,34,57,0) 44%,rgba(8,34,57,.40) 100%); } .hero::after{ content:"";position:absolute;left:0;right:0;bottom:0;height:1px;z-index:3; background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent); } .hero h1,.hero .sub,.hero .tags,.hero .herobtns{position:relative;z-index:2} .hero h1{font-size:40px;line-height:1.22;margin:0 0 14px;font-weight:700;letter-spacing:-.03em;color:#fff;max-width:17em} .hero .sub{font-size:16.5px;line-height:1.7;color:rgba(255,255,255,.74);margin:0 0 24px;max-width:46em} .tags{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:26px} .tag{font-size:12.5px;background:#fff;border:1px solid #CFE0EC;color:var(--brand);border-radius:20px;padding:3px 12px;white-space:nowrap} .hero .tag{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.24);color:#D8E8F6} .herobtns{display:flex;gap:12px;flex-wrap:wrap} .hero .btn-o{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.36);color:#fff} .hero .btn-o:hover{background:rgba(255,255,255,.2);border-color:rgba(255,255,255,.52)} /* ---------- 速览条（上浮卡片） ---------- */ .strip{ position:relative;z-index:2; display:grid;grid-template-columns:repeat(3,1fr);gap:1px; background:var(--line);border-radius:var(--r);overflow:hidden; margin:0 var(--gut) 48px;box-shadow:var(--sh2); } .hero + .strip{margin-top:-32px} /* 必须是 > div：速览条的标签(.k)与数值(.v)本身也是
， 写成后代选择器 .strip div 会把内边距重复加到它们身上 —— 实测每格因此从 97px 撑到 169px，窄屏三条叠起来占掉 246px。 */ .strip > div{background:var(--bg);padding:18px 20px} .strip .k{font-size:12.5px;color:var(--ink3);margin-bottom:5px;letter-spacing:.02em} .strip .v{font-size:20px;font-weight:600;color:var(--brand-dd);letter-spacing:-.02em} .strip .v small{font-size:12.5px;font-weight:400;color:var(--ink3)} /* ---------- 快捷服务入口（6 宫格） ---------- 放在速览条下方。全部是本站锚点，不引入新页面；最后一格是电话。 参考同行做法：把「访客此刻想干的事」铺在第一屏下方，减少翻找成本。 */ .quicknav{ display:grid;grid-template-columns:repeat(6,1fr);gap:10px; padding:0 var(--gut);margin:0 0 50px; } .quicknav .qn{ display:flex;flex-direction:column;gap:8px;align-items:flex-start; padding:14px 13px 13px;border:1px solid var(--line);border-radius:12px; background:var(--bg);text-decoration:none;box-shadow:var(--sh1); transition:border-color .16s,box-shadow .16s,transform .16s; } .quicknav .qn:hover{border-color:#BFD8E9;box-shadow:var(--sh2);transform:translateY(-2px)} .quicknav .qn-ico{ flex:none;width:33px;height:33px;border-radius:9px; display:flex;align-items:center;justify-content:center; background:var(--brand-l);color:var(--brand); } .quicknav .qn-ico svg{width:19px;height:19px;display:block} .quicknav .qn-tx{min-width:0} .quicknav .qn-tx b{display:block;font-size:14px;font-weight:600;color:var(--ink);letter-spacing:-.012em} .quicknav .qn-tx span{display:block;font-size:11.5px;color:var(--ink3);margin-top:3px;line-height:1.5} /* 电话格做差异化配色，一眼能找到 */ .quicknav .qn-tel{background:linear-gradient(180deg,#FFF9F2 0%,#FDF2E6 100%);border-color:#F0DCC2} .quicknav .qn-tel .qn-ico{background:#FBE6CE;color:var(--accent-d)} .quicknav .qn-tel .qn-tx b{color:var(--accent-d)} /* ---------- 章节 ---------- */ /* scroll-margin-top 给粘性导航栏留位：快捷入口的锚点跳转会落在区块标题上， 不留位的话标题会被 header 盖住。 */ section{padding:0 var(--gut) 56px;scroll-margin-top:72px} h2{font-size:25px;font-weight:700;margin:0 0 10px;letter-spacing:-.025em;display:flex;align-items:baseline;gap:11px} h2::before{content:"";width:4px;height:20px;border-radius:2px;flex:none;transform:translateY(2px);background:linear-gradient(180deg,var(--accent),var(--brand))} h3{font-size:16.5px;font-weight:600;margin:26px 0 10px} .lead{color:var(--ink2);font-size:15px;line-height:1.75;margin:0 0 20px;max-width:60em} .note{font-size:12.5px;color:var(--ink3);margin:11px 0 0;line-height:1.7} /* ---------- 表格 ---------- */ .tblwrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh1);background:var(--bg)} table.plan{width:100%;border-collapse:collapse;font-size:14px;min-width:660px} table.plan th,table.plan td{padding:14px 16px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top} table.plan th{background:#F7F9FC;font-weight:600;color:var(--ink2);font-size:12.5px;white-space:nowrap;letter-spacing:.02em} table.plan tbody tr:last-child td{border-bottom:0} /* 斑马纹：套餐多档对比时，横向读同一行不容易串行。 :nth-child(even) 在前、:hover 在后，hover 才能覆盖斑马纹底色。 */ table.plan tbody tr:nth-child(even) td{background:#FAFBFD} table.plan tbody tr:hover td{background:#EFF6FC} td.pname{font-weight:600;color:var(--ink)} td.pname span{display:block;font-weight:400;color:var(--ink3);font-size:12px;margin-top:3px} .pricenow{color:var(--accent);font-weight:700;font-size:16px;letter-spacing:-.01em} .pricedel{color:var(--ink3);text-decoration:line-through;font-size:12.5px;margin-left:5px} .pname .hot{display:inline-block;font-size:11px;background:var(--accent-l);color:var(--accent-d);border-radius:4px;padding:1px 6px;margin-left:6px;vertical-align:1px;font-weight:600} /* ---------- 强调块 ---------- */ .callout{ border:1px solid #EADFC0;border-radius:var(--r);padding:24px 26px;margin:0 0 20px; background:linear-gradient(180deg,#FEFBF3 0%,#FDF8EE 100%);box-shadow:var(--sh1); } .callout .ct{font-size:17px;font-weight:700;color:#6E5310;margin:0 0 8px;letter-spacing:-.02em} .callout p{margin:0 0 14px;font-size:14.5px;color:#5C4A22} .callout p:last-child{margin-bottom:0} /* ---------- 流量卡 ---------- */ .cardgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:18px;margin-bottom:6px} .simcard{ border:1px solid var(--line);border-radius:14px;padding:22px;background:var(--bg); display:flex;flex-direction:column;box-shadow:var(--sh1);transition:box-shadow .18s,transform .18s; } .simcard:hover{box-shadow:var(--sh2);transform:translateY(-2px)} .simcard .sc-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap} .simcard .sc-name{font-weight:700;font-size:16.5px;letter-spacing:-.02em} .simcard .hot{display:inline-block;font-size:11px;background:var(--accent-l);color:var(--accent-d);border-radius:4px;padding:2px 7px;font-weight:600} .simcard .sc-sub{font-size:13px;color:var(--ink3);margin:6px 0 0} .simcard .sc-price{display:flex;align-items:baseline;gap:5px;margin:16px 0;padding-bottom:16px;border-bottom:1px dashed var(--line)} .simcard .sc-price b{font-size:36px;line-height:1;color:var(--accent);font-weight:700;letter-spacing:-.03em} .simcard .sc-price span{font-size:13px;color:var(--ink3)} .simcard .sc-spec{list-style:none;padding:0;margin:0 0 20px;flex:1} .simcard .sc-spec li{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-size:14px;padding:7px 0;border-bottom:1px solid var(--line2)} .simcard .sc-spec li:last-child{border-bottom:0} .simcard .sc-spec li span{color:var(--ink3);flex:none} .simcard .sc-spec li b{color:var(--ink);font-weight:600;text-align:right} .simcard .btn{width:100%} /* ---------- 镇街/片区网格 ---------- */ .gridzone{display:grid;grid-template-columns:repeat(auto-fill,minmax(126px,1fr));gap:10px;margin-bottom:16px} .zone{ font-size:13.5px;text-align:center;padding:11px 6px;border:1px solid var(--line);border-radius:10px; background:var(--bg);color:var(--ink2);text-decoration:none;display:block;transition:border-color .15s,background .15s; } a.zone:hover{border-color:#BFD8E9;background:var(--brand-l);color:var(--brand-d)} .zone.core{border-color:#BFD8E9;background:var(--brand-l);color:var(--brand-d);font-weight:600} /* ---------- 差异卡 ---------- */ .diffs{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px} .diff{border:1px solid var(--line);border-radius:var(--r);padding:20px 22px;background:var(--bg);box-shadow:var(--sh1);transition:box-shadow .18s,transform .18s} .diff:hover{box-shadow:var(--sh2);transform:translateY(-2px)} .diff .dt{font-weight:600;font-size:16px;margin-bottom:8px;display:flex;align-items:center;gap:9px;letter-spacing:-.015em} .diff .dt::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--accent);flex:none} .diff .dd{font-size:14.5px;color:var(--ink2);line-height:1.78;margin:0} /* ---------- 流程 ---------- */ .steps{counter-reset:s;display:grid;gap:1px;background:var(--line);border-radius:var(--r);overflow:hidden;box-shadow:var(--sh1)} .step{background:var(--bg);padding:20px 22px;display:flex;gap:16px;align-items:flex-start} .step::before{ counter-increment:s;content:counter(s);flex:none;width:30px;height:30px;border-radius:50%; background:linear-gradient(135deg,var(--brand) 0%,var(--brand-dd) 100%);color:#fff; font-size:14px;font-weight:600;display:flex;align-items:center;justify-content:center;margin-top:1px; } .step .st{font-weight:600;margin-bottom:3px;font-size:15.5px} .step .sd{font-size:14px;color:var(--ink2);line-height:1.7} /* ---------- 配图：图文两栏 ---------- 用法：
…
…
照片在右、文字在左；窄屏堆叠成上下。 */ .figrow{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.86fr);gap:22px;align-items:start} .fig{margin:0;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:#F7F9FC;box-shadow:var(--sh2)} /* 裁切比例写在 上，不写在容器上。 写在容器上时子元素要靠 height:100% 取高，而百分比高度依赖「父级高度被判定为 确定值」；容器高度来自 aspect-ratio + height:auto 时这条链路在浏览器间并不稳。 比例给 img 则是元素自身的确定尺寸，不依赖父级，行为可预测。 */ .fig img{display:block;width:100%;height:auto;object-fit:cover} .fig figcaption{padding:11px 16px;font-size:12.5px;color:var(--ink3);line-height:1.65;border-top:1px solid var(--line);background:#FAFCFE} /* 安装场景图按原始比例 1400×815 展示，不裁切 */ .figrow .fig img{aspect-ratio:1400/815} /* ---------- 配图：设备卡 ---------- */ .devices{display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));gap:18px} .device{ display:flex;gap:18px;align-items:flex-start;padding:18px; border:1px solid var(--line);border-radius:var(--r);background:var(--bg); box-shadow:var(--sh1);transition:box-shadow .18s,transform .18s; } .device:hover{box-shadow:var(--sh2);transform:translateY(-2px)} .dv-img{ flex:none;width:112px;height:112px;overflow:hidden;border-radius:10px; border:1px solid var(--line2);background:linear-gradient(180deg,#FAFCFE 0%,#EFF4F8 100%); } .dv-img img{display:block;width:100%;height:100%;object-fit:cover} .dv-body{min-width:0} .dv-name{margin:0 0 7px;font-size:15.5px;font-weight:600;letter-spacing:-.015em;display:flex;align-items:center;gap:8px;flex-wrap:wrap} .dv-badge{font-size:11px;font-weight:600;letter-spacing:0;padding:2px 8px;border-radius:6px;background:var(--brand-l);color:var(--brand-d);border:1px solid #CFE0EC;white-space:nowrap} .dv-desc{margin:0;font-size:13.5px;color:var(--ink2);line-height:1.72} /* ---------- 配图：流量卡标题两栏 ---------- */ .simhead{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.44fr);gap:26px;align-items:center;margin-bottom:24px} .simhead-tx .lead{margin:0 0 14px} .simfacts{list-style:none;padding:0;margin:0;display:grid;gap:9px} .simfacts li{position:relative;padding-left:25px;font-size:14px;color:var(--ink2);line-height:1.68} .simfacts li b{color:var(--ink)} /* 勾选图标走内联 SVG，避免依赖「✓」这个字在各个中文字体里的渲染差异 */ .simfacts li::before{ content:"";position:absolute;left:0;top:3px;width:16px;height:16px; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='8' fill='%23E9F5EF'/%3E%3Cpath d='M4.7 8.3l2.2 2.2 4.5-4.8' fill='none' stroke='%231F7A4D' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px 16px no-repeat; } /* 号卡图按 4:3 裁切（原图 900×803），比原图更扁一点，和左侧文字的视觉重量匹配。 比例同样给 img，理由见上面 .fig img 的注释。 */ .simhead .fig{max-width:340px;margin-left:auto} .simhead .fig img{aspect-ratio:4/3} /* ---------- 配图：转化图带（深色 + 白字，与首屏呼应） ---------- */ .ctaband{ position:relative;overflow:hidden;border-radius:16px;margin:0 var(--gut) 56px;color:#fff; background:linear-gradient(135deg,#135078 0%,#0A2C49 100%);box-shadow:var(--sh2); } .ctaband img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.38} /* 图片之上再压一层左深右浅的遮罩，保证白字对比度 */ .ctaband::before{ content:"";position:absolute;inset:0;z-index:1;pointer-events:none; background:linear-gradient(90deg,rgba(8,34,57,.93) 0%,rgba(8,34,57,.78) 48%,rgba(9,40,66,.55) 100%); } .ct-in{position:relative;z-index:2;padding:34px 34px 36px;max-width:680px} .ct-in h2{margin:0 0 10px;font-size:23px;color:#fff} .ct-in h2::before{background:linear-gradient(180deg,#F0A05A,var(--accent))} .ct-in p{margin:0 0 20px;font-size:15px;line-height:1.75;color:rgba(255,255,255,.78);max-width:44em} .ct-btns{display:flex;gap:12px;flex-wrap:wrap} .ct-btns .btn-o{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.36);color:#fff} .ct-btns .btn-o:hover{background:rgba(255,255,255,.2);border-color:rgba(255,255,255,.52)} /* ---------- FAQ ---------- */ .faq{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;box-shadow:var(--sh1);background:var(--bg)} .faq details{border-bottom:1px solid var(--line)} .faq details:last-child{border-bottom:0} .faq summary{padding:18px 22px;cursor:pointer;font-weight:600;font-size:15px;list-style:none;position:relative;padding-right:52px} .faq summary::-webkit-details-marker{display:none} .faq summary::after{content:"+";position:absolute;right:22px;top:50%;transform:translateY(-50%);color:var(--ink3);font-size:20px;font-weight:400;line-height:1} .faq details[open] summary::after{content:"−"} .faq details[open] summary{color:var(--brand-d)} .faq .a{padding:0 22px 20px;font-size:14.5px;color:var(--ink2);line-height:1.8} /* ---------- 预约须知（表单上方 5 条） ---------- 把「提交之后会发生什么」一次讲完，减少来回确认。 时效类文案由 PHP 读主题设置拼接，CSS 只负责排版。 */ .notice5{ border:1px solid var(--line);border-radius:14px;background:var(--bg); box-shadow:var(--sh1);padding:22px 24px;margin:0 0 22px; } .notice5 .n5-h{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin:0 0 16px} .notice5 .n5-h b{font-size:16px;font-weight:600;letter-spacing:-.015em} .notice5 .n5-h span{font-size:12.5px;color:var(--ink3)} .notice5 .n5-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:15px 24px} .notice5 .n5-t{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:var(--brand-d);margin-bottom:5px;letter-spacing:-.01em} .notice5 .n5-t i{ font-style:normal;flex:none;width:19px;height:19px;border-radius:50%; background:var(--brand-l);color:var(--brand);font-size:11.5px;font-weight:700; display:inline-flex;align-items:center;justify-content:center; } .notice5 .n5 p{margin:0;font-size:13.5px;color:var(--ink2);line-height:1.72} /* ---------- 表单 ---------- */ .formbox{ border:1px solid var(--line);border-radius:14px;padding:26px;position:relative; background:linear-gradient(180deg,#F8FAFC 0%,#F4F6F9 100%);box-shadow:var(--sh1); } .formpick{margin:0 0 18px;padding:11px 15px;background:var(--brand-l);border:1px solid #CFE0EC;border-radius:9px;font-size:13.5px;color:var(--brand-d)} .formpick b{color:var(--brand);font-weight:700} .frow{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px} label{display:block;font-size:13px;color:var(--ink2);margin-bottom:6px;font-weight:600} input[type=text],input[type=tel],input[type=email],select{ width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:9px; font-size:15px;font-family:inherit;background:#fff;color:var(--ink); } input:focus,select:focus{outline:0;border-color:var(--brand);box-shadow:0 0 0 3px rgba(22,88,142,.11)} .radios{display:flex;gap:18px;padding-top:7px;flex-wrap:wrap} .radios label{display:flex;align-items:center;gap:7px;font-size:14.5px;color:var(--ink);font-weight:400;margin:0;cursor:pointer} .radios input{width:auto;padding:0} .formmsg{margin-top:14px;padding:12px 15px;border-radius:9px;font-size:13.5px;display:none} .formmsg.ok{display:block;background:var(--good-l);color:var(--good)} .formmsg.err{display:block;background:#FCEBEB;color:#A32D2D} .formmsg.info{display:block;background:var(--brand-l);color:var(--brand-d)} /* ---------- 内链盒 ---------- */ .linksbox{border:1px solid var(--line);border-radius:var(--r);padding:18px 22px;font-size:14px;line-height:2.1;color:var(--ink2);box-shadow:var(--sh1);background:var(--bg)} .linksbox a{color:var(--brand);text-decoration:none;margin-right:16px;white-space:nowrap} .linksbox a:hover{text-decoration:underline} .backbox{ background:linear-gradient(135deg,var(--brand-l) 0%,#F2F8FC 100%);border-radius:var(--r); padding:20px 24px;font-size:15px;color:var(--brand-d);display:flex;align-items:center;gap:16px;flex-wrap:wrap; } .backbox a{color:var(--brand);font-weight:600;text-decoration:none;white-space:nowrap} .backbox a:hover{text-decoration:underline} /* ---------- 正文（后台编辑器内容） ---------- */ .entry{font-size:15.5px;line-height:1.85;color:var(--ink)} .entry h2{font-size:22px;margin:34px 0 12px} .entry h3{font-size:17px;margin:26px 0 10px} .entry ul,.entry ol{padding-left:24px} .entry li{margin:6px 0} .entry blockquote{border-left:3px solid var(--brand);background:var(--brand-l);margin:18px 0;padding:14px 18px;border-radius:0 8px 8px 0;color:var(--brand-d)} /* ---------- 分页 ---------- 结构由 WP 核心 the_posts_pagination() 生成：