39 lines
1.3 KiB
CSS
39 lines
1.3 KiB
CSS
html, body {
|
|
margin:0; padding:0; height:100%;
|
|
background:#0b1320; color:#fff;
|
|
font-family:system-ui, sans-serif;
|
|
overflow:hidden;
|
|
}
|
|
|
|
.snowfall { position: fixed; inset:0; pointer-events:none; z-index:1; }
|
|
.flake {
|
|
position:absolute; top:-10px; width:6px; height:6px;
|
|
background:rgba(255,255,255,0.9); border-radius:50%;
|
|
animation:fall linear infinite;
|
|
}
|
|
@keyframes fall { to { transform: translateY(110vh); } }
|
|
|
|
.snow-wrapper {
|
|
position:fixed; bottom:0; left:0; width:100%; height:0%;
|
|
transition:height 2s ease-out; z-index:2; overflow:hidden;
|
|
}
|
|
svg { position:absolute; top:-80px; width:100%; height:160px; }
|
|
.snow-body {
|
|
position:absolute; bottom:0; width:100%; height:100%;
|
|
background:
|
|
radial-gradient(circle at 20% 20%, #fff 0 2px, transparent 3px),
|
|
radial-gradient(circle at 60% 40%, #f2f8ff 0 2px, transparent 3px),
|
|
radial-gradient(circle at 80% 30%, #fff 0 2px, transparent 3px),
|
|
linear-gradient(#fff, #e6f2ff);
|
|
background-size:40px 40px,60px 60px,50px 50px,100% 100%;
|
|
}
|
|
|
|
.container {
|
|
position:relative; z-index:3; height:100%;
|
|
display:flex; flex-direction:column; justify-content:center;
|
|
align-items:center; gap:.75rem; pointer-events:none;
|
|
}
|
|
h1 { font-size:clamp(2.5rem,6vw,4rem); margin:0; }
|
|
.amount { font-size:clamp(1.5rem,4vw,2.5rem); opacity:0.9; }
|
|
.meta { opacity:0.6; font-size:0.9rem; }
|