Four weather cards — CSS only, built by Spark X2.6 4B

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Weather Cards</title>
<style>
:root {
  --radius: 18px;
  --gap: 16px;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --label-size: 10px;
  --label-weight: 700;
  --label-tracking: 0.2em;
  --temp-size: 32px;
  --temp-weight: 600;
  --cond-size: 12px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font);
  background: radial-gradient(circle at 30% 20%, #1c2740 0%, #0f1726 50%, #0a0f1a 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 16px;
}

.stage {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gap);
  align-items: stretch;
  height: 500px;
}

@media (max-width: 560px) {
  .stage { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 340px) {
  .stage { grid-template-columns: 1fr; }
}

.card {
  position: relative;
  z-index: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,0.55);
  box-shadow: 0 14px 36px rgba(0,0,0,0.18);
  min-width: 0;
}

.card.sun { border-color: rgba(255,255,255,0.65); box-shadow: 0 14px 36px rgba(0,0,0,0.12); }
.card.rain { border-color: rgba(255,255,255,0.5); box-shadow: 0 14px 36px rgba(0,0,0,0.16); }
.card.snow { border-color: rgba(255,255,255,0.45); box-shadow: 0 14px 36px rgba(0,0,0,0.12); }
.card.storm { border-color: rgba(60,70,90,0.5); box-shadow: 0 14px 36px rgba(0,0,0,0.4); }

.card-sky {
  position: relative;
  flex: 1 1 auto;
  overflow: hidden;
}

.card-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 10px 14px;
  background: var(--info-bg, rgba(255,255,255,0.14));
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 0 0 var(--radius) var(--radius);
}

.card-label {
  margin: 0;
  font-family: var(--font);
  font-size: var(--label-size);
  font-weight: var(--label-weight);
  letter-spacing: var(--label-tracking);
  text-transform: uppercase;
  color: rgba(255,255,255,0.94);
}

.card-temp {
  margin: 0;
  font-family: var(--font);
  font-size: var(--temp-size);
  font-weight: var(--temp-weight);
  letter-spacing: 0.02em;
  color: rgba(255,255,255,0.96);
}

.card-condition {
  margin: 0;
  font-size: var(--cond-size);
  font-weight: 400;
  letter-spacing: 0.04em;
  color: rgba(255,255,255,0.72);
}

/* ---------- Sun ---------- */
.sun-sky {
  background: linear-gradient(165deg, #bcd8f5 0%, #dcefff 55%, #f5faff 100%);
}

.sun-glow {
  position: absolute;
  left: 50%; top: 50%;
  width: 340px; height: 340px;
  margin-left: -170px; margin-top: -170px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,180,60,0.5) 0%, rgba(255,170,50,0.22) 45%, transparent 72%);
  animation: sunGlow 5s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}

@keyframes sunGlow {
  0%, 100% { opacity: 0.5; transform: scale(0.9); }
  50%      { opacity: 1; transform: scale(1.15); }
}

.sun-rays {
  position: absolute;
  left: 50%; top: 50%;
  width: 250px; height: 250px;
  margin-left: -125px; margin-top: -125px;
  border-radius: 50%;
  background: repeating-conic-gradient(from 0deg,
    rgba(255,235,170,0.55) 0 9deg, transparent 9deg 18deg,
    rgba(255,235,170,0.35) 18deg 27deg, transparent 27deg 36deg,
    rgba(255,235,170,0.55) 36deg 45deg, transparent 45deg 54deg,
    rgba(255,235,170,0.35) 54deg 63deg, transparent 63deg 72deg);
  animation: spin 70s linear infinite;
  pointer-events: none;
  z-index: 0;
}

@keyframes spin { to { transform: rotate(360deg); } }

.sun-disc {
  position: absolute;
  left: 50%; top: 50%;
  width: 150px; height: 150px;
  margin-left: -75px; margin-top: -75px;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 35%, #ffffff 0%, #fff4d8 25%, #ffd98a 55%, #ffb04a 80%, #f5802a 100%);
  box-shadow: 0 0 40px 10px rgba(255,170,50,0.55), 0 0 120px 30px rgba(255,140,40,0.28);
  animation: sunPulse 4.5s ease-in-out infinite;
  pointer-events: none;
  z-index: 1;
}

