Homepage beauty upgrade: refined hero, divider, contribution card, reveal classes

.kimi-homepage-beauty-task.md

@@ -0,0 +1,36 @@
+# Homepage Beauty Upgrade — Kimi Task
+
+## MANDATORY INPUT
+Read first: `/home/a/w/up/docs/zensical-theme-plan.md`
+
+## Verified constraints (do not violate)
+- `zensical.toml` is correct and must not be modified.
+- Source homepage is `docs/index.md`.
+- Theme entrypoint is `docs/stylesheets/extra.css`.
+- JS layer is `docs/javascripts/extra.js`.
+- Override dir is `overrides/`, but prior full-page overrides caused broken builds. Do NOT replace full templates.
+- Toolbar/code-block icons must remain usable and legible.
+- Output must be additive, reversible, and contributor-safe.
+
+## Goal
+Make the homepage much more beautiful using the documented theme prompt, adapted for Zensical.
+Focus on the homepage (`docs/index.md` + `docs/stylesheets/extra.css`).
+Keep the consciousness/awakening tone and multi-contributor friendly structure.
+
+## Requirements
+- Fancier typography system, spacing, and front-page composition.
+- More polished hero treatment and lead paragraph.
+- Beautiful list and CTA styling.
+- Additive changes only to CSS/JS and markup classes.
+- Preserve all behavior helpers (reduced motion, scroll reveal, cursor glow opt-in).
+- Include a short review summary of every changed file.
+
+## Do NOT
+- Edit `zensical.toml`.
+- Add template overrides without explicit confirmation.
+- Import heavy frameworks or dependencies.
+
+## Deliverable
+- Exact files changed
+- Short diff summary
+- Preview/review instructions

docs/index.md

@@ -9,12 +9,18 @@ icon: lucide/leaf
 <figcaption>Nature is the oldest teacher of awareness.</figcaption>
 </figure>
 
-<p class="intro-lead">
+<p class="intro-lead gp-reveal">
 A quiet invitation into presence. This is a living space for reigniting the spark inside — not a performance, but a shared practice.
 </p>
 
+<hr class="wp-divider" />
+
+<section class="wp-section gp-reveal">
 ## How to contribute
 
 - **Add a reflection** — short notes, practices, or questions
 - **Plant an idea** — link into new themed pages
 - **Tend the tone** — kind, grounded edits keep the garden coherent
+</section>
+
+<p class="wp-spacer"></p>

docs/stylesheets/extra.css

@@ -403,6 +403,77 @@ article h1, article h2, article h3 {
   border-radius: 4px;
 }
 
+/* Homepage refined */
+
+.wp-divider {
+  border: none;
+  height: 1px;
+  margin: 2.8rem auto 3.2rem;
+  max-width: 86%;
+  background: linear-gradient(
+    90deg,
+    transparent,
+    var(--gp-secondary),
+    var(--gp-primary),
+    var(--gp-accent),
+    transparent
+  );
+  opacity: 0.42;
+}
+
+.wp-spacer {
+  height: 0;
+  opacity: 0;
+}
+
+/* Contribution section card */
+.wp-section {
+  background: var(--gp-card-bg);
+  border: 1px solid var(--gp-card-border);
+  border-radius: 26px;
+  padding: 2rem 2.2rem;
+  backdrop-filter: blur(14px) saturate(145%);
+  -webkit-backdrop-filter: blur(14px) saturate(145%);
+  box-shadow: var(--gp-card-shadow);
+  position: relative;
+  z-index: 1;
+}
+
+.wp-section h2,
+.wp-section h3 {
+  margin-top: 0;
+  font-weight: 700;
+  color: var(--gp-text);
+}
+
+.wp-section ul,
+.wp-section ol {
+  padding-left: 1.35rem;
+  line-height: 1.8;
+}
+
+.wp-section li {
+  margin: 0.28rem 0;
+}
+
+.wp-section li::marker {
+  color: var(--gp-primary);
+}
+
+/* Tighter hero composition on index */
+.index .godspark-hero {
+  margin-bottom: 0.6rem;
+  box-shadow: none;
+  border: none;
+  background: transparent;
+  backdrop-filter: none;
+  -webkit-backdrop-filter: none;
+}
+
+.index .godspark-hero img {
+  max-height: 420px;
+}
+
 /* Print */
 @media print {
   body {