feat(fe): Step4 门面品牌色带（方案A）+ nav-bar tone

- nav-bar 加 tone="brand"：透明底 + 深棕字，压在色带上；默认分支不动
- 首页/记录页顶部加 252rpx 品牌橘色带（下沿大圆角，z-index:-1 垫背后），
  盖住 nav + 切换条，门面卡在色带下方
- 切换条压在色带上：chip 半透明白 + 深棕字，选中实白
- page 加 position:relative 供色带绝对定位锚定
- 新增 --band-a/--band-b/--band-ink token（取自 preview-v3 定稿）

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

pets-fe/app.wxss

@@ -21,6 +21,10 @@ page{
   --primary-soft:#FFF4E4;   /* 唯一的浅橙底（收编了 9 种近似值） */
   --primary-line:#FFD6A1;   /* 浅橙块的描边 */
   --primary-ink:#A96500;    /* 浅橙底上的文字 */
+  /* 门面品牌色带（首页/记录页顶部，方案 A）*/
+  --band-a:#FFC768;
+  --band-b:#F5A947;
+  --band-ink:#7A4A08;       /* 色带上的深棕文字 */
 
   /* ── 语义色：soft 底 / base 主体 / ink 文字，三件套配齐 ── */
   --green:#73BE9D;   --green-soft:#EAF7F1;   --green-ink:#2E7D5B;
@@ -92,6 +96,7 @@ page{
   overflow:hidden;
   display:flex;
   flex-direction:column;
+  position:relative;   /* 门面色带 .brand-band 绝对定位锚在页面上 */
 }
 view,text{box-sizing:border-box}
 
@@ -373,6 +378,21 @@ page{scrollbar-width:none;-ms-overflow-style:none}
 .top-bar .pet-switch{padding-bottom:var(--sp-2)}
 .top-bar .st-pill{padding-bottom:var(--sp-2)}
 
+/* 门面品牌色带（方案 A）：绝对定位在页面最上层背后，盖住 nav + 切换条，
+   下沿大圆角。放在 .page-scroll 外面，所以不跟着滚。z-index 低于 nav(100) */
+.brand-band{
+  /* z-index:-1 垫在所有内容背后、页面背景之上。用 0 的话定位元素会盖住切换条 */
+  position:absolute;left:0;right:0;top:0;height:252rpx;z-index:-1;
+  background:linear-gradient(160deg,var(--band-a),var(--band-b));
+  border-radius:0 0 40rpx 40rpx;
+}
+/* 切换条压在色带上：chip 改成半透明白 + 深棕字，选中的实白 */
+.top-bar.on-band .pet-chip{
+  background:rgba(255,255,255,.42);border-color:transparent;color:var(--band-ink);
+}
+.top-bar.on-band .pet-chip.active{background:#fff;color:var(--text);border-color:transparent}
+.top-bar.on-band .pet-chip-add{color:rgba(122,74,8,.75)}
+
 /* 帖子卡。社区和用户主页都要用，页面级 wxss 不跨页生效，所以放全局 */
 .post-card{background:#fff;border-radius:var(--r-lg);box-shadow:var(--sd-1);padding:var(--sp-4);margin-bottom:var(--sp-4)}
 .post-head{display:flex;align-items:center;gap:var(--sp-3);margin-bottom:var(--sp-3)}

pets-fe/components/nav-bar/nav-bar.js

@@ -4,7 +4,10 @@ Component({
   options: { addGlobalClass: true },
   properties: {
     title: { type: String, value: '肉垫计划' },
-    showBack: { type: Boolean, value: false }
+    showBack: { type: Boolean, value: false },
+    // tone="brand"：透明底 + 深棕字，压在品牌色带上（首页/记录页）。
+    // 默认空 = 原来的奶白毛玻璃，另外 7 个页面都靠它，别动默认分支
+    tone: { type: String, value: '' }
   },
   data: {
     statusBarHeight: 20,

pets-fe/components/nav-bar/nav-bar.wxml

@@ -1,4 +1,4 @@
-<view class="nav-wrap" style="padding-top:{{statusBarHeight}}px;height:{{statusBarHeight + navBarHeight}}px;">
+<view class="nav-wrap {{tone === 'brand' ? 'tone-brand' : ''}}" style="padding-top:{{statusBarHeight}}px;height:{{statusBarHeight + navBarHeight}}px;">
   <view class="nav-inner" style="height:{{navBarHeight}}px;">
     <view wx:if="{{showBack}}" class="nav-back" bindtap="onBack"><pt-icon name="back" size="{{40}}"></pt-icon></view>
     <view class="nav-title">{{title}}</view>

pets-fe/components/nav-bar/nav-bar.wxss

@@ -31,3 +31,13 @@
   box-shadow:0 4rpx 12rpx rgba(70,48,25,.06);
 }
 .nav-back:active{background:rgba(255,255,255,.95)}
+
+/* tone="brand"：色带自己是实色，nav 不再铺奶白/毛玻璃/mask，文字换深棕。
+   只作用在带 tone-brand 的实例，默认分支纹丝不动 */
+.nav-wrap.tone-brand{
+  background:none;
+  backdrop-filter:none;-webkit-backdrop-filter:none;
+  -webkit-mask-image:none;mask-image:none;
+}
+.nav-wrap.tone-brand .nav-title{color:var(--band-ink)}
+.nav-wrap.tone-brand .nav-back{color:var(--band-ink);background:rgba(255,255,255,.5)}

pets-fe/pages/home/home.wxml

@@ -1,6 +1,8 @@
-<nav-bar title="肉垫计划"></nav-bar>
+<!-- 门面品牌色带（方案 A）：盖住 nav + 切换条，门面卡压在接缝上 -->
+<view class="brand-band"></view>
+<nav-bar title="肉垫计划" tone="brand"></nav-bar>
 
-<view class="top-bar"><pet-switch bind:add="onAddPet"></pet-switch></view>
+<view class="top-bar on-band"><pet-switch bind:add="onAddPet"></pet-switch></view>
 
 <scroll-view class="page-scroll" scroll-y="{{true}}" enhanced="{{true}}" show-scrollbar="{{false}}"
              bindscrolltolower="loadMore">

pets-fe/pages/record/record.wxml

@@ -1,4 +1,6 @@
-<nav-bar title="记录" show-back="{{true}}"></nav-bar>
+<!-- 门面品牌色带（方案 A）：记录页头部同款 -->
+<view class="brand-band"></view>
+<nav-bar title="记录" show-back="{{true}}" tone="brand"></nav-bar>
 
 <scroll-view class="page-scroll" scroll-y="{{true}}" enhanced="{{true}}" show-scrollbar="{{false}}">
 <view class="page-body no-fab">