/* ==========================================================================
* 柚子 Yuzu 官网 · 全站设计令牌
*
* 与 LeafHub / pingyi.me 同族的技术骨架，但换了一套自己的皮肤：
* 珍珠白打底 / 丁香紫作线 / 长春花紫蓝作主行动色 / 樱粉作强调 / 墨色不用纯黑
* 泡泡是她的招式，不是装饰 —— 所以背景里一直有泡在升。
*
* 三条硬规矩（全站有效）：
* 一、不做深色主题。这一套就是浅色的。
* 二、界面里不出现任何 emoji，图标一律用单色描边 SVG（lucide）。
* 三、任何重装饰都要能被 data-perf 关掉。
*
* 每页 顶部引入：
*
*
* ========================================================================== */
:root {
color-scheme: light;
/* —— 底色与线 —— */
--pearl: #F6F2F9;
/* 珍珠白，全站底 */
--pearl-soft: #FDFBFE;
/* 更亮的一层纸 */
--pearl-deep: #EFE9F4;
/* 交替区块 */
--lilac: #E8E0EF;
/* 丁香紫，一切分隔线 */
--lilac-soft: #F2ECF7;
/* —— 行动色 —— */
--peri: #6C5BC4;
/* 长春花紫蓝，主行动色 */
--peri-deep: #574AA3;
--peri-soft: #EDEAFB;
--sakura: #D9709E;
/* 樱粉，强调 */
--sakura-soft: #FBECF3;
--crimson: #C2415C;
/* 绯红，危险 */
/* —— 她身上的颜色（泡泡与高光）—— */
--bubble: #7EA0ED;
--bubble-deep: #6675B8;
--hair-hi: #F3DFE9;
--hair-mid: #BB86C3;
/* —— 文字 —— */
--ink: #2B2335;
/* 深紫灰，不用纯黑 */
--sub: #5B5169;
--muted: #8E85A0;
--faint: #B3AAC2;
--card-radius: 1.75rem;
--hair: 1px solid rgba(43, 35, 53, 0.08);
}
html {
scroll-behavior: smooth;
}
body.yz-themed {
background-color: var(--pearl);
color: var(--ink);
-webkit-tap-highlight-color: transparent;
overflow-x: hidden;
}
/* ==========================================================================
* 字体
* 正文走系统无衬线；标题用衬线，日文另给一套明朝，避免用中文字形去排日文。
* ========================================================================== */
.font-serif {
font-family: 'Noto Serif SC', 'Songti SC', 'SimSun', serif;
}
.font-mono {
font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}
html[lang^="ja"] .font-serif {
font-family: 'Hiragino Mincho ProN', 'Yu Mincho', 'Noto Serif JP', 'Noto Serif SC', serif;
}
html[lang^="en"] .font-serif {
font-family: 'Noto Serif SC', Georgia, 'Times New Roman', serif;
}
/* 等宽小标签 —— 全站的「章节号」语汇 */
.yz-label {
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 0.68rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--muted);
}
/* ==========================================================================
* 面板：近乎不透明 + 一根发丝描边
* 她悬在任意壁纸之上 —— 网站沿用同一条规矩，不做重毛玻璃。
* ========================================================================== */
.glass-panel {
background: rgba(255, 255, 255, 0.86);
border: var(--hair);
box-shadow: 0 10px 40px -18px rgba(43, 35, 53, 0.18);
backdrop-filter: blur(14px);
}
@media (max-width: 767px) {
.glass-panel {
background: rgba(255, 255, 255, 0.95);
backdrop-filter: none !important;
box-shadow: 0 4px 16px -10px rgba(43, 35, 53, 0.14);
}
}
.solid-panel {
background: var(--pearl-soft);
border: var(--hair);
}
.hover-float {
transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1),
box-shadow 0.45s cubic-bezier(0.2, 0.8, 0.2, 1),
border-color 0.45s ease;
}
.hover-float:hover {
transform: translateY(-5px);
box-shadow: 0 24px 48px -20px rgba(108, 91, 196, 0.32);
border-color: rgba(108, 91, 196, 0.28);
}
/* 渐变标题字 */
.aurora-text {
background: linear-gradient(115deg, var(--peri) 0%, var(--hair-mid) 48%, var(--sakura) 100%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
/* 巨字水印 —— 与个人站「奕」同一套语汇 */
.watermark-char {
font-family: 'Noto Serif SC', serif;
font-weight: 700;
color: rgba(108, 91, 196, 0.055);
line-height: 0.8;
user-select: none;
pointer-events: none;
}
/* ==========================================================================
* 泡泡场 —— 她的招式，不是壁纸
* 结构： × 12
* 变化全部由 nth-child 给，页面侧不需要写行内样式。
* ========================================================================== */
.yz-bubbles {
position: fixed;
inset: 0;
z-index: 0;
overflow: hidden;
pointer-events: none;
}
.yz-bubble {
position: absolute;
bottom: -18vh;
border-radius: 50%;
opacity: 0;
background:
radial-gradient(circle at 30% 26%, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.2) 26%, rgba(255, 255, 255, 0) 42%),
radial-gradient(circle at 68% 74%, rgba(217, 112, 158, 0.16) 0%, rgba(217, 112, 158, 0) 55%),
radial-gradient(circle at 50% 50%, rgba(126, 160, 237, 0.16) 0%, rgba(126, 160, 237, 0.05) 62%, rgba(126, 160, 237, 0) 72%);
box-shadow: inset 0 0 18px rgba(126, 160, 237, 0.18);
border: 1px solid rgba(126, 160, 237, 0.16);
animation-name: yz-rise;
animation-timing-function: linear;
animation-iteration-count: infinite;
will-change: transform, opacity;
}
@keyframes yz-rise {
0% {
transform: translate3d(0, 0, 0) scale(0.82);
opacity: 0;
}
12% {
opacity: 0.85;
}
50% {
transform: translate3d(26px, -62vh, 0) scale(1.06);
}
88% {
opacity: 0.5;
}
100% {
transform: translate3d(-14px, -126vh, 0) scale(0.95);
opacity: 0;
}
}
.yz-bubble:nth-child(1) { left: 6%; width: 74px; height: 74px; animation-duration: 34s; animation-delay: -2s; }
.yz-bubble:nth-child(2) { left: 17%; width: 26px; height: 26px; animation-duration: 22s; animation-delay: -9s; }
.yz-bubble:nth-child(3) { left: 27%; width: 120px; height: 120px; animation-duration: 46s; animation-delay: -18s; }
.yz-bubble:nth-child(4) { left: 36%; width: 44px; height: 44px; animation-duration: 28s; animation-delay: -5s; }
.yz-bubble:nth-child(5) { left: 48%; width: 18px; height: 18px; animation-duration: 19s; animation-delay: -13s; }
.yz-bubble:nth-child(6) { left: 57%; width: 92px; height: 92px; animation-duration: 40s; animation-delay: -24s; }
.yz-bubble:nth-child(7) { left: 66%; width: 34px; height: 34px; animation-duration: 25s; animation-delay: -7s; }
.yz-bubble:nth-child(8) { left: 74%; width: 58px; height: 58px; animation-duration: 31s; animation-delay: -16s; }
.yz-bubble:nth-child(9) { left: 83%; width: 22px; height: 22px; animation-duration: 20s; animation-delay: -3s; }
.yz-bubble:nth-child(10){ left: 90%; width: 104px; height: 104px; animation-duration: 44s; animation-delay: -29s; }
.yz-bubble:nth-child(11){ left: 96%; width: 30px; height: 30px; animation-duration: 24s; animation-delay: -11s; }
.yz-bubble:nth-child(12){ left: 42%; width: 66px; height: 66px; animation-duration: 37s; animation-delay: -21s; }
/* ==========================================================================
* 光晕：给 hero 与大区块打底
* ========================================================================== */
.yz-halo {
position: absolute;
border-radius: 50%;
filter: blur(90px);
pointer-events: none;
}
.yz-halo-peri {
background: rgba(108, 91, 196, 0.16);
}
.yz-halo-sakura {
background: rgba(217, 112, 158, 0.14);
}
.yz-halo-sky {
background: rgba(126, 160, 237, 0.14);
}
/* ==========================================================================
* 按钮
* ========================================================================== */
.yz-btn {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.78rem 1.6rem;
border-radius: 999px;
font-size: 0.86rem;
font-weight: 600;
letter-spacing: 0.04em;
transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
border: 1px solid transparent;
}
.yz-btn-primary {
background: var(--peri);
color: #fff;
box-shadow: 0 10px 26px -12px rgba(108, 91, 196, 0.7);
}
.yz-btn-primary:hover {
background: var(--peri-deep);
box-shadow: 0 16px 34px -14px rgba(108, 91, 196, 0.8);
}
.yz-btn-ghost {
background: rgba(255, 255, 255, 0.7);
color: var(--sub);
border-color: var(--lilac);
}
.yz-btn-ghost:hover {
color: var(--peri);
border-color: rgba(108, 91, 196, 0.4);
background: #fff;
}
/* 敬请期待：不是坏掉的按钮，是还没到时候的按钮 */
.yz-btn-soon {
background: linear-gradient(120deg, var(--peri-soft) 0%, var(--sakura-soft) 100%);
color: var(--peri-deep);
border-color: rgba(108, 91, 196, 0.22);
cursor: pointer;
position: relative;
overflow: hidden;
}
.yz-btn-soon::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, 0.85) 50%, transparent 80%);
transform: translateX(-120%);
}
.yz-btn-soon:hover::after {
animation: yz-sheen 1.1s ease;
}
@keyframes yz-sheen {
to {
transform: translateX(120%);
}
}
/* ==========================================================================
* 其它零件
* ========================================================================== */
.yz-divider {
height: 1px;
background: linear-gradient(90deg, transparent, var(--lilac), transparent);
}
.yz-chip {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.3rem 0.8rem;
border-radius: 999px;
font-size: 0.74rem;
background: var(--peri-soft);
color: var(--peri-deep);
border: 1px solid rgba(108, 91, 196, 0.16);
}
.yz-chip-sakura {
background: var(--sakura-soft);
color: #B0537E;
border-color: rgba(217, 112, 158, 0.22);
}
.yz-chip-muted {
background: var(--lilac-soft);
color: var(--muted);
border-color: var(--lilac);
}
/* 状态点 */
.yz-dot {
width: 8px;
height: 8px;
border-radius: 50%;
display: inline-block;
}
.yz-dot-live {
background: #4FA97B;
box-shadow: 0 0 0 0 rgba(79, 169, 123, 0.55);
animation: yz-pulse 2.4s infinite;
}
.yz-dot-work {
background: var(--sakura);
}
.yz-dot-plan {
background: var(--faint);
}
@keyframes yz-pulse {
0% {
box-shadow: 0 0 0 0 rgba(79, 169, 123, 0.5);
}
70% {
box-shadow: 0 0 0 9px rgba(79, 169, 123, 0);
}
100% {
box-shadow: 0 0 0 0 rgba(79, 169, 123, 0);
}
}
/* 首字下沉 —— 长段落用 */
.yz-drop::first-letter {
float: left;
font-family: 'Noto Serif SC', serif;
font-size: 3.1rem;
line-height: 0.88;
padding: 0.1rem 0.55rem 0 0;
color: var(--peri);
}
/* 珠光颗粒：极淡的一层噪点，让珍珠白在屏幕上不像塑料 */
body.yz-themed::after {
content: '';
position: fixed;
inset: 0;
pointer-events: none;
z-index: 2147483000;
opacity: 0.028;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* 细滚动条 */
* {
scrollbar-width: thin;
scrollbar-color: rgba(142, 133, 160, 0.4) transparent;
}
::-webkit-scrollbar {
width: 9px;
height: 9px;
}
::-webkit-scrollbar-track {
background: transparent;
}
::-webkit-scrollbar-thumb {
background: rgba(142, 133, 160, 0.32);
border-radius: 999px;
border: 2px solid var(--pearl);
}
::-webkit-scrollbar-thumb:hover {
background: rgba(108, 91, 196, 0.5);
}
::selection {
background: rgba(108, 91, 196, 0.16);
color: var(--peri-deep);
}
/* 键盘可达性：焦点环用行动色，不要浏览器默认蓝 */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
outline: 2px solid var(--peri);
outline-offset: 3px;
border-radius: 6px;
}
/* ==========================================================================
* 性能档 —— yuzu-bootstrap.js 按设备/偏好打 data-perf
* ========================================================================== */
html[data-perf="low"] .yz-bubbles,
html[data-perf="reduced-motion"] .yz-bubbles {
display: none;
}
html[data-perf="low"] body.yz-themed::after,
html[data-perf="reduced-motion"] body.yz-themed::after {
display: none;
}
html[data-perf="low"] .glass-panel,
html[data-perf="reduced-motion"] .glass-panel {
backdrop-filter: none !important;
background: rgba(255, 255, 255, 0.95);
}
html[data-perf="low"] .yz-halo {
filter: blur(50px);
opacity: 0.6;
}
html[data-perf="reduced-motion"] .yz-halo {
display: none;
}
html[data-perf="reduced-motion"] *,
html[data-perf="reduced-motion"] *::before,
html[data-perf="reduced-motion"] *::after {
animation: none !important;
transition: none !important;
scroll-behavior: auto !important;
}
@media print {
.yz-bubbles,
.yz-halo {
display: none;
}
}
/* ==========================================================================
* 令牌工具类
* Tailwind 扫不到运行时拼接的类名，所以凡是用到设计令牌的颜色一律走这几个类，
* 不要写 text-[color:var(--ink)] 这种 —— 预构建的 CSS 里不会有。
* ========================================================================== */
.t-ink { color: var(--ink); }
.t-sub { color: var(--sub); }
.t-muted { color: var(--muted); }
.t-faint { color: var(--faint); }
.t-peri { color: var(--peri); }
.t-peri-deep { color: var(--peri-deep); }
.t-sakura { color: var(--sakura); }
.t-crimson { color: var(--crimson); }
.t-white { color: #fff; }
.bg-pearl { background-color: var(--pearl); }
.bg-pearl-soft { background-color: var(--pearl-soft); }
.bg-pearl-deep { background-color: var(--pearl-deep); }
.bg-peri { background-color: var(--peri); }
.bg-peri-soft { background-color: var(--peri-soft); }
.bg-sakura-soft { background-color: var(--sakura-soft); }
.bg-lilac-soft { background-color: var(--lilac-soft); }
.bd-lilac { border-color: var(--lilac); }
.bd-peri { border-color: rgba(108, 91, 196, 0.28); }
.bd-hair { border-color: rgba(43, 35, 53, 0.08); }