Premium interactive homepage: animated borders, beacons block, nature image

.kimi-premium-homepage-task.md

@@ -0,0 +1,37 @@
+# Premium Interactive Homepage — Kimi Task
+
+## Read first
+- `/home/a/w/up/docs/zensical-theme-plan.md`
+
+## Hard constraints
+- Do NOT edit `zensical.toml`
+- Do NOT replace full templates in `overrides/` — prior full-page overrides broke the build
+- Keep toolbar/code-block icons legible
+- Keep reduced-motion safe
+- Keep JS small and contributor-safe
+
+## Goal
+Add a more premium interactive feel to the homepage.
+Tone: futuristic + nature-themed, calm consciousness/awakening vibe.
+
+## Required additions
+1. Animated borders and shadows:
+   - Gentle iridescent/pastel animated borders on hero and contribution card
+   - Soft moving shadow/glow effects, not harsh glows
+   - Use CSS keyframes, respect `prefers-reduced-motion: reduce`
+2. More homepage elements:
+   - Add 2–3 small content blocks with nice styling, simple class names, easy for contributors to edit
+   - Keep markdown-friendly
+3. Images/media:
+   - Add optimized image placeholders or nature-themed image blocks
+   - If video is included, make it lazy-load and optional (no autoplay, no heavy bundle)
+4. Overrides:
+   - If you need template changes, use SMALL additive partials only
+   - Do NOT add a full `main.html` or `footer.html` override
+5. CTA refinement:
+   - Make the contribution section feel more inviting with subtle hover micro-animations
+
+## Deliverable
+- Exact files changed
+- Short diff summary
+- Review/preview instructions

docs/assets/images/nature-soft.svg

@@ -0,0 +1,46 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 600" preserveAspectRatio="xMidYMid slice">
+  <defs>
+    <linearGradient id="bg" x1="0" y1="0" x2="1" y2="1">
+      <stop offset="0%" stop-color="#e6f2ea"/>
+      <stop offset="50%" stop-color="#f1f0f5"/>
+      <stop offset="100%" stop-color="#f4efe9"/>
+    </linearGradient>
+    <linearGradient id="leaf1" x1="0" y1="0" x2="1" y2="1">
+      <stop offset="0%" stop-color="#aec6b5"/>
+      <stop offset="100%" stop-color="#d1d8db"/>
+    </linearGradient>
+    <linearGradient id="leaf2" x1="0" y1="0" x2="1" y2="1">
+      <stop offset="0%" stop-color="#cdf0d8"/>
+      <stop offset="100%" stop-color="#e5e3f0"/>
+    </linearGradient>
+    <radialGradient id="glow" cx="50%" cy="45%" r="40%">
+      <stop offset="0%" stop-color="rgba(220,230,210,0.65)"/>
+      <stop offset="100%" stop-color="rgba(255,255,255,0)"/>
+    </radialGradient>
+    <filter id="soft" x="-20%" y="-20%" width="140%" height="140%">
+      <feGaussianBlur stdDeviation="4"/>
+      <feComponentTransfer>
+        <feFuncA type="linear" slope="0.55"/>
+      </feComponentTransfer>
+    </filter>
+  </defs>
+  <rect width="1200" height="600" fill="url(#bg)"/>
+  <rect width="1200" height="600" fill="url(#glow)"/>
+  <g opacity="0.7">
+    <ellipse cx="320" cy="210" rx="110" ry="36" fill="url(#leaf1)" transform="rotate(-26, 320, 210)"/>
+    <ellipse cx="370" cy="225" rx="100" ry="30" fill="url(#leaf2)" transform="rotate(-8, 370, 225)"/>
+    <ellipse cx="390" cy="240" rx="90" ry="28" fill="url(#leaf1)" transform="rotate(14, 390, 240)"/>
+    <ellipse cx="350" cy="250" rx="103" ry="31" fill="url(#leaf2)" transform="rotate(35, 350, 250)"/>
+    <ellipse cx="320" cy="270" rx="94" ry="28" fill="url(#leaf1)" transform="rotate(60, 320, 270)"/>
+  </g>
+  <g opacity="0.85">
+    <ellipse cx="780" cy="300" rx="90" ry="26" fill="url(#leaf2)" transform="rotate(-18, 780, 300)"/>
+    <ellipse cx="820" cy="310" rx="82" ry="24" fill="url(#leaf1)" transform="rotate(2, 820, 310)"/>
+    <ellipse cx="830" cy="325" rx="68" ry="22" fill="url(#leaf2)" transform="rotate(22, 830, 325)"/>
+    <ellipse cx="810" cy="335" rx="78" ry="22" fill="url(#leaf1)" transform="rotate(40, 810, 335)"/>
+  </g>
+  <g filter="url(#soft)" opacity="0.25">
+    <circle cx="180" cy="540" r="120" fill="#d9f0dd"/>
+    <circle cx="1120" cy="520" r="150" fill="#ece1f5"/>
+  </g>
+</svg>

docs/stylesheets/extra.css

@@ -403,6 +403,11 @@ article h1, article h2, article h3 {
   border-radius: 4px;
 }
 
+.beacon-icons a .md-icon,
+.beacon-icons button .md-icon {
+  color: inherit;
+}
+
 /* Homepage refined */
 
 .wp-divider {