/* ============================================================ JO — UI/UX Designer · Product & Systems DESIGN TOKENS · v1 · SINGLE SOURCE OF TRUTH ------------------------------------------------------------ 全部数值都是从现有 Homepage（style.css 原 :root + 组件规则） 提取出来的，不是重新定义的。任何新页面 / 新组件 / 新案例页 都必须只引用这里的 token，禁止再写字面色值、字号或圆角。 加载规则：每个页面 里 tokens.css 必须是【第一个】样式表， 其余样式表（style.css / case-ui.css / erp-case.css / detail.css / video.css）都依赖它，不得再自行定义同义变量。 ------------------------------------------------------------ 别名对照表（历史命名 → 规范命名，两者都可用，指同一个值） 案例页 / case-ui.css 首页 / 规范 --bg #ffffff → --c-page --card #ffffff → --c-page --hair #f5f5f7 → --c-page-2 --ink #1d1d1f → --c-ink --mut #6e6e73 → --c-ink-2 --mut2 #86868b → --c-ink-3 --mut3 #a1a1a6 → --c-ink-4 --line #d2d2d7 → --c-hairline --ac #0071e3 → --c-accent --ac2 #0077ed → --c-accent-hover --shadow rgba(15,18,25,.14) → --shadow-md （每个案例页的 --acc 是该页主题色，属于页面级覆盖，不在此定义） ============================================================ */ :root{ /* ---------- TYPE ---------- */ --font:"Work Sans","PingFang SC","Microsoft YaHei",system-ui,-apple-system,arial,helvetica,sans-serif; --font-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; /* ---------- COLOUR ---------- */ --c-page:#ffffff; /* page / light section background */ --c-page-2:#f5f5f7; /* alternate grey band */ --c-ink:#1d1d1f; /* primary text */ --c-ink-2:#6e6e73; /* secondary text */ --c-ink-3:#86868b; /* tertiary text / metadata */ --c-ink-4:#a1a1a6; /* muted text on black */ --c-hairline:#d2d2d7; /* hairline border / faint art */ --c-black:#000000; --c-accent:#0071e3; /* link blue */ --c-accent-hover:#0077ed; /* ---------- ELEVATION ---------- */ --shadow-md:0 1.6rem 4rem rgba(15,18,25,.14); /* editorial card lift */ --shadow-lg:0 1.6rem 4rem rgba(15,18,25,.18); /* phone screen lift */ /* ---------- LAYOUT ---------- */ --container:120rem; /* .l-container width at >=81.25em */ --container-small:67.5rem; /* .l-container--small */ --gutter:2.5rem; /* container padding, mobile */ --gutter-md:5rem; /* container padding, >=48em */ /* ---------- SPACING SCALE ---------- * * 3xs .5 · 2xs .75 · xs 1 · sm 1.5 · md 2 · lg 2.5 · xl 3 · 2xl 4 * 3xl 6 · 4xl 8 · 5xl 10 · 6xl 15 (rem) */ --space-3xs:.5rem; --space-2xs:.75rem; --space-xs:1rem; --space-sm:1.5rem; --space-md:2rem; --space-lg:2.5rem; --space-xl:3rem; --space-2xl:4rem; --space-3xl:6rem; --space-4xl:8rem; --space-5xl:10rem; --space-6xl:15rem; /* ---------- RADIUS ---------- *(from real usage, 6 values → 4) */ --radius-xs:.8rem; --radius-sm:1.4rem; /* .is-vertical img */ --radius-md:1.6rem; /* .is-portrait img */ --radius-lg:2rem; /* brand tile */ --radius-circle:50%; /* ---------- MOTION ---------- * * 只允许这两种缓动 + 这四档时长，不要每处换一套 */ --ease-out:cubic-bezier(.215,.61,.355,1); /* base UI transition */ --ease-out-expo:cubic-bezier(.22,1,.36,1); /* reveal / entrance */ --dur-fast:.4s; --dur-base:.45s; --dur-slow:.8s; --dur-reveal:1s; /* ---------- Z-INDEX ---------- */ --z-header:100; --z-overlay:200; } /* ============================================================ BREAKPOINTS（仅文档用 —— CSS 变量无法用于 @media） 30em / 480px 1 列 → 2 列 48em / 768px 平板：容器内边距 5rem，作品卡 47% 56.25em / 900px 页脚栅格 1/4 68.75em / 1100px 正文 1.8rem，作品卡 45.5%，容器固定 120rem 81.25em / 1300px 容器 120rem 且去掉内边距 统一规律：字号 / 间距一律用 calc(min + (max - min) * (100vw - minRem) / (max - min)) 在 32rem→76.8rem→110rem 三个锚点之间线性插值，超过 110rem 取固定值。 ============================================================ */ /* ---------- 全站基础基准：1rem = 10px ---------- */ :root{font-size:62.5%} /* ============================================================ SEMANTIC EDITORIAL SPACING 长页面（案例页）统一的纵向节奏：Small → Medium → Large → Full Width ============================================================ */ :root{ --rhythm-s:var(--space-3xl); /* 小节奏：标题 / metadata */ --rhythm-m:var(--space-4xl); /* 中节奏：说明文字 */ --rhythm-l:var(--space-5xl); /* 大节奏：核心 UI */ --rhythm-xl:var(--space-6xl); /* 段落之间 / 区块之间 */ }