/* ============================================================ tokens.css — 设计系统「Pixel-Quest」游戏像素优化版 明亮蓝白底 + 8-bit / 16-bit 像素装饰 ============================================================ */ :root { /* ───────────────────────────────────────────── BASE PALETTE ─ 明亮蓝白基底 ───────────────────────────────────────────── */ --bg: #F0F4FA; /* 整页底色：极浅蓝灰 */ --bg-soft: #F8FAFD; /* 副底 */ --bg-deep: #E1E9F4; /* 强调浅蓝块 */ --paper: #FFFFFF; /* 卡片白底 */ --ink: #0F1B3D; /* 主文字：深蓝黑 */ --ink-soft: #3A4666; /* 次文字 */ --ink-mute: #7B86A3; /* 弱文字 */ --ink-faint: #B3BCCF; /* 极弱 */ --rule: #D5DCE8; /* 发丝线/边框 */ --rule-soft: #E8EDF5; /* 浅边框 */ /* ───────────────────────────────────────────── BLUE SYSTEM ─ 主色蓝（明亮商务） ───────────────────────────────────────────── */ --blue-900: #0F1B3D; --blue-800: #1E2D5C; --blue-700: #233976; --blue-600: #2E4BA6; /* 主色 */ --blue-500: #3B82F6; /* 标签蓝 */ --blue-400: #60A5FA; --blue-300: #93C5FD; --blue-200: #BFDBFE; /* 浅蓝徽章 */ --blue-100: #DBEAFE; --blue-50: #EFF6FF; /* ───────────────────────────────────────────── PIXEL ACCENTS ─ 像素游戏调色板 像素图标用到的丰富色彩 ───────────────────────────────────────────── */ --px-red: #E63946; /* 爱心、危险 */ --px-orange: #F97316; /* 火焰、橙色 */ --px-yellow: #FACC15; /* 星星、金币 */ --px-gold: #EAB308; /* 钻石、宝箱 */ --px-green: #22C55E; /* 进度、对勾 */ --px-teal: #14B8A6; /* 信号、能量 */ --px-cyan: #06B6D4; /* 蓝水晶 */ --px-blue: #3B82F6; /* 蓝徽章 */ --px-purple: #A855F7; /* 紫宝石 */ --px-pink: #EC4899; /* 粉色心 */ --px-brown: #92400E; /* 棕色 */ --px-black: #0F1B3D; /* 像素描边 */ --px-white: #FFFFFF; --px-gray-light: #E2E8F0; --px-gray: #94A3B8; --px-gray-dark: #475569; /* ───────────────────────────────────────────── COMPAT ALIASES（兼容旧组件） ───────────────────────────────────────────── */ --c-primary: var(--blue-600); --c-primary-deep: var(--blue-800); --c-primary-light: var(--blue-500); --c-primary-bg: var(--blue-100); --c-primary-bg-soft:var(--blue-50); --c-accent: var(--px-yellow); --c-accent-bg: #FEF3C7; --c-bg: var(--paper); --c-bg-soft: var(--bg-soft); --c-bg-mute: var(--bg-deep); --c-border: var(--rule); --c-border-strong: var(--ink-faint); --c-text: var(--ink); --c-text-2: var(--ink-soft); --c-text-3: var(--ink-mute); --c-text-on-primary:#FFFFFF; --paper-soft: var(--bg-soft); --paper-deep: var(--bg-deep); --indigo: var(--blue-600); --indigo-deep: var(--blue-800); --indigo-soft: var(--blue-500); --indigo-bg: var(--blue-100); --rust: var(--px-red); --rust-soft: #FECACA; --ochre: var(--px-gold); --ochre-soft: #FEF3C7; /* ───────────────────────────────────────────── TYPOGRAPHY ───────────────────────────────────────────── */ /* 主中文 sans (保持清晰可读) */ --font-cn: "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei", "微软雅黑", -apple-system, BlinkMacSystemFont, sans-serif; /* 英文 sans */ --font-en: "Geist", -apple-system, "Segoe UI", BlinkMacSystemFont, "Helvetica Neue", system-ui, sans-serif; /* 像素字体（用于编号、HUD、PLAY 按钮） 回退到等宽字体保持机械感 */ --font-pixel: "Press Start 2P", "VT323", "Pixelify Sans", "Courier New", "Lucida Console", monospace; /* 等宽（代码） */ --font-mono: "JetBrains Mono", "Fira Code", "Cascadia Code", "SF Mono", Menlo, Consolas, monospace; --font-sans: var(--font-cn); --font-serif: var(--font-cn); --font-serif-en: var(--font-en); /* ───────────────────────────────────────────── TYPE SCALE ───────────────────────────────────────────── */ --fs-display: clamp(48px, 7vw, 80px); --fs-hero: clamp(40px, 6vw, 68px); --fs-h1: clamp(22px, 2.8vw, 30px); --fs-h2: clamp(18px, 2.1vw, 22px); --fs-h3: clamp(15px, 1.7vw, 17px); --fs-h4: 14px; --fs-lead: 14px; --fs-body: 13px; --fs-small: 12px; --fs-mini: 10.5px; --fs-eyebrow: 10.5px; --fs-pixel-sm: 9.5px; --fs-pixel-md: 13px; --fs-pixel-lg: 15px; /* 行高 */ --lh-tight: 1.15; --lh-display: 1; --lh-snug: 1.35; --lh-normal: 1.6; --lh-loose: 1.8; --lh-reading: 1.65; /* 字重 */ --fw-light: 300; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-black: 900; /* Letter spacing */ --ls-display: -0.03em; --ls-tight: -0.01em; --ls-normal: 0; --ls-wide: 0.05em; --ls-eyebrow: 0.15em; --ls-pixel: 0.08em; /* ───────────────────────────────────────────── SPACING (8px grid) ───────────────────────────────────────────── */ --sp-0: 0; --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-16: 64px; --sp-20: 80px; --sp-24: 96px; /* ───────────────────────────────────────────── BORDERS / RADII ─ 像素风：硬边 + 小圆角 ───────────────────────────────────────────── */ --r-sm: 2px; --r-md: 4px; --r-lg: 6px; --r-xl: 8px; --r-2xl: 12px; --r-pill: 9999px; --bw-1: 1px; --bw-2: 2px; --bw-3: 3px; --bw-4: 4px; /* 像素边框宽 */ /* ───────────────────────────────────────────── PIXEL SHADOWS ─ 像素风的"硬阴影" 不是模糊阴影，而是偏移的硬色块 ───────────────────────────────────────────── */ --sh-pixel-1: 2px 2px 0 0 var(--ink); /* 像素阴影 1 */ --sh-pixel-2: 4px 4px 0 0 var(--ink); /* 像素阴影 2 */ --sh-pixel-3: 6px 6px 0 0 var(--ink); /* 大像素阴影 */ --sh-pixel-blue: 4px 4px 0 0 var(--blue-600); --sh-pixel-soft: 0 2px 0 0 rgba(15, 27, 61, 0.15); /* 卡片"扁平"模式 */ --sh-card: 0 1px 2px rgba(15, 27, 61, 0.05), 0 4px 12px rgba(15, 27, 61, 0.05); --sh-card-hover: 0 4px 8px rgba(15, 27, 61, 0.08), 0 8px 24px rgba(15, 27, 61, 0.08); /* 兼容 */ --sh-xs: none; --sh-sm: var(--sh-card); --sh-md: var(--sh-card-hover); --sh-lg: var(--sh-card-hover); --sh-blue: 0 0 0 1px var(--blue-600); /* ───────────────────────────────────────────── LAYOUT ───────────────────────────────────────────── */ --container: 1200px; --container-narrow: 880px; --container-px: 24px; --nav-h: 48px; --nav-h-scroll: 40px; --col-gap: 20px; /* ───────────────────────────────────────────── TRANSITIONS ───────────────────────────────────────────── */ --t-fast: 120ms steps(2); --t-base: 240ms cubic-bezier(0.4, 0, 0.2, 1); --t-slow: 500ms cubic-bezier(0.16, 1, 0.3, 1); /* ───────────────────────────────────────────── NOISE ─ 像素风不需要纸张噪点，留空 ───────────────────────────────────────────── */ --noise-svg: none; } /* ───────────────────────────────────────────── BASE BODY ───────────────────────────────────────────── */ body { font-family: var(--font-cn); font-size: var(--fs-body); font-weight: var(--fw-regular); line-height: var(--lh-normal); color: var(--ink); background: var(--bg); font-feature-settings: "kern" 1, "calt" 1; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } p { color: var(--ink-soft); } strong { color: var(--ink); font-weight: var(--fw-semibold); } a { color: var(--blue-600); text-decoration: none; transition: color var(--t-fast); } a:hover { color: var(--blue-700); } ::selection { background: var(--blue-600); color: var(--paper); } /* 像素图标默认渲染：保持锐利不被反锯齿模糊 */ .pixel, .pixelated, svg.pixel { image-rendering: pixelated; image-rendering: -moz-crisp-edges; image-rendering: crisp-edges; shape-rendering: crispEdges; } /* 字体辅助 */ .cn { font-family: var(--font-cn); } .en { font-family: var(--font-en); } .mono { font-family: var(--font-mono); } .pixel-font { font-family: var(--font-pixel); letter-spacing: var(--ls-pixel); } .uppercase { text-transform: uppercase; letter-spacing: var(--ls-eyebrow); } /* eyebrow text 小标签 */ .eyebrow { font-family: var(--font-en); font-size: var(--fs-eyebrow); text-transform: uppercase; letter-spacing: var(--ls-eyebrow); color: var(--ink-mute); font-weight: var(--fw-medium); }