Elsa Theme Redo by Naomi

<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="UTF-8">
<title>{Title}</title>

<link rel="shortcut icon" href="{Favicon}">
<link rel="alternate" type="application/rss+xml" href="{RSS}">

<meta name="image:background" content="">
<meta name="image:sidebar" content="">

<link href="https://fonts.googleapis.com/css2?family=Caveat:wght@400;600&display=swap" rel="stylesheet">

<style>

/* =========================
   ❄️ BASE
========================= */

* { margin:0; padding:0; box-sizing:border-box; }

body {
background: url("{image:background}") center/cover fixed no-repeat;
overflow-x: hidden;

font-family: 'Caveat', cursive;
font-size: 18px; /* makes it feel like handwriting */
color: #6f6a9e;
}

/* =========================
   ❄️ SNOW
========================= */

.snow {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 1;
overflow: hidden;
}

.snow span {
position: absolute;
top: -10px;
border-radius: 50%;
background: radial-gradient(circle, #ffffff, #dfe9ff);
opacity: 0.8;
animation: snowFall linear infinite;
}

.snow span:nth-child(3n){ width:4px;height:4px;animation-duration:12s;opacity:.5;}
.snow span:nth-child(2n){ width:6px;height:6px;animation-duration:18s;opacity:.7;}
.snow span:nth-child(4n){ width:8px;height:8px;animation-duration:22s;opacity:.9;}

@keyframes snowFall {
0% { transform: translateY(-10vh) translateX(0); }
100% { transform: translateY(110vh) translateX(60px); }
}

/* =========================
   💜 LINKS (MAGIC)
========================= */

a, a:visited, a:active {
position: relative;
color:#8e7dff !important;
text-decoration:none;
}

a::before{
content:"";
position:absolute;
top:0;
left:-100%;
width:100%;
height:100%;
background:linear-gradient(120deg,transparent,rgba(255,255,255,0.5),transparent);
transition:0.6s;
}

a:hover::before{ left:100%; }

a::after{
content:"";
position:absolute;
left:0;
bottom:-2px;
width:0%;
height:2px;
background:linear-gradient(90deg,#c6b6ff,#e0d4ff,#b39dff);
transition:0.4s;
}

a:hover::after{ width:100%; }

a:hover{ color:#e0d4ff !important; }

/* =========================
   🧊 ICE LINKS PANEL
========================= */

#links a {
display:block;
margin:10px 0;
padding:10px;
text-align:center;

background:rgba(220,230,255,0.12);
border:1px solid rgba(200,220,255,0.25);

backdrop-filter: blur(10px);

overflow:hidden;
position:relative;
}

/* frost spread */
#links a::after{
content:"";
position:absolute;
top:0;
left:0;
width:0%;
height:100%;
background:linear-gradient(120deg,rgba(255,255,255,0.2),rgba(200,220,255,0.25));
transition:0.5s;
}

#links a:hover::after{ width:100%; }

#links a:hover{
transform:translateY(-2px) scale(1.02);
color:white !important;
}

/* =========================
   ✨ FLOAT + GLOW
========================= */

@keyframes float{
0%{transform:translateY(0);}
50%{transform:translateY(-4px);}
100%{transform:translateY(0);}
}

@keyframes glowPurple{
0%{box-shadow:0 0 15px rgba(180,160,255,0.2);}
50%{box-shadow:0 0 30px rgba(210,190,255,0.4);}
100%{box-shadow:0 0 15px rgba(180,160,255,0.2);}
}

/* =========================
   🧊 POSTS
========================= */

#container {
position:absolute;
top:80px;
left:490px;

width:min(400px,90vw);
max-width:500px;
height:700px;

padding:10px;

overflow-y:auto;

background:rgba(200,190,255,0.08);
border:1px solid rgba(210,200,255,0.35);

backdrop-filter:blur(16px);

animation:float 6s infinite, glowPurple 6s infinite;
}

/* =========================
   🧊 SIDEBAR
========================= */

#sidebar {
position:fixed;
top:75px;
left:1000px;

width:240px;
height:750px;

padding:10px;

background:rgba(200,190,255,0.08);
border:1px solid rgba(210,200,255,0.35);

backdrop-filter:blur(16px);

animation:float 7s infinite, glowPurple 7s infinite;
}

#sidebar img{
width:100%;
height:240px;
object-fit:cover;
margin-bottom:10px;
}

/* =========================
   ❄️ SCROLLBAR
========================= */