@keyframes sunPulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.05); }
}

.sun-disc::before {
  content: "";
  position: absolute;
  left: 30%; top: 25%;
  width: 35%; height: 25%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.4) 40%, transparent 70%);
  pointer-events: none;
  z-index: 1;
}

.sun-cloud {
  position: absolute;
  top: 38%;
  left: -40%;
  width: 150px;
  height: 50px;
  border-radius: 50%;
  background: rgba(200,214,230,0.92);
  filter: blur(2px);
  animation: cloudDrift 12s ease-in-out infinite;
  pointer-events: none;
  z-index: 2;
}

.sun-cloud::before {
  content: "";
  position: absolute;
  inset: -12%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 25% 40%, rgba(255,255,255,0.9) 0 40%, transparent 47%),
    radial-gradient(circle at 75% 40%, rgba(255,255,255,0.8) 0 35%, transparent 42%),
    radial-gradient(circle at 50% 75%, rgba(195,210,228,0.6) 0 30%, transparent 37%);
}

.sun-overlay {
  position: absolute;
  left: 50%; top: 50%;
  width: 320px; height: 320px;
  margin-left: -160px; margin-top: -160px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(4,12,30,0.95) 0%, rgba(4,12,30,0.8) 45%, rgba(4,12,30,0.3) 75%, transparent 100%);
  opacity: 0;
  animation: cloudDim 12s ease-in-out infinite;
  pointer-events: none;
  z-index: 4;
}

@keyframes cloudDrift {
  0%   { left: -40%; }
  50%  { left: 40%; }
  100% { left: 120%; }
}

@keyframes cloudDim {
  0%   { opacity: 0; }
  40%  { opacity: 0; }
  44%  { opacity: 0.4; }
  48%  { opacity: 0.85; }
  54%  { opacity: 0.6; }
  60%  { opacity: 0; }
  100% { opacity: 0; }
}

/* ---------- Rain ---------- */
.rain-sky {
  background: linear-gradient(165deg, #aeb9c6 0%, #cdd6e0 55%, #e6ebee 100%);
}

.rain-cloud {
  position: absolute;
  top: 30%;
  left: -40%;
  width: 200px;
  height: 64px;
  border-radius: 50%;
  background: rgba(150,160,175,0.9);
  filter: blur(2px);
  animation: cloudDrift 18s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}

.rain-cloud::before {
  content: "";
  position: absolute;
  inset: -12%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 25% 40%, rgba(215,224,236,0.9) 0 40%, transparent 47%),
    radial-gradient(circle at 75% 40%, rgba(205,214,228,0.8) 0 35%, transparent 42%),
    radial-gradient(circle at 50% 75%, rgba(150,160,175,0.6) 0 30%, transparent 37%);
}

.puddle-line {
  position: absolute;
  left: 0;
  bottom: 4px;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, rgba(120,140,165,0.35) 0%, rgba(120,140,165,0.6) 50%, rgba(120,140,165,0.35) 100%);
  border-radius: 2px;
  pointer-events: none;
  z-index: 1;
}

.drop-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  animation: rainSlide 1.6s linear infinite;
  pointer-events: none;
  z-index: 2;
}

@keyframes rainSlide {
  0%   { transform: translateY(0); opacity: 0; }
  8%   { opacity: 1; }
  92%  { opacity: 1; }
  100% { transform: translateY(100%); opacity: 0; }
}

.raindrop {
  position: absolute;
  top: 0;
  left: 0;
  width: 8px;
  height: 11px;
  background: linear-gradient(to bottom, rgba(220,230,240,0.95), rgba(140,160,185,0.55));
  border-radius: 50% 50% 50% 50% / 80% 80% 20% 20%;
  pointer-events: none;
  z-index: 3;
}

.splash {
  position: absolute;
  top: 100%;
  left: 50%;
  width: 14px;
  height: 6px;
  transform: translateX(-50%);
  background: rgba(190,205,225,0.85);
  border-radius: 50%;
  opacity: 0;
  animation: splash 0.45s ease-out forwards;
  pointer-events: none;
  z-index: 4;
}

