@charset "UTF-8"; /* ══════════════════════════════════════════════════════════════════ 首屏 · 光场归一 r24 · 2026-09-23 委托人原话:「這個光很奇怪」。 ── 怪在哪(逐层关灯 + 差分截图量出来的,不是手感)────────────── 首屏上同时点着 **五盏互不相干的灯**,每盏 alpha 9%~16%: ① identity-r13 --r13-hero-wash radial 120%×90% @ 8% 20% 主色 16% ② herolux-r22 .hlx-amb::before radial 56%×62% @ 78% 18% 主色 16% ③ herolux-r22 .hlx-amb::before radial 44%×48% @ 12% 92% 辅色 10% ④ herolux-r22 .hlx-beam 883×1149 的斜矩形,rotate(14deg),26s 呼吸 ⑤ hero-r23 §7 .hlx-beam::after **24% × 1149px ≈ 275px 高的 blur(6px) 光带, 每 9 秒从上扫到下** 两个后果,截图上都验证过: · **中场变成高原。** ①从左上打、②从右上打、③从左下打 —— 三条衰减曲线在画面 正中相交,那一片既不亮也不暗、还没有方向。光从四个方向同时来 = 读作「脏」, 不是读作「照明」。差分图 d-v-nowash / d-v-noamb 上看得很清楚。 · **⑤ 是那块"糊印子"的主犯。** 首屏净高只有 638px,而它是一条 275px 高的 模糊带在里面来回走 —— 任何一帧截下来,画面中间都挂着一团没有来源的雾。 关掉 ⑤ 单独差分(d-nosweep.png)与肉眼对比 nat-blob / nat-nosweep: 左下那片灰雾整片消失。 ── 这一轮怎么改 ──────────────────────────────────────────────── **一盏主光 + 一条方向,别的全关。** 主光钉在产品面的右上角 —— 让光有个来源(是那块面板在发光), 而不是浮在空气里;方向用一条线性暗角给出,不再用第二盏对打的灯。 ⚠️ 撤销方式仍是本站惯例:删掉 里这一行 即回到 r23。 旧的五层一个字没删,本文件只是把它们关掉/改写。 ⚠️ 一个色值都没新造,全部 color-mix 自 brand/tokens-dark.css。 ══════════════════════════════════════════════════════════════════ */ /* ── §0 关掉互相打架的那几盏 ─────────────────────────────────────── */ /* ① 首页那层 wash 只留"纵深",把它那盏从左上打过来的主色灯撤掉 —— 它和 ② 是对打的关系,两盏加起来才有中场高原。 */ [data-page="home"] { --r13-hero-wash: linear-gradient(112deg, color-mix(in srgb, var(--c-canvas) 30%, transparent) 0%, transparent 46%, color-mix(in srgb, var(--c-canvas) 34%, transparent) 100%); } /* ⑤ 那条 275px 的扫光带:删。首屏只有 638px 高,它注定是"一团雾"而不是"一道光"。 「画面里有东西在定期经过」这件事改由 §2 的窄扫线承担。 */ .hero .hlx-beam::after { display: none !important; } /* ④ 斜光带:不再当第四盏灯用。它的位置改成贴着产品面的左缘(那正是斜面 起翘的那条棱),宽度收到 1/3,读作"棱上的高光"而不是"半个屏幕在发亮"。 */ .hero .hlx-beam { inline-size: 15%; inset-inline-end: 30%; inset-block: -12%; transform: rotate(14deg); background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--c-primary-500) 13%, transparent) 50%, transparent); -webkit-mask-image: linear-gradient(to bottom, transparent, #000 30%, #000 70%, transparent); mask-image: linear-gradient(to bottom, transparent, #000 30%, #000 70%, transparent); animation: hlx-breathe 26s ease-in-out infinite; } /* ③ 左下那盏辅色灯:撤。② 改成唯一的主光,见 §1。 颗粒层(.hlx-amb::after)保留 —— 它不是灯,是磨色带的,深色底上少不得。 */ .hero .hlx-amb::before { /* §1 主光:一盏,钉在产品面右上角,衰减拉长到 76%。 alpha 比原来任何一盏都高(22% vs 16%),但因为只剩这一盏, 画面总亮度反而是降的 —— 亮的地方更亮、暗的地方真的暗,这才是"有光"。 */ background: radial-gradient(68% 82% at 86% 4%, color-mix(in srgb, var(--c-primary-500) 22%, transparent) 0%, color-mix(in srgb, var(--c-primary-500) 7%, transparent) 38%, transparent 76%); /* r23 §7 给它加过 40s 的漂移缩放。一盏有来源的光不该自己在画面里游,撤掉。 */ animation: none !important; } /* 暗角:给"方向"的那一半。左下压深、右上不压 —— 主光在右上, 所以这条暗角和主光是同一个光源的两面,不是第二盏灯。 */ .hero .hlx-amb { background: radial-gradient(120% 108% at 96% 0%, transparent 0%, transparent 44%, color-mix(in srgb, #000 22%, transparent) 100%); } /* ── §2 让光有来源:产品面自己在发光 ───────────────────────────── 原来的光浮在空气里,画面上找不到"谁在发光"。这里把接触光贴到行情面板上: 面板背后一圈外发光 + 顶边一条镜面高光。人眼对"物体 → 它的光"这条因果 极其敏感,补上之后同样强度的光会立刻从"脏"变成"亮"。 */ @media (min-width: 1024px) { .hstage__panel--quotes { position: relative; box-shadow: 0 26px 52px -34px #000, 0 0 64px -18px color-mix(in srgb, var(--c-primary-500) 34%, transparent); } /* 顶边镜面:面板上沿一条 1px 的亮线,从左到右衰减 —— 光从右上来, 所以右段更亮。它是上面那盏主光打在玻璃棱上的结果。 */ .hstage__panel--quotes::after { content: ""; position: absolute; inset-inline: 0; inset-block-start: 0; block-size: 1px; pointer-events: none; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--c-text) 14%, transparent) 30%, color-mix(in srgb, var(--c-primary-500) 62%, transparent) 78%, transparent); } } /* ── §3 窄扫线:替掉 ⑤ ─────────────────────────────────────────── 「系统在跑」这件事仍然要被看见,但它得是**一道线**,不是一团雾: 2px 实体 + 少量外发光,贴着产品面从上往下走一趟,12s 一轮。 宽度只有原来的 1/130,视觉上是"扫过",不是"糊了一片"。 */ .hstage__plane { position: relative; } .hstage__plane::after { content: ""; position: absolute; inset-inline: -6%; block-size: 2px; pointer-events: none; z-index: 3; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--c-accent-500) 52%, transparent) 38%, color-mix(in srgb, var(--c-primary-500) 40%, transparent) 72%, transparent); box-shadow: 0 0 12px color-mix(in srgb, var(--c-accent-500) 24%, transparent); opacity: 0; animation: hl24-scan 12s linear infinite; } @keyframes hl24-scan { 0% { inset-block-start: -2%; opacity: 0; } 6% { opacity: .85; } 42% { opacity: .85; } 52% { inset-block-start: 102%; opacity: 0; } 52.01%, 100% { inset-block-start: 102%; opacity: 0; } } /* ── §4 底边 ───────────────────────────────────────────────────── r22 的 .hlx-edge 是"往下化进页面底"。主光换到右上之后,原来那条 发丝亮线的最亮点(58%)落在了暗的一侧 —— 把它挪到主光脚下。 */ .hero .hlx-edge::after { background: linear-gradient(to right, transparent, color-mix(in srgb, var(--c-border-strong) 30%, transparent) 20%, color-mix(in srgb, var(--c-primary-500) 38%, transparent) 76%, transparent); } /* ── §5 手机 ───────────────────────────────────────────────────── 窄屏上产品面落回文字下方、不再斜铺,接触光与扫线都失去依附对象,撤掉。 */ @media (max-width: 1023px) { .hstage__plane::after { display: none; } .hero .hlx-beam { display: none; } .hero .hlx-amb::before { background: radial-gradient(90% 56% at 76% 2%, color-mix(in srgb, var(--c-primary-500) 18%, transparent) 0%, transparent 70%); } } /* ── §6 关掉动效时 ──────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { .hstage__plane::after { animation: none; opacity: 0; } .hero .hlx-beam { animation: none; } } /* 系统强制高对比度:光场整体退场(r22 已有同类规则,这里补上本轮新增的两处)。 */ @media (forced-colors: active) { .hstage__plane::after, .hstage__panel--quotes::after { display: none; } }