/* ============================================================ HeadHunter-cn 统一设计令牌(唯一真源) ============================================================ 全部数值于 2026-10-02 从 headhunterwow.com 实测提取: · 色板 —— 目标站暗色主题(html.dark,站点默认)的 CSS 变量, 原文为 oklch(),此处转换为等值 sRGB(hex/rgba),兼容性优先; · 字体 —— 目标站 4 个字体家族自托管(均为 OFL 开源许可); · 纹理 —— 目标站 3 张 webp 贴图(皮革/羊皮纸/木板),本目录 textures/; · 组件 —— frame-gold 边框、bg-leather / bg-parchment / bg-wood 背景体系。 使用方式:所有页面(榜单应用 / 插件文档 / 设计稿)统一引入本文件, 只允许通过 var(--token) 取色/取字体,不得散落魔法值。 颜色对照(oklch 原值 → sRGB): background oklch(14% .012 60) → #0d0805 foreground oklch(90% .035 80) → #eadcc5 card oklch(18% .015 58) → #17100b gold/primary oklch(80% .15 78) → #f2b036 wanted oklch(55% .2 28) → #cc2823 parchment oklch(83% .06 78) → #ddc39c ============================================================ */ /* ---------------- 字体(自托管,OFL) ---------------- */ /* 正文:Alegreya Sans(目标站 body 字体) */ @font-face { font-family: 'Alegreya Sans'; src: url('fonts/alegreya-sans-400-latin.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Alegreya Sans'; src: url('fonts/alegreya-sans-400-latin-ext.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Alegreya Sans'; src: url('fonts/alegreya-sans-500-latin.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'Alegreya Sans'; src: url('fonts/alegreya-sans-700-latin.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; } /* 标题:Cinzel(目标站 h1-h3 字体,可变字重 600-800) */ @font-face { font-family: 'Cinzel'; src: url('fonts/cinzel-latin.woff2') format('woff2'); font-weight: 600 800; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Cinzel'; src: url('fonts/cinzel-latin-ext.woff2') format('woff2'); font-weight: 600 800; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* 通缉海报:Rye(目标站 font-western) */ @font-face { font-family: 'Rye'; src: url('fonts/rye-400-latin.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Rye'; src: url('fonts/rye-400-latin-ext.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* 窄体数字/标签:Oswald(目标站 font-condensed,可变字重 400-700) */ @font-face { font-family: 'Oswald'; src: url('fonts/oswald-latin.woff2') format('woff2'); font-weight: 400 700; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Oswald'; src: url('fonts/oswald-latin-ext.woff2') format('woff2'); font-weight: 400 700; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* ---------------- 设计令牌 ---------------- */ :root { /* 色板(目标站暗色主题,oklch 等值转换) */ --background: #0d0805; /* oklch(14% .012 60) 页面底 */ --foreground: #eadcc5; /* oklch(90% .035 80) 正文 */ --card: #17100b; /* oklch(18% .015 58) 卡片面 */ --card-foreground: #eadcc5; --popover: #19120d; /* oklch(19% .016 58) */ --popover-foreground: #eadcc5; --primary: #f2b036; /* oklch(80% .15 78) 主色鎏金 */ --primary-foreground: #1b0e04; /* oklch(18% .03 60) 金底文字 */ --secondary: #291f18; /* oklch(25% .02 58) */ --secondary-foreground: #e6d5bb; /* oklch(88% .04 80) */ --muted: #241b15; /* oklch(23% .018 58) */ --muted-foreground: #a7957d; /* oklch(68% .04 75) 弱化文本 */ --accent: #342619; /* oklch(28% .03 62) 悬停/选中轨 */ --accent-foreground: #f0dbb9; /* oklch(90% .05 80) */ --destructive: #de3c37; /* oklch(60% .2 27) 危险/徽标 */ --border: rgba(242, 176, 54, .22); /* oklch(80% .15 78/.22) */ --input: rgba(242, 176, 54, .28); /* oklch(80% .15 78/.28) */ --ring: #f2b036; /* oklch(80% .15 78) */ --wanted: #cc2823; /* oklch(55% .2 28) 通缉红 */ --wanted-foreground: #fbf4e6; /* oklch(97% .02 85) */ --gold: #f2b036; /* = primary */ --gold-soft: rgba(242, 176, 54, .38); /* 强边框/分隔 */ --gold-hi: #ffc95c; /* 悬停高亮(在目标金基础上的提亮,渐进增强) */ --parchment: #ddc39c; /* oklch(83% .06 78) 通缉令纸底 */ --parchment-foreground: #2c1204; /* oklch(22% .05 50) 纸面文字 */ --stone-emblem: #44403b; /* 目标站 stone-700(图钉)oklch(37.4% .01 67.558) */ --gold-a07: rgba(242, 176, 54, .07); --gold-a10: rgba(242, 176, 54, .10); --gold-a14: rgba(242, 176, 54, .14); /* 字体栈(与目标站一致) */ --font-sans: 'Alegreya Sans', 'PingFang SC', 'Microsoft YaHei', 'Noto Sans SC', ui-sans-serif, system-ui, sans-serif; --font-heading: 'Cinzel', 'Songti SC', SimSun, 'Noto Serif SC', ui-serif, Georgia, serif; --font-western: 'Rye', 'Cinzel', 'Songti SC', SimSun, 'Noto Serif SC', ui-serif, serif; --font-condensed: 'Oswald', 'PingFang SC', 'Microsoft YaHei', 'Noto Sans SC', ui-sans-serif, system-ui, sans-serif; /* 圆角(目标站 --radius:.375rem = 6px;sm=2px 海报用) */ --radius: 6px; --radius-sm: 2px; --radius-md: 6px; --radius-lg: 8px; --radius-full: 999px; /* 动效(平静短动效,无回弹) */ --ease: cubic-bezier(.2, .6, .3, 1); --t-fast: 160ms; --t-base: 220ms; /* 阴影(目标站实测) */ --shadow-poster: 0 14px 30px rgba(0, 0, 0, .55); /* 海报卡 */ --shadow-header: 0 4px 18px rgba(0, 0, 0, .7); /* 木纹页头 */ } /* ---------------- 背景体系(目标站三类纹理) ---------------- */ /* 皮革底:页面主背景(目标站 .bg-leather 暗色版) */ .bg-leather { background-color: var(--background); background-image: radial-gradient(at top, var(--gold-a07), transparent 60%), radial-gradient(transparent 40%, rgba(0, 0, 0, .55)), url('textures/leather-dark.webp'); background-size: auto, auto, 256px; } /* 羊皮纸:通缉令语义专用(目标站 .bg-parchment) */ .bg-parchment { background-color: var(--parchment); color: var(--parchment-foreground); background-image: radial-gradient(transparent 50%, rgba(86, 47, 18, .45)), url('textures/parchment.webp'); background-size: auto, 256px; } /* 木板:页头专用(目标站 .bg-wood) */ .bg-wood { background-color: #22180f; /* oklch(20% .02 50) 等值 */ background-image: linear-gradient(rgba(0, 0, 0, .35), rgba(0, 0, 0, .55)), url('textures/wood-dark.webp'); background-size: auto, 384px; } /* ---------------- 标志性组件 ---------------- */ /* 金框:表格容器/大卡片(目标站 .frame-gold 逐值还原) */ .frame-gold { border: 1px solid rgba(242, 176, 54, .45); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .45), inset 0 0 24px rgba(242, 176, 54, .08), 0 10px 30px rgba(0, 0, 0, .35); } /* 基础排版(与目标站 body / h1-h3 一致) */ html { color-scheme: dark; } body { background-color: var(--background); color: var(--foreground); font-family: var(--font-sans); } h1, h2, h3 { font-family: var(--font-heading); letter-spacing: .08em; }