灵感源自梦幻后期处理的二月兰摄影作品——长春花蓝的弥散光斑、斑驳的阳光、极浅的景深。这不是一个“功能型”的办公软件 UI，而是一场**“悬浮在花海上的”坠入爱河的数字体验**。
- 弥散光斑即背景 (Dappled Light): 坚决摒弃死板的纯色背景。背景是缓慢游走的、带有呼吸感的渐变色块，模拟风吹过紫金草花海时，阳光透过树叶落下的斑驳光影。
- 颗粒感即质感 (Film Grain): 全局 SVG noise 覆盖层注入胶片和粗糙画布的质感，彻底脱离现代数字产品的“廉价塑料感与AI感”。
- Z轴景深与悬浮架构 (Floating Depth): 抛弃传统 Web 应用“撑满全屏、平铺直叙”的框架。核心交互区像一块巨大的玻璃悬浮在光斑背景之上，四周留白，建立起“前景清晰、背景虚化”的强烈景深感（大光圈效应）。
- 拒绝生硬线条 (Organic Boundaries): 恋爱是柔软的。用光晕、半透明渐变（Gradient Borders）和内发光（Inner Shadows）来代替传统的
1px solid分割线。界面元素应当像清晨花瓣上的露珠般晶莹剔透。 - 从“填表”到“描绘” (Canvas over Forms): 拒绝工业化的表单输入。将枯燥的信息录入转化为极具仪式感的“画像绘制”，消除用户的“被审问感”，赋予填写过程情绪价值。
不仅是颜色的堆砌，更是情绪的划分。
| 名称 | 色值 | 情绪/用途 |
|---|---|---|
| Violet Light | #d6e0ff |
晨曦：弥散光斑、浅色背景、柔和过渡 |
| Violet Main | #8ca0ff |
心动：主交互色、自己的消息气泡、主按钮 |
| Violet Deep | #6b82f0 |
笃定：Hover 态、品牌核心文字、强调图标 |
| Spring Green | #d4eda4 |
生机/指引：军师/AI助手模式专属辅助色、匹配徽章 |
| Cream | #fdfdfd |
画纸：网页绝对底色（被噪点和光斑覆盖之上） |
| 名称 | 色值 | 用途 |
|---|---|---|
| Ink | #3a405a |
主文字，带有微弱蓝色倾向的深灰，比纯黑更透气 |
| Ink Muted | #7a829a |
次级文字、输入框占位符、次要图标 |
| Glass Light | rgba(255,255,255,0.7) |
露珠质感的边框、高光高亮处 |
| 层级名称 | CSS 变量 / 值 | 用途 |
|---|---|---|
| 底层光晕 | blur(90px) |
纯背景光斑，极度失焦 |
| 主控台玻璃 | rgba(255,255,255,0.45) + blur(24px) |
悬浮应用的主体容器 |
| 露珠内阴影 | inset 0 0 0 1px rgba(255,255,255,0.5) |
赋予卡片、输入框立体的“玻璃边缘反光” |
| 柔光外阴影 | 0 30px 60px rgba(140,160,255,0.15) |
让主控台脱离背景，产生漂浮感 |
诗意与可读性的平衡。
--font-serif: 'Cormorant Garamond', Georgia, serif; /* 情绪表达、诗意、优雅 */
--font-sans: 'Outfit', -apple-system, sans-serif; /* 现代感、清晰、青春 */| 角色 | 字体 | 参数 | 备注 |
|---|---|---|---|
| 品牌名 & 大标题 | Serif | 300~400，斜体 | 宛如手写情书，用于 "Violet" 和主 Landing Page 标语 |
| 诗意焦点 (如宣言) | Serif | 20px+, 斜体 | 用于展现用户灵魂特质的文本框，赋予“写情书”的仪式感 |
| 界面模块标题 | Serif | 16px - 20px, 500 | 如“主聊天”、“军师私聊”的顶部标题，带入古典美 |
| 正文 (聊天/介绍) | Sans | 14px, 400 | 保证长时间阅读的可读性，清晰无负担 |
| 分类小标题 | Sans | 11px, 全大写 | 配合 letter-spacing: 1px，营造高级杂志排版感 (Editorial) |
三个大型模糊圆形（blob），通过 CSS @keyframes 缓慢浮动且带有轻微缩放（呼吸感）：
- Blob 1 (Lilac): 左上角，高明度。
- Blob 2 (Violet): 右下角，主体色，带位移动画。
- Blob 3 (Spring Green): 游走于中下部，象征透过紫金草射进来的阳光，使用极低透明度。
通过全屏 SVG Filter 实现 feTurbulence（分形噪点）。
opacity: 0.05，pointer-events: none。这是消除前端代码“生硬感”的终极武器。
在无头像社交中，使用基于 CSS linear-gradient 的柔和彩色光晕替代默认的“灰色人头”。通过色彩融合暗示用户的性格特质（如：冷色系代表理性，暖粉系代表感性）。
彻底抛弃冗长垂直的表单填写，重构为**“双栏画卷 (The Open Book)”**：
- 从纵向疲劳到双栏对比：不再需要用户一直往下滚动。利用宽屏优势，左边构建身份轮廓（骨架），右边点缀灵魂标签（血肉）。宛如一本翻开的书，极具古典与优雅气质。
- 极简主义控件 (Minimalist Inputs)：删掉
<select>丑陋的外边框和箭头，取而代之的是minimal-input（只有一条微弱的底边）。性别选择变成并排的“药丸按钮(Pills)”。这极大削弱了被系统“审问”的压迫感。 - 信息分块降噪 (Editorial Chunking)：右侧标签云拒绝“一锅粥”式堆砌。将其优雅地分为“文艺/思想”、“运动/户外”、“生活/休闲”等模块，配合杂志感标题，降低选择认知负荷。
- 诗意的焦点提取：“恋爱宣言”是展现灵魂的地方。为其保留极大留白，强制使用
Serif衬线字体，放大字号。让敲击键盘的过程充满仪式感。
彻底颠覆传统列表页的“简历审核感”。灵魂画廊不是一个页面，而是一场沉浸式的水平漫游体验。
用户的自然垂直滚动行为被优雅地转译为画面的水平移动，如同缓缓展开一幅长卷轴。
- 技术基座：Lenis（丝滑惯性滚动）+ GSAP ScrollTrigger（滚动进度 → 动画映射）。
- 空间撑高：一个
.wapper容器被设置为水平内容总宽度的等值高度，凭空创造出垂直滚动空间。实际内容容器.container使用position: fixed钉在视口内，其translateX值由滚动进度驱动。 - 滚动状态感知：
<html>标签在静止时为class="lenis lenis-smooth"，滚动时切换为class="lenis lenis-scrolling"，为全局提供滚动状态钩子。
画廊不是一个平面，而是拥有前景 / 中景两个速度层：
| 层级 | 元素 | 移动速度 | 视觉角色 |
|---|---|---|---|
| 中景 | 主内容（标题、卡片、统计） | 1.0x | 用户注意力焦点 |
| 前景 | 装饰波形 SVG (container-clips) |
1.1x（额外 0.1x 叠加） | 空间纵深暗示 |
装饰层是 .container 的子元素，继承父级 1x 位移后叠加自身 0.1x 额外位移，总计 1.1x。10% 的速度差足以制造“装饰在近处漂浮掠过”的空间感，而不至于晕眩。
11 个 SVG 波形图案散布在画廊各处，每个由约 60~100 条垂直 <line> 元素组成，y 值由 sine + 随机扰动生成，形似声波 / 心跳图。它们使用 Violet Main 色调 (#8ca0ff)、低透明度描边，入场时从右侧 translateX(50%) + opacity: 0 滑入归位。通过 CSS 变量 --cx（百分比水平位置）和 --cy（track 行号）定位在网格上。
视口被 10 条水平轨道线均分（每条 10vh），使用 Violet Main 色的半透明渐变线 (linear-gradient(90deg, transparent, #8ca0ff, transparent))。它们不是装饰——所有内容元素的垂直位置都以 --track-h 的整数倍对齐，赋予画廊严谨的网格秩序感。入场时各线从左向右 scaleX(0→1) 依次展开。
一条固定在视口中央的垂直渐变线（顶底透明、中间 Violet Deep 色），如同时间线编辑器中的播放指针，暗示“你正处于画廊的某个位置”。入场时从底部 scaleY(0→1) 伸展。
原生滚动条被 ::-webkit-scrollbar { display: none } 隐藏，替换为右侧固定的极简滚动指示器：
- Thumb 使用 Violet Main → Deep 的渐变色 + 圆角胶囊形。
- 高度和位置通过 CSS 变量
--thumb-h/--thumb-y实时驱动，与 ScrollTrigger 的progress联动。 - Hover 时降低透明度，保持克制。
画廊从左到右依次展开五个内容区：
- 标题区 (Header)：大号 Serif 斜体 “Soul Gallery” + 品牌描述 + 装饰方块阵列。文字使用 overflow-clip +
translateY(100%)的逐行入场动画。 - 精选灵魂 (Featured)：一个大尺寸 Aura 渐变卡片，展示平台精选用户的恋爱宣言。左侧带竖排 “Featured” 标签提示。入场时从
scale(0)以左上角为原点展开，配合边框呼吸和引用文字淡入。 - 关于 (About)：平台理念的文字介绍。使用大号空心 Serif 描边字作为装饰性标题，正文渐显入场。
- 校园脉搏 (Campus Pulse)：活跃灵魂、心动数、匹配数等关键数据。每行使用
translateY(100%)滑入 + 进度条scaleX(0→var(--p))从左生长动画。 - 灵魂卡片 (Soul Cards)：核心内容区，详见下方。
卡片采用 阶梯式错落排列，通过 CSS 变量 --track-index 控制垂直偏移（如 0/3/1/2/4/1），创造高低起伏的视觉节奏，而非简单的水平一字排开。
每张卡片由两个主体组成：
- Aura 光晕区：使用
linear-gradient渲染用户的灵魂色谱（冷蓝 / 暖粉 / 绿蓝 / 粉紫等），替代传统头像。中央叠加半透明玻璃层和大号性别符号，保持匿名感。 - 内容区：校区信息（大写无衬线）、恋爱宣言（Serif 斜体）、旋转十字装饰、兴趣标签药丸。
当卡片随水平滚动进入视口 85% 位置时，触发一套精心编排的入场序列：
t=0.0s Aura 光晕区 clip-path 从左向右擦开
polygon(0,0,0,0) → polygon(0,100%,100%,0)
——如同帷幕从左侧缓缓拉开
t=0.3s 校区信息文字从下方滑入归位 (translateY → 0)
t=0.4s 恋爱宣言逐行揭示
每行包裹在 overflow:clip 容器中
内层从 translateY(100%) 滑入，各行间隔 80ms
t=0.5s 十字装饰从 scale(0) 弹出 (back.out 弹性缓动)
随后进入 8s 一周期的缓慢旋转循环
t=0.55s 兴趣标签行从下方滑入
这套动画的灵魂在于：观众不是一次性看到所有信息，而是如同翻阅一封信件般，逐层、逐行地“读”到这个灵魂的故事。
固定在视口顶部的导航栏，使用 rgba(253,253,253,0.55) + backdrop-filter: blur(18px) 的玻璃拟态效果，底部以 rgba(255,255,255,0.5) 光线代替实线分割。
| 位置 | 元素 | 样式 |
|---|---|---|
| 左侧 | Violet Logo + 导航标签组（发现 / 已发起 / 收到心动 / 关系） | 药丸按钮组，active 态白底紫字 + 柔光阴影 |
| 右侧 | 积分显示 + 军师大厅 / 管理 / 个人中心 / 退出 | 各按钮保持独立色彩语义（紫=军师、绿=管理、白=通用） |
导航栏入场时从顶部 translateY(-100%) 滑入，与 track 线展开同步。响应式策略：窄屏下隐藏标签组和次要按钮，仅保留 Logo + 核心功能入口。
采用 悬浮双子星架构：
- 主容器：宽度
92vw，高度90vh，绝对居中。带有一圈微弱白色内发光，背景为重度毛玻璃。 - 柔性分割：左侧主聊天（60%）；右侧军师私聊（40%）。两者之间禁止使用实线，使用
linear-gradient(to right, rgba(255,255,255,0.1), transparent)制造光的隔断。 - 沉浸式输入框 (Dewdrop Input)：高亮度白底，圆角
30px。Focus 时增强白色内阴影，模拟水滴折射光芒。
- 有机缓动曲线 (Organic Easing)：彻底弃用
linear。全局使用cubic-bezier(0.2, 0.8, 0.2, 1)（迅捷启动，极其柔和的刹车），模拟自然风吹草动时的非线性物理感。 - 温柔的情绪关怀 (Micro-feedback)：交互不仅服务于功能，更服务于情绪。例如在选择标签达到上限（10个）时，不再弹出生硬冰冷的系统警告框，而是让数字计数器产生一次极其轻微的水平震动。
- 触碰的生命力：标签选中时，不仅改变颜色，还会伴随向上的轻微浮起（
translateY(-2px)）并散发紫色的渐变光晕，仿佛指尖点亮了某个星辰。
Violet 的入场动画遵循一套统一的编排语言，贯穿所有页面：
所有标题和关键文案使用逐行滑入动画：外层 overflow: clip 遮罩，内层 translateY(100%) → translateY(0) 上推入场。各行之间间隔 80~100ms，如同诗句逐行浮现。
大型内容区域（如 Featured Aura、View Image）使用 clip-path 或 scale 的展开动画：
clip-path: polygon(0 0, 0 0, 0 100%, 0 100%)→ 全展开（左→右帷幕效果）transform: scale(0)+transform-origin: left top→scale(1)（左上角生长效果）
装饰元素（方块阵列、十字图标、波形 SVG）从 opacity: 0 + 轻微偏移入场，stagger 间隔 30~60ms，产生粒子扩散的视觉。
入场时的全局时间线以 0.3s 延迟启动后依次展开：
t=0.0s Track 轨道线从左向右依次展开 (stagger 50ms)
t=0.1s 导航栏从顶部滑入
t=0.3s Playhead 播放指针从底部伸展
t=0.6s 标题区眉标文字滑入
t=0.7s “Soul” 标题滑入
t=0.85s “Gallery” 标题滑入
t=0.8s 装饰波形依次淡入归位 (stagger 60ms)
t=1.0s 描述文字滑入
t=1.1s 方块阵列逐个点亮 (stagger 30ms)
t=1.5s Scrollbar 渐显
灵魂画廊中，内容区的入场不依赖固定时间，而是由水平滚动位置触发：
- 各 section 在进入视口 80% 位置时触发入场序列。
- 卡片在进入视口 85% 位置时触发 Reveal Choreography（详见 5.2 节）。
- 统计条在入场后
scaleX(0)→scaleX(var(--p))生长，映射数据比例。 - 所有触发均为一次性（不可逆），避免反复播放带来的视觉噪音。
- 十字装饰旋转：
8s一周期，ease-in-out缓动，每张卡片通过--cd变量设置不同的animation-delay，避免同步旋转的机械感。 - 装饰方块闪烁：
2s一周期，steps(1)阶梯函数，模拟电子屏幕的数字脉冲。 - Bokeh 光斑漂移：18~25s 周期的缓慢位移 + 缩放，
alternate方向交替，模拟自然光影的呼吸感。
Violet Design System. Engineered to feel like a spring breeze.