danyang-match/miniapp/app.wxss

/**
 * 丹阳公益婚恋服务平台 - 全局 Design Token
 *
 * v2（2026-09-22 设计系统夯实）
 * ---------------------------------------------------------------
 * 本次修订针对审计发现的系统性问题，逐条给出依据：
 *
 * 1) 品牌色不能承载文字 → 引入「基础色 / -strong」分级
 *    #E96B6B on 白 = 3.10:1，白字 on #E96B6B = 3.10:1，on #FFF3F2 = 2.85:1，
 *    三条路径都不满足正文 4.5:1。故：
 *      --color-primary        仅用于大色块、渐变、光晕、装饰（非文字）
 *      --color-primary-strong 用于文字、小图标、纯文字链接（5.33:1 ✓）
 *      --color-primary-solid  实心按钮底（白字 ≥4.5:1 ✓）
 *    功能色（success/warning/danger/info）同此分级。
 *
 * 2) 次要文字对比度过低
 *    旧 --color-text-tertiary(#777) = 4.48（on 白，勉强）/ #999 实测 2.85 却被用了 71 次。
 *    现将三级文字压到 #646C85 = 5.22:1，占位符保留浅色（占位符非正文）。
 *
 * 3) 颜色碎片化
 *    审计前全站 182 种 hex、770 次硬编码（54 种灰、60 种蓝紫、40 种红橙）。
 *    本文件是唯一的颜色事实源；页面层禁止再写 hex，一律 var(--token)。
 *
 * 4) 触摸目标
 *    组件库默认按钮只有 40px、小号 28px、"喜欢"按钮 31px。
 *    统一以 --tap-min(88rpx=44px) 为下限，--tap-gap 为最小间距。
 *
 * 5) 动效几乎未落地（--motion-* 全站仅 5 次引用）
 *    补充 --ease-spring 与 --press-scale，让点击有即时反馈。
 *
 * 6) 夜间氛围层缺失（参考图有明显的光晕/星点，代码只有纯渐变）
 *    新增 --mini-glow-* / --mini-star / --mini-glass / --mini-hairline。
 *
 * 单位说明：rpx（750rpx = 屏幕宽度，1rpx ≈ 0.5px @375pt）
 * 旧 token 名全部保留（88 个 wxss 共 909 处引用），只更新取值，避免大范围失效。
 */

