/*! * EZCAI 用户分层样式层 —— _tier/tier.css * 复用 assets/style.css 的设计 token（--accent / --card / --border / --radius-*） * 自动适配站点浅色主题（token 由根作用域切换，此处无需重复定义） */ /* ============================ 层级徽章 ============================ */ .ez-badge { display: inline-flex; align-items: center; justify-content: center; padding: 0.1875rem 0.5rem; font-family: var(--font-mono, monospace); font-size: 0.6875rem; font-weight: 500; line-height: 1.4; letter-spacing: 0.02em; color: var(--muted-fg); background: var(--muted); border: 1px solid var(--border); border-radius: var(--radius-full); white-space: nowrap; transition: color var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast), box-shadow var(--transition-fast); } .ez-badge--pro { color: var(--accent); background: var(--accent-muted); border-color: rgba(245, 158, 11, 0.35); } .ez-badge--gm { color: var(--accent-fg); background: var(--accent); border-color: var(--accent); box-shadow: var(--glow-sm); } /* ======================== 门控（锁定）状态 ======================== */ /* 首帧防闪（FOUC）：tier.js 同步阶段已在 打上 data-ez-tier。 在 JS 完成 DOM 门控之前，先用纯 CSS 依层级锁住高阶内容， 避免 guest 用户在加载瞬间看到未锁的 pro/gm 区块。 */ html[data-ez-tier="guest"] [data-ez-tier="pro"], html[data-ez-tier="guest"] [data-ez-tier="gm"], html[data-ez-tier="pro"] [data-ez-tier="gm"] { opacity: 0.5; filter: grayscale(0.65); pointer-events: none; } html[data-ez-tier="guest"] [data-ez-show="pro"], html[data-ez-tier="guest"] [data-ez-show="gm"], html[data-ez-tier="pro"] [data-ez-show="gm"] { display: none; } .ez-locked { position: relative; opacity: 0.5; cursor: not-allowed; filter: grayscale(0.65); user-select: none; } .ez-locked::after { content: "🔒"; position: absolute; top: 0.375rem; right: 0.5rem; font-size: 0.75rem; line-height: 1; opacity: 0.85; pointer-events: none; } /* 锁定元素内的交互控件一并禁用 */ .ez-locked button, .ez-locked a, .ez-locked input, .ez-locked select { pointer-events: none; } /* 升级提示条：锁定卡片上的号召性说明 */ .ez-upsell { display: flex; align-items: center; gap: 0.5rem; padding: 0.625rem 0.875rem; font-size: 0.8125rem; color: var(--muted-fg); background: var(--card); border: 1px dashed var(--border-hover); border-radius: var(--radius-md); } .ez-upsell a { color: var(--accent); font-weight: 500; text-decoration: none; border-bottom: 1px solid rgba(245, 158, 11, 0.4); } .ez-upsell a:hover { border-bottom-color: var(--accent); } /* ========================== 兑换弹窗 ============================ */ .ez-modal { position: fixed; inset: 0; z-index: 9000; display: flex; align-items: center; justify-content: center; padding: 1.25rem; background: rgba(10, 10, 15, 0.78); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); opacity: 0; visibility: hidden; transition: opacity var(--transition-fast), visibility var(--transition-fast); } .ez-modal.is-open { opacity: 1; visibility: visible; } .ez-modal__dialog { width: 100%; max-width: 26rem; padding: 1.75rem; background: var(--card-solid); border: 1px solid var(--border); border-radius: var(--radius-xl); box-shadow: var(--shadow-xl); transform: translateY(0.75rem) scale(0.98); transition: transform var(--transition-card); } .ez-modal.is-open .ez-modal__dialog { transform: translateY(0) scale(1); } .ez-modal__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.375rem; } .ez-modal__title { margin: 0; font-family: var(--font-display, sans-serif); font-size: 1.125rem; font-weight: 600; color: var(--fg); } .ez-modal__close { flex: 0 0 auto; width: 1.75rem; height: 1.75rem; padding: 0; font-size: 1.125rem; line-height: 1; color: var(--muted-fg); background: transparent; border: 1px solid var(--border); border-radius: var(--radius-sm); cursor: pointer; transition: color var(--transition-fast), border-color var(--transition-fast); } .ez-modal__close:hover { color: var(--fg); border-color: var(--border-hover); } .ez-modal__desc { margin: 0 0 1.125rem; font-size: 0.8125rem; line-height: 1.6; color: var(--muted-fg); } /* 码输入框：等宽字体 + 大字号，便于手抄核对 */ .ez-modal__input { width: 100%; padding: 0.75rem 0.875rem; font-family: var(--font-mono, monospace); font-size: 1rem; letter-spacing: 0.08em; text-align: center; text-transform: uppercase; color: var(--fg); background: var(--bg); border: 1px solid var(--border-hover); border-radius: var(--radius-md); outline: none; transition: border-color var(--transition-fast), box-shadow var(--transition-fast); } .ez-modal__input::placeholder { color: var(--muted-fg); letter-spacing: 0.04em; text-transform: none; } .ez-modal__input:focus { border-color: var(--ring); box-shadow: 0 0 0 3px var(--accent-muted); } .ez-modal__actions { display: flex; gap: 0.625rem; margin-top: 1rem; } .ez-btn { flex: 1 1 auto; padding: 0.6875rem 1rem; font-family: var(--font-body, sans-serif); font-size: 0.875rem; font-weight: 500; border-radius: var(--radius-md); cursor: pointer; transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast); } .ez-btn:active { transform: translateY(1px); } .ez-btn--primary { color: var(--accent-fg); background: var(--accent); border: 1px solid var(--accent); } .ez-btn--primary:hover:not(:disabled) { box-shadow: var(--glow-sm); } .ez-btn--primary:disabled { opacity: 0.55; cursor: wait; } .ez-btn--ghost { flex: 0 0 auto; color: var(--muted-fg); background: transparent; border: 1px solid var(--border); } .ez-btn--ghost:hover { color: var(--fg); border-color: var(--border-hover); } /* 反馈信息区：成功 / 失败 / 处理中 */ .ez-modal__msg { min-height: 1.25rem; margin-top: 0.875rem; font-size: 0.8125rem; line-height: 1.6; } .ez-modal__msg:empty { margin-top: 0; min-height: 0; } .ez-modal__msg--ok { color: #34D399; } .ez-modal__msg--err { color: #F87171; } .ez-modal__msg--wait { color: var(--muted-fg); } /* 兑换成功后的权益期明细（透明化签发/到期时间，符合策划 §2.2.2） */ .ez-modal__meta { margin-top: 0.75rem; padding: 0.75rem 0.875rem; font-family: var(--font-mono, monospace); font-size: 0.75rem; line-height: 1.7; color: var(--muted-fg); background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-md); } .ez-modal__meta b { color: var(--fg); font-weight: 500; } /* 当前身份行（已登录时显示，含登出入口） */ .ez-modal__current { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 1rem; padding: 0.625rem 0.875rem; font-size: 0.8125rem; color: var(--muted-fg); background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-md); } .ez-modal__logout { padding: 0.25rem 0.625rem; font-size: 0.75rem; color: var(--muted-fg); background: transparent; border: 1px solid var(--border); border-radius: var(--radius-sm); cursor: pointer; } .ez-modal__logout:hover { color: var(--fg); border-color: var(--border-hover); } /* =========================== 响应式 ============================= */ @media (max-width: 480px) { .ez-modal { padding: 0.875rem; } .ez-modal__dialog { padding: 1.375rem; } .ez-modal__input { font-size: 0.9375rem; letter-spacing: 0.05em; } .ez-modal__actions { flex-direction: column-reverse; } .ez-btn--ghost { width: 100%; } } /* ======================== 页头登录角标（右上角） ======================== */ /* 由 tier-header.js 自挂载到 body 末尾。position: fixed 脱离文档流， 因此不会挤压任何既有导航结构 —— 315 个页面无需改布局。 z-index 取 8000：高于站点内容（≤100），低于兑换弹窗（9000）。 */ .ez-header { position: fixed; top: 0.875rem; right: 1rem; z-index: 8000; } /* 页头避让：站内 314 页共 4 类页头（navbar / topbar / ucl-nav / site-header）， 其右上角已被语言切换器或导航链接占用。实测 1280/1024/768px 三档均发生 压盖（UCL 压住「EZCAI 主站」、WBT 压住「方法论」「文档」）。 tier-header.js 检测到页头占位时打 data-ez-offset="below"，角标下移避让。 275 张无页头的页面不带该属性，保持右上角原位。 */ .ez-header[data-ez-offset="below"] { top: auto; bottom: 1.125rem; right: 1.125rem; } .ez-header__btn { display: inline-flex; align-items: center; gap: 0.4375rem; padding: 0.4375rem 0.8125rem; font-family: inherit; font-size: 0.8125rem; font-weight: 500; line-height: 1.2; color: var(--fg, #e8e8ef); /* 半透明 + 背景模糊：叠在任何页面配色上都保持可读， 而非硬涂一块不透明色块破坏页面观感。 */ background: rgba(18, 18, 26, 0.72); -webkit-backdrop-filter: blur(10px) saturate(1.2); backdrop-filter: blur(10px) saturate(1.2); border: 1px solid var(--border, rgba(255, 255, 255, 0.14)); border-radius: var(--radius-full, 999px); cursor: pointer; transition: border-color var(--transition-fast, 0.16s ease), background var(--transition-fast, 0.16s ease), transform var(--transition-fast, 0.16s ease); } .ez-header__btn:hover { background: rgba(28, 28, 38, 0.85); border-color: var(--accent, #f59e0b); transform: translateY(-1px); } .ez-header__btn:focus-visible { outline: 2px solid var(--accent, #f59e0b); outline-offset: 2px; } /* 状态点：未登录=静默灰，会员=强调色，GM=强调色+光晕。 颜色之外同时有文字标签，不单靠颜色传达状态（无障碍要求）。 */ .ez-header__dot { width: 0.4375rem; height: 0.4375rem; border-radius: 50%; background: var(--muted-fg, #8b8b9e); flex: 0 0 auto; transition: background var(--transition-fast, 0.16s ease), box-shadow var(--transition-fast, 0.16s ease); } .ez-header[data-tier="pro"] .ez-header__dot, .ez-header[data-tier="gm"] .ez-header__dot { background: var(--accent, #f59e0b); } .ez-header[data-tier="gm"] .ez-header__dot { box-shadow: var(--glow-sm, 0 0 8px rgba(245, 158, 11, 0.6)); } .ez-header[data-tier="pro"] .ez-header__label, .ez-header[data-tier="gm"] .ez-header__label { color: var(--accent, #f59e0b); } .ez-header__label { white-space: nowrap; } /* 浅色主题：深色半透明底会与浅背景冲突，改用浅底 */ :root[data-theme="light"] .ez-header__btn, [data-theme="light"] .ez-header__btn { color: #1a1a22; background: rgba(255, 255, 255, 0.82); border-color: rgba(0, 0, 0, 0.12); } :root[data-theme="light"] .ez-header__btn:hover, [data-theme="light"] .ez-header__btn:hover { background: rgba(255, 255, 255, 0.95); } @media (max-width: 640px) { .ez-header { top: 0.625rem; right: 0.625rem; } .ez-header__btn { padding: 0.375rem 0.6875rem; font-size: 0.75rem; } } /* ========================================================================== * 权益 bar（V2）—— 已登录用户点角标展开 * 有效期是用户的合法权益信息，不藏在弹窗深处，一点即见。 * 定位跟随 .ez-header：默认吊在角标下方右对齐；角标避让到底部时改为向上弹。 * ========================================================================== */ .ez-rights { position: absolute; top: calc(100% + 0.5rem); right: 0; width: 15.5rem; padding: 0.875rem 0.9375rem 0.8125rem; font-family: inherit; font-size: 0.8125rem; line-height: 1.45; color: var(--fg, #e8e8ef); background: rgba(18, 18, 26, 0.92); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); border: 1px solid var(--border, rgba(255, 255, 255, 0.14)); border-radius: var(--radius-lg, 0.75rem); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45); animation: ez-rights-in 0.16s ease; } /* 角标避让到视口底部时，bar 从上方弹出，否则会掉到屏幕外 */ .ez-header[data-ez-offset="below"] .ez-rights { top: auto; bottom: calc(100% + 0.5rem); } @keyframes ez-rights-in { from { opacity: 0; transform: translateY(-0.25rem); } to { opacity: 1; transform: translateY(0); } } .ez-rights__head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.625rem; } .ez-rights__title { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.02em; color: var(--muted-fg, #8b8b9e); } .ez-rights__pill { padding: 0.125rem 0.5rem; font-size: 0.6875rem; font-weight: 600; border-radius: var(--radius-full, 999px); color: var(--accent, #f59e0b); background: rgba(245, 158, 11, 0.14); border: 1px solid rgba(245, 158, 11, 0.32); white-space: nowrap; } .ez-rights__pill[data-tier="gm"] { box-shadow: var(--glow-sm, 0 0 8px rgba(245, 158, 11, 0.5)); } /* 剩余进度条 */ .ez-rights__track { height: 0.25rem; margin-bottom: 0.75rem; border-radius: var(--radius-full, 999px); background: rgba(255, 255, 255, 0.1); overflow: hidden; } .ez-rights__fill { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, #f59e0b, #fbbf24); transition: width 0.3s ease; } /* 剩余不足 15% 转红：临近到期要让用户来得及续 */ .ez-rights__fill[data-low="1"] { background: linear-gradient(90deg, #dc2626, #f87171); } /* 键值行 */ .ez-rights__rows { display: grid; grid-template-columns: auto 1fr; gap: 0.3125rem 0.75rem; margin: 0 0 0.8125rem; } .ez-rights__rows dt { margin: 0; font-size: 0.75rem; color: var(--muted-fg, #8b8b9e); white-space: nowrap; } .ez-rights__v { margin: 0; text-align: right; font-variant-numeric: tabular-nums; color: var(--fg, #e8e8ef); } .ez-rights__v--strong { font-weight: 600; color: var(--accent, #f59e0b); } /* 设备数触顶转红：下一台就封号，必须显眼 */ .ez-rights__v[data-warn="1"] { color: #f87171; font-weight: 600; } /* 操作区 */ .ez-rights__acts { display: flex; gap: 0.4375rem; } .ez-rights__act { flex: 1 1 auto; padding: 0.4375rem 0.5rem; font-family: inherit; font-size: 0.75rem; font-weight: 500; color: var(--fg, #e8e8ef); background: rgba(255, 255, 255, 0.07); border: 1px solid var(--border, rgba(255, 255, 255, 0.14)); border-radius: var(--radius-md, 0.5rem); cursor: pointer; transition: background var(--transition-fast, 0.16s ease), border-color var(--transition-fast, 0.16s ease); } .ez-rights__act:hover { background: rgba(255, 255, 255, 0.12); border-color: var(--accent, #f59e0b); } .ez-rights__act:focus-visible { outline: 2px solid var(--accent, #f59e0b); outline-offset: 2px; } .ez-rights__act--ghost { flex: 0 0 auto; color: var(--muted-fg, #8b8b9e); background: transparent; } .ez-rights__act--ghost:hover { color: #f87171; border-color: rgba(248, 113, 113, 0.5); background: rgba(248, 113, 113, 0.08); } /* 浅色主题 */ :root[data-theme="light"] .ez-rights, [data-theme="light"] .ez-rights { color: #1a1a22; background: rgba(255, 255, 255, 0.96); border-color: rgba(0, 0, 0, 0.1); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.14); } :root[data-theme="light"] .ez-rights__v, [data-theme="light"] .ez-rights__v { color: #1a1a22; } :root[data-theme="light"] .ez-rights__track, [data-theme="light"] .ez-rights__track { background: rgba(0, 0, 0, 0.09); } :root[data-theme="light"] .ez-rights__act, [data-theme="light"] .ez-rights__act { color: #1a1a22; background: rgba(0, 0, 0, 0.05); border-color: rgba(0, 0, 0, 0.12); } @media (max-width: 640px) { .ez-rights { width: 14.25rem; font-size: 0.78125rem; } } /* 尊重减弱动效偏好 */ @media (prefers-reduced-motion: reduce) { .ez-modal, .ez-modal__dialog, .ez-badge, .ez-header__btn, .ez-header__dot, .ez-rights, .ez-rights__fill, .ez-rights__act, .ez-btn { transition: none; transform: none; animation: none; } }