From 0b0c584450e9dc5f46be0170f1e4b10918151814 Mon Sep 17 00:00:00 2001 From: Cameron Date: Wed, 8 Jul 2026 21:05:47 -0700 Subject: [PATCH] Make splash hero one continuous white room, not a black/white split. Full-bleed rack capture as the field; soft wash for copy only so the tower sits alone in the porcelain expanse. Co-authored-by: Cursor --- site/src/pages/index.astro | 190 ++++++++++++++----------------------- wiki/log/DEVLOG.md | 8 ++ 2 files changed, 79 insertions(+), 119 deletions(-) diff --git a/site/src/pages/index.astro b/site/src/pages/index.astro index d77e6b78..cb931316 100644 --- a/site/src/pages/index.astro +++ b/site/src/pages/index.astro @@ -140,128 +140,70 @@ const verbs = [ isolation: isolate; } - /* Facility grain + scan */ - .splash::before { - content: ''; - position: fixed; - inset: 0; - z-index: -2; - background: - radial-gradient(ellipse 80% 50% at 15% 10%, rgba(255, 176, 0, 0.07), transparent 55%), - radial-gradient(ellipse 60% 40% at 90% 80%, rgba(214, 38, 38, 0.05), transparent 50%), - linear-gradient(180deg, #0a0a0b 0%, #0c0c0e 40%, #0a0a0b 100%); - } - - .splash::after { - content: ''; - position: fixed; - inset: 0; - z-index: -1; - pointer-events: none; - background-image: - linear-gradient(rgba(219, 218, 210, 0.03) 1px, transparent 1px), - linear-gradient(90deg, rgba(219, 218, 210, 0.03) 1px, transparent 1px); - background-size: 48px 48px; - mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, black, transparent); - } - - .scan { - position: fixed; - inset: 0; - z-index: 50; - pointer-events: none; - background: repeating-linear-gradient( - 0deg, - transparent, - transparent 2px, - rgba(0, 0, 0, 0.12) 2px, - rgba(0, 0, 0, 0.12) 4px - ); - opacity: 0.35; - mix-blend-mode: multiply; - } - .wrap { width: min(1120px, calc(100% - 2.5rem)); margin-inline: auto; } - /* —— HERO —— */ + /* —— HERO: one continuous white room, one rack —— */ .hero { min-height: 100svh; display: grid; align-content: center; - padding: 4.5rem 0 3.5rem; + padding: 4.5rem 0 5rem; position: relative; overflow: hidden; + background: #f2f1ec; + color: #1a1a1c; } - /* Sterile white-room expanse behind the copy — one rack, forever. */ .hero-stage { position: absolute; inset: 0; z-index: 0; pointer-events: none; - background: - linear-gradient( - 90deg, - var(--bg) 0%, - var(--bg) 28%, - rgba(10, 10, 11, 0.55) 42%, - transparent 58% - ), - linear-gradient(180deg, #f0efea 0%, #e8e7e1 42%, #d4d3cd 100%); - } - - .hero-stage::before { - content: ''; - position: absolute; - inset: 0; - background-image: - linear-gradient(rgba(58, 60, 63, 0.07) 1px, transparent 1px), - linear-gradient(90deg, rgba(58, 60, 63, 0.07) 1px, transparent 1px); - background-size: 72px 72px; - background-position: center bottom; - mask-image: linear-gradient(180deg, transparent 0%, black 38%, black 100%); - opacity: 0.55; } - .rack-shot { + /* Full-bleed capture: empty porcelain expanse, tower pushed right. */ + .hero-stage img { position: absolute; - right: max(-4%, 0%); - bottom: 0; - top: 6%; - width: min(58vw, 720px); - display: flex; - align-items: flex-end; - justify-content: flex-end; - padding: 0 2% 2% 0; - } - - .rack-shot img { + inset: 0; width: 100%; height: 100%; - object-fit: contain; - object-position: 72% 88%; - filter: drop-shadow(0 28px 60px rgba(10, 10, 11, 0.18)); - animation: rack-settle 1.4s ease-out both; + object-fit: cover; + object-position: 78% 55%; + animation: room-in 1.6s ease-out both; } - @keyframes rack-settle { + @keyframes room-in { from { opacity: 0; - transform: translateY(18px) scale(0.98); + transform: scale(1.03); } to { opacity: 1; - transform: translateY(0) scale(1); + transform: scale(1); } } + /* Soft left wash so copy stays legible without a hard panel. */ + .hero-stage::after { + content: ''; + position: absolute; + inset: 0; + background: linear-gradient( + 90deg, + rgba(242, 241, 236, 0.92) 0%, + rgba(242, 241, 236, 0.72) 28%, + rgba(242, 241, 236, 0.2) 48%, + transparent 62% + ); + } + .hero-copy { position: relative; z-index: 1; - max-width: 38rem; + max-width: 34rem; } .brand { @@ -272,8 +214,7 @@ const verbs = [ letter-spacing: 0.12em; line-height: 0.95; text-transform: uppercase; - color: var(--amber); - text-shadow: 0 0 40px rgba(255, 176, 0, 0.25); + color: #0a0a0b; } .brand .cursor { @@ -301,16 +242,16 @@ const verbs = [ font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; - color: var(--gunmetal); + color: #6a6a64; } .status b { - color: var(--bone); + color: #1a1a1c; font-weight: 500; } .status .live { - color: var(--amber); + color: var(--amber-dim); } .status .danger { @@ -322,17 +263,30 @@ const verbs = [ font-size: clamp(1.35rem, 3.2vw, 1.85rem); font-weight: 500; line-height: 1.25; - color: var(--bone); + color: #1a1a1c; max-width: 22ch; } .lede { margin: 0 0 2rem; - color: var(--gunmetal); + color: #5c5c56; font-size: 1.05rem; max-width: 36ch; } + /* Soft seam into the dark docs body below. */ + .hero::after { + content: ''; + position: absolute; + left: 0; + right: 0; + bottom: 0; + height: 5rem; + background: linear-gradient(180deg, transparent, var(--bg)); + z-index: 2; + pointer-events: none; + } + .cta { display: flex; flex-wrap: wrap; @@ -368,14 +322,14 @@ const verbs = [ .btn-ghost { background: transparent; - color: var(--bone); - border-color: var(--structure); + color: #1a1a1c; + border-color: #1a1a1c; } .btn-ghost:hover { - border-color: var(--gunmetal); - color: var(--bone); - background: rgba(219, 218, 210, 0.04); + border-color: #0a0a0b; + color: #0a0a0b; + background: rgba(10, 10, 11, 0.05); } .scroll-hint { @@ -384,7 +338,7 @@ const verbs = [ font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; - color: var(--chrome); + color: #8a8a84; animation: fade-up 1.2s ease 0.6s both; } @@ -659,13 +613,17 @@ const verbs = [ } @media (max-width: 860px) { - .hero-stage { - opacity: 0.45; + .hero-stage img { + object-position: 85% 60%; + opacity: 0.55; } - .rack-shot { - width: 70vw; - right: -8%; - top: 18%; + .hero-stage::after { + background: linear-gradient( + 180deg, + rgba(242, 241, 236, 0.88) 0%, + rgba(242, 241, 236, 0.55) 55%, + rgba(242, 241, 236, 0.2) 100% + ); } .hero-copy { max-width: 100%; @@ -679,27 +637,21 @@ const verbs = [ animation: none !important; transition: none !important; } - .scan { - display: none; - } } -

diff --git a/wiki/log/DEVLOG.md b/wiki/log/DEVLOG.md index f4e5abdf..94e89e75 100644 --- a/wiki/log/DEVLOG.md +++ b/wiki/log/DEVLOG.md @@ -5,6 +5,14 @@ Type: log ``` Reverse chronological implementation notes. Keep this factual: what changed, why, checks, and spec impact. +## 2026-07-08 - Splash hero: continuous white room (no black split) + +- Intent: previous hero painted a hard black panel over the left half — + looked like a split layout, not "one rack in an empty white room." +- Changed: full-bleed `rack-splash.png` as the hero field (object-position + right); soft left wash for copy only; dark body resumes below. +- Checks: `pnpm --dir site run build`; `./tools/site-deploy.sh`. + ## 2026-07-08 - Splash: real rack in white room + base-path links - Intent: CSS rack toy was goofy; CTAs joined `BASE_URL` without a -- 2.51.2