/* ========================================================================== 石青 SHIQING — Design Tokens 单一来源：颜色、字体、间距、圆角、动效时长都在这里定义。 页面与组件只允许引用 token，不允许写死数值。 ========================================================================== */ :root { /* ---- Brand ---- */ --brand-name: "石青"; --brand-sub: "SHIQING"; /* ---- Colour: light (paper) ---- */ /* 暖白纸面，不是纯白：#FFF 在 OLED 与高亮度屏上刺眼，且没有纸感 */ --c-paper: #faf8f4; --c-paper-sunk: #f2eee6; /* 比纸面低一档，用于分区底色 */ --c-surface: #ffffff; /* 卡片面 */ --c-surface-2: #f6f3ec; /* 卡内次级块 */ --c-ink: #191713; /* 正文，不用纯黑：纯黑在暖纸上过硬 */ --c-ink-soft: #3d3830; --c-muted: #6e675c; --c-muted-2: #8c857a; /* 仅用于非关键辅助字，需 ≥ 14px 且非正文 */ --c-rule: #e5dfd3; /* 发丝分隔线 */ --c-rule-strong: #d3cbbb; --c-accent: #2c5751; /* 石青：矿物蓝绿 */ --c-accent-ink: #22433f; --c-accent-soft: #e7efec; --c-clay: #a8442a; /* 朱砂：仅用于价格/售罄等必须跳出来的信息 */ --c-clay-soft: #f6e9e4; --c-focus: #2c5751; /* ---- Typography ---- */ --font-display: "Cormorant Garamond", "Noto Serif SC", "Songti SC", "SimSun", Georgia, serif; --font-body: "Inter", "Noto Sans SC", -apple-system, "Segoe UI", "PingFang SC", "Microsoft YaHei", Roboto, sans-serif; /* 字号：display 用 clamp 保证小屏不溢出 */ --fs-display: clamp(2.75rem, 7.2vw, 5.5rem); --fs-h1: clamp(2rem, 4vw, 3.125rem); --fs-h2: clamp(1.5rem, 2.6vw, 2.125rem); --fs-h3: 1.1875rem; --fs-lead: clamp(1.0625rem, 1.4vw, 1.25rem); --fs-body: 1rem; --fs-sm: 0.875rem; --fs-xs: 0.8125rem; --fs-micro: 0.6875rem; --lh-display: 1.02; --lh-heading: 1.18; --lh-body: 1.72; --lh-tight: 1.45; --tracking-display: -0.022em; --tracking-heading: -0.012em; --tracking-micro: 0.16em; /* 仅用于全大写小标签 */ /* ---- Space (4 起，2 倍递进为主) ---- */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px; --sp-10: 128px; /* 分区纵向节奏：移动端收敛，桌面端放开 */ --section-y: clamp(56px, 9vw, 128px); /* ---- Radius：同心公式 外圈 = 内圈 + 缝 ---- */ /* .card 用 --r-card，卡内控件用 --r-inner， 且必须满足 --r-card === --r-inner + --card-pad (+ 卡片的布局边框宽度，此处为 0) */ --r-card: 20px; --card-pad: 14px; --r-inner: 6px; /* 20 = 6 + 14 */ --r-pill: 999px; /* 媒体块直接贴到卡片的 padding 内沿，所以必须同样取 6， 取更小的值会让拐角处的缝一头宽一头窄 */ --r-media: 6px; --hairline: 1px; /* ---- Motion ---- 基准取自「看得见的移动、但不催人」：反馈 200ms 级、面板 320ms 级、 图片揭示 620ms 级。缓动统一用长尾曲线（easeOutQuint 系）， 起步快、收尾慢，比短促的 cubic-bezier(.22,.68,.32,1) 更稳。 */ --dur-micro: 150ms; /* 按键点按、涟漪 */ --dur-fast: 200ms; /* 按钮、链接的即时反馈 */ --dur-base: 320ms; /* 面板进出 */ --dur-pop: 420ms; /* 内容切换、数字跳动 */ --dur-slow: 620ms; /* 图像揭示，仅用于不阻碍阅读的元素 */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-in-out: cubic-bezier(0.45, 0.05, 0.25, 1); --ease-spring: cubic-bezier(0.34, 1.18, 0.5, 1); /* 轻微回弹，仅用于小控件 */ --ease-silk: cubic-bezier(0.16, 1, 0.3, 1); /* 面板出入 */ /* ---- Layout ---- */ --container: 1240px; --container-narrow: 760px; --gutter: clamp(20px, 4vw, 48px); --header-h: 68px; /* ---- Elevation：只用两级，且仅在有层叠语义时使用 ---- */ --shadow-card: 0 1px 2px rgb(25 23 19 / 4%), 0 12px 32px -18px rgb(25 23 19 / 18%); --shadow-lift: 0 2px 6px rgb(25 23 19 / 6%), 0 24px 56px -24px rgb(25 23 19 / 26%); /* ---- Liquid glass ---- 三层：底色（保证可读）+ 模糊 + 高光/折射边。 不支持 backdrop-filter 的环境拿到的是实色降级面，文字对比度不受影响。 */ --glass-fill: rgb(255 255 255 / 62%); --glass-fill-strong: rgb(255 255 255 / 78%); --glass-fill-soft: rgb(255 255 255 / 44%); /* 承载长文本的面板（抽屉、汇总、底部购买条）用更高不透明度， 玻璃感靠模糊与折射边体现，不靠把正文透明度一起降下去 */ --glass-fill-panel: rgb(252 250 246 / 88%); --glass-blur: 18px; --glass-blur-strong: 26px; --glass-hi: rgb(255 255 255 / 42%); /* 顶部高光 */ --glass-edge: rgb(255 255 255 / 34%); /* 折射边亮度 */ --glass-edge-soft: rgb(255 255 255 / 16%); --glass-shadow: 0 10px 40px -16px rgb(25 23 19 / 22%); /* ---- Motion（补充分级） ---- */ --dur-hero: 720ms; /* 页面入场，只跑一次 */ --dur-zoom: 1100ms; /* 图片推近，慢到几乎察觉不到在动 */ /* 环境氛围光：大面积但只动 transform/opacity。 数值刻意偏低——玻璃的"透"靠底下的颜色差，太浓会盖住正文。 */ --blob-1: rgb(44 87 81 / 16%); --blob-2: rgb(168 68 42 / 10%); --blob-3: rgb(198 168 108 / 13%); } /* ---- Colour: dark ---- 暖深色，不用 #000：纯黑会把暖纸的调性打断。 暗色下字重不统一降低：实际载入字体是否支持更细字重由 font 文件决定，不靠猜。 */ :root[data-theme="dark"] { --c-paper: #141413; --c-paper-sunk: #0f0f0e; --c-surface: #1c1b18; --c-surface-2: #24221e; --c-ink: #edeae3; --c-ink-soft: #d5d0c5; --c-muted: #a49c8e; --c-muted-2: #8b8377; --c-rule: #302d28; --c-rule-strong: #423e37; --c-accent: #8ab8ad; --c-accent-ink: #a6cdc3; --c-accent-soft: #1e2a27; --c-clay: #e0855f; --c-clay-soft: #2c1d17; --c-focus: #8ab8ad; --shadow-card: 0 1px 2px rgb(0 0 0 / 30%), 0 12px 32px -18px rgb(0 0 0 / 60%); --shadow-lift: 0 2px 6px rgb(0 0 0 / 36%), 0 24px 56px -24px rgb(0 0 0 / 70%); /* dark glass：提高不透明度保住文字对比度 */ --glass-fill: rgb(28 27 24 / 62%); --glass-fill-strong: rgb(28 27 24 / 80%); --glass-fill-soft: rgb(28 27 24 / 44%); --glass-fill-panel: rgb(26 25 22 / 90%); --glass-hi: rgb(255 255 255 / 10%); --glass-edge: rgb(255 255 255 / 14%); --glass-edge-soft: rgb(255 255 255 / 7%); --glass-shadow: 0 10px 40px -16px rgb(0 0 0 / 65%); --blob-1: rgb(138 184 173 / 10%); --blob-2: rgb(224 133 95 / 7%); --blob-3: rgb(198 168 108 / 6%); } /* 系统偏好跟随：用户没手动切过时生效（由 JS 在 上写 data-theme，见 ui.js） */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --c-paper: #141413; --c-paper-sunk: #0f0f0e; --c-surface: #1c1b18; --c-surface-2: #24221e; --c-ink: #edeae3; --c-ink-soft: #d5d0c5; --c-muted: #a49c8e; --c-muted-2: #8b8377; --c-rule: #302d28; --c-rule-strong: #423e37; --c-accent: #8ab8ad; --c-accent-ink: #a6cdc3; --c-accent-soft: #1e2a27; --c-clay: #e0855f; --c-clay-soft: #2c1d17; --c-focus: #8ab8ad; --shadow-card: 0 1px 2px rgb(0 0 0 / 30%), 0 12px 32px -18px rgb(0 0 0 / 60%); --shadow-lift: 0 2px 6px rgb(0 0 0 / 36%), 0 24px 56px -24px rgb(0 0 0 / 70%); --glass-fill: rgb(28 27 24 / 62%); --glass-fill-strong: rgb(28 27 24 / 80%); --glass-fill-soft: rgb(28 27 24 / 44%); --glass-fill-panel: rgb(26 25 22 / 90%); --glass-hi: rgb(255 255 255 / 10%); --glass-edge: rgb(255 255 255 / 14%); --glass-edge-soft: rgb(255 255 255 / 7%); --glass-shadow: 0 10px 40px -16px rgb(0 0 0 / 65%); --blob-1: rgb(138 184 173 / 10%); --blob-2: rgb(224 133 95 / 7%); --blob-3: rgb(198 168 108 / 6%); } }