/* ========================================================================== 千岛出海 · 设计令牌 v2 方向：高端 web3 · 白色主调 · 红色辅色 · 磨砂玻璃 · 圆角弧形 · 平滑动效 字体：黑体（拉丁 Space Grotesk / Inter，中文思源黑体） ========================================================================== */ /* -------------------------------------------------------------------------- 1. 浅色主题（默认）：白为主 -------------------------------------------------------------------------- */ :root { color-scheme: light; /* --- 底色：白为主调 --- */ --bg: #FFFFFF; --bg-soft: #F7F8FA; --bg-mute: #EFF1F5; --surface: #FFFFFF; /* --- 墨 --- */ --ink: #0E1014; /* 19:1 on white */ --ink-2: #454B57; /* 8.8:1 */ --ink-3: #6B7280; /* 4.9:1 —— 小字仍达 AA */ /* --- 红：辅色 --- */ --accent: #E11B2C; /* 主按钮、图形、大字号（白底 4.8:1） */ --accent-deep: #A8171D; /* 白底小字与链接（8.3:1） */ --accent-ink: #7C0F16; /* 更深的红，用于文字压色 */ --accent-soft: #FDECEE; --accent-line: rgba(225, 27, 44, 0.22); --accent-glow: rgba(225, 27, 44, 0.30); /* 主按钮「能量流动」渐变的两端：--accent 的明度提亮/压暗变体。 准则第 2 节把「红色渐变 + 光晕」列为主按钮的合法处理，所以这里不算新增色相， 只是同一个红的两个明度。提成令牌是为了不把裸十六进制留在 tech.css 里。 深浅两套主题共用同一组值，与提令牌前的渲染结果逐像素一致。 */ --accent-lift: #F02A3C; --accent-sink: #C4121F; /* 压在「近白」面上的深红，**故意不随主题切换**： CTA 面板的反白按钮底色两端都是 rgba(255,255,255,.9x)，深色主题下依然是近白， 所以这里的文字必须一直是深红。若改用会翻转的 --accent-deep（暗色下 #FF8A96）， 在白底上只剩约 2:1，直接不合格。 */ --accent-on-light: #A8121E; /* --- 磨砂玻璃 --- */ --glass-bg: rgba(255, 255, 255, 0.58); --glass-bg-strong: rgba(255, 255, 255, 0.76); --glass-brd: rgba(255, 255, 255, 0.70); --glass-hi: rgba(255, 255, 255, 0.90); /* 顶部高光描边 */ --glass-blur: 20px; --glass-sat: 150%; /* --- Hero 渐隐：左侧留给文字，右侧露出照片 --- */ --veil-1: rgba(255, 255, 255, 1); --veil-2: rgba(255, 255, 255, 0.94); --veil-3: rgba(255, 255, 255, 0.66); --veil-4: rgba(255, 255, 255, 0.22); --veil-5: rgba(255, 255, 255, 0); /* --- 描边 --- */ --line: rgba(14, 16, 20, 0.08); --line-2: rgba(14, 16, 20, 0.14); /* --- 固定深底（不随主题翻转）--- 有些区块永远是深底的（首页深色证据区、案例图上的压暗层）。 以前这些地方把 #0E1014 / #F4F6F9 和一堆 rgba(255,255,255,α) 直接写死在页面 CSS 里，同一段文字层级在 home.css 与 svc-pages.css 各写一遍 —— 改一次要改两处，漏一处就出现深浅不一。 这里收成一套语义 token：深底上的字只有四档，不再随手写透明度。 */ --deep-bg: #0E1014; /* 固定深底 */ --on-deep: #FFFFFF; /* 深底主文 */ --on-deep-hi: rgba(255, 255, 255, 0.92); /* 深底次强调文 */ --on-deep-mid: rgba(255, 255, 255, 0.72); /* 深底次文 */ --on-deep-lo: rgba(255, 255, 255, 0.58); /* 深底弱文 / 说明 */ --on-deep-line: rgba(255, 255, 255, 0.26); /* 深底上的描边 */ --on-deep-fill: rgba(255, 255, 255, 0.12); /* 深底上的浅填充 */ /* 图片底部压暗渐变：让压在照片上的白字始终读得出来。 三个停靠点就是一条完整渐变，跨文件共用同一份定义。 */ --grad-media: linear-gradient(to top, rgba(8, 10, 14, 0.88) 0%, rgba(8, 10, 14, 0.55) 48%, rgba(8, 10, 14, 0) 100%); --grad-media-strong: linear-gradient(to top, rgba(8, 10, 14, 0.92) 0%, rgba(8, 10, 14, 0.55) 48%, rgba(8, 10, 14, 0) 100%); /* --- 圆角：有层级的尺度，不是全站一个值 --- */ --r-xs: 8px; /* 小标记 */ --r-sm: 12px; /* 输入框、小按钮 */ --r-md: 20px; /* 卡片 */ --r-lg: 32px; /* 大面板 */ --r-xl: 48px; /* 区块外壳 */ --r-pill: 999px; /* 按钮、标签 */ /* --- 高度：柔和多层，低对比 --- */ --sh-sm: 0 1px 2px rgba(14, 16, 20, 0.04), 0 2px 8px rgba(14, 16, 20, 0.04); --sh-md: 0 4px 12px rgba(14, 16, 20, 0.05), 0 14px 36px rgba(14, 16, 20, 0.07); --sh-lg: 0 10px 28px rgba(14, 16, 20, 0.07), 0 36px 72px rgba(14, 16, 20, 0.09); --sh-glow: 0 10px 30px rgba(225, 27, 44, 0.25); --sh-inner: inset 0 1px 0 rgba(255, 255, 255, 0.85); /* --- 焦点环：全站只有这一份 --- 表单输入框、页脚搜索框、焦点框线控件三处各写一份 `0 0 0 4px var(--accent-soft)`， 值凑巧相同 —— 但那是巧合不是约定，改一处忘另一处就会让键盘焦点环宽窄不一。 收成 token 之后，「焦点环多宽」变成一个决定，而不是三处相同字面量。 环宽 4px 是无障碍下限之上、又不过分喧哗的值；配套的 outline 在 base.css （:focus 去鼠标圈、:focus-visible 留键盘圈）。 注意分层：动效层（v4/tech.css）负责聚焦时的角标，但**不许**再声明 box-shadow， 否则它排在最后会把这里盖掉。职责是「角标归动效层，环归组件层」。 */ --sh-ring: 0 0 0 4px var(--accent-soft); /* 主转化表单（联系表单）额外加一层外发光：焦点落在主路径上时更显眼。 别的输入框不加 —— 到处都是发光就等于哪里都不发光。 */ --sh-ring-glow: 0 0 0 4px var(--accent-soft), 0 0 28px -8px var(--accent-glow); /* 主色光环（非焦点态）：大圆元素用细环、小圆点用粗环，比例不同才好看， 所以是两份而不是一个值。 */ --sh-halo: 0 0 0 3px var(--accent-soft); /* 团队头像等 ~80px 圆元素 */ --sh-dot-halo: 0 0 0 6px var(--accent-soft); /* ~12px 的状态小圆点 */ /* ------------------------------------------------------------------------ 2. 字体：黑体（拉丁在前，中文回退思源黑体） ------------------------------------------------------------------------ */ --font-display: "Space Grotesk", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif; --font-body: "Inter", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif; /* --- 字阶：1.25 比例，黑体收紧字距 --- */ --fs-hero: clamp(2.5rem, 5.2vw, 4.25rem); --fs-h2: clamp(1.75rem, 3vw, 2.5rem); --fs-h3: 1.3125rem; --fs-h4: 1.0625rem; --fs-body: 1rem; --fs-small: 0.9375rem; --fs-foot: 0.8125rem; --lh-hero: 1.08; --lh-heading: 1.22; --lh-body: 1.7; --ls-hero: -0.022em; --ls-heading: -0.016em; --ls-body: -0.005em; --ls-label: 0.01em; --ls-caps: 0.08em; --fw-regular: 400; --fw-medium: 500; --fw-semi: 600; --fw-bold: 700; --measure: 32em; /* ------------------------------------------------------------------------ 3. 间距 ------------------------------------------------------------------------ */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-16: 4rem; --space-20: 5rem; --space-24: 6rem; --space-32: 8rem; /* 区块垂直节奏：上下各一份，块与块之间是它的两倍。 1440px 下约 79px/侧 → 块间 158px （原来是 9vw → 129.6px/侧、块间 259px，实测偏空） */ --section-y: clamp(3rem, 5.5vw, 5.5rem); /* ------------------------------------------------------------------------ 4. 网格：沿用 12 栏 ------------------------------------------------------------------------ */ --grid-cols: 12; --page-margin: clamp(1.25rem, 6vw, 7rem); --gutter: clamp(1rem, 1.8vw, 1.75rem); --content-max: 84rem; /* 页头占位高（= 玻璃条高 + 头部下内距）。给 [id] 的 scroll-margin-top 与各页的 sticky 顶距用，必须跟着 .header__bar 的 min-height 走： 默认 条 68 + 下内距 16 = 84px ≥900 条 76 + 下内距 16 = 92px 改条高时这两个值要一起改，否则锚点跳转会被页头盖住。 */ --header-h: 5.25rem; /* ------------------------------------------------------------------------ 5. 动效：平滑，但只动 transform / opacity ------------------------------------------------------------------------ */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --dur-fast: 140ms; --dur-base: 260ms; --dur-slow: 560ms; --dur-reveal: 760ms; /* --- 层级 --- */ --z-base: 1; --z-sticky: 100; --z-overlay: 200; --z-skip: 300; --tap-min: 44px; } /* 桌面页头条更高（见 components.css .header__bar），占位高同步。 断点与导航/抽屉的切换点一致（900px）。 */ @media (min-width: 900px) { :root { --header-h: 5.75rem; } } /* -------------------------------------------------------------------------- 6. 暗色主题：深色玻璃，红更亮 -------------------------------------------------------------------------- */ [data-theme="dark"] { color-scheme: dark; --bg: #0B0D10; --bg-soft: #111419; --bg-mute: #171B21; --surface: #14181E; --ink: #F4F6F9; --ink-2: #A8B0BD; /* 8.9:1 */ --ink-3: #7B8492; /* 5.1:1 */ --accent: #FF4D5E; /* 5.96:1 on --bg */ --accent-deep: #FF8A96; --accent-ink: #FFC2C8; --accent-soft: rgba(255, 77, 94, 0.14); --accent-line: rgba(255, 77, 94, 0.28); --accent-glow: rgba(255, 77, 94, 0.34); --glass-bg: rgba(22, 26, 32, 0.55); --glass-bg-strong: rgba(22, 26, 32, 0.74); --glass-brd: rgba(255, 255, 255, 0.10); --glass-hi: rgba(255, 255, 255, 0.16); --veil-1: rgba(11, 13, 16, 1); --veil-2: rgba(11, 13, 16, 0.94); --veil-3: rgba(11, 13, 16, 0.66); --veil-4: rgba(11, 13, 16, 0.24); --veil-5: rgba(11, 13, 16, 0); --line: rgba(255, 255, 255, 0.10); --line-2: rgba(255, 255, 255, 0.16); --sh-sm: 0 1px 2px rgba(0, 0, 0, 0.30), 0 2px 8px rgba(0, 0, 0, 0.24); --sh-md: 0 4px 12px rgba(0, 0, 0, 0.32), 0 14px 36px rgba(0, 0, 0, 0.34); --sh-lg: 0 10px 28px rgba(0, 0, 0, 0.36), 0 36px 72px rgba(0, 0, 0, 0.40); --sh-glow: 0 10px 30px rgba(255, 77, 94, 0.28); --sh-inner: inset 0 1px 0 rgba(255, 255, 255, 0.08); } /* -------------------------------------------------------------------------- 7. 无 JS 回退：跟随系统 -------------------------------------------------------------------------- */ @media (prefers-color-scheme: dark) { :root:not([data-theme]) { color-scheme: dark; --bg: #0B0D10; --bg-soft: #111419; --bg-mute: #171B21; --surface: #14181E; --ink: #F4F6F9; --ink-2: #A8B0BD; --ink-3: #7B8492; --accent: #FF4D5E; --accent-deep: #FF8A96; --accent-ink: #FFC2C8; --accent-soft: rgba(255, 77, 94, 0.14); --accent-line: rgba(255, 77, 94, 0.28); --accent-glow: rgba(255, 77, 94, 0.34); --glass-bg: rgba(22, 26, 32, 0.55); --glass-bg-strong: rgba(22, 26, 32, 0.74); --glass-brd: rgba(255, 255, 255, 0.10); --glass-hi: rgba(255, 255, 255, 0.16); --line: rgba(255, 255, 255, 0.10); --line-2: rgba(255, 255, 255, 0.16); --sh-sm: 0 1px 2px rgba(0, 0, 0, 0.30), 0 2px 8px rgba(0, 0, 0, 0.24); --sh-md: 0 4px 12px rgba(0, 0, 0, 0.32), 0 14px 36px rgba(0, 0, 0, 0.34); --sh-lg: 0 10px 28px rgba(0, 0, 0, 0.36), 0 36px 72px rgba(0, 0, 0, 0.40); --sh-glow: 0 10px 30px rgba(255, 77, 94, 0.28); --sh-inner: inset 0 1px 0 rgba(255, 255, 255, 0.08); } }