/* ============================================================================ boa.css · SnapLab 主题皮肤 v3 —— 亚光 Flagscape ---------------------------------------------------------------------------- 前两版都跑偏了：v1 全实色太扁，v2 把毛玻璃当通用材质套满了全站。 重跑审计之后拿到硬证据，v3 按 BoA 真正的做法来。 重跑审计的三条结论（2026-09-17，bankofamerica.com + info.bankofamerica.com）： 1. 全站 **0 个 backdrop-filter、0 个半透明背景色**。所有面都是实色： #FFFFFF / #F5F5F5 / #012169 / #A50E28 / #0073CF。玻璃质感在 BoA 不存在。 2. 它那层"纹理"是官方品牌资产，叫 **Flagscape**，文件名 flagscape-blue-simp-1.0.0.svg / flagscape-gray-simp-1.0.0.svg。 拆开看：实色打底 + 一条弧形斜向色带，颜色从 #0052C2（浅蓝）以 10 个 stop 一路衰减到透明度 0（60% 处归零），gradient 向量 (510,254)→(828,744)。 **不是编织纹，是一层极轻的亚光色阶扫过。** 承文字的面就该是这种质感。 3. 用法是 background-size: cover —— 一个元素上只扫一次，不平铺。 所以 v3： · 承文字的面（卡片、弹窗、输入框、提示块）一律**不透明、亚光**，没有高光、 没有玻璃、没有模糊。Flagscape 色带只用在大色块上，浅色面上淡到近乎看不见。 · 半透明只留**一处**：顶栏和底栏 —— 内容要从它们底下滚过去。想全亚光， 见文件末尾第 11 节，注释掉两行即可。 · BoA 的识别点全留着：红蓝旗条、全胶囊按钮、藏蓝主色、大写红下划线分段。 规矩没变：一层覆盖样式，不改 SnapLab 任何原文件；规则里 0 个 !important； 不用 color-mix、不用 :has，守 styles.css 开头那句 "Safari 14+ 可跑"。 关掉主题：把 index.html 里那行 删掉。 前两版存档：boa-v1-flat.css.bak（扁平）/ boa-v2-glass.css.bak（玻璃）。 ========================================================================== */ /* @import url("https://fonts.googleapis.com/css2?family=Archivo:wght@300;400;500;700&display=swap"); */ :root { --boa-display: Archivo, "Segoe UI Variable Display", "Helvetica Neue", Roboto, "PingFang SC Light", "PingFang SC", "Microsoft YaHei Light", "Microsoft YaHei", system-ui, sans-serif; --boa-ui: Roboto, "Segoe UI", "Helvetica Neue", -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif; /* ---- BoA 品牌色（官网计算样式实测值） ---- */ --boa-navy: #012169; /* 白底 14.76:1 */ --boa-navy-d: #001B4D; --boa-navy-l: #1A3A7A; --boa-red: #C41230; /* 白底 6.04:1 */ --boa-red-d: #A50E28; /* 白底 7.80:1 */ --boa-red-br: #E31837; /* 白底 4.72:1 —— 只做大字/装饰 */ --boa-link: #0053C2; /* 白底 6.96:1 */ /* ---- Flagscape：照 BoA 官方 SVG 的几何和 stop 复刻，换色不换形 ---- 实色打底 + 一条弧形斜向色带，60% 处衰减到 0。cover，一个元素扫一次。 */ --fs-navy: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%201080%20580.3%22%20preserveAspectRatio=%22none%22%3E%3Cdefs%3E%3ClinearGradient%20id=%22a%22%20x1=%22510.03%22%20y1=%22253.98%22%20x2=%22828.16%22%20y2=%22743.85%22%20gradientUnits=%22userSpaceOnUse%22%3E%3Cstop%20offset=%220.0%22%20stop-color=%22%230052c2%22%20stop-opacity=%221.0%22/%3E%3Cstop%20offset=%220.02%22%20stop-color=%22%23004ab4%22%20stop-opacity=%220.84%22/%3E%3Cstop%20offset=%220.06%22%20stop-color=%22%230041a3%22%20stop-opacity=%220.64%22/%3E%3Cstop%20offset=%220.1%22%20stop-color=%22%23013893%22%20stop-opacity=%220.47%22/%3E%3Cstop%20offset=%220.14%22%20stop-color=%22%23013186%22%20stop-opacity=%220.32%22/%3E%3Cstop%20offset=%220.19%22%20stop-color=%22%23012b7b%22%20stop-opacity=%220.2%22/%3E%3Cstop%20offset=%220.24%22%20stop-color=%22%23012673%22%20stop-opacity=%220.11%22/%3E%3Cstop%20offset=%220.31%22%20stop-color=%22%2301236d%22%20stop-opacity=%220.05%22/%3E%3Cstop%20offset=%220.39%22%20stop-color=%22%2301226b%22%20stop-opacity=%220.01%22/%3E%3Cstop%20offset=%220.6%22%20stop-color=%22%23012169%22%20stop-opacity=%220.0%22/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath%20d=%22M32.39%20580.3C292.08%20374.7%20653%20163%20985.43%2069.81H1080V580.3H32.39%22%20fill=%22url%28%23a%29%22/%3E%3C/svg%3E"); --fs-red: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%201080%20580.3%22%20preserveAspectRatio=%22none%22%3E%3Cdefs%3E%3ClinearGradient%20id=%22a%22%20x1=%22510.03%22%20y1=%22253.98%22%20x2=%22828.16%22%20y2=%22743.85%22%20gradientUnits=%22userSpaceOnUse%22%3E%3Cstop%20offset=%220.0%22%20stop-color=%22%23e8455c%22%20stop-opacity=%221.0%22/%3E%3Cstop%20offset=%220.02%22%20stop-color=%22%23e23d55%22%20stop-opacity=%220.84%22/%3E%3Cstop%20offset=%220.06%22%20stop-color=%22%23db334d%22%20stop-opacity=%220.64%22/%3E%3Cstop%20offset=%220.1%22%20stop-color=%22%23d52a45%22%20stop-opacity=%220.47%22/%3E%3Cstop%20offset=%220.14%22%20stop-color=%22%23d0233f%22%20stop-opacity=%220.32%22/%3E%3Cstop%20offset=%220.19%22%20stop-color=%22%23cb1c39%22%20stop-opacity=%220.2%22/%3E%3Cstop%20offset=%220.24%22%20stop-color=%22%23c81835%22%20stop-opacity=%220.11%22/%3E%3Cstop%20offset=%220.31%22%20stop-color=%22%23c51432%22%20stop-opacity=%220.05%22/%3E%3Cstop%20offset=%220.39%22%20stop-color=%22%23c51331%22%20stop-opacity=%220.01%22/%3E%3Cstop%20offset=%220.6%22%20stop-color=%22%23c41230%22%20stop-opacity=%220.0%22/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath%20d=%22M32.39%20580.3C292.08%20374.7%20653%20163%20985.43%2069.81H1080V580.3H32.39%22%20fill=%22url%28%23a%29%22/%3E%3C/svg%3E"); --fs-link: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%201080%20580.3%22%20preserveAspectRatio=%22none%22%3E%3Cdefs%3E%3ClinearGradient%20id=%22a%22%20x1=%22510.03%22%20y1=%22253.98%22%20x2=%22828.16%22%20y2=%22743.85%22%20gradientUnits=%22userSpaceOnUse%22%3E%3Cstop%20offset=%220.0%22%20stop-color=%22%233e8ae8%22%20stop-opacity=%221.0%22/%3E%3Cstop%20offset=%220.02%22%20stop-color=%22%233481e2%22%20stop-opacity=%220.84%22/%3E%3Cstop%20offset=%220.06%22%20stop-color=%22%232877db%22%20stop-opacity=%220.64%22/%3E%3Cstop%20offset=%220.1%22%20stop-color=%22%231d6dd4%22%20stop-opacity=%220.47%22/%3E%3Cstop%20offset=%220.14%22%20stop-color=%22%231465cf%22%20stop-opacity=%220.32%22/%3E%3Cstop%20offset=%220.19%22%20stop-color=%22%230c5eca%22%20stop-opacity=%220.2%22/%3E%3Cstop%20offset=%220.24%22%20stop-color=%22%230759c6%22%20stop-opacity=%220.11%22/%3E%3Cstop%20offset=%220.31%22%20stop-color=%22%230255c4%22%20stop-opacity=%220.05%22/%3E%3Cstop%20offset=%220.39%22%20stop-color=%22%230154c3%22%20stop-opacity=%220.01%22/%3E%3Cstop%20offset=%220.6%22%20stop-color=%22%230053c2%22%20stop-opacity=%220.0%22/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath%20d=%22M32.39%20580.3C292.08%20374.7%20653%20163%20985.43%2069.81H1080V580.3H32.39%22%20fill=%22url%28%23a%29%22/%3E%3C/svg%3E"); /* 下面两条现在不在任何规则里用了 —— 留着给大色块/英雄区自取， 别往承文字的面上铺，路径硬边会变成一道划痕划过正文。 */ --fs-light: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%201080%20580.3%22%20preserveAspectRatio=%22none%22%3E%3Cdefs%3E%3ClinearGradient%20id=%22a%22%20x1=%22510.03%22%20y1=%22253.98%22%20x2=%22828.16%22%20y2=%22743.85%22%20gradientUnits=%22userSpaceOnUse%22%3E%3Cstop%20offset=%220.0%22%20stop-color=%22%23ededed%22%20stop-opacity=%221.0%22/%3E%3Cstop%20offset=%220.02%22%20stop-color=%22%23eeeeee%22%20stop-opacity=%220.84%22/%3E%3Cstop%20offset=%220.06%22%20stop-color=%22%23efeff0%22%20stop-opacity=%220.64%22/%3E%3Cstop%20offset=%220.1%22%20stop-color=%22%23f0f0f1%22%20stop-opacity=%220.47%22/%3E%3Cstop%20offset=%220.14%22%20stop-color=%22%23f0f1f2%22%20stop-opacity=%220.32%22/%3E%3Cstop%20offset=%220.19%22%20stop-color=%22%23f1f2f3%22%20stop-opacity=%220.2%22/%3E%3Cstop%20offset=%220.24%22%20stop-color=%22%23f1f2f4%22%20stop-opacity=%220.11%22/%3E%3Cstop%20offset=%220.31%22%20stop-color=%22%23f2f3f5%22%20stop-opacity=%220.05%22/%3E%3Cstop%20offset=%220.39%22%20stop-color=%22%23f2f3f5%22%20stop-opacity=%220.01%22/%3E%3Cstop%20offset=%220.6%22%20stop-color=%22%23f2f3f5%22%20stop-opacity=%220.0%22/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath%20d=%22M32.39%20580.3C292.08%20374.7%20653%20163%20985.43%2069.81H1080V580.3H32.39%22%20fill=%22url%28%23a%29%22/%3E%3C/svg%3E"); /* 浅色面用，淡到几乎看不见，只是让白不发死 */ --fs-dark: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%201080%20580.3%22%20preserveAspectRatio=%22none%22%3E%3Cdefs%3E%3ClinearGradient%20id=%22a%22%20x1=%22510.03%22%20y1=%22253.98%22%20x2=%22828.16%22%20y2=%22743.85%22%20gradientUnits=%22userSpaceOnUse%22%3E%3Cstop%20offset=%220.0%22%20stop-color=%22%231e3560%22%20stop-opacity=%221.0%22/%3E%3Cstop%20offset=%220.02%22%20stop-color=%22%231b2f56%22%20stop-opacity=%220.84%22/%3E%3Cstop%20offset=%220.06%22%20stop-color=%22%2317294b%22%20stop-opacity=%220.64%22/%3E%3Cstop%20offset=%220.1%22%20stop-color=%22%23132240%22%20stop-opacity=%220.47%22/%3E%3Cstop%20offset=%220.14%22%20stop-color=%22%23111e37%22%20stop-opacity=%220.32%22/%3E%3Cstop%20offset=%220.19%22%20stop-color=%22%230e192f%22%20stop-opacity=%220.2%22/%3E%3Cstop%20offset=%220.24%22%20stop-color=%22%230c162a%22%20stop-opacity=%220.11%22/%3E%3Cstop%20offset=%220.31%22%20stop-color=%22%230b1325%22%20stop-opacity=%220.05%22/%3E%3Cstop%20offset=%220.39%22%20stop-color=%22%230a1324%22%20stop-opacity=%220.01%22/%3E%3Cstop%20offset=%220.6%22%20stop-color=%22%230a1223%22%20stop-opacity=%220.0%22/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath%20d=%22M32.39%20580.3C292.08%20374.7%20653%20163%20985.43%2069.81H1080V580.3H32.39%22%20fill=%22url%28%23a%29%22/%3E%3C/svg%3E"); /* 暗色模式的底 */ /* ---- 软扫光：小控件（按钮、FAB、图标块、Toast）用这个。 Flagscape 是带路径硬边的，贴到 40px 高的胶囊上那条边会变成一道划痕， 所以小件改用同方向的线性淡扫，一样亚光，但没有边。 ---- */ --fs-soft: linear-gradient(118deg, rgba(255,255,255,.13) 0%, rgba(255,255,255,.05) 40%, rgba(255,255,255,0) 68%); /* ---- 旗条：BoA 招牌。硬切软化成一小段混色，别的不动 ---- */ --boa-flag: linear-gradient(100deg, #E31837 0%, #C41230 40%, #7A1447 53%, #1A3A7A 64%, #012169 100%); --boa-flag-h: 5px; /* ---- 亚光：没有内高光、没有大扩散，只有一层 BoA 官网原值的柔投影 ---- */ --matte-line: #E2E5EA; --matte-sh: 0 2px 20px rgba(0, 0, 0, .12); /* 官网实测原值 */ --matte-sh2: 0 10px 40px rgba(1, 33, 105, .22); /* 弹层用 */ /* ---- 只给顶栏/底栏用的那一点半透明 ---- */ --chrome-bg: rgba(255, 255, 255, .86); --chrome-blur: saturate(140%) blur(16px); /* ---- 几何 ---- */ --boa-r-card: 14px; /* BoA 实测 8(app)/12(web)，这里放宽一点点 */ --boa-r-sm: 10px; /* 输入框。BoA 原教旨是 4px，见 README */ /* 缓动：styles.css 里定义过，这里重申同值，boa.css 单独用也不缺变量 */ --e: cubic-bezier(.22, .8, .24, 1); /* ---- 覆盖 SnapLab 自己的 token：没点名的组件也跟着变 ---- */ --navy: #012169; --navy2: #0A2B75; --navy3: #1A3A7A; --cyan: #0073CF; --bg: #F2F3F5; --card: #FFFFFF; --soft: #F5F5F5; --soft2: #E8EAEE; --ink: #1A1A1A; --dim: #5C6270; --dim2: #7A8090; --line: #E2E5EA; --blue: #0053C2; --blue-s: #EAF1FB; --blue-d: #003C91; --red: #C41230; --red-s: #FBEDEF; --amber: #B75B00; --amber-s: #FDF4E8; --amber-d: #8A4400; --green: #007D3C; --green-s: #EAF5EE; --violet: #4B2E83; --violet-s: #F0ECF8; --sh: var(--matte-sh); --sh2: var(--matte-sh2); --r: 14px; --f: var(--boa-ui); } /* --------------------------------------------------------------------------- 0 · 页面底 —— 亚光 BoA 的页面底是实的 #F5F5F5。这里压一层 Flagscape 浅色带（#ededed 衰减到 0）， 固定不滚。作用只是让大片浅灰不发死，凑近了才看得出来有个方向。 --------------------------------------------------------------------------- */ body { letter-spacing: normal; background: #F2F3F5; } /* --------------------------------------------------------------------------- 1 · 文字层级 BoA 的对比靠字号差 + 细体大标题，不靠加粗。 --------------------------------------------------------------------------- */ h1, .h1row h1, .pread h1 { font-family: var(--boa-display); font-weight: 300; font-size: 31px; line-height: 1.18; letter-spacing: normal; color: var(--boa-navy); } h2, h3 { letter-spacing: normal; } .chead h2 { font-family: var(--boa-ui); font-size: 17px; font-weight: 700; letter-spacing: normal; color: var(--ink); } .sm, .dim.sm { font-size: 14px; } a { color: var(--boa-link); } .doc a, .pbody a, p a, li a { text-decoration: underline; text-underline-offset: 2px; } .kvs, table, .weight-label, .t2, .fmeta { font-variant-numeric: tabular-nums; } /* --------------------------------------------------------------------------- 2 · 卡片 —— 亚光实色 + 旗条 承文字的面：不透明白、没有模糊、没有内高光、没有渐变压在字底下。 只有一层 Flagscape 浅色带（衰减到 0，几乎看不见）和官网原值的柔投影。 旗条是 BoA 的招牌，留着；不想要就 class="card plain"。 --------------------------------------------------------------------------- */ .card { position: relative; background: #FFFFFF; border: 1px solid var(--matte-line); border-radius: var(--boa-r-card); box-shadow: var(--matte-sh); padding: 22px 20px 18px; margin-bottom: 14px; transition: box-shadow .26s var(--e), border-color .26s var(--e); } .card::before { content: ""; position: absolute; left: -1px; right: -1px; top: -1px; height: var(--boa-flag-h); background: var(--boa-flag); border-radius: var(--boa-r-card) var(--boa-r-card) 0 0; } .card.plain::before { display: none; } .card.plain { padding-top: 18px; } @media (hover: hover) { .card:hover { box-shadow: 0 4px 26px rgba(0, 0, 0, .15); border-color: #D6DAE2; } } /* 修掉画错的两条线：这里原来给 .card .kvs > div + div 和 .history-row 都加 border-top。 .kv 是圆角格子不是列表行，border-top 会在块内划一道横线； .history-row 自带 border-bottom，再叠 top 行间就成双线 —— 整条撤掉。 */ .chead { margin-bottom: 14px; } /* --------------------------------------------------------------------------- 3 · 按钮 形状守 BoA（全胶囊，圆角 = 半高）。彩色按钮上压 Flagscape 色带 —— 那是亚光的方向感，不是高光：没有 inset 白线，没有底部暗边。 次按钮是实色白 + 藏蓝描边，BoA 原样。 --------------------------------------------------------------------------- */ .btn { height: 40px; padding: 0 20px; border-radius: 999px; border: 1px solid var(--boa-navy); background: #FFFFFF; color: var(--boa-navy); font-family: var(--boa-ui); font-size: 15px; font-weight: 500; letter-spacing: normal; box-shadow: none; transition: transform .14s var(--e), background-color .2s, border-color .2s; } .btn.primary { background-color: var(--boa-navy); background-image: var(--fs-soft); border-color: transparent; color: #fff; } .btn.danger { background-color: var(--boa-red); background-image: var(--fs-soft); border-color: transparent; color: #fff; } .btn.small { height: 32px; padding: 0 16px; font-size: 14px; } .btn.block { height: 46px; } .btn.back { border-color: transparent; background: none; padding-left: 10px; color: var(--boa-link); } .btn:active { transform: scale(.97); } @media (hover: hover) { .btn:hover { background-color: #F0F3F9; } .btn.primary:hover { background-color: var(--boa-navy-d); } .btn.danger:hover { background-color: var(--boa-red-d); } .btn.back:hover { background-color: #F0F3F9; } } .ib { color: var(--boa-navy); border-radius: 50%; transition: background-color .2s; } @media (hover: hover) { .ib:hover { background-color: #F0F3F9; } } /* --------------------------------------------------------------------------- 4 · 搜索与输入 —— 全部亚光实色 BoA app 顶部那条常驻搜索是灰底胶囊；表单输入框是白底 + 1px 中灰描边。 BoA 原教旨的输入框圆角是 4px（"动作圆、输入方"），这里放到 10px， 形状分工还在但不扎眼。想要原教旨：把 --boa-r-sm 改回 4px。 --------------------------------------------------------------------------- */ .find { height: 44px; background: #EFEFEF; border: 1px solid transparent; border-radius: 999px; color: var(--dim); box-shadow: none; transition: background-color .2s, border-color .2s, box-shadow .2s; } .find:focus-within { background: #FFFFFF; border-color: var(--boa-navy); box-shadow: 0 0 0 3px rgba(1, 33, 105, .13); } input[type=text], input[type=search], input[type=password], input[type=number], input[type=date], input[type=datetime-local], select, textarea { height: 44px; border-radius: var(--boa-r-sm); border: 1px solid #646464; background: #FFFFFF; font-size: 16px; box-shadow: none; transition: border-color .18s, box-shadow .2s; } textarea { height: auto; } input:focus, select:focus, textarea:focus { border-color: var(--boa-navy); box-shadow: 0 0 0 3px rgba(1, 33, 105, .15); } .f { font-size: 14px; font-weight: 500; color: #333; } :focus-visible { outline: 2px solid var(--boa-link); outline-offset: 2px; } /* --------------------------------------------------------------------------- 5 · 顶栏 原来这里用 --chrome-bg 半透明 + backdrop-filter 毛玻璃 —— 全站规矩是 「0 个 backdrop-filter」（iOS 滚动掉帧的主因），改回实色 --card。 --------------------------------------------------------------------------- */ .top { height: 56px; background: var(--card); border-bottom: 1px solid var(--matte-line); box-shadow: none; } .brand .name { font-family: var(--boa-display); font-weight: 300; letter-spacing: .04em; } .brand .name b { font-weight: 700; } /* --------------------------------------------------------------------------- 6 · 底部导航 —— 另一处 选中态：藏蓝 + 顶上 3px 红指示条（BoA 的 tab 逻辑），两头淡出。 FAB 走 Erica 的红圆，压 Flagscape 色带，不加辉光。 --------------------------------------------------------------------------- */ .bar { background: var(--card); border-top: 1px solid var(--matte-line); box-shadow: none; } .bar a, .bar button:not(#fab) { position: relative; color: var(--dim); font-weight: 500; transition: color .2s; } .bar a.on { color: var(--boa-navy); } .bar a.on::before { content: ""; position: absolute; left: 20%; right: 20%; top: 0; height: 3px; border-radius: 0 0 3px 3px; background: linear-gradient(90deg, rgba(227,24,55,0) 0%, #E31837 25%, #C41230 75%, rgba(196,18,48,0) 100%); } .bar button:not(#fab):active { color: var(--boa-navy); } #fab { background-color: var(--boa-red); background-image: var(--fs-soft); color: #fff; box-shadow: 0 4px 14px rgba(196, 18, 48, .3); } @media (hover: hover) { #fab:hover { background-color: var(--boa-red-d); } } /* 宽屏下 .bar 是一颗浮动胶囊（styles.css 538 行） */ @media (min-width: 761px) { .bar { border: 1px solid var(--matte-line); box-shadow: var(--matte-sh); } .bar a.on { background-color: #EDF1F8; color: var(--boa-navy); } .bar a.on::before { display: none; } } /* --------------------------------------------------------------------------- 7 · 分段标签 BoA：大写、加字距、选中红字 + 3px 红下划线。底边压一根浅灰线。 --------------------------------------------------------------------------- */ .reading-switch { background: none; border: 0; border-bottom: 1px solid var(--matte-line); border-radius: 0; padding: 0; gap: 0; width: 100%; } .reading-switch button { position: relative; flex: 1; border-radius: 0; padding: 12px 8px; font-size: 13px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--dim); background: none; transition: color .22s; } .reading-switch button.on { background: none; box-shadow: none; color: var(--boa-red); font-weight: 500; } .reading-switch button.on::after { content: ""; position: absolute; left: 6%; right: 6%; bottom: -1px; height: 3px; border-radius: 3px 3px 0 0; background: linear-gradient(90deg, rgba(227,24,55,0) 0%, #E31837 20%, #C41230 80%, rgba(196,18,48,0) 100%); } .crumb a { color: var(--boa-link); text-decoration: underline; text-underline-offset: 2px; } .crumb i { color: var(--dim2); } /* --------------------------------------------------------------------------- 8 · 弹层：底部面板 / 对话框 / 灯箱 面板本身是**实色亚光**（上面有字）。只有遮罩带一点模糊 —— 它底下没有字。 --------------------------------------------------------------------------- */ .sheet-card { border-radius: 20px 20px 16px 16px; background: #FFFFFF; border: 1px solid var(--matte-line); box-shadow: 0 -10px 40px rgba(1, 33, 105, .22); } .sheet-card h3 { font-size: 17px; font-weight: 700; letter-spacing: normal; } .grab { background: #C9CDD6; } /* 毛玻璃去掉后不透明度得补上，不然底下内容透上来遮罩太弱 */ .sheet-bg { background: rgba(1, 33, 105, .5); } .opt { border-radius: var(--boa-r-sm); transition: background-color .2s; } @media (hover: hover) { .opt:hover { background-color: #F0F3F9; } } .oi { background-image: var(--fs-soft); } .oi.c1 { background-color: var(--boa-navy); color: #fff; } .oi.c2 { background-color: var(--boa-red); color: #fff; } .oi.c3 { background-color: var(--boa-link); color: #fff; } .mo { border-radius: 16px; background: #FFFFFF; border: 1px solid var(--matte-line); box-shadow: var(--matte-sh2); overflow: hidden; } .mo::backdrop, .lb::backdrop { background: rgba(1, 33, 105, .55); } .mo form { position: relative; } .mo.login form { padding-top: 30px; } .mo.login form::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: var(--boa-flag-h); background: var(--boa-flag); } .mo h2 { font-family: var(--boa-display); font-weight: 300; font-size: 27px; color: var(--boa-navy); letter-spacing: normal; } /* --------------------------------------------------------------------------- 9 · 相册瓦片 / 提示块 / Toast 提示块是承文字的面 —— 实色浅底 + 左色条，没有模糊没有渐变。 --------------------------------------------------------------------------- */ .gi { border-radius: var(--boa-r-sm); border: 1px solid var(--matte-line); box-shadow: var(--matte-sh); transition: transform .18s var(--e), box-shadow .22s var(--e); } .gi .cap { background: linear-gradient(to top, rgba(1, 33, 105, .88) 0%, rgba(1, 33, 105, 0) 100%); } @media (hover: hover) { .gi:hover { transform: translateY(-2px); box-shadow: 0 6px 22px rgba(0,0,0,.16); } } .nb, .bar-note { border-radius: var(--boa-r-sm); border: 1px solid var(--matte-line); border-left: 4px solid var(--boa-navy); background: #F6F8FB; } .nb.ai { border-left-color: var(--boa-link); background: var(--blue-s); } .nb.warn { border-left-color: var(--amber); background: var(--amber-s); } .bar-note.bad { border-left-color: var(--boa-red); background: var(--red-s); color: var(--boa-red-d); } .bar-note.ok { border-left-color: var(--green); background: var(--green-s); color: var(--green); } .bar-note.warn { border-left-color: var(--amber); background: var(--amber-s); color: var(--amber-d); } .toast { background-color: var(--boa-navy); background-image: var(--fs-soft); color: #fff; border-radius: 999px; box-shadow: var(--matte-sh2); } .toast.bad { background-color: var(--boa-red); } .toast.good { background-color: var(--green); background-image: none; } .archive-state { color: var(--green); } .archive-state.pending { color: var(--amber-d); } .foot, .sig { color: var(--dim2); font-size: 12px; } /* --------------------------------------------------------------------------- 10 · 暗色 BoA 的暗色是深藏蓝不是纯黑。面板照样是**实色亚光**，只有页面底压一层 Flagscape 蓝色带 —— 那正是它官方资产本来的用法（大块藏蓝场）。 --------------------------------------------------------------------------- */ [data-theme="dark"] { --boa-navy: #7FB0FF; --boa-navy-d: #A7C8FF; --boa-navy-l: #5C93E8; --boa-red: #FF6B7F; --boa-red-d: #FF8B9B; --boa-red-br: #FF6B7F; --boa-link: #7FB0FF; --boa-flag: linear-gradient(100deg, #FF6B7F 0%, #E8455C 40%, #9A6BA8 53%, #5C93E8 64%, #7FB0FF 100%); --matte-line: #24324C; --matte-sh: 0 2px 20px rgba(0, 0, 0, .55); --matte-sh2: 0 10px 40px rgba(0, 0, 0, .75); --chrome-bg: rgba(16, 27, 47, .88); --bg: #0A1223; --card: #101B2F; --soft: #16223A; --soft2: #1E2C48; --ink: #EDF1F8; --dim: #A4B0C6; --dim2: #808DA6; --line: #24324C; --blue: #7FB0FF; --blue-s: #13294C; --blue-d: #A7C8FF; --red: #FF6B7F; --red-s: #38181F; --amber: #FFB454; --amber-s: #37280F; --amber-d: #FFC87A; --green: #4FD18B; --green-s: #0F2C1C; } [data-theme="dark"] body { background: linear-gradient(162deg, #101B2F 0%, #0A1223 52%); background-attachment: fixed; } [data-theme="dark"] .card, [data-theme="dark"] .sheet-card, [data-theme="dark"] .mo { background: var(--card); } [data-theme="dark"] .btn { background: transparent; border-color: rgba(255, 255, 255, .28); color: var(--boa-navy); } [data-theme="dark"] .btn.primary { background-color: #1B3F86; color: #fff; border-color: transparent; } [data-theme="dark"] .btn.danger { background-color: #A50E28; color: #fff; border-color: transparent; } [data-theme="dark"] .btn.back { background: none; } /* 这组 hover 原来裸写：触屏上 :hover 会粘住（iOS 点完一直亮着）。 包进 (hover:hover)；第 12 节里特异度更高的规则照常接管桌面端颜色。 */ @media (hover: hover) { [data-theme="dark"] .btn:hover, [data-theme="dark"] .ib:hover, [data-theme="dark"] .opt:hover { background-color: #1A2740; } [data-theme="dark"] .btn.primary:hover { background-color: #23509F; } } [data-theme="dark"] .find { background: #18243C; border-color: transparent; } [data-theme="dark"] .find:focus-within { background: #1E2C48; border-color: var(--boa-navy); box-shadow: 0 0 0 3px rgba(127, 176, 255, .18); } [data-theme="dark"] input[type=text], [data-theme="dark"] input[type=search], [data-theme="dark"] input[type=password], [data-theme="dark"] input[type=number], [data-theme="dark"] input[type=date], [data-theme="dark"] input[type=datetime-local], [data-theme="dark"] select, [data-theme="dark"] textarea { background: #16223A; border-color: #3A4A68; } [data-theme="dark"] input:focus, [data-theme="dark"] select:focus, [data-theme="dark"] textarea:focus { border-color: var(--boa-navy); box-shadow: 0 0 0 3px rgba(127, 176, 255, .18); } [data-theme="dark"] .nb, [data-theme="dark"] .bar-note { background: #16223A; } [data-theme="dark"] .nb.ai { background: var(--blue-s); } [data-theme="dark"] .toast { background-color: #16223A; background-image: none; border: 1px solid var(--matte-line); } [data-theme="dark"] .grab { background: #3A4A68; } [data-theme="dark"] .sheet-bg, [data-theme="dark"] .mo::backdrop, [data-theme="dark"] .lb::backdrop { background: rgba(2, 6, 14, .66); } [data-theme="dark"] #fab { background-color: #C41230; color: #fff; } /* --------------------------------------------------------------------------- 11 · 亚光已默认 原来这里留着「取消注释即 100% 亚光」的开关和 backdrop-filter 回退块； 现在顶栏 / 底栏 / 遮罩本来就是实色（全站 0 个 backdrop-filter，iOS 滚动 不再掉帧），这些回退整块失去意义，收掉。--chrome-bg 变量定义保留不删。 --------------------------------------------------------------------------- */ /* 动效：styles.css 末尾已有 prefers-reduced-motion 全局关停。 */ /* =========================================================================== 12 · 中和 —— 主配色回到黑白 --------------------------------------------------------------------------- 上面十一节是照 BoA 官网审计出来的。值得留的是**材质与秩序**：亚光实色、 克制的投影、全胶囊、结构化的分段与指示条、清楚的字号层级 —— 这些全留。 要换掉的是**颜色**。原样套下去满屏藏蓝加红旗条，SnapLab 会变成一家银行； 而这个应用的正事是让人看清表里的数，不是展示品牌。 所以：大面积的东西（顶栏、卡片、按钮、FAB、底栏选中、分段）一律黑白灰。 颜色只留给**有含义**的地方 —— 危险红、提醒黄、完成绿、链接蓝。 满屏都是彩色的时候，真正该扎眼的那个反而不扎眼了。 规矩照旧：0 个 !important，不用 color-mix、不用 :has，全靠自然层叠。 想要原版 BoA 配色 —— 把这一节整段删掉即可。 ========================================================================== */ :root { /* 一条中性灰阶。带一丝冷调（蓝 2%），纯灰在屏幕上会发闷 */ --k-ink: #15181c; /* 白底 15.9:1 —— 主按钮、标志、选中态 */ --k-ink-d: #04070a; --k-line: #E3E5E9; --k-soft: #F4F5F7; --k-soft2: #EAECF0; } /* 承文字的面：白 + 一条淡灰线。没有品牌色压在字底下 */ .card { border-color: var(--k-line); } /* 每张卡顶上那条红蓝旗条去掉 —— 它是 BoA 的招牌，不是这个应用要说的话 */ .card::before { display: none; } .card { padding-top: 18px; } /* ---- 标志 -------------------------------------------------------------- 单独写，因为它最容易在换肤时被顺手弄没：图形靠 currentColor 上色， 字色一旦跟着主题漂移，标志就跟着糊掉。这里把它钉死，不依赖 --ink。 发布前应在实际浏览器中核对深浅色标志。 */ .brand { color: var(--k-ink); } .brand .name { color: var(--k-ink); } .mark { background: #FFFFFF; border: 1px solid #DCDFE4; box-shadow: 0 1px 2px rgba(0, 0, 0, .06); } /* ---- 按钮：黑白 -------------------------------------------------------- */ .btn { border-color: var(--k-ink); color: var(--k-ink); } .btn.primary { background-color: var(--k-ink); border-color: transparent; color: #fff; } .btn.back { color: var(--k-ink); } .ib { color: var(--k-ink); } @media (hover: hover) { .btn:hover { background-color: var(--k-soft); } .btn.primary:hover { background-color: var(--k-ink-d); } .btn.back:hover { background-color: var(--k-soft); } .ib:hover { background-color: var(--k-soft); } } /* 危险仍然是红的 —— 这是它唯一该出现的地方 */ /* ---- FAB：相机键是这个应用最常按的东西，不该是「危险」的颜色 ---------- */ #fab { background-color: var(--k-ink); box-shadow: 0 4px 14px rgba(0, 0, 0, .22); } @media (hover: hover) { #fab:hover { background-color: var(--k-ink-d); } } /* ---- 底栏选中：红指示条 → 黑 ------------------------------------------ */ .bar a.on { color: var(--k-ink); } .bar a.on::before { background: linear-gradient(90deg, rgba(21,24,28,0) 0%, var(--k-ink) 25%, var(--k-ink) 75%, rgba(21,24,28,0) 100%); } .bar button:not(#fab):active { color: var(--k-ink); } @media (min-width: 761px) { .bar a.on { background-color: var(--k-soft2); color: var(--k-ink); } } /* ---- 分段标签：去掉强制大写，红下划线 → 黑 ---------------------------- 中文不会大写，英文被拉成全大写之后和界面其余部分打架。 */ .reading-switch button { text-transform: none; letter-spacing: .01em; } .reading-switch button.on { color: var(--k-ink); } .reading-switch button.on::after { background: var(--k-ink); } /* ---- 卡片阴影：refine.css 那条特异度更高，主题那条一直没赢过 ---------- refine.css 里是： [data-theme="light"] .card, :root:not([data-theme="dark"]) .card { box-shadow: 0 1px 2px #0f172a0a; } (0,2,1) > (0,1,0)，和先后顺序无关 —— 所以浅色模式下 `.card { box-shadow: var(--matte-sh) }` 从来没生效过。这是这套主题唯一没算到的一处。 不加 !important（那是主题自己的规矩，也是对的）：用同样形状的选择器平起平坐， 放在后面靠顺序赢。值取中间 —— BoA 原值 0 2px 20px rgba(0,0,0,.12) 压在每张卡上偏重， SnapLab 原来的 0 1px 2px #0f172a0a 又几乎看不见。 */ [data-theme="light"] .card, :root:not([data-theme="dark"]) .card { box-shadow: 0 1px 2px rgba(0, 0, 0, .05), 0 6px 18px -10px rgba(0, 0, 0, .16); } @media (hover: hover) { [data-theme="light"] .card:hover, :root:not([data-theme="dark"]) .card:hover { box-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 10px 26px -10px rgba(0, 0, 0, .24); } } /* ---- 暗色：黑白反过来，别再偏藏蓝 ------------------------------------- */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --k-ink: #F2F4F6; --k-ink-d: #FFFFFF; --k-line: #2A2F36; --k-soft: #1B1F25; --k-soft2: #232830; } :root:not([data-theme="light"]) .mark { background: #171B21; border-color: #2E343C; box-shadow: none; } :root:not([data-theme="light"]) .btn.primary { color: #0B0E12; } :root:not([data-theme="light"]) #fab { background-color: #F2F4F6; color: #0B0E12; } :root:not([data-theme="light"]) .bar a.on { background-color: transparent; } } :root[data-theme="dark"] { --k-ink: #F2F4F6; --k-ink-d: #FFFFFF; --k-line: #2A2F36; --k-soft: #1B1F25; --k-soft2: #232830; } :root[data-theme="dark"] .mark { background: #171B21; border-color: #2E343C; box-shadow: none; } :root[data-theme="dark"] .btn.primary { color: #0B0E12; } :root[data-theme="dark"] #fab { background-color: #F2F4F6; color: #0B0E12; } :root[data-theme="dark"] .bar a.on { background-color: transparent; } /* 6.2.1 · 完成主题融合。令牌与最终组件同时覆盖，避免旧主题的 [data-theme] 选择器盖回藏蓝；蒂芙尼蓝用于强调，文字使用较深的青色。 */ :root, :root[data-theme="light"] { --navy: #15181c; --navy2: #25292e; --navy3: #373d44; --cyan: #81d8d0; --boa-navy: #15181c; --boa-navy-d: #04070a; --boa-navy-l: #373d44; --boa-link: #276e69; --blue: #276e69; --blue-d: #205b57; --blue-s: #e8f6f3; --accent: #81d8d0; --chrome-bg: rgba(255,255,255,.92); --matte-line: #e3e5e9; --matte-sh2: 0 10px 40px rgba(0,0,0,.16); --bg: #f4f5f7; --card: #fff; --soft: #f5f5f5; --soft2: #eaecf0; --ink: #15181c; --dim: #5c6270; --dim2: #646b78; --line: #e3e5e9; } :root[data-theme="dark"] { --navy: #f2f4f6; --navy2: #e1e5e9; --navy3: #c6cdd5; --cyan: #81d8d0; --boa-navy: #f2f4f6; --boa-navy-d: #fff; --boa-navy-l: #c6cdd5; --boa-link: #81d8d0; --blue: #81d8d0; --blue-d: #a7e5de; --blue-s: #16332f; --chrome-bg: rgba(23,27,33,.94); --matte-line: #30363e; --matte-sh2: 0 10px 40px rgba(0,0,0,.5); --bg: #101216; --card: #191d23; --soft: #22272e; --soft2: #2c323b; --ink: #f2f4f6; --dim: #b7bec8; --dim2: #a4adb9; --line: #30363e; } body, :root[data-theme="dark"] body { background: var(--bg); } .f { color: var(--ink); } .bar a.on { color: var(--k-ink); } .bar a.on::before { background: var(--accent); } .reading-switch button.on::after { background: var(--accent); } :root[data-theme="dark"] .btn { color: var(--ink); border-color: var(--line); } :root[data-theme="dark"] .btn.primary { background-color: var(--k-ink); border-color: transparent; color: #101216; } :root[data-theme="dark"] .btn.danger { color: #fff; background-color: #a50e28; } :root[data-theme="dark"] .find, :root[data-theme="dark"] input[type=text], :root[data-theme="dark"] input[type=search], :root[data-theme="dark"] input[type=password], :root[data-theme="dark"] input[type=number], :root[data-theme="dark"] input[type=date], :root[data-theme="dark"] input[type=datetime-local], :root[data-theme="dark"] select, :root[data-theme="dark"] textarea { background: var(--soft); border-color: var(--line); color: var(--ink); } :root[data-theme="dark"] .find:focus-within, :root[data-theme="dark"] input:focus, :root[data-theme="dark"] select:focus, :root[data-theme="dark"] textarea:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(129,216,208,.16); } :root[data-theme="dark"] .nb, :root[data-theme="dark"] .toast { background-color: var(--soft); color: var(--ink); } @media (hover: hover) { :root[data-theme="dark"] .btn:hover, :root[data-theme="dark"] .ib:hover, :root[data-theme="dark"] .opt:hover { background-color: var(--soft2); } :root[data-theme="dark"] .btn.primary:hover { background-color: #fff; } :root[data-theme="dark"] .btn.danger:hover { background-color: #c41230; } } @media (min-width: 761px) { :root[data-theme="dark"] .bar a.on { background-color: var(--soft2); } } /* ---- 焦点环统一成品牌青 -------------------------------------------------- 第 4 节的输入框焦点环和第 5 节的 :focus-visible 都还是藏蓝（BoA 色）， 和深色模式的淡青光圈不是一套语言。浅色统一成 --blue + 同色系光圈； 深色的光圈上面已定义（rgba(129,216,208,.16)），特异度更高，不受影响。 */ input:focus, select:focus, textarea:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(39, 110, 105, .15); } .find:focus-within { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(39, 110, 105, .15); } /* 登录卡顶上最后一条红蓝旗条：收编成黑 → 蒂芙尼蓝 */ .mo.login form::before { background: linear-gradient(100deg, var(--k-ink) 0%, var(--k-ink) 55%, var(--cyan) 135%); } /* ---- 深色修正 ------------------------------------------------------------ --navy / --boa-navy 深色下翻成浅色，而 Snap 大圆钮的字、.oi 图标块的图标 还写死 #fff —— 亮底白字看不见。字压回深色（和 #fab 的反转是同一逻辑）； .oi 的彩色底留着，只换图标色。 */ :root[data-theme="dark"] .snap, :root[data-theme="dark"] .snap b { color: #101216; } :root[data-theme="dark"] .oi { color: #101216; } /* .card:hover 描边沿用的 #D6DAE2 是浅色值，暗底上闪一条亮边太跳，换弱一档 */ @media (hover: hover) { :root[data-theme="dark"] .card:hover { border-color: var(--dim2); } }