#container::-webkit-scrollbar{ width:8px; }

#container::-webkit-scrollbar-thumb{
background:linear-gradient(180deg,rgba(180,160,255,0.8),rgba(230,220,255,0.5));
border-radius:10px;
}

/* =========================
   🧊 ICE SHARD
========================= */

.ice-shard{
position:absolute;
width:10px;
height:40px;
background:linear-gradient(180deg,rgba(220,250,255,0.95),rgba(150,210,255,0.2));
animation:shardFly .9s forwards;
pointer-events:none;
z-index:99999;
}

@keyframes shardFly{
0%{opacity:1;transform:translate(0,0);}
100%{opacity:0;transform:translate(var(--dx),var(--dy));}
}

/* =========================
   🧊 ICE CRACK WAVE
========================= */

.crack{
position:absolute;
width:10px;
height:10px;
border-radius:50%;
background:radial-gradient(circle,rgba(255,255,255,0.9),rgba(180,220,255,0.2),transparent);
animation:crackPulse 0.6s ease-out forwards;
pointer-events:none;
z-index:99998;
}

@keyframes crackPulse{
0%{transform:scale(0);opacity:1;}
50%{transform:scale(6);opacity:0.6;}
100%{transform:scale(12);opacity:0;}
}

/* =========================
   ✨ SPARKLE
========================= */

.sparkle{
position:absolute;
width:4px;
height:4px;
background:white;
border-radius:50%;
pointer-events:none;
animation:fade .6s forwards;
}

@keyframes fade{
0%{opacity:1;}
100%{opacity:0;transform:scale(2);}
}

h1 {
font-family: 'Caveat', cursive;
font-size: 28px;
font-weight: 600;

background: linear-gradient(90deg,#c6b6ff,#b39dff,#e0d4ff);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
</style>
</head>

<body>


<!-- ❄️ SNOW -->
<div class="snow">
<span style="left:5%"></span><span style="left:10%"></span><span style="left:15%"></span>
<span style="left:20%"></span><span style="left:25%"></span><span style="left:30%"></span>
<span style="left:35%"></span><span style="left:40%"></span><span style="left:45%"></span>
<span style="left:50%"></span><span style="left:55%"></span><span style="left:60%"></span>
<span style="left:65%"></span><span style="left:70%"></span><span style="left:75%"></span>
<span style="left:80%"></span><span style="left:85%"></span><span style="left:90%"></span>
</div>

<div id="container">
{block:Posts}
<div id="post">

{block:Text}
<h1>{Title}</h1>
{Body}
{/block:Text}

{block:Photo}
<img src="{PhotoURL-highres}">
{/block:Photo}

<div id="info">
<a href="{Permalink}">posted</a> • {NoteCount} notes
</div>

</div>
{/block:Posts}
</div>

<div id="sidebar">
<img src="{image:sidebar}">
<div id="links">
<a href="/">refresh</a>
<a href="/ask">messages</a>
<a href="/rules">rules</a>
<a href="/about">archive</a>
</div>
</div>

<audio id="icesound" src="https://assets.mixkit.co/sfx/preview/mixkit-ice-glass-break-2207.mp3"></audio>

<script>

/* ❄️ ICE FRACTURE CLICK */
document.addEventListener("click", e => {

const sound = document.getElementById("icesound");
if(sound){ sound.currentTime=0; sound.play().catch(()=>{}); }

/* crack pulse */
const crack = document.createElement("div");
crack.className = "crack";
crack.style.left = e.pageX + "px";
crack.style.top = e.pageY + "px";
document.body.appendChild(crack);
setTimeout(()=>crack.remove(),600);

/* shards */
for(let i=0;i<18;i++){
const shard = document.createElement("div");
shard.className = "ice-shard";

const angle = (Math.PI*2)*(i/18);
const dist = 80 + Math.random()*160;

shard.style.left = e.pageX + "px";
shard.style.top = e.pageY + "px";

shard.style.setProperty("--dx", Math.cos(angle)*dist + "px");
shard.style.setProperty("--dy", Math.sin(angle)*dist + "px");

document.body.appendChild(shard);
setTimeout(()=>shard.remove(),900);
}
});

/* ✨ CURSOR SPARKLE */
document.addEventListener("mousemove", e=>{
const s=document.createElement("div");
s.className="sparkle";
s.style.left=e.pageX+"px";
s.style.top=e.pageY+"px";
document.body.appendChild(s);
setTimeout(()=>s.remove(),600);
});

</script>

</body>
</html>