1. 色票微調(放在 :root{...} 後面即可)
/* Day24 tokens tweak */
:root{
--y2k-blur: 10px; /* 玻璃模糊強度 */
--y2k-glow-strong: 0 0 24px rgba(167,139,250,.55), 0 0 46px rgba(0,229,255,.30);
--y2k-border-strong: rgba(255,255,255,.22);
}
2. 卡片/封面/內容玻璃層(覆蓋既有樣式)
/* ===== Day24: Card depth & glass ==================================== */
/* 卡片外框:更強的霓虹邊緣與景深 */
.card{
position:relative;
overflow:hidden;
border-radius:20px;
background: var(--y2k-card);
border:1px solid var(--y2k-border);
box-shadow: 0 8px 30px rgba(0,0,0,.35);
transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease, filter .25s ease;
opacity:0; transform: translateY(8px);
}
/* 霓虹邊框光暈(外層) */
.card::before{
content:"";
position:absolute; inset:-1px;
background: conic-gradient(from 180deg, var(--y2k-pink), var(--y2k-neon), var(--y2k-cyan), var(--y2k-pink));
filter: blur(16px);
opacity:.26;
z-index:0;
}
/* 內層玻璃邊框(用蒙版製造細邊效果) */
.card::after{
content:"";
position:absolute; inset:0;
background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03));
-webkit-mask:
linear-gradient(#000 0 0) content-box,
linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
padding:1px; /* 控制邊緣粗細 */
border-radius:20px;
opacity:.6;
z-index:1;
}
/* 卡片滑過的立體感與強霓虹 */
.card:hover{
transform: translateY(-6px) scale(1.012);
box-shadow: 0 18px 50px rgba(0,0,0,.45), var(--y2k-glow-strong);
border-color: var(--y2k-border-strong);
filter: saturate(1.04);
}
/* 封面:加入上層色帶與下層漸層,讓標題讀性更好 */
.cover{
position:relative; z-index:2; /* 蓋過 ::before/::after */
width:100%; aspect-ratio:16/9; object-fit:cover; background:#0b1020;
}
/* 封面上層漸層(上方冷色、下方暖色) */
.cover::after{
content:"";
position:absolute; inset:0;
background:
linear-gradient(180deg, rgba(0,0,0,.15), rgba(0,0,0,0) 35%, rgba(0,0,0,.25) 75%),
radial-gradient(80% 50% at 10% 0%, rgba(0,229,255,.18), transparent 60%),
radial-gradient(80% 50% at 90% 0%, rgba(255,106,213,.16), transparent 60%);
pointer-events:none;
}
/* 卡片內容區:玻璃+模糊+飽和度,與封面有層次差 */
.card-body{
position:relative; z-index:3;
padding:14px;
background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
border-top: 1px solid var(--y2k-border);
backdrop-filter: blur(var(--y2k-blur)) saturate(140%);
-webkit-backdrop-filter: blur(var(--y2k-blur)) saturate(140%);
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
}
/* 標題:加一點發光與字重,避免刺眼 */
.title{
margin:0 0 6px; font-weight:800; letter-spacing:.4px;
white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
text-shadow: 0 0 10px rgba(167,139,250,.25);
}
/* 副資訊:做半透明膠囊背景,Y2K 味道更明顯 */
.meta{
margin:0; color:#cbd5ff; opacity:.95;
display:inline-block;
padding:6px 10px;
border-radius:999px;
background: linear-gradient(135deg, rgba(167,139,250,.18), rgba(0,229,255,.12));
border: 1px solid rgba(255,255,255,.16);
box-shadow: 0 2px 10px rgba(0,0,0,.18);
}
/* 收藏按鈕:微光澤&提升按下的反饋 */
.fav{
margin-top:12px; width:100%;
padding:10px 0;
border-radius:999px;
border:1px solid rgba(255,255,255,.18);
background: radial-gradient(200px 40px at 20% -20%, rgba(255,255,255,.15), transparent 60%), rgba(255,255,255,.05);
color:#fff; cursor:pointer; letter-spacing:.3px;
position:relative; overflow:hidden;
transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease, background .12s ease;
}
.fav::before{
content:""; position:absolute; top:0; left:-40%; width:40%; height:100%;
transform:skewX(-25deg);
background:linear-gradient(90deg, transparent, rgba(255,255,255,.28), transparent);
animation:shine 2.8s infinite ease;
}
.fav:hover{ transform: translateY(-1px); box-shadow: var(--y2k-glow-strong); border-color: var(--y2k-border-strong); }
.fav.is-active{
border-color: rgba(167,139,250,.75);
background: linear-gradient(90deg, rgba(167,139,250,.25), rgba(0,229,255,.22));
box-shadow: 0 0 20px rgba(167,139,250,.5), 0 0 40px rgba(0,229,255,.25);
}
@keyframes shine{
0%{ left:-40%; } 60%{ left:120%; } 100%{ left:120%; }
}
驗收重點
- 滑過卡片會更「立體」:上浮+霓虹陰影加強,但不刺眼。
- 封面頂部有冷色、底部有暗化處理,標題與副資訊更清楚。
- 內容區有玻璃質感(模糊+飽和),與封面層次分明。
- 收藏按鈕有光帶掃過與按下高亮狀態。