Spaces:
Running
Running
| /* 待机显示 · 涅槃屏保 b2（对齐参考：Google 新标签页风格）—— | |
| 明亮浅蓝渐变底 + 斜向柔光带流动 + 中央磨砂玻璃卡四色星 + 极简时钟。 | |
| 纯 CSS（三层大渐变缓动，GPU 合成、零 WebGL），颜色锚 Google 四色系。 */ | |
| .saver-root { | |
| position: fixed; | |
| inset: 0; | |
| overflow: hidden; | |
| /* 明亮浅蓝基底（参考图主调）：上浅白 → 下饱和蓝 */ | |
| background: linear-gradient(180deg, #eaf3fc 0%, #cfe6fb 38%, #9fcbf5 78%, #7fb5ee 100%); | |
| cursor: none; | |
| } | |
| /* ── 三层柔光带：斜向大渐变，缓慢漂移（生命力的来源）──────────── */ | |
| .saver-glow { | |
| position: absolute; | |
| inset: -30%; | |
| pointer-events: none; | |
| } | |
| /* 光带 A：左上斜白光（参考图里的斜向光束） */ | |
| .saver-glow-a { | |
| background: linear-gradient( | |
| 118deg, | |
| transparent 12%, | |
| rgba(255, 255, 255, 0.75) 26%, | |
| rgba(255, 255, 255, 0.15) 34%, | |
| transparent 46% | |
| ); | |
| animation: saver-drift-a 26s ease-in-out infinite alternate; | |
| } | |
| /* 光带 B：右侧青蓝柔光团 */ | |
| .saver-glow-b { | |
| background: radial-gradient( | |
| 55% 70% at 78% 30%, | |
| rgba(120, 200, 255, 0.55), | |
| transparent 70% | |
| ); | |
| animation: saver-drift-b 34s ease-in-out infinite alternate; | |
| } | |
| /* 光带 C：底部深蓝晕（压出层次与纵深） */ | |
| .saver-glow-c { | |
| background: radial-gradient( | |
| 80% 60% at 30% 110%, | |
| rgba(35, 90, 200, 0.4), | |
| transparent 65% | |
| ); | |
| animation: saver-drift-c 42s ease-in-out infinite alternate; | |
| } | |
| @keyframes saver-drift-a { | |
| from { transform: translateX(-8%) rotate(-2deg); } | |
| to { transform: translateX(10%) rotate(3deg); } | |
| } | |
| @keyframes saver-drift-b { | |
| from { transform: translate(0, 0) scale(1); } | |
| to { transform: translate(-6%, 8%) scale(1.15); } | |
| } | |
| @keyframes saver-drift-c { | |
| from { transform: translate(0, 0); } | |
| to { transform: translate(8%, -4%) scale(1.1); } | |
| } | |
| /* ── 中央磨砂玻璃卡 + 四色星（参考图主体）──────────────────────── */ | |
| .saver-card { | |
| position: absolute; | |
| left: 50%; | |
| top: 50%; | |
| transform: translate(-50%, -52%); | |
| width: min(34vmin, 300px); | |
| aspect-ratio: 1; | |
| border-radius: 15%; /* 参考图的大圆角方卡 */ | |
| background: linear-gradient(155deg, rgba(255, 255, 255, 0.92), rgba(240, 248, 255, 0.78)); | |
| backdrop-filter: blur(18px) saturate(1.15); | |
| -webkit-backdrop-filter: blur(18px) saturate(1.15); | |
| box-shadow: | |
| 0 24px 70px rgba(30, 80, 160, 0.28), | |
| 0 4px 18px rgba(30, 80, 160, 0.14), | |
| inset 0 1px 0 rgba(255, 255, 255, 0.9); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| /* 卡整体极缓呼吸（5% 缩放，22 秒一拍——「活着」但不抢戏） */ | |
| animation: saver-card-breathe 22s ease-in-out infinite; | |
| } | |
| @keyframes saver-card-breathe { | |
| 0%, 100% { transform: translate(-50%, -52%) scale(1); } | |
| 50% { transform: translate(-50%, -52%) scale(1.045); } | |
| } | |
| /* 四色四角星：conic 渐变 + clip-path（与品牌标同形状语言）， | |
| 极慢自转（60 秒一圈——看得见在转，不引人焦躁） */ | |
| .saver-star { | |
| width: 52%; | |
| aspect-ratio: 1; | |
| background: conic-gradient( | |
| from 200deg, | |
| #4285f4, | |
| #9b72cb, | |
| #ea4335, | |
| #fbbc04, | |
| #34a853, | |
| #4285f4 | |
| ); | |
| clip-path: polygon( | |
| 50% 0%, 61% 39%, 100% 50%, 61% 61%, | |
| 50% 100%, 39% 61%, 0% 50%, 39% 39% | |
| ); | |
| filter: blur(0.3px) saturate(1.08); | |
| animation: saver-star-spin 60s linear infinite; | |
| } | |
| @keyframes saver-star-spin { | |
| from { transform: rotate(0deg); } | |
| to { transform: rotate(360deg); } | |
| } | |
| /* ── 时钟：卡下极简一行，浅色系深灰细字 ────────────────────────── */ | |
| .saver-clock { | |
| position: absolute; | |
| left: 50%; | |
| bottom: 12%; | |
| transform: translateX(-50%); | |
| display: flex; | |
| align-items: baseline; | |
| gap: 14px; | |
| color: rgba(20, 50, 95, 0.72); | |
| font-family: "Source Serif 4", "Songti SC", Georgia, serif; | |
| text-shadow: 0 1px 12px rgba(255, 255, 255, 0.6); | |
| user-select: none; | |
| pointer-events: none; | |
| } | |
| .saver-time { | |
| font-size: clamp(34px, 5.6vw, 64px); | |
| font-weight: 600; | |
| letter-spacing: 0.03em; | |
| line-height: 1; | |
| font-variant-numeric: tabular-nums; | |
| } | |
| .saver-date { | |
| font-size: clamp(15px, 2vw, 22px); | |
| font-weight: 400; | |
| letter-spacing: 0.18em; | |
| opacity: 0.85; | |
| } | |
| /* ── 形态一：苹果航拍视频层（全屏 object-fit cover）────────────── */ | |
| .saver-video { | |
| position: absolute; | |
| inset: 0; | |
| width: 100%; | |
| height: 100%; | |
| object-fit: cover; | |
| display: block; | |
| } | |
| /* 航拍态时钟：浅白字（视频上） */ | |
| .saver-clock.on-video { | |
| color: rgba(255, 255, 255, 0.9); | |
| text-shadow: 0 1px 18px rgba(0, 0, 0, 0.45); | |
| } | |
| /* ── 回来提示（首次进入 5 秒淡出）──────────────────────────────── */ | |
| .saver-hint { | |
| position: absolute; | |
| bottom: 34px; | |
| right: 40px; | |
| margin: 0; | |
| color: rgba(20, 50, 95, 0.45); | |
| font-size: 12.5px; | |
| letter-spacing: 0.2em; | |
| pointer-events: none; | |
| user-select: none; | |
| animation: saver-hint-fade 5s ease forwards; | |
| } | |
| @keyframes saver-hint-fade { | |
| 0%, 60% { opacity: 1; } | |
| 100% { opacity: 0; } | |
| } | |
| /* 减弱动效：全部光层静止（星也停转），只留静帧构图 */ | |
| @media (prefers-reduced-motion: reduce) { | |
| .saver-glow-a, | |
| .saver-glow-b, | |
| .saver-glow-c, | |
| .saver-star, | |
| .saver-card { | |
| animation: none; | |
| } | |
| } | |