page {
  /* ============ 品牌主色（分级：色块 / 文字 / 实心按钮） ============ */
  --color-primary: #E96B6B;          /* 基础色：渐变、光晕、装饰、非文字图形 */
  --color-primary-strong: #B8434A;   /* 文字与小图标（5.33:1 on 白，4.91:1 on 浅粉底） */
  --color-primary-solid: #C24C50;    /* 实心按钮底（白字 4.62:1） */
  --color-primary-active: #D95F5F;   /* 按压态（配合 --color-primary 使用） */
  --color-primary-light: #FFF3F2;
  --color-primary-lighter: #FFF8F7;

  /* ============ 小程序参考图品牌主题（夜间紫蓝） ============ */
  --mini-night-start: #172A72;
  --mini-night-end: #25104F;
  --mini-night-soft: #3445A1;
  --mini-accent-pink: #FF4F91;       /* 点缀色：仅用于色块/装饰，不作正文 */
  --mini-accent-coral: #FF6A78;
  --mini-card-bg: rgba(255, 255, 255, 0.98);
  --mini-text: #1F2744;
  --mini-muted: #7D839B;
  --mini-card-radius: 24rpx;
  --mini-text-on-night: #FFFFFF;             /* on 深底 13.04:1 ✓ */
  --mini-text-on-night-muted: rgba(255, 255, 255, 0.72);  /* on 深底 ≈8:1 ✓ */
  --mini-shadow: 0 16rpx 40rpx rgba(28, 30, 88, 0.14);

  /* ---- 渐变（集中定义：此前 4 个页面各写了一份「橙红渐变」按钮） ---- */
  /* --gradient-brand 明亮活泼，但白字仅 2.77:1 —— 只能用于无文字的装饰填充。 */
  --gradient-brand: linear-gradient(135deg, #FF6A78 0%, #E96B6B 100%);
  /* 承载白字的 CTA 渐变：两端 #C24C50(4.73:1) / #B8434A(5.33:1) 均达标。 */
  --gradient-brand-solid: linear-gradient(135deg, #C24C50 0%, #B8434A 100%);
  --gradient-night: linear-gradient(160deg, #172A72 0%, #25104F 100%);
  --gradient-night-soft: linear-gradient(160deg, #3445A1 0%, #172A72 100%);

  /* ---- 夜间氛围层（v2 新增；参考图有光晕与星点，此前完全没有） ---- */
  --mini-glow-coral: rgba(255, 79, 145, 0.40);
  --mini-glow-indigo: rgba(94, 124, 255, 0.32);
  --mini-glow-soft: rgba(255, 255, 255, 0.10);
  --mini-star: rgba(255, 255, 255, 0.70);
  --mini-glass: rgba(255, 255, 255, 0.10);   /* 深底玻璃面 */
  --mini-glass-strong: rgba(255, 255, 255, 0.16);
  --mini-hairline: rgba(255, 255, 255, 0.16); /* 深底分隔线 */
  --mini-glass-success: rgba(90, 226, 184, 0.16); /* 深底上的成功态玻璃面 */

  /* 星点层：多个小径向渐变叠在夜空渐变之上。用 radial-gradient 而非图片，
     避免额外请求，也便于随主题换色（index 页脚注：装饰层不承载信息）。 */
  --mini-starfield:
    radial-gradient(circle at 12% 18%, var(--mini-star) 0, transparent 2.5rpx),
    radial-gradient(circle at 31% 66%, var(--mini-star) 0, transparent 2rpx),
    radial-gradient(circle at 57% 12%, var(--mini-star) 0, transparent 2rpx),
    radial-gradient(circle at 79% 52%, var(--mini-star) 0, transparent 3rpx),
    radial-gradient(circle at 93% 84%, var(--mini-star) 0, transparent 2rpx);

  /* 横幅压暗层：保证任何底图上的白色标题都有足够对比度 */
  --mini-banner-scrim: linear-gradient(90deg, rgba(23, 42, 114, 0.84) 0%, rgba(37, 16, 79, 0.40) 56%, rgba(255, 79, 145, 0.12) 100%);

  /* ============ 功能色（同样分级） ============ */
  --color-success: #2E9B68;          /* 色块/图标 */
  --color-success-strong: #17805A;   /* 文字（4.92:1 ✓） */
  --color-success-light: #ECF8F2;
  --color-warning: #E59A32;          /* 色块/图标（作文字仅 2.33:1） */
  --color-warning-strong: #9C5F14;   /* 文字（5.17:1 ✓） */
  --color-warning-light: #FFF7E9;
  --color-danger: #D94A4A;           /* 色块/图标 */
  --color-danger-strong: #C62828;    /* 文字（5.62:1 ✓） */
  --color-danger-light: #FFF0F0;
  --color-info: #4A7CD4;             /* 色块/图标 */
  --color-info-strong: #2A5DB0;      /* 文字（6.38:1 ✓） */
  --color-info-light: #EEF4FF;

  /* ============ 强调紫（参考图的标签语言；此前散落成 6 种写法） ============ */
  --color-accent-purple: #8B63BC;        /* 色块/装饰 */
  --color-accent-purple-strong: #7C60BC; /* 文字（5.03:1 ✓） */
  --color-accent-purple-light: #F3EEFF;

  /* 深色夜空底上的强调色（不可用于浅色底） */
  --color-success-on-night: #A6F5D7;     /* on #172A72 = 10.35:1 ✓ */

  /* ============ 文字色（实测对比度 on 白 / on 页面底） ============ */
  --color-text-strong: #1A1F36;      /* 标题      16.24 / 14.90 ✓ */
  --color-text-primary: #2A3050;     /* 正文      12.83 / 11.77 ✓ */
  --color-text-secondary: #4A5169;   /* 次要正文   7.86 /  7.21 ✓ */
  --color-text-tertiary: #646C85;    /* 说明文字   5.22 /  4.79 ✓（旧 #777 为 4.48） */
  --color-text-placeholder: #9AA1B4; /* 占位符（非正文，可浅） */
  --color-text-disabled: #B8BDC9;
  --color-text-inverse: #FFFFFF;     /* 深色背景上的文字 */

  /* ============ 边框与分割线 ============ */
  --color-border: #E6E8EF;
  --color-border-strong: #D8DBE5;
  --color-divider: #EFF0F5;
  --color-border-focus: #B8434A;     /* 焦点环用 strong，保证 3:1 可见度 */
  --color-border-error: #C62828;

  /* ============ 背景（避免纯白/纯灰平铺，页面底为暖白） ============ */
  --color-bg-page: #F6F5F3;
  --color-bg-card: #FFFFFF;
  --color-bg-subtle: #F5F6FA;        /* 次级区块、内嵌列表 */
  --color-bg-muted: #EEF0F6;         /* 更弱的填充 */
  --color-bg-input: #F7F8FB;         /* 表单输入框底（此前被引用但从未定义，导致背景失效） */
  --color-bg-disabled: #F3F4F7;
  --color-bg-overlay: rgba(0, 0, 0, 0.45);

  /* ============ 字体 ============ */
  /* 小程序无法可靠加载 Web Font（wx.loadFontFace 依赖 HTTPS 白名单且有闪动风险），
     故使用中文系统字栈：iOS 走苹方、Android 走思源/系统黑体。
     排版辨识度靠字号阶梯与字重建立，而非依赖字体本身。 */
  --font-family-cn: -apple-system, "PingFang SC", "Noto Sans SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, sans-serif;
  --font-family-number: "SF Pro Display", -apple-system, "DIN Alternate", "PingFang SC", sans-serif;

  /* 字号阶梯 —— 正文 32rpx(16px) 起，元信息下限 24rpx(12px) */
  --font-size-micro: 22rpx;   /* 11px 仅角标/装饰，禁用于正文 */
  --font-size-xs: 24rpx;      /* 12px 元信息下限 */
  --font-size-sm: 26rpx;      /* 13px 次要说明 */
  --font-size-md: 28rpx;      /* 14px 次要正文 */
  --font-size-base: 32rpx;    /* 16px 正文 */
  --font-size-lg: 36rpx;      /* 18px 小标题 */
  --font-size-xl: 40rpx;      /* 20px 区块标题 */
  --font-size-2xl: 48rpx;     /* 24px 页面标题 */
  --font-size-3xl: 56rpx;     /* 28px 大标题 */
  --font-size-display: 64rpx; /* 32px Hero */

  /* 字重：只用 4 档。禁止 550/650/750 等非百位值 —— Android 无对应字重会回退，
     导致同一设计在不同机型上粗细不一致（审计发现 30 处）。 */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  --line-height-tight: 1.25;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.65;

  --letter-spacing-tight: 0;
  --letter-spacing-wide: 1rpx;
  --letter-spacing-wider: 2rpx;

  /* ============ 间距（4px 栅格） ============ */
  --spacing-1: 8rpx;
  --spacing-2: 16rpx;
  --spacing-3: 24rpx;
  --spacing-4: 32rpx;
  --spacing-5: 40rpx;
  --spacing-6: 48rpx;
  --spacing-8: 64rpx;
  --spacing-10: 80rpx;
  --spacing-12: 96rpx;

  --spacing-page-x: 32rpx;
  --spacing-section: 48rpx;
  --spacing-card-inner: 32rpx;
  --spacing-tight: 16rpx;

  /* ============ 圆角 ============ */
  --radius-sm: 16rpx;
  --radius-md: 24rpx;
  --radius-lg: 32rpx;
  --radius-xl: 40rpx;
  --radius-2xl: 48rpx;
  --radius-full: 9999rpx;

  /* ============ 阴影（统一为一套，此前 30+ 种近似值） ============ */
  --shadow-card: 0 8rpx 28rpx rgba(35, 35, 95, 0.07);
  --shadow-raised: 0 12rpx 36rpx rgba(35, 35, 95, 0.10);
  --shadow-popup: 0 16rpx 64rpx rgba(0, 0, 0, 0.10);
  --shadow-night: 0 16rpx 40rpx rgba(28, 30, 88, 0.18);

  /* ============ 边框宽度 ============ */
  --border-width: 1rpx;
  --border-width-strong: 2rpx;

  /* ============ 触摸目标（无障碍下限 44×44px） ============ */
  --tap-min: 88rpx;         /* 44px 最小可点区域 */
  --tap-comfortable: 96rpx; /* 48px 舒适尺寸：主操作 */
  --tap-gap: 16rpx;         /* 8px 相邻目标最小间距 */

  /* ============ 动效 ============ */
  --motion-fast: 120ms;
  --motion-normal: 200ms;
  --motion-slow: 300ms;
  --ease-standard: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
  --press-scale: 0.97;
  --press-opacity: 0.88;

  /* ============ 层级 z-index ============ */
  --z-base: 1;
  --z-sticky: 100;
  --z-tabbar: 200;
  --z-dropdown: 500;
  --z-modal: 1000;
  --z-toast: 2000;
  --z-ambient: 0;

  /* ============ 页面基础样式 ============ */
  background-color: var(--color-bg-page);
  font-family: var(--font-family-cn);
  font-size: var(--font-size-base);
  color: var(--color-text-primary);
  line-height: var(--line-height-normal);
}

/* ==========================================================================
   通用工具类
   ========================================================================== */

.container {
  padding: var(--spacing-page-x);
}

.flex { display: flex; }
.flex-column { display: flex; flex-direction: column; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.flex-start { display: flex; align-items: center; justify-content: flex-start; }
.flex-1 { flex: 1; min-width: 0; }
.flex-shrink-0 { flex-shrink: 0; }
.wrap { flex-wrap: wrap; }

/* 4 列宫格：用 flex + 百分比宽度实现。
   注：display:grid 在 WebView 渲染下可用，但 Skyline 不支持，故统一改为 flex 以免疫渲染引擎迁移。*/
.grid-4 {
  display: flex;
  flex-wrap: wrap;
}
.grid-4 > .grid-item {
  width: 25%;
  box-sizing: border-box;
}

.text-strong { color: var(--color-text-strong); }
.text-primary { color: var(--color-text-primary); }
.text-secondary { color: var(--color-text-secondary); }
.text-tertiary { color: var(--color-text-tertiary); }
.text-placeholder { color: var(--color-text-placeholder); }
.text-white { color: var(--color-text-inverse); }
.text-brand { color: var(--color-primary-strong); }
/* 品牌色作文字只能用 -strong 变体：基础色 #E96B6B 在白底仅 3.10:1。
   保留 .text-brand-soft 这个类名是为了不破坏既有引用，取值已统一到 -strong，
   如需「更亮的品牌色」请用于背景/图形而非文字。 */
.text-brand-soft { color: var(--color-primary-strong); }
.text-success { color: var(--color-success-strong); }
.text-warning { color: var(--color-warning-strong); }
.text-danger { color: var(--color-danger-strong); }
.text-info { color: var(--color-info-strong); }

.font-micro { font-size: var(--font-size-micro); }
.font-xs { font-size: var(--font-size-xs); }
.font-sm { font-size: var(--font-size-sm); }
.font-md { font-size: var(--font-size-md); }
.font-base { font-size: var(--font-size-base); }
.font-lg { font-size: var(--font-size-lg); }
.font-xl { font-size: var(--font-size-xl); }
.font-2xl { font-size: var(--font-size-2xl); }
.font-3xl { font-size: var(--font-size-3xl); }
.font-display { font-size: var(--font-size-display); }

.font-regular { font-weight: var(--font-weight-regular); }
.font-medium { font-weight: var(--font-weight-medium); }
.font-semibold { font-weight: var(--font-weight-semibold); }
.font-bold { font-weight: var(--font-weight-bold); }

.mt-1 { margin-top: var(--spacing-1); }
.mt-2 { margin-top: var(--spacing-2); }
.mt-3 { margin-top: var(--spacing-3); }
.mt-4 { margin-top: var(--spacing-4); }
.mt-5 { margin-top: var(--spacing-5); }
.mt-6 { margin-top: var(--spacing-6); }
.mb-1 { margin-bottom: var(--spacing-1); }
.mb-2 { margin-bottom: var(--spacing-2); }
.mb-3 { margin-bottom: var(--spacing-3); }
.mb-4 { margin-bottom: var(--spacing-4); }
.mb-5 { margin-bottom: var(--spacing-5); }
.mb-6 { margin-bottom: var(--spacing-6); }

/* 文本省略 */
.ellipsis {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.ellipsis-2 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

/* 安全区底部留白（避开 Home Indicator） */
.safe-area-bottom {
  padding-bottom: env(safe-area-inset-bottom);
}

/* 页面卡片基础样式 */
.card-base {
  background: var(--color-bg-card);
  border-radius: var(--radius-lg);
  padding: var(--spacing-card-inner);
  box-shadow: var(--shadow-card);
}

/* 分割线 */
.divider {
  height: var(--border-width);
  background: var(--color-divider);
}

/* ==========================================================================
   可访问性工具类（v2 新增）
   ========================================================================== */

/* 保证任意可点元素达到 44×44px 热区，且视觉尺寸可独立控制 */
.tap-min {
  min-width: var(--tap-min);
  min-height: var(--tap-min);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 相邻可点元素之间的最小间距 */
.tap-gap > * + * {
  margin-left: var(--tap-gap);
}

/* 焦点可见（小程序支持键盘/无障碍焦点） */
.focusable:focus,
.focusable:focus-visible {
  outline: 4rpx solid var(--color-border-focus);
  outline-offset: 2rpx;
}

/* 按压反馈：所有可点元素统一使用，替代"点了没反应" */
.pressable {
  transition: transform var(--motion-fast) var(--ease-spring),
              opacity var(--motion-fast) var(--ease-standard);
}
.pressable:active {
  transform: scale(var(--press-scale));
  opacity: var(--press-opacity);
}