From d26b94014a0783dc838d3373a9611edaf488b651 Mon Sep 17 00:00:00 2001 From: Yutaka Kondo Date: Mon, 27 Apr 2026 11:36:47 -0700 Subject: [PATCH 1/2] docs(landing): replace stray hero shadow with card aura, widen ask body MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The bottom-right radial gradient on .hero floated unanchored to anything on the page and read as a stray shadow — especially on mobile, where it covered the empty band below the yokai stack. Removed it and added a soft warm aura behind the yokai cards themselves so the warmth now reads as the cards' glow instead of an accidental patch. The "I built Mora for one kid I love." section had 50ch body text inside a 1.4fr column, which left a wide unused gutter on the right at common laptop widths. Rebalanced the grid to 0.85fr / 1.6fr and bumped the body measure to 62ch so lines actually fill the column. Made the heading sticky on desktop so it anchors while the body scrolls past. Mobile (≤680px): - Tightened .yokai-stack height 420 → 380px so cards sit flush, no empty band below - Suppressed the aura — it would smear awkwardly across the narrow stack - Disabled the sticky heading and the 62ch cap so single-column flow reads naturally --- docs/index.html | 44 ++++++++++++++++++++++++++++++-------------- 1 file changed, 30 insertions(+), 14 deletions(-) diff --git a/docs/index.html b/docs/index.html index 810264f4..89c08a5e 100644 --- a/docs/index.html +++ b/docs/index.html @@ -172,13 +172,8 @@ padding-top:72px;padding-bottom:96px; position:relative;overflow:hidden; } - .hero::after{ - content:"";position:absolute; - inset:auto -120px -120px auto; - width:520px;height:520px; - background:radial-gradient(circle at 30% 30%, rgba(255,122,0,.18), transparent 60%); - pointer-events:none; - } + /* Soft warm aura behind the yokai stack — anchored to the cards themselves + instead of floating in a corner, so it reads as glow, not stray shadow. */ .hero-grid{ display:grid;grid-template-columns:1.35fr 1fr;gap:64px;align-items:start; } @@ -298,6 +293,18 @@ height:560px; display:block; } + .yokai-stack::before{ + content:""; + position:absolute; + inset:8% -4% 8% -4%; + background: + radial-gradient(60% 55% at 50% 50%, rgba(255,122,0,.22), transparent 70%), + radial-gradient(45% 40% at 30% 70%, rgba(196,52,28,.14), transparent 75%); + filter:blur(8px); + pointer-events:none; + z-index:0; + } + .yokai-card{z-index:1} .yokai-card{ position:absolute; width:78%;aspect-ratio:1/1; @@ -364,10 +371,12 @@ /* — SECTION 01 the ask — */ .ask-grid{ - display:grid;grid-template-columns:1.1fr 1.4fr;gap:80px; + display:grid;grid-template-columns:minmax(0,0.85fr) minmax(0,1.6fr);gap:64px; + align-items:start; } + .ask-grid .col-left{position:sticky;top:96px} .ask-grid .col-left h2{margin-top:0} - .ask-grid .col-right p{font-size:18px;line-height:1.65;max-width:50ch} + .ask-grid .col-right p{font-size:18px;line-height:1.65;max-width:62ch} .ask-grid .col-right p:first-child::first-letter{ font-family:"Fraunces",serif; font-variation-settings:"opsz" 144,"wght" 800,"SOFT" 80,"WONK" 1; @@ -744,6 +753,8 @@ collapses to 0px wide, dropping every yokai card to ~2px. */ .yokai-stack{height:480px;width:100%;max-width:520px;margin:0 auto} .ask-grid{grid-template-columns:1fr;gap:32px} + .ask-grid .col-left{position:static} + .ask-grid .col-right p{max-width:none} .pillars{grid-template-columns:repeat(2,1fr)} .subs-grid{grid-template-columns:1fr;gap:36px} .stats{grid-template-columns:repeat(3,1fr)} @@ -769,12 +780,17 @@ footer .inner{grid-template-columns:1fr;gap:28px} footer .brand-large{font-size:56px} .hero-folio .meta{display:none} - /* Stacked yokai cards — keep all three within the viewport. */ - .yokai-stack{height:420px;max-width:none} - .yokai-card{width:64%} + /* Stacked yokai cards — keep all three within the viewport. + Height tuned to bottommost card edge (top + width) plus a small + breath for shadow + rotation overhang; no large empty band below. */ + .yokai-stack{height:380px;max-width:none} + .yokai-card{width:62%} .yokai-card.c1{top:0;right:4%} - .yokai-card.c2{top:60px;right:32%} - .yokai-card.c3{top:140px;right:8%} + .yokai-card.c2{top:54px;right:30%} + .yokai-card.c3{top:120px;right:8%} + /* On mobile the aura would sit awkwardly across the narrow stack — + suppress it; the cards alone carry enough visual weight. */ + .yokai-stack::before{display:none} } @media (prefers-reduced-motion:reduce){ From ef90f8c806fa7a8007472c93861ee52e3c2e9855 Mon Sep 17 00:00:00 2001 From: Yutaka Kondo Date: Mon, 27 Apr 2026 11:42:44 -0700 Subject: [PATCH 2/2] Address PR review: fold .yokai-card z-index into the main rule Copilot flagged the trailing `.yokai-card{z-index:1}` override sitting right above the main rule as a duplicate that's easy to miss in future edits. Folded it into the primary `.yokai-card` declaration so the stacking-context intent stays with the rest of the card's positioning. No visual change; cards still sit above the .yokai-stack::before aura. --- docs/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/index.html b/docs/index.html index 89c08a5e..7442a25f 100644 --- a/docs/index.html +++ b/docs/index.html @@ -304,9 +304,9 @@ pointer-events:none; z-index:0; } - .yokai-card{z-index:1} .yokai-card{ position:absolute; + z-index:1; width:78%;aspect-ratio:1/1; background:var(--washi); border-radius:24px;