@keyframes splash {
  0%   { transform: translate(-50%, 0) scale(0.15); opacity: 0; }
  25%  { opacity: 1; transform: translate(-50%, 0) scale(1.2); }
  100% { opacity: 0; transform: translate(-50%, 1px) scale(0.5); }
}

/* ---------- Snow ---------- */
.snow-sky {
  background: linear-gradient(165deg, #d6e6f8 0%, #eef4fd 55%, #ffffff 100%);
}

.snow-pile {
  position: absolute;
  left: 50%;
  bottom: 12%;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
  pointer-events: none;
  z-index: 1;
}

.snow-dot {
  width: 5px;
  height: 5px;
  background: #ffffff;
  border-radius: 50%;
  animation: snowSettle 2.5s ease-out forwards;
}

@keyframes snowSettle {
  0%   { transform: translateX(0) scale(0.2); opacity: 0; }
  30%  { opacity: 1; transform: translateX(0) scale(1.1); }
  100% { opacity: 1; transform: translateX(0) scale(1); }
}

.snow-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  animation: snowSlide 7s linear infinite;
  pointer-events: none;
  z-index: 1;
}

@keyframes snowSlide {
  0%   { transform: translateY(0) translateX(-12px); opacity: 0; }
  10%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { transform: translateY(100%) translateX(-10px); opacity: 0; }
}

.snowflake {
  position: absolute;
  top: 0;
  left: 0;
  width: 12px;
  height: 12px;
  background: radial-gradient(circle at 35% 30%, #ffffff 0%, #dbe7f5 55%, #a9c2e0 100%);
  border-radius: 50% 50% 50% 50% / 35% 35% 65% 65%;
  box-shadow: 0 0 6px rgba(255,255,255,0.7);
  pointer-events: none;
  z-index: 2;
}

.flake-1 { width: 8px; height: 8px; }
.flake-2 { width: 10px; height: 10px; }
.flake-3 { width: 12px; height: 12px; }
.flake-4 { width: 14px; height: 14px; }
.flake-5 { width: 16px; height: 16px; }
.flake-6 { width: 18px; height: 18px; }

/* ---------- Storm ---------- */
.storm-sky {
  background: linear-gradient(165deg, #2c313c 0%, #232832 50%, #1a1e26 100%);
}

.storm-cloud {
  position: absolute;
  left: -40%;
  width: 240px;
  height: 80px;
  border-radius: 50%;
  background: rgba(45,50,60,0.95);
  filter: blur(4px);
  pointer-events: none;
  z-index: 0;
}

.storm-cloud::before {
  content: "";
  position: absolute;
  inset: -14%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 25% 40%, rgba(120,128,150,0.4) 0 45%, transparent 52%),
    radial-gradient(circle at 75% 40%, rgba(110,118,140,0.35) 0 40%, transparent 47%),
    radial-gradient(circle at 50% 80%, rgba(70,76,95,0.45) 0 35%, transparent 42%);
}

.storm-cloud.top { top: 18%; animation: cloudDrift 16s ease-in-out infinite; }
.storm-cloud.bottom { bottom: 20%; animation: cloudDrift 22s ease-in-out infinite; }

.storm-drop {
  position: absolute;
  top: 0;
  left: 0;
  width: 8px;
  height: 11px;
  background: linear-gradient(to bottom, rgba(220,235,245,0.95), rgba(160,180,205,0.6));
  border-radius: 50% 50% 50% 50% / 80% 80% 20% 20%;
  pointer-events: none;
  z-index: 2;
}

.storm-splash {
  background: rgba(220,235,245,0.9);
}

.lightning-bolt {
  position: absolute;
  left: 50%;
  top: 42%;
  width: 80px;
  height: 120px;
  transform: translateX(-50%);
  z-index: 2;
  clip-path: polygon(50% 2%, 75% 12%, 98% 30%, 78% 50%, 55% 58%, 32% 66%, 12% 52%, 30% 30%);
  background: rgba(255,255,255,0.06);
  box-shadow: 0 0 10px 3px rgba(120,180,255,0.25);
  opacity: 0;
  animation: lightningFlash 24s ease-out infinite;
  pointer-events: none;
}

.flash-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: #ffffff;
  opacity: 0;
  animation: lightningFlash 24s ease-out infinite;
  pointer-events: none;
}

@keyframes lightningFlash {
  0%   { opacity: 0; background-color: rgba(255,255,255,0.06); }
  7%   { opacity: 0; background-color: rgba(255,255,255,0.06); }
  11%  { opacity: 0.95; background-color: rgba(230,245,255,0.95); box-shadow: 0 0 30px 10px rgba(255,255,255,0.8), 0 0 70px 24px rgba(110,170,255,0.45); }
  14%  { opacity: 0; background-color: rgba(255,255,255,0.06); }
  35%  { opacity: 0; background-color: rgba(255,255,255,0.06); }
  43%  { opacity: 0.95; background-color: rgba(195,240,255,0.9); box-shadow: 0 0 34px 12px rgba(255,255,255,0.85), 0 0 80px 28px rgba(100,160,255,0.5); }
  46%  { opacity: 0; background-color: rgba(255,255,255,0.06); }
  68%  { opacity: 0; background-color: rgba(255,255,255,0.06); }
  71%  { opacity: 0.85; background-color: rgba(185,235,255,0.85); box-shadow: 0 0 28px 9px rgba(255,255,255,0.8), 0 0 65px 22px rgba(110,170,255,0.45); }
  74%  { opacity: 0; background-color: rgba(255,255,255,0.06); }
  85%  { opacity: 0; background-color: rgba(255,255,255,0.06); }
  89%  { opacity: 0.75; background-color: rgba(175,230,255,0.8); box-shadow: 0 0 24px 8px rgba(255,255,255,0.8), 0 0 55px 20px rgba(110,170,255,0.45); }
  92%  { opacity: 0; background-color: rgba(255,255,255,0.06); }
  100% { opacity: 0; background-color: rgba(255,255,255,0.06); }
}
</style>
</head>
<body>
<div class="stage">
  <!-- Sun -->
  <article class="card sun" style="--info-bg: rgba(255,255,255,0.16);">
    <div class="card-sky sun-sky">
      <div class="sun-glow" aria-hidden="true"></div>
      <div class="sun-rays" aria-hidden="true"></div>
      <div class="sun-disc"></div>
      <div class="sun-cloud" aria-hidden="true"></div>
      <div class="sun-overlay" aria-hidden="true"></div>
    </div>
    <div class="card-info">
      <div class="card-label">SUN</div>
      <div class="card-temp">28°</div>
      <div class="card-condition">Sunny</div>
    </div>
  </article>

  <!-- Rain -->
  <article class="card rain" style="--info-bg: rgba(255,255,255,0.12);">
    <div class="card-sky rain-sky">
      <div class="rain-cloud" aria-hidden="true"></div>
      <div class="puddle-line" aria-hidden="true"></div>
      <div class="drop-slide" style="animation-duration: 1.5s; animation-delay: 0s;">
        <div class="raindrop" style="left: 10%; top: 2%;"></div>
        <div class="splash" style="animation-delay: 1.5s;"></div>
      </div>
      <div class="drop-slide" style="animation-duration: 1.8s; animation-delay: 0.3s;">
        <div class="raindrop" style="left: 22%; top: 6%;"></div>
        <div class="splash" style="animation-delay: 1.8s;"></div>
      </div>
      <div class="drop-slide" style="animation-duration: 1.6s; animation-delay: 0.6s;">
        <div class="raindrop" style="left: 34%; top: 10%;"></div>
        <div class="splash" style="animation-delay: 1.6s;"></div>
      </div>
      <div class="drop-slide" style="animation-duration: 1.7s; animation-delay: 0.9s;">
        <div class="raindrop" style="left: 46%; top: 14%;"></div>
        <div class="splash" style="animation-delay: 1.7s;"></div>
      </div>
      <div class="drop-slide" style="animation-duration: 1.4s; animation-delay: 0.2s;">
        <div class="raindrop" style="left: 58%; top: 6%;"></div>
        <div class="splash" style="animation-delay: 1.4s;"></div>
      </div>
      <div class="drop-slide" style="animation-duration: 1.9s; animation-delay: 0.5s;">
        <div class="raindrop" style="left: 70%; top: 12%;"></div>
        <div class="splash" style="animation-delay: 1.9s;"></div>
      </div>
    </div>
    <div class="card-info">
      <div class="card-label">RAIN</div>
      <div class="card-temp">14°</div>
      <div class="card-condition">Showers</div>
    </div>
  </article>

  <!-- Snow -->
  <article class="card snow" style="--info-bg: rgba(255,255,255,0.1);">
    <div class="card-sky snow-sky">
      <div class="snow-pile" aria-hidden="true">
        <div class="snow-dot" style="animation-delay: 0s;"></div>
        <div class="snow-dot" style="animation-delay: 0.3s;"></div>
        <div class="snow-dot" style="animation-delay: 0.6s;"></div>
      </div>
      <div class="snow-slide" style="animation-duration: 6.5s; animation-delay: 0.15s;">
        <div class="snowflake flake-1" style="top: 6%;"></div>
      </div>
      <div class="snow-slide" style="animation-duration: 7s; animation-delay: 0.4s;">
        <div class="snowflake flake-2" style="top: 14%;"></div>
      </div>
      <div class="snow-slide" style="animation-duration: 6.8s; animation-delay: 0.65s;">
        <div class="snowflake flake-3" style="top: 22%;"></div>
      </div>
      <div class="snow-slide" style="animation-duration: 7.2s; animation-delay: 0.9s;">
        <div class="snowflake flake-4" style="top: 30%;"></div>
      </div>
      <div class="snow-slide" style="animation-duration: 6.6s; animation-delay: 1.15s;">
        <div class="snowflake flake-5" style="top: 38%;"></div>
      </div>
      <div class="snow-slide" style="animation-duration: 7.4s; animation-delay: 0.3s;">
        <div class="snowflake flake-6" style="top: 46%;"></div>
      </div>
    </div>
    <div class="card-info">
      <div class="card-label">SNOW</div>
      <div class="card-temp">0°</div>
      <div class="card-condition">Snowy</div>
    </div>
  </article>

  <!-- Storm -->
  <article class="card storm" style="--info-bg: rgba(0,0,0,0.28);">
    <div class="card-sky storm-sky">
      <div class="storm-cloud top" aria-hidden="true"></div>
      <div class="storm-cloud bottom" aria-hidden="true"></div>
      <div class="drop-slide" style="animation-duration: 0.9s; animation-delay: 0.1s;">
        <div class="storm-drop" style="left: 8%;"></div>
        <div class="splash storm-splash" style="animation-delay: 0.9s;"></div>
      </div>
      <div class="drop-slide" style="animation-duration: 0.95s; animation-delay: 0.35s;">
        <div class="storm-drop" style="left: 24%;"></div>
        <div class="splash storm-splash" style="animation-delay: 0.95s;"></div>
      </div>
      <div class="drop-slide" style="animation-duration: 0.85s; animation-delay: 0.6s;">
        <div class="storm-drop" style="left: 36%;"></div>
        <div class="splash storm-splash" style="animation-delay: 0.85s;"></div>
      </div>
      <div class="drop-slide" style="animation-duration: 0.9s; animation-delay: 0.85s;">
        <div class="storm-drop" style="left: 48%;"></div>
        <div class="splash storm-splash" style="animation-delay: 0.9s;"></div>
      </div>
      <div class="drop-slide" style="animation-duration: 0.88s; animation-delay: 0.25s;">
        <div class="storm-drop" style="left: 60%;"></div>
        <div class="splash storm-splash" style="animation-delay: 0.88s;"></div>
      </div>
      <div class="lightning-bolt" aria-hidden="true"></div>
    </div>
    <div class="flash-overlay" aria-hidden="true"></div>
    <div class="card-info">
      <div class="card-label">STORM</div>
      <div class="card-temp">11°</div>
      <div class="card-condition">Thunderstorm</div>
    </div>
  </article>
</div>
</body>
</html>