/* ==========================================================================
global.css —— Phase 1 视觉地基 / Visual foundation
--------------------------------------------------------------------------
设计目标 / Design intent
· clothoff 暗色基调（#0a0a0a 背景 + 橙色 #f97316 主 CTA）
· 干净、不喧宾夺主：删掉旧版的紫色 orb / pulse-glow / glass blur
· 兼容 Phase 1 之前的模板 class 名（.glass / .btn-primary / .gradient-text /
.card-hover / .pulse-glow / .page-orb / .page-grid），把它们重映射到 clothoff
色板，避免 Phase 2 之前页面"白屏 / 找不到样式"
--------------------------------------------------------------------------
颜色变量来自 input.css :root（统一在那里定义），这里只消费不重复定义。
Color tokens are defined in input.css :root — consume only, do not redeclare.
========================================================================== */
/* ==========================================================================
1. Document base reset
========================================================================== */
html, body {
overflow-x: hidden;
max-width: 100vw;
}
body {
background: var(--fx-bg);
color: var(--fx-text);
font-family: 'Inter', 'SF Pro Display', -apple-system, BlinkMacSystemFont,
'Segoe UI', 'Noto Sans SC', system-ui, sans-serif;
font-feature-settings: "cv11", "ss01";
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
min-height: 100dvh;
position: relative;
}
/* 选中文本配色 / Text selection */
::selection {
background: var(--fx-accent);
color: #000;
}
/* ==========================================================================
2. Scrollbar — 极窄 + 暗色，跟 clothoff 一致
========================================================================== */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--fx-bg); }
::-webkit-scrollbar-thumb { background: #2a2a2a; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #3a3a3a; }
/* Firefox */
* { scrollbar-width: thin; scrollbar-color: #2a2a2a var(--fx-bg); }
/* ==========================================================================
3. 旧 class 名兼容层 / Legacy class shim
--------------------------------------------------------------------------
Phase 1 不动 home_i18n / login_i18n / dashboard_i18n 等模板内容
（边界规则）。这些模板还在引用 .glass / .btn-primary / .gradient-text 等
旧 class，所以这里把它们重映射到 clothoff 色板，让"换皮"在 Phase 2 重写
模板之前就先生效。
--------------------------------------------------------------------------
Phase 1 explicitly does NOT rewrite home / login / dashboard templates.
They still reference legacy class names (.glass, .btn-primary, …).
We re-map those names to the clothoff palette so visuals shift orange/dark
_before_ Phase 2 touches the templates themselves.
========================================================================== */
/* —— glass / 半透明卡片：去掉花俏 blur，留一层暗色卡 —— */
.glass {
background: rgba(17, 17, 17, 0.85);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border: 1px solid var(--fx-border);
}
/* —— gradient-text：原先 indigo→purple→pink，改 clothoff 橙系 —— */
.gradient-text {
background: linear-gradient(135deg, #f97316 0%, #ff8a3d 50%, #f97316 100%);
background-size: 200% auto;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
}
/* —— btn-primary：原先 indigo→purple，改 clothoff 橙 —— */
.btn-primary {
background: var(--fx-accent);
color: #fff;
transition: background var(--fx-hover-duration) var(--fx-hover-curve),
transform var(--fx-hover-duration) var(--fx-hover-curve);
}
.btn-primary:hover {
background: var(--fx-accent-hover);
transform: translateY(-1px);
}
/* —— card：暗卡 + 橙边 hover —— */
.card {
background: var(--fx-bg-card);
border: 1px solid var(--fx-border);
transition: border-color var(--fx-hover-duration) var(--fx-hover-curve),
transform var(--fx-hover-duration) var(--fx-hover-curve);
}
.card:hover {
border-color: rgba(249, 115, 22, 0.35);
transform: translateY(-2px);
}
/* —— card-hover：保留 className，悬浮抬一下、阴影改成纯黑 —— */
.card-hover {
transition: transform var(--fx-hover-duration) var(--fx-hover-curve),
box-shadow var(--fx-hover-duration) var(--fx-hover-curve);
}
.card-hover:hover {
transform: translateY(-2px);
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.6);
}
/* —— glow / pulse-glow：clothoff 风格不强调发光，做个低调 ring —— */
.glow,
.pulse-glow {
box-shadow: 0 0 0 1px rgba(249, 115, 22, 0.25);
animation: none; /* 关掉旧版 pulseGlow 动画 */
}
/* —— page-orb / page-grid：clothoff 不用浮动 orb 装饰
保留 selector 但隐藏它们，避免要去改 7+ 个模板的 DOM —— */
.page-orb,
.page-grid { display: none !important; }
/* —— 旧版渐变背景 body 残留：被 #0a0a0a body 接管，无需额外处理 —— */
/* ==========================================================================
4. 通用 utility / Common utilities
========================================================================== */
/* 文本溢出省略 */
.truncate {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* 响应式隐藏 */
@media (max-width: 768px) {
.hide-mobile { display: none !important; }
}
@media (min-width: 769px) {
.hide-desktop { display: none !important; }
}
/* 表单焦点环：橙色 */
input:focus,
textarea:focus,
select:focus {
outline: none;
border-color: var(--fx-accent) !important;
box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.15);
}
/* ==========================================================================
5. Modal / drawer / sheet 动画
--------------------------------------------------------------------------
缓动用 input.css :root 里的 --fx-sheet-curve（Vaul cubic-bezier(.32,.72,0,1)）
和 --fx-hover-curve（cubic-bezier(.23,1,.32,1)），跟 clothoff 实测对齐。
========================================================================== */
/* Backdrop 淡入 */
.modal-backdrop { animation: fxBackdropFadeIn 300ms var(--fx-hover-curve); }
@keyframes fxBackdropFadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
/* 内容从底部上滑（spec §2.5 sheet 曲线） */
.modal-slide-up {
animation: fxSlideUp var(--fx-sheet-duration) var(--fx-sheet-curve);
}
@keyframes fxSlideUp {
from { opacity: 0; transform: translateY(48px); }
to { opacity: 1; transform: translateY(0); }
}
/* 关闭动画 */
.modal-slide-down {
animation: fxSlideDown 300ms var(--fx-hover-curve) forwards;
}
@keyframes fxSlideDown {
from { opacity: 1; transform: translateY(0); }
to { opacity: 0; transform: translateY(32px); }
}
/* Modal 必须保持 fixed 定位居中 */
[id$="Modal"] { position: fixed !important; }
/* ==========================================================================
6. 加载 / Skeleton
========================================================================== */
.skeleton {
background: linear-gradient(90deg, #1a1a1a 25%, #252525 50%, #1a1a1a 75%);
background-size: 200% 100%;
animation: fxSkeleton 1.5s linear infinite;
}
@keyframes fxSkeleton {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
.loading-spinner {
width: 40px;
height: 40px;
border: 3px solid rgba(249, 115, 22, 0.18);
border-top-color: var(--fx-accent);
border-radius: 50%;
animation: fxSpin 1s linear infinite;
}
@keyframes fxSpin {
to { transform: rotate(360deg); }
}
/* ==========================================================================
7. RTL 微调（ar 语种）
========================================================================== */
html[lang="ar"] body { direction: rtl; }
/* ==========================================================================
8. Phase 0 — clothoff 1:1 Canonical Design Tokens
--------------------------------------------------------------------------
仅追加，不覆盖。所有 --clothoff-* 与 --fx-* 并存，单页 worker 按需选用。
完整文档：docs/clothoff-design-system.md
抓取脚本：docs/_raw/extract-design-tokens.js
原始数据：docs/_raw/clothoff-design-tokens-raw.json (2026-05-11)
========================================================================== */
:root {
/* —— Brand orange（实测 lab(72.7,31.9,97.9) → #ff9800 / Material 橙）—— */
--clothoff-orange-500: #ff9800;
--clothoff-orange-600: #fb8c00;
--clothoff-orange-400: #ffa726;
/* —— Surface tier (实测来源见 design-system.md §1.2) —— */
--clothoff-bg: #000000;
--clothoff-surface-1: #18181b; /* lab(8.3, 0.6, -2.2) → bg-card */
--clothoff-surface-2: #27272a; /* lab(15.7, 0.6, -2.2) → button bg */
--clothoff-surface-overlay: rgba(24, 24, 27, 0.5);
--clothoff-overlay-side: rgba(0, 0, 0, 0.4);
--clothoff-overlay-bottom: rgba(0, 0, 0, 0);
/* —— Text tier —— */
--clothoff-text: #ffffff;
--clothoff-text-soft: #c1c1c1; /* text-neutral-300 */
--clothoff-text-muted: #6a6a6a; /* text-neutral-500 / placeholder */
--clothoff-text-dim: rgba(255, 255, 255, 0.5);
/* —— Border —— */
--clothoff-border: #27272a;
--clothoff-border-soft: rgba(255, 255, 255, 0.06);
--clothoff-border-strong: rgba(255, 255, 255, 0.12);
/* —— Semantic（取自 toastify 默认）—— */
--clothoff-success: #07bc0c;
--clothoff-warning: #f1c40f;
--clothoff-danger: #e74c3c;
--clothoff-info: #3498db;
/* —— Radius scale（实测主流值）—— */
--clothoff-radius-sm: 4px;
--clothoff-radius-md: 8px;
--clothoff-radius-lg: 12px; /* rounded-xl, gen 卡片 */
--clothoff-radius-xl: 16px; /* rounded-2xl, buy 卡片 */
--clothoff-radius-2xl: 24px; /* drawer 顶角 */
--clothoff-radius-full: 9999px; /* pill / 头像 */
/* —— Shadow scale（clothoff 几乎不用阴影，保留兜底）—— */
--clothoff-shadow-none: none;
--clothoff-shadow-card: 0 0 0 1px rgba(255, 255, 255, 0.05);
--clothoff-shadow-pop: 0 12px 32px rgba(0, 0, 0, 0.6);
--clothoff-shadow-toast: 0px 4px 12px rgba(0, 0, 0, 0.1);
/* —— Easing & duration（实测命中数）—— */
--clothoff-ease-default: ease; /* 97 命中 */
--clothoff-ease-material: cubic-bezier(0.4, 0, 0.2, 1); /* 9 命中 */
--clothoff-ease-sheet: cubic-bezier(0.32, 0.72, 0, 1); /* Vaul */
--clothoff-ease-quint: cubic-bezier(0.23, 1, 0.32, 1);
--clothoff-ease-swing: ease-in-out;
--clothoff-duration-fast: 100ms;
--clothoff-duration-hover: 200ms;
--clothoff-duration-card: 300ms;
--clothoff-duration-sheet: 500ms;
--clothoff-duration-swing: 3000ms;
/* —— Container（实测 max-w-7xl + px-10）—— */
--clothoff-container-max: 1280px;
--clothoff-container-px: 40px;
--clothoff-header-h: 64px;
}
/* ==========================================================================
8.x 积分 / Credit Gem 统一图标 (2026-05-23)
--------------------------------------------------------------------------
用户主诉 "积分标志没有全站统一" — 之前 116 处 💎 蓝色 emoji + 1 处 Material
diamond 橙色 icon 混用, iOS/Android 渲染色不同 (粉/蓝/紫) 显粗糙.
方案: 内联 SVG mask + brand 橙色 fill, 全站 1:1 统一.
用法:
① 新代码: (默认橙色 1em)
(金色, milestone)
(灰色, disabled)
② 老代码 (HTML/JS 已有 💎 字符): fxGemReplace.js (本文件底部, 全局 hook)
自动把 textNode 内 💎 替换为 . 不影响 input/textarea.
优点 (vs Material diamond icon):
- SVG mask = 颜色由 CSS 控制, 跟 brand 1:1
- 1em 自适应父字体 (大小自动跟随上下文)
- 0 字体依赖, 0 FOUC, 0 网络请求
========================================================================== */
.fx-gem {
display: inline-block;
width: 1.05em;
height: 1.05em;
vertical-align: -0.20em;
/* 实心钻石 (filled diamond): 上下两段对称多面体. 比 outline 版视觉冲击强,
单色渲染干净, 跟 brand 橙色搭配像 NSFW 站常用的"premium gem"风格. */
background-color: var(--clothoff-orange-500, #ff9800);
-webkit-mask: url("data:image/svg+xml;utf8,") center/contain no-repeat;
mask: url("data:image/svg+xml;utf8,") center/contain no-repeat;
}
.fx-gem--gold {
background-color: var(--fx-accent-gold, #FFD700);
}
.fx-gem--mute {
background-color: rgba(255, 255, 255, 0.55);
}
/* ==========================================================================
8.y 任务完成 toast 升级 (2026-05-23)
--------------------------------------------------------------------------
用户问 "任务完成通知动画呢? 签到成功动画呢?" - 签到刚做了 claim popup,
任务完成也升级: 缩略图金色 ring pulse + toast shine sweep + confetti
(confetti 由 fxToastTaskComplete 单独调用).
========================================================================== */
.fx-toast.fx-toast--task-complete {
position: relative;
overflow: hidden;
border-color: rgba(255, 152, 0, 0.55) !important;
box-shadow: 0 8px 32px rgba(0,0,0,0.5),
0 0 0 1px rgba(255, 152, 0, 0.25),
0 0 28px rgba(255, 152, 0, 0.18) !important;
}
/* 缩略图 ring pulse (金色橙色高亮, 模拟 "新拿的内容" 闪光) */
.fx-toast.fx-toast--task-complete > img,
.fx-toast.fx-toast--task-complete > video {
border: 2px solid #ff9800 !important;
width: 48px !important;
height: 48px !important;
box-shadow: 0 0 0 0 rgba(255, 152, 0, 0.7);
animation: fx-toast-tc-ring 2s ease-out infinite;
}
@keyframes fx-toast-tc-ring {
0% { box-shadow: 0 0 0 0 rgba(255, 152, 0, 0.7); }
70% { box-shadow: 0 0 0 10px rgba(255, 152, 0, 0); }
100% { box-shadow: 0 0 0 0 rgba(255, 152, 0, 0); }
}
/* shine sweep — 跟 claim CTA 同款 (1.5s 循环掠光带), 增强 "新东西到了" 仪式感 */
.fx-toast.fx-toast--task-complete::after {
content: '';
position: absolute;
top: 0; left: -110%;
width: 50%; height: 100%;
background: linear-gradient(115deg,
transparent 0%,
rgba(255, 215, 0, 0.18) 50%,
transparent 100%);
transform: skewX(-22deg);
pointer-events: none;
animation: fx-toast-tc-shine 3.2s ease-in-out infinite;
}
@keyframes fx-toast-tc-shine {
0% { left: -110%; }
55% { left: 130%; }
100% { left: 130%; }
}
@media (prefers-reduced-motion: reduce) {
.fx-toast.fx-toast--task-complete > img,
.fx-toast.fx-toast--task-complete > video { animation: none; }
.fx-toast.fx-toast--task-complete::after { display: none; }
}
/* ==========================================================================
8.z 首次任务完成 modal (fxAnim.firstTaskCelebrate, 2026-05-23)
--------------------------------------------------------------------------
色粉转化峰值 — 用户拿到第 1 张 nude 心情高峰 + 还想再做. 仿签到 claim popup
同一套设计语言 (sparkles + ring + count-up + shine sweep + stagger).
差异: 缩略图大 (展示用户真作品), 加价值锚定卡 ($4 = 6 张) + 限时倒计时.
========================================================================== */
.fx-ftc-mask {
position: fixed;
inset: 0;
z-index: 10000;
background: rgba(0,0,0,0.82);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
opacity: 0;
transition: opacity .32s cubic-bezier(.4,0,.2,1);
}
.fx-ftc-mask.is-open { opacity: 1; }
.fx-ftc-modal {
position: relative;
width: 100%;
max-width: 380px;
background: #18181b;
border: 1px solid #27272a;
border-radius: 22px;
padding: 24px 22px 18px;
text-align: center;
transform: scale(0.92) translateY(10px);
transition: transform .36s cubic-bezier(.34, 1.15, .4, 1);
}
.fx-ftc-mask.is-open .fx-ftc-modal { transform: scale(1) translateY(0); }
.fx-ftc-close {
position: absolute;
top: 10px; right: 10px;
width: 30px; height: 30px;
border-radius: 9999px;
background: rgba(255,255,255,0.06);
border: 0;
color: rgba(255,255,255,0.6);
cursor: pointer;
display: inline-flex; align-items: center; justify-content: center;
z-index: 2;
}
.fx-ftc-close:hover { color: #fff; background: rgba(255,255,255,0.12); }
.fx-ftc-close .material-symbols-outlined { font-size: 18px; }
/* 大缩略图 + 金橙旋转 ring */
.fx-ftc-thumb {
position: relative;
width: 128px;
height: 128px;
margin: 4px auto 14px;
border-radius: 50%;
overflow: hidden;
isolation: isolate;
animation: fx-ftc-thumb-in 700ms cubic-bezier(.34, 1.3, .4, 1);
}
@keyframes fx-ftc-thumb-in {
0% { transform: scale(0.4) rotate(-20deg); opacity: 0; }
60% { transform: scale(1.12) rotate(8deg); opacity: 1; }
100% { transform: scale(1) rotate(0); }
}
.fx-ftc-thumb img {
width: 100%; height: 100%;
object-fit: cover;
display: block;
border-radius: 50%;
}
.fx-ftc-thumb__placeholder {
width: 100%; height: 100%;
display: flex; align-items: center; justify-content: center;
background: linear-gradient(135deg, #27272a, #18181b);
font-size: 56px;
}
/* 2026-05-23 v7 反 AI 化精简 — 单色 ring (Material 橙单色, 不是 4 色 conic),
静态 1px border 替代 4s spin 旋转. sparkles 完全删除. */
.fx-ftc-thumb__ring {
position: absolute;
inset: -2px;
border-radius: 50%;
border: 2px solid rgba(255, 152, 0, 0.6);
z-index: -1;
}
/* sparkles 视觉删除 (CSS rule 保留兼容 HTML 结构, 但视觉隐藏) */
.fx-ftc-sparkles { display: none; }
.fx-ftc-title {
font-size: 20px;
font-weight: 700;
color: #fff;
margin-bottom: 4px;
letter-spacing: -0.01em;
}
.fx-ftc-sub {
font-size: 13px;
color: rgba(255,255,255,0.60);
margin-bottom: 14px;
line-height: 1.4;
}
/* 2026-05-23 v7 反 AI 化精简价值锚定卡 — 单色 Material 橙, 删金色 + drop-shadow,
删 timer pulse 动画 (淘宝紧迫感被用户 challenge), 数字字号小. */
.fx-ftc-anchor {
padding: 12px;
background: #18181b;
border: 1px solid #27272a;
border-radius: 10px;
margin-bottom: 14px;
}
.fx-ftc-anchor__row {
display: flex;
align-items: baseline;
justify-content: center;
gap: 6px;
margin-bottom: 4px;
}
.fx-ftc-anchor__price {
font-size: 17px;
font-weight: 800;
color: #ff9800;
letter-spacing: -0.01em;
}
.fx-ftc-anchor__arrow {
font-size: 14px;
color: rgba(255,255,255,0.45);
font-weight: 500;
}
.fx-ftc-anchor__yield {
font-size: 14px;
font-weight: 600;
color: rgba(255,255,255,0.80);
}
.fx-ftc-anchor__bonus {
font-size: 11px;
color: rgba(255,255,255,0.50);
font-weight: 500;
}
.fx-ftc-anchor__timer {
display: inline-block;
padding: 1px 6px;
background: rgba(255, 152, 0, 0.10);
color: #ff9800;
border-radius: 4px;
font-family: ui-monospace, 'SF Mono', Menlo, monospace;
font-weight: 600;
}
/* 2026-05-23 v7 反 AI 化精简 CTA — 单色 #ff9800 实色 (不渐变金),
删 shine sweep 动画, 1 层 shadow, 圆角小. */
.fx-ftc-cta {
position: relative;
width: 100%;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: 12px 16px;
background: #ff9800;
color: #000;
border: 0;
border-radius: 10px;
font-size: 14px;
font-weight: 700;
cursor: pointer;
transition: background .15s ease;
overflow: hidden;
}
.fx-ftc-cta:hover { background: #ffa726; }
.fx-ftc-cta:active { background: #fb8c00; }
.fx-ftc-cta .material-symbols-outlined {
font-size: 16px;
font-variation-settings: 'FILL' 1;
}
/* shine sweep 删除 — 反 AI 化, 静态 CTA 即可 */
.fx-ftc-cta__shine { display: none; }
.fx-ftc-cta-text {
width: 100%;
margin-top: 8px;
padding: 8px;
background: transparent;
border: 0;
color: rgba(255,255,255,0.55);
font-size: 13px;
font-weight: 500;
cursor: pointer;
}
.fx-ftc-cta-text:hover { color: rgba(255,255,255,0.85); }
@media (prefers-reduced-motion: reduce) {
.fx-ftc-thumb,
.fx-ftc-thumb__ring,
.fx-ftc-spark,
.fx-ftc-cta__shine,
.fx-ftc-anchor__timer { animation: none !important; }
}
/* ==========================================================================
8.zz 分享到广场成功 popup (fxAnim.shareSuccess, 2026-05-23 v2)
--------------------------------------------------------------------------
替代历史 window.alert("🎉 +1 💎"). 跟 §8.z firstTaskCelebrate 同语言但
更小更轻 (单一动作完成的正反馈, 不是漏斗节点).
设计 token / 入场曲线 / 配色完全复用 .fx-ftc-* — 只是 prefix .fx-ss-* 隔离.
========================================================================== */
.fx-ss-mask {
position: fixed; inset: 0; z-index: 10000;
background: rgba(0,0,0,0.78);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
display: flex; align-items: center; justify-content: center;
padding: 20px;
opacity: 0;
transition: opacity .32s cubic-bezier(.4,0,.2,1);
}
.fx-ss-mask.is-open { opacity: 1; }
.fx-ss-modal {
position: relative;
width: 100%; max-width: 340px;
background: #18181b;
border: 1px solid #27272a;
border-radius: 22px;
padding: 22px 20px 16px;
text-align: center;
transform: scale(0.92) translateY(10px);
transition: transform .36s cubic-bezier(.34, 1.15, .4, 1);
}
.fx-ss-mask.is-open .fx-ss-modal { transform: scale(1) translateY(0); }
.fx-ss-close {
position: absolute;
top: 10px; right: 10px;
width: 28px; height: 28px;
border-radius: 9999px;
background: rgba(255,255,255,0.06);
border: 0;
color: rgba(255,255,255,0.6);
cursor: pointer;
display: inline-flex; align-items: center; justify-content: center;
z-index: 2;
}
.fx-ss-close:hover { color: #fff; background: rgba(255,255,255,0.12); }
.fx-ss-close .material-symbols-outlined { font-size: 16px; }
/* 缩略图 (作品视频或 placeholder) + 旋转 ring (跟 §8.z 同款但更小 112px) */
.fx-ss-thumb {
position: relative;
width: 112px; height: 112px;
margin: 2px auto 12px;
border-radius: 50%;
overflow: hidden;
isolation: isolate;
animation: fx-ftc-thumb-in 700ms cubic-bezier(.34, 1.3, .4, 1);
}
.fx-ss-thumb img,
.fx-ss-thumb video {
width: 100%; height: 100%;
object-fit: cover;
display: block;
border-radius: 50%;
}
.fx-ss-thumb__placeholder {
width: 100%; height: 100%;
display: flex; align-items: center; justify-content: center;
background: linear-gradient(135deg, #27272a, #18181b);
font-size: 48px;
}
/* 2026-05-23 v7 精简 ring — 单色 Material 橙 1px border, 删 conic + spin */
.fx-ss-thumb__ring {
position: absolute;
inset: -2px;
border-radius: 50%;
border: 2px solid rgba(255, 152, 0, 0.6);
z-index: -1;
}
/* sparkles 删除 (反 AI 化) */
.fx-ss-sparkles { display: none; }
.fx-ss-spark { display: none; }
.fx-ss-title {
font-size: 18px;
font-weight: 700;
color: #fff;
margin-bottom: 6px;
letter-spacing: -0.01em;
}
/* 2026-05-23 v7 精简 reward chip — 单色 Material 橙 (不绿), 数字字号小 */
.fx-ss-reward {
display: inline-flex;
align-items: center;
gap: 4px;
margin-bottom: 6px;
padding: 4px 11px;
background: rgba(255, 152, 0, 0.10);
border: 1px solid rgba(255, 152, 0, 0.28);
border-radius: 9999px;
font-size: 13px;
font-weight: 600;
color: #ff9800;
}
.fx-ss-reward__label { color: rgba(255,255,255,0.65); font-weight: 500; }
.fx-ss-reward__num {
font-size: 14px;
font-weight: 800;
color: #ff9800;
font-variant-numeric: tabular-nums;
}
.fx-ss-reward .fx-gem { width: 13px; height: 13px; }
.fx-ss-sub {
font-size: 12.5px;
color: rgba(255,255,255,0.55);
margin-bottom: 14px;
line-height: 1.4;
}
/* 2026-05-23 v7 精简 CTA — 单色 #ff9800 实色, 删 shine sweep, 静态 */
.fx-ss-cta {
position: relative;
width: 100%;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: 11px 16px;
background: #ff9800;
color: #000;
border: 0;
border-radius: 10px;
font-size: 14px;
font-weight: 700;
cursor: pointer;
transition: background .15s ease;
overflow: hidden;
}
.fx-ss-cta:hover { background: #ffa726; }
.fx-ss-cta:active { background: #fb8c00; }
.fx-ss-cta .material-symbols-outlined { font-size: 16px; }
.fx-ss-cta__shine { display: none; }
.fx-ss-cta-text {
width: 100%;
margin-top: 6px;
padding: 7px;
background: transparent;
border: 0;
color: rgba(255,255,255,0.55);
font-size: 12.5px;
font-weight: 500;
cursor: pointer;
}
.fx-ss-cta-text:hover { color: rgba(255,255,255,0.85); }
@media (prefers-reduced-motion: reduce) {
.fx-ss-thumb,
.fx-ss-thumb__ring,
.fx-ss-spark,
.fx-ss-cta__shine { animation: none !important; }
}
/* ==========================================================================
8.zzz fx-scc-card — 分享广场 mini card 浮卡 (2026-05-23 v3)
--------------------------------------------------------------------------
替代 v2 的 fx-toast--share-carrot (秒消失 / 没说明白). 用户反馈 3 条:
1. v2 toast 8s 太短来不及点 → 不自动消失 + 加 ✕ 关闭按钮
2. 不知道有什么好处 → 内列 5 档奖励梯度 grid
3. 1💎 太少 → 标题突出 "最高 15💎" 让 carrot 上限可见
位置: mobile 底部, 桌面右下角 (CSS @media 区分)
入场: slide-up + scale (mobile) / slide-in-right (桌面)
========================================================================== */
.fx-scc-card {
position: fixed;
z-index: 9500;
background: #18181b;
border: 1px solid #27272a;
border-radius: 14px;
padding: 14px;
box-shadow: 0 10px 30px rgba(0,0,0,0.5);
overflow: hidden;
/* mobile: 底部居中, full width 减边距 */
left: 12px; right: 12px; bottom: 12px;
/* 入场前 */
opacity: 0;
transform: translateY(40px) scale(0.96);
transition: opacity .36s cubic-bezier(.4,0,.2,1),
transform .42s cubic-bezier(.34, 1.18, .42, 1);
}
.fx-scc-card.is-open {
opacity: 1;
transform: translateY(0) scale(1);
}
@media (min-width: 768px) {
.fx-scc-card {
left: auto;
bottom: 24px;
right: 24px;
width: 340px;
transform: translateX(40px) scale(0.96);
}
.fx-scc-card.is-open { transform: translateX(0) scale(1); }
}
/* 2026-05-23 v7 反 AI 化精简 — 删绿光晕 (单色 Material 橙原则) */
.fx-scc-glow { display: none; }
.fx-scc-close {
position: absolute;
top: 8px; right: 8px;
width: 28px; height: 28px;
border-radius: 9999px;
background: rgba(255,255,255,0.06);
border: 0;
color: rgba(255,255,255,0.55);
cursor: pointer;
display: inline-flex; align-items: center; justify-content: center;
z-index: 2;
transition: background .15s ease, color .15s ease;
}
.fx-scc-close:hover { color: #fff; background: rgba(255,255,255,0.15); }
.fx-scc-close .material-symbols-outlined { font-size: 16px; }
.fx-scc-header {
display: flex;
gap: 12px;
align-items: center;
margin-bottom: 12px;
position: relative;
z-index: 1;
}
.fx-scc-thumb {
width: 48px; height: 48px;
border-radius: 10px;
overflow: hidden;
flex-shrink: 0;
background: #27272a;
position: relative;
}
.fx-scc-thumb__media {
width: 100%; height: 100%;
object-fit: cover;
display: block;
}
.fx-scc-thumb__placeholder {
width: 100%; height: 100%;
display: flex; align-items: center; justify-content: center;
font-size: 26px;
}
.fx-scc-header__text {
flex: 1; min-width: 0;
padding-right: 28px; /* 避开 ✕ 按钮 */
}
.fx-scc-title {
font-size: 13px;
font-weight: 600;
color: rgba(255,255,255,0.80);
margin-bottom: 2px;
}
.fx-scc-max {
display: inline-flex;
align-items: baseline;
gap: 3px;
font-size: 11.5px;
font-weight: 500;
color: rgba(255,255,255,0.55);
}
/* 2026-05-23 v7 精简数字 — 单色 #ff9800 (不金), 18px (不 22px), 删 drop-shadow */
.fx-scc-max__num {
font-size: 18px;
font-weight: 800;
color: #ff9800;
letter-spacing: -0.01em;
line-height: 1;
}
.fx-scc-max .fx-gem { width: 12px; height: 12px; }
.fx-scc-max__suffix {
color: rgba(255,255,255,0.45);
font-weight: 500;
font-size: 11px;
margin-left: 2px;
}
/* 5 档梯度 grid (mobile 5 列, 桌面也 5 列) */
.fx-scc-tiers {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 5px;
margin-bottom: 11px;
position: relative;
z-index: 1;
}
/* 2026-05-23 v7 反 AI 化精简 — 5 档卡统一中性灰背景, 头尾两档单色 Material 橙
突出 (不再 绿 + 灰中间 + 金 3 色). 数字字号小, 删 drop-shadow. */
.fx-scc-tier {
padding: 7px 4px;
background: #1f1f23;
border: 1px solid #27272a;
border-radius: 6px;
text-align: center;
}
.fx-scc-tier__when {
font-size: 10px;
color: rgba(255,255,255,0.45);
font-weight: 500;
line-height: 1.2;
margin-bottom: 2px;
}
.fx-scc-tier__reward {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 1px;
font-size: 13px;
font-weight: 700;
color: rgba(255,255,255,0.80);
line-height: 1;
}
.fx-scc-tier__reward .fx-gem { width: 10px; height: 10px; }
.fx-scc-tier--share {
background: rgba(255, 152, 0, 0.10);
border-color: rgba(255, 152, 0, 0.30);
}
.fx-scc-tier--share .fx-scc-tier__when { color: #ff9800; font-weight: 600; }
.fx-scc-tier--share .fx-scc-tier__reward { color: #ff9800; }
.fx-scc-tier--top {
background: rgba(255, 152, 0, 0.18);
border-color: rgba(255, 152, 0, 0.45);
}
.fx-scc-tier--top .fx-scc-tier__when { color: #ff9800; font-weight: 700; }
.fx-scc-tier--top .fx-scc-tier__reward { color: #ff9800; }
.fx-scc-hint {
font-size: 11.5px;
color: rgba(255,255,255,0.55);
text-align: center;
margin-bottom: 11px;
line-height: 1.35;
position: relative;
z-index: 1;
}
/* 2026-05-23 v7 精简 CTA — 单色 #ff9800 实色, 删渐变 + shine sweep, 静态 */
.fx-scc-cta {
position: relative;
width: 100%;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: 11px 14px;
background: #ff9800;
color: #000;
border: 0;
border-radius: 10px;
font-size: 13.5px;
font-weight: 700;
cursor: pointer;
transition: background .15s ease;
overflow: hidden;
z-index: 1;
}
.fx-scc-cta:hover { background: #ffa726; }
.fx-scc-cta:active { background: #fb8c00; }
.fx-scc-cta .material-symbols-outlined { font-size: 16px; }
.fx-scc-cta__shine { display: none; }
@media (prefers-reduced-motion: reduce) {
.fx-scc-card,
.fx-scc-cta__shine { transition: none !important; animation: none !important; }
}
/* ==========================================================================
9. 2026-05-13 视觉升级 / Visual upgrade
--------------------------------------------------------------------------
· Material Symbols 字体类（替换全站 emoji）
· Motion tokens (--motion-duration-* / --motion-ease-*)
· 卡片 / CTA hover-active 微反馈（scale 1.01 / 0.99）
· BEFORE 占位 wiggle 摇晃（4 层应用）
· 底部 nav active tab 心跳脉冲 + 橙色 glow
· 主菜单角标徽章（红点 / 数字角标）
· prefers-reduced-motion 全局兜底
--------------------------------------------------------------------------
设计灵感来自 clothoff (cheatsheet 2026-05-13)：scaleLoop / conicSpin / Material
easing。fotoxreseller 抄结构不抄品牌色（仍用我们 --fx-accent 橙）。
========================================================================== */
/* ---------- 9.1 Material Symbols 字体类 / Material Symbols icon class ----- */
/* 2026-05-13 自托管 Material Symbols Outlined / Self-hosted woff2
Why: Brave Android（含部分隐私强化浏览器）拦截 Google Fonts woff2，
ligature 加载失败时，关键字（"diamond" / "image" / "movie" ...）
会以文本形式渲染。本地化字体绕过 CDN 拦截。
Variant: opsz 24 / wght 400 / FILL 0 / GRAD 0（与原 CDN 配置一致）。
font-display: block —— 加载前 invisible，避免 fallback 短暂显示
ligature 关键字文本（比 swap 更安全）。
2026-05-18 cache-buster ?v=20260518: woff2 文件之前没 SCP 上 server →
Cloudflare 缓存 24h 的 404 响应。加 query string 让 CF 当成新 URL
重新回源拉 200，不必等 24h 缓存自然过期。如果以后字体更新换字形也用
同样手法（递增 v 号）。Bust Cloudflare's cached 404 by changing URL. */
@font-face {
font-family: 'Material Symbols Outlined';
font-style: normal;
font-weight: 400;
src: url('/static/fonts/material-symbols-outlined.woff2?v=20260518') format('woff2');
font-display: block;
}
.material-symbols-outlined {
font-family: 'Material Symbols Outlined';
font-weight: normal;
font-style: normal;
font-size: 24px;
line-height: 1;
letter-spacing: normal;
text-transform: none;
display: inline-block;
white-space: nowrap;
word-wrap: normal;
direction: ltr;
font-feature-settings: 'liga';
-webkit-font-feature-settings: 'liga';
-webkit-font-smoothing: antialiased;
vertical-align: middle;
user-select: none;
}
.material-symbols-outlined.filled {
font-variation-settings: 'FILL' 1;
}
/* ---------- 9.2 Motion tokens / 全站缓动 + 时长基线 --------------------
W1 (2026-05-13) 扩展：新增 modal/pill/out 三档缓动，覆盖 clothoff & undress
两套抄站 cheatsheet 里识别出的 5 类典型曲线（standard / vaul / modal pop /
pill spring / linear-out）。W2-W5 新动画统一引用这些 token，禁止再自己写
cubic-bezier 数字。 */
:root {
--motion-duration-fast: 0.15s;
--motion-duration-normal: 0.2s;
--motion-duration-slow: 0.5s;
--motion-ease-standard: cubic-bezier(0.4, 0, 0.2, 1); /* Material 标准 */
--motion-ease-vaul: cubic-bezier(0.32, 0.72, 0, 1); /* Vaul drawer */
--motion-ease-modal: cubic-bezier(0.34, 1.15, 0.4, 1); /* modal pop spring */
--motion-ease-pill: cubic-bezier(0.22, 1, 0.36, 1); /* pill / chip ease */
--motion-ease-out: cubic-bezier(0, 0, 0.58, 1); /* linear-out */
}
/* ---------- 9.3 通用卡片 / CTA hover-active 微反馈 ---------------------
Why: clothoff 全站点击块都用 hover:scale-101 + active:scale-99 + duration-200
作为"按下去"的物理感反馈。我们直接套到现有 .fx-* class 上。
未存在的 class 选择器静默忽略，安全副作用。 */
.fx-payment-card,
.fx-pkg-card,
.fx-cat-card,
.fx-tooldrawer-card,
.fx-swipe-card,
.fx-tab-pill,
.fx-tld-cta,
.fx-tooldrawer-submit,
.fx-quick-action-btn,
.fx-balance-cap-btn,
button.fx-btn-primary,
button.fx-btn-secondary,
.clothoff-cta,
.rch-pkg-card,
.rch-pay-card {
transition: transform var(--motion-duration-normal) var(--motion-ease-standard),
background-color var(--motion-duration-fast) ease,
border-color var(--motion-duration-fast) ease,
box-shadow var(--motion-duration-normal) var(--motion-ease-standard);
will-change: transform;
}
.fx-payment-card:hover,
.fx-pkg-card:hover,
.fx-cat-card:hover,
.fx-tooldrawer-card:hover,
.fx-swipe-card:hover,
.fx-tld-cta:hover,
.fx-tooldrawer-submit:hover:not(:disabled),
.fx-balance-cap-btn:hover,
button.fx-btn-primary:hover,
button.fx-btn-secondary:hover,
.clothoff-cta:hover,
.rch-pkg-card:hover,
.rch-pay-card:hover {
transform: scale(1.01);
}
.fx-payment-card:active,
.fx-pkg-card:active,
.fx-cat-card:active,
.fx-tooldrawer-card:active,
.fx-swipe-card:active,
.fx-tld-cta:active,
.fx-tooldrawer-submit:active:not(:disabled),
.fx-balance-cap-btn:active,
button.fx-btn-primary:active,
button.fx-btn-secondary:active,
.clothoff-cta:active,
.rch-pkg-card:active,
.rch-pay-card:active {
transform: scale(0.99);
}
/* ---------- 9.4 BEFORE 占位 wiggle / 持续左右摇摆动画 ------------------
Why: tooldrawer / swipe / category 大图占位区原图（"Before"）默认静止，
用户容易忽略它能上传。clothoff 用的是持续左右摇摆（±4°，1.2s 一周期）
而非偶发抖动，更稳定地吸引注意。Material Symbols filter 也同理。 */
@keyframes fx-before-wiggle {
0%, 100% { transform: rotate(-4deg); }
50% { transform: rotate(4deg); }
}
.fx-cat-card__compare,
.fx-tooldrawer-card .fx-td-before,
.fx-swipe-card .fx-card-before,
.fx-tld-empty-hero__hint-img,
.fx-tld-empty-hero__hint-placeholder {
animation: fx-before-wiggle 1.2s ease-in-out infinite;
transform-origin: center;
}
.fx-cat-card:hover .fx-cat-card__compare,
.fx-tooldrawer-card:hover .fx-td-before,
.fx-swipe-card:hover .fx-card-before {
animation-play-state: paused;
}
/* ---------- 9.4.1 Picker step effect cards 入场动画 ---------------------
Why: 切换分类时 30 张 effect cards 同时炸出来视觉撕裂。clothoff 风格用
stagger fade-in（每张延迟 30ms，封顶 600ms），上滑+缩放+渐显，
配合 inline animation-delay 实现波浪状错峰入场。 */
@keyframes fx-card-enter {
0% { opacity: 0; transform: translateY(16px) scale(0.96); }
100% { opacity: 1; transform: translateY(0) scale(1); }
}
.fx-tooldrawer-card {
animation: fx-card-enter 0.35s cubic-bezier(.4, 0, .2, 1) backwards;
}
@media (prefers-reduced-motion: reduce) {
.fx-tooldrawer-card { animation: none; }
}
/* ---------- 9.5 选中态 nav tab 心跳 + 彩光 / Heartbeat + glow ----------
Why: clothoff 实测的 scaleLoop（1 → 1.05 → 1）每 1.5s 心跳 + drop-shadow
叠加底色 glow。我们把它套到底栏 active tab 的 svg/Material Symbols 上。 */
@keyframes fx-scale-loop {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.05); }
}
@keyframes fx-conic-spin {
to { transform: rotate(360deg); }
}
.fx-bottom-nav .fx-tab[data-active="true"] svg,
.fx-bottom-nav .fx-tab[data-active="true"] .material-symbols-outlined {
animation: fx-scale-loop 1.5s ease-in-out infinite;
filter: drop-shadow(0 0 8px var(--fx-accent, #f97316));
}
.fx-bottom-nav .fx-tab[data-active="true"] span {
font-weight: 700;
text-shadow: 0 0 6px rgba(249, 115, 22, 0.5);
}
/* 顶级 fx-tabbar 选中态弱化版（不过 hyper） */
.fx-tabbar-btn[data-active="true"] {
filter: drop-shadow(0 0 4px rgba(249, 115, 22, 0.4));
}
.fx-tabbar-btn[data-active="true"] svg,
.fx-tabbar-btn[data-active="true"] .material-symbols-outlined {
animation: fx-scale-loop 2s ease-in-out infinite;
}
/* ---------- 9.6 主菜单角标徽章 / Side-panel menu badges ---------------
Why: 签到 / 通知 / 邀请 三个菜单项预留"红点 / 数字角标"插槽。当前
data-fx-badge 都为 hidden，等后端接口接入 fxUpdateMenuBadges 才显示。 */
.fx-menu-badge,
.fx-sp-row__badge {
display: inline-block;
min-width: 8px;
width: 8px;
height: 8px;
border-radius: 999px;
background: var(--fx-accent, #f97316);
box-shadow: 0 0 6px rgba(249, 115, 22, 0.6);
flex-shrink: 0;
vertical-align: middle;
margin-right: 4px;
}
.fx-menu-badge[data-fx-badge-count],
.fx-sp-row__badge[data-fx-badge-count] {
width: auto;
min-width: 16px;
height: 16px;
border-radius: 999px;
padding: 0 5px;
line-height: 16px;
font-size: 10px;
font-weight: 700;
color: #000;
text-align: center;
}
.fx-menu-badge[data-fx-badge-count]::after,
.fx-sp-row__badge[data-fx-badge-count]::after {
content: attr(data-fx-badge-count);
}
.fx-menu-badge[hidden],
.fx-sp-row__badge[hidden] {
display: none;
}
/* ---------- 9.6.1 W4+ 防 scroll chain — drawer 滑到边界不传给背景 ----
Why: iOS Safari 上一个嵌套滚动容器（drawer body / records list / album list）
滑到顶/底之后，剩余 momentum 会顺着 scroll chain 冒泡到 ，把背景的
AI 主页一起拖动，体验非常崩。overscroll-behavior: contain 在滚到边界时
立刻吃掉冒泡，不影响容器内部正常滚动。touch-action: pan-y 是双保险，
告诉浏览器这块只接受垂直手势，避免横向滑动误触发外层 swipe。
未存在的 selector 静默忽略，安全副作用。 */
.fx-side-drawer-body,
.fx-side-drawer .fx-side-panel-body,
.fx-tooldrawer-body,
.fx-records-list,
.fx-album-drawer .fx-album-body,
.clothoff-sd__panel, /* 主菜单 drawer 实际滚动容器 (overflow-y:auto) */
.clothoff-sd__stack, /* 主菜单 drawer 堆叠容器 — 保险兜底 */
[data-fx-drawer] [class*="panel"], /* 任何 panel 类的兜底，避免漏 selector */
[data-fx-drawer-body],
[data-vaul-drawer] [class*="overflow"] {
overscroll-behavior: contain;
overscroll-behavior-y: contain;
-webkit-overflow-scrolling: touch;
touch-action: pan-y;
}
/* ---------- 9.7 prefers-reduced-motion 兜底 / 无障碍合规 ---------------
Why: 所有装饰性循环动画（wiggle / scaleLoop / conicSpin / shimmer）必须
在用户系统设置里开启 "减少动态效果" 时关闭，避免眩晕。
保留过渡（hover/active scale）因为它们是反馈不是装饰。 */
@media (prefers-reduced-motion: reduce) {
.fx-cat-card__compare,
.fx-tooldrawer-card .fx-td-before,
.fx-swipe-card .fx-card-before,
.fx-tld-empty-hero__hint-img,
.fx-tld-empty-hero__hint-placeholder,
.fx-bottom-nav .fx-tab[data-active="true"] svg,
.fx-bottom-nav .fx-tab[data-active="true"] .material-symbols-outlined,
.fx-tabbar-btn[data-active="true"] svg,
.fx-tabbar-btn[data-active="true"] .material-symbols-outlined {
animation: none !important;
}
/* skeleton 已经在装饰循环范畴内 */
.skeleton { animation: none !important; }
}
/* ==========================================================================
10. W1 unified animation foundation / 统一动画基础设施 (2026-05-13)
--------------------------------------------------------------------------
纯 keyframes 仓库 + reduced-motion 兜底 — 不挂任何选择器，等 W2-W5 worker
通过 inline style.animation 或 element.classList 主动消费。命名 prefix
`fx-anim-*` 用于 reduced-motion 兜底的属性选择器统一关闭。
配套 JS：static/js/fx-anim-feedback.js 暴露 window.fxAnim.* 14 个 API。
========================================================================== */
/* Tier 3 — 行为反馈 / behavioral feedback */
@keyframes fx-anim-balance-bump {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.15); color: var(--fx-accent-gold, #FFD700); }
}
@keyframes fx-anim-balance-flash-red {
0%, 100% { color: inherit; }
50% { color: #ef4444; }
}
/* Tier 2 — 元素出场 / element entrance */
@keyframes fx-anim-pop {
0% { opacity: 0; transform: scale(0.6); }
60% { opacity: 1; transform: scale(1.1); }
100% { opacity: 1; transform: scale(1); }
}
@keyframes fx-anim-toast-slide-in {
0% { opacity: 0; transform: translateX(100%); }
100% { opacity: 1; transform: translateX(0); }
}
@keyframes fx-anim-toast-slide-out {
0% { opacity: 1; transform: translateX(0); }
100% { opacity: 0; transform: translateX(100%); }
}
/* Tier 4 — 装饰 / decorative */
@keyframes fx-anim-claim-shine {
0% { transform: rotate(0) scale(1); filter: brightness(1); }
50% { transform: rotate(180deg) scale(1.3); filter: brightness(1.5) drop-shadow(0 0 20px gold); }
100% { transform: rotate(360deg) scale(1); filter: brightness(1); }
}
@keyframes fx-anim-coin-fly {
0% { opacity: 1; transform: translate(0, 0) scale(1); }
80% { opacity: 1; }
100% { opacity: 0; transform: var(--coin-fly-end, translate(200px, -300px)) scale(0.5); }
}
@keyframes fx-anim-checkmark-draw {
0% { stroke-dashoffset: 50; }
100% { stroke-dashoffset: 0; }
}
@keyframes fx-anim-shimmer {
0% { transform: translateX(-100%); }
100% { transform: translateX(100%); }
}
/* Reduced-motion 兜底：[class^="fx-anim-"] / [class*=" fx-anim-"] 属性选择器
统一关闭。fxAnim.* JS API 内部也独立检查 prefers-reduced-motion / localStorage
开关，双保险（CSS class 触发的动画 + JS 注入的动画都会被关闭）。 */
@media (prefers-reduced-motion: reduce) {
[class^="fx-anim-"], [class*=" fx-anim-"] {
animation: none !important;
transition: none !important;
}
}
/* ==========================================================================
10. Guest "Sign In" 按钮（2026-05-14 undress-style guest mode）
--------------------------------------------------------------------------
单按钮替代原 "登录 + 注册" 两个链接。点击 [data-fx-login-trigger] 由
fx-login-modal.html 注入的全局 listener 捕获，弹 inline login modal。
未 JS 时 兼任 SSR fallback。
========================================================================== */
.fx-signin-btn {
display: inline-flex;
align-items: center;
justify-content: center;
background: linear-gradient(to bottom right, #FF9000, #FF7A00, #FF281A);
color: #fff;
padding: 8px 18px;
border-radius: 12px;
font-weight: 700;
font-size: 14px;
line-height: 1;
border: none;
cursor: pointer;
text-decoration: none;
box-shadow: 0 2px 8px rgba(255, 122, 0, 0.3);
transition: transform 0.15s ease, box-shadow 0.15s ease;
white-space: nowrap;
}
.fx-signin-btn:hover {
transform: scale(1.02);
color: #fff;
box-shadow: 0 4px 12px rgba(255, 122, 0, 0.4);
}
.fx-signin-btn:active { transform: scale(0.98); }
.fx-signin-btn:focus-visible {
outline: 2px solid #FF9000;
outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
.fx-signin-btn { transition: none; }
.fx-signin-btn:hover, .fx-signin-btn:active { transform: none; }
}
/* ==========================================================================
11. Visual polish assets — sensual but non-explicit ambience
--------------------------------------------------------------------------
这些类只负责视觉外壳：背景、纹理、图标容器。不要把业务数字/价格写在这里。
These classes are presentation-only: backgrounds, texture, icon containers.
========================================================================== */
:root {
--fx-ambience-red: #ff281a;
--fx-ambience-gold: #ffd36a;
--fx-ambience-violet: #7b2cff;
--fx-ui-brand-muse-bg: url('/static/img/ui/brand-muse-latina.png?v=20260523a');
--fx-ui-glamour-bg: var(--fx-ui-brand-muse-bg);
--fx-ui-drawer-texture: url('/static/img/ui/drawer-texture.svg?v=20260523a');
--fx-ui-faceswap-scan-bg: url('/static/img/ui/faceswap-scan-bg.svg?v=20260523a');
}
.fx-bg-scene {
position: relative;
isolation: isolate;
}
.fx-bg-scene::before {
content: '';
position: fixed;
inset: 0;
z-index: -2;
pointer-events: none;
background:
radial-gradient(circle at 82% 6%, rgba(255, 152, 0, 0.18), transparent 36%),
radial-gradient(circle at 0% 26%, rgba(123, 44, 255, 0.12), transparent 34%),
linear-gradient(180deg, rgba(255, 40, 26, 0.08), transparent 34%),
var(--fx-bg, #050505);
}
.fx-bg-scene::after {
content: '';
position: fixed;
inset: 0;
z-index: -1;
pointer-events: none;
opacity: 0.34;
background-image: var(--fx-ui-drawer-texture);
background-size: cover;
background-position: top center;
mix-blend-mode: screen;
}
.fx-glamour-hero {
position: relative;
overflow: hidden;
background:
linear-gradient(180deg, rgba(0,0,0,0.08), rgba(0,0,0,0.82)),
var(--fx-ui-glamour-bg) center / cover no-repeat,
#080808;
}
.fx-glamour-hero::after {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
background:
linear-gradient(90deg, rgba(0,0,0,0.86), rgba(0,0,0,0.30) 52%, rgba(0,0,0,0.68)),
linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,0.88));
}
.fx-glamour-hero > * {
position: relative;
z-index: 1;
}
.fx-drawer-texture {
position: relative;
overflow: hidden;
background:
linear-gradient(180deg, rgba(5,5,5,0.72), rgba(5,5,5,0.96)),
var(--fx-ui-drawer-texture) top center / cover no-repeat,
var(--clothoff-bg, #050505);
}
.fx-drawer-texture > * {
position: relative;
z-index: 1;
}
.fx-icon-tile {
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 14px;
background:
linear-gradient(135deg, rgba(255,152,0,0.20), rgba(255,40,26,0.10)),
rgba(255,255,255,0.06);
border: 1px solid rgba(255,152,0,0.22);
color: var(--clothoff-orange-500, #ff9800);
}
.fx-pay-svg {
width: 30px;
height: 30px;
display: block;
}
/* ==========================================================================
§8.pwa — PWA install nudge + iOS guide modal (2026-05-24 加)
----------------------------------------------------------------------------
2 个 surface:
· .fx-pwa-nudge-card — 任务完成后 mini 浮卡 (mobile 底部 / desktop 右下)
· #fx-pwa-ios-modal — iOS Safari 教程 (bottom sheet style)
跟 §7 反 AI 化设计语言一致: Material 橙 + 圆角 + 单 emoji + 不堆 shine.
========================================================================== */
/* ---- nudge mini card (Hook B) ---- */
#fx-pwa-nudge-card {
position: fixed;
left: 12px;
right: 12px;
bottom: calc(82px + env(safe-area-inset-bottom, 0px));
z-index: 9500;
display: flex;
align-items: center;
gap: 10px;
padding: 11px 12px;
border-radius: 14px;
background: linear-gradient(135deg, rgba(28, 28, 32, 0.96), rgba(20, 20, 24, 0.96));
border: 1px solid rgba(255, 152, 0, 0.22);
box-shadow: 0 14px 36px rgba(0, 0, 0, 0.5), 0 2px 8px rgba(0, 0, 0, 0.4);
color: #fff;
transform: translateY(12px);
opacity: 0;
transition: transform 280ms cubic-bezier(.34, 1.15, .4, 1), opacity 200ms ease;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
@media (min-width: 768px) {
#fx-pwa-nudge-card {
left: auto;
right: 24px;
bottom: 24px;
width: 340px;
}
}
#fx-pwa-nudge-card.fx-pwa-nudge-card--in {
transform: translateY(0);
opacity: 1;
}
#fx-pwa-nudge-card.fx-pwa-nudge-card--out {
transform: translateY(8px);
opacity: 0;
}
.fx-pwa-nudge-icon {
flex-shrink: 0;
width: 40px;
height: 40px;
border-radius: 12px;
background: linear-gradient(135deg, #ff9800, #FFD700);
display: inline-flex;
align-items: center;
justify-content: center;
}
.fx-pwa-nudge-icon .material-symbols-outlined {
font-size: 22px;
color: #000;
}
.fx-pwa-nudge-body {
flex: 1;
min-width: 0;
}
.fx-pwa-nudge-title {
font-size: 13px;
font-weight: 700;
line-height: 1.25;
color: #fff;
margin-bottom: 2px;
}
.fx-pwa-nudge-sub {
font-size: 11px;
color: #a1a1aa;
line-height: 1.3;
}
.fx-pwa-nudge-cta {
flex-shrink: 0;
padding: 7px 14px;
border-radius: 999px;
background: linear-gradient(135deg, #ff9800 0%, #FFD700 100%);
color: #000;
font-size: 12px;
font-weight: 800;
border: 0;
cursor: pointer;
font-family: inherit;
box-shadow: 0 4px 12px rgba(255, 152, 0, 0.32);
transition: transform 120ms ease;
}
.fx-pwa-nudge-cta:hover { transform: scale(1.03); }
.fx-pwa-nudge-cta:active { transform: scale(0.97); }
.fx-pwa-nudge-close {
position: absolute;
top: 6px;
right: 6px;
width: 22px;
height: 22px;
border: 0;
border-radius: 50%;
background: rgba(255, 255, 255, 0.06);
color: #a1a1aa;
font-size: 11px;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
transition: background 120ms ease;
}
.fx-pwa-nudge-close:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }
/* ---- iOS guide modal ---- */
#fx-pwa-ios-modal {
position: fixed;
inset: 0;
z-index: 10010;
background: rgba(0, 0, 0, 0.74);
display: flex;
align-items: flex-end;
justify-content: center;
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
animation: fxPwaModalFadeIn 200ms ease;
}
#fx-pwa-ios-modal.fx-pwa-ios-leaving {
animation: fxPwaModalFadeOut 200ms ease forwards;
}
@keyframes fxPwaModalFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes fxPwaModalFadeOut { to { opacity: 0; } }
.fx-pwa-ios-card {
position: relative;
background: #16161b;
width: 100%;
max-width: 480px;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
padding: 24px 22px calc(28px + env(safe-area-inset-bottom, 0px));
color: #fff;
animation: fxPwaSlideUp 300ms cubic-bezier(.34, 1.15, .4, 1);
}
@keyframes fxPwaSlideUp {
from { transform: translateY(100%); }
to { transform: translateY(0); }
}
.fx-pwa-ios-close {
position: absolute;
top: 14px;
right: 14px;
background: transparent;
border: 0;
color: #a1a1aa;
width: 28px;
height: 28px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 8px;
cursor: pointer;
font-size: 18px;
}
.fx-pwa-ios-close:hover { background: rgba(255, 255, 255, 0.06); color: #fff; }
.fx-pwa-ios-head {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 18px;
}
.fx-pwa-ios-icon {
width: 48px;
height: 48px;
border-radius: 12px;
background: linear-gradient(135deg, #ff9800, #FFD700);
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.fx-pwa-ios-icon .material-symbols-outlined {
font-size: 26px;
color: #000;
}
.fx-pwa-ios-titles { min-width: 0; }
.fx-pwa-ios-title {
font-size: 17px;
font-weight: 700;
margin-bottom: 2px;
}
.fx-pwa-ios-sub {
font-size: 13px;
color: #a1a1aa;
line-height: 1.4;
}
.fx-pwa-ios-steps {
list-style: none;
padding: 0;
margin: 0 0 14px;
display: flex;
flex-direction: column;
gap: 10px;
}
.fx-pwa-ios-steps li {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 14px;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: 12px;
}
.fx-pwa-ios-num {
width: 28px;
height: 28px;
border-radius: 50%;
background: var(--clothoff-orange-500, #ff9800);
color: #000;
display: inline-flex;
align-items: center;
justify-content: center;
font-weight: 800;
flex-shrink: 0;
font-size: 14px;
}
.fx-pwa-ios-text {
font-size: 14px;
line-height: 1.4;
color: #e4e4e7;
}
.fx-pwa-ios-inline-icon {
display: inline-block;
vertical-align: -4px;
color: #60a5fa;
}
.fx-pwa-ios-hint {
font-size: 11px;
color: #71717a;
text-align: center;
line-height: 1.5;
}
/* prefers-reduced-motion 全部禁用动画 */
@media (prefers-reduced-motion: reduce) {
#fx-pwa-nudge-card,
#fx-pwa-ios-modal,
.fx-pwa-ios-card {
animation: none !important;
transition: none !important;
}
}
/* ==========================================================================
END global.css
========================================================================== */