/** * 焰魂论坛 V5 全局设计令牌（单一事实源） * 各页在 中先于页面级 CSS 引入本文件；业务样式禁止重复定义 :root 令牌。 */ :root { --fj-bg-root: #000000; --fj-bg-base: #0a0a0a; --fj-bg-surface: #121212; --fj-bg-elevated: #1a1a1a; --fj-bg-hover: rgba(255, 255, 255, 0.04); --fj-border-subtle: rgba(255, 255, 255, 0.06); --fj-border-base: rgba(255, 255, 255, 0.1); --fj-border-hover: rgba(255, 255, 255, 0.15); --fj-border-strong: rgba(255, 255, 255, 0.14); --fj-orange-500: #ff6b35; --fj-orange-400: #ff8f5a; --fj-orange-glow: rgba(255, 107, 53, 0.25); --fj-orange-bg: rgba(255, 107, 53, 0.1); --fj-success: #10b981; --fj-success-bg: rgba(16, 185, 129, 0.1); --fj-info: #3b82f6; --fj-info-bg: rgba(59, 130, 246, 0.1); --fj-danger: #ef4444; --fj-danger-bg: rgba(239, 68, 68, 0.1); --fj-warning: #f59e0b; --fj-warning-bg: rgba(245, 158, 11, 0.1); --fj-text-primary: #eeeeee; --fj-text-secondary: #888888; --fj-text-tertiary: #555555; /* 默认卡片阴影偏克制；后台指挥舱在 admin-console.css 内局部覆写 */ --fj-shadow-card: inset 0 1px 0 rgba(255, 255, 255, 0.05); --fj-shadow-glow: 0 0 0 1px var(--fj-border-base), 0 8px 30px rgba(0, 0, 0, 0.15); --fj-shadow-modal: 0 20px 40px -10px rgba(0, 0, 0, 0.4), 0 0 0 1px var(--fj-border-base); --fj-toast-success: #22c55e; --fj-toast-info: #60a5fa; --fj-ease-out: cubic-bezier(0.16, 1, 0.3, 1); --fj-ease-flip: cubic-bezier(0.4, 0, 0.2, 1); --fj-duration-fast: 150ms; --fj-duration-normal: 250ms; --fj-font-tabular: "Fira Code", ui-monospace, Consolas, "SF Mono", SFMono-Regular, Menlo, Monaco, monospace; /* 与首页 .fj-container / fj-site-chrome 对齐的全站主内容宽度（单一事实源；黄金版心 1200px） */ --fj-page-max-width: 1200px; --fj-page-padding-x: 32px; /* 黄金三栏：220 | minmax(0,1fr) | 280；侧栏 sticky 的 top 在滚动壳内由 fj-site-chrome 统一为 24px */ --fj-golden-sidebar-width: 190px; --fj-golden-rail-width: 280px; --fj-golden-layout-gap: 48px; /* 页尾：正文与顶栏水平对齐用 --fj-page-padding-x；纵向节奏见 fj-site-chrome .fj-footer */ --fj-footer-isolation-gap: 64px; --fj-footer-padding-y: 32px; } @media (max-width: 640px) { :root { --fj-page-padding-x: 16px; } } /* 论坛前台滚动条槽位改在 .fj-site-scroll；后台整页滚动在 admin-console.css 为 html 设置 */ html[data-theme="light"], [data-theme="light"] { --fj-bg-root: #f7f8fa; --fj-bg-base: #ffffff; --fj-bg-surface: #ffffff; --fj-bg-elevated: #f3f4f6; --fj-bg-hover: rgba(0, 0, 0, 0.04); --fj-border-subtle: rgba(0, 0, 0, 0.04); --fj-border-base: rgba(0, 0, 0, 0.08); --fj-border-hover: rgba(0, 0, 0, 0.15); --fj-border-strong: rgba(0, 0, 0, 0.12); --fj-orange-glow: rgba(255, 107, 53, 0.15); --fj-orange-bg: rgba(255, 107, 53, 0.08); --fj-text-primary: #111827; --fj-text-secondary: #6b7280; --fj-text-tertiary: #9ca3af; --fj-shadow-card: 0 1px 2px rgba(0, 0, 0, 0.05); --fj-shadow-glow: 0 0 0 1px var(--fj-border-subtle), 0 8px 20px rgba(0, 0, 0, 0.04); --fj-shadow-modal: 0 20px 40px -10px rgba(0, 0, 0, 0.1), 0 0 0 1px var(--fj-border-base); } /* 减少动效：尊重系统「减少动态效果」偏好 */ @media (prefers-reduced-motion: reduce) { :root { --fj-duration-fast: 0.01ms; --fj-duration-normal: 0.01ms; --fj-ease-out: linear; --fj-ease-flip: linear; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }