From 6e3f8e23b6f0bd47ebb6f0cc0d463a078fde34f3 Mon Sep 17 00:00:00 2001 From: ctao Date: Sat, 25 Jul 2026 14:55:01 +0200 Subject: [PATCH] =?UTF-8?q?style:=20one=20protagonist=20per=20surface=20?= =?UTF-8?q?=E2=80=94=20photo=20hero=20keeps=20Ken=20Burns=20only=20(flares?= =?UTF-8?q?=20removed),=20login=20gets=20Gemini-style=20large=20soft=20aur?= =?UTF-8?q?ora;=20services=20trimmed=20to=204=20real=20tiles=20+=20planned?= =?UTF-8?q?=20line?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/index.astro | 22 ++++++++-------------- src/styles/global.css | 37 ++++++++++++------------------------- 2 files changed, 20 insertions(+), 39 deletions(-) diff --git a/src/pages/index.astro b/src/pages/index.astro index 220985e..b815b8a 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -27,15 +27,10 @@ const services = [ icon: '' }, { title: 'User Support', href: '/support', desc: 'Help desk, FAQ, user forum and mailing lists.', icon: '' }, - { title: 'Software', planned: true, desc: 'Science analysis tools and pipelines — planned.', - icon: '' }, - { title: 'Documentation', planned: true, desc: 'User guides and technical documentation — planned.', - icon: '' }, - { title: 'Scheduling', planned: true, desc: 'Public mid- and long-term scheduling information — planned.', - icon: '' }, - { title: 'Science alerts', planned: true, desc: 'Public science alert information — planned.', - icon: '' }, ]; +// Planned services (SPEC §3.1/§3.3.2, all TBD): one quiet line instead of dead +// tiles — a grid should not ship tiles that do nothing (Apple-lens audit). +const planned = ['Software', 'Documentation', 'Scheduling', 'Science alerts']; --- {/* Photographic hero: LST-1 under the La Palma night sky (copied from the @@ -71,17 +66,16 @@ const services = [

Services

{services.map((s) => ( -
+

Planned services: {planned.join(' · ')}

diff --git a/src/styles/global.css b/src/styles/global.css index 8ce3afa..b1c44e0 100644 --- a/src/styles/global.css +++ b/src/styles/global.css @@ -55,17 +55,13 @@ /* Nebula glow (BRAND D.5) — auth band, static AND animated. Alphas are contrast ceilings (DESIGN.md): Cherenkov ≤.38 / Azure ≤.35; cores sit in opposite corners — cores never meet. */ - /* Lava-lamp rule (research): motion reads only on DEFINED shapes — blobs are - ~30% wide with visible falloff edges, high alpha, and travel far. Cherenkov - core stays pinned to the right half (text zone lives left of ~52%). */ + /* Aurora rule (Gemini-style): gradient-only surfaces (login) get LARGE, soft, + slowly flowing color fields — one protagonist per surface: the photo hero + animates only the photo (Ken Burns), never glow flares on top of it. */ --nebula: - radial-gradient(34% 40% at 76% 74%, rgba(0, 228, 216, 0.55), transparent 62%), - radial-gradient(30% 36% at 14% 18%, rgba(0, 122, 255, 0.45), transparent 60%), - radial-gradient(75% 85% at 40% 55%, rgba(0, 0, 156, 0.8), transparent 72%); - /* Photo-hero variant: no indigo depth blob over photography. */ - --nebula-glow: - radial-gradient(30% 42% at 80% 72%, rgba(0, 228, 216, 0.6), transparent 60%), - radial-gradient(26% 36% at 14% 20%, rgba(0, 122, 255, 0.5), transparent 60%); + radial-gradient(60% 70% at 78% 78%, rgba(0, 228, 216, 0.42), transparent 70%), + radial-gradient(55% 62% at 10% 12%, rgba(0, 122, 255, 0.36), transparent 68%), + radial-gradient(80% 90% at 42% 55%, rgba(0, 0, 156, 0.8), transparent 74%); /* Hero scrim over the photo — worst-case AA computed in DESIGN.md: small text lives left of 52% band width (α ≥ .76 there). */ --hero-scrim: linear-gradient(to right, @@ -461,7 +457,8 @@ span.page-step { color: var(--muted); } /* disabled end stop — non-interactive .tile { padding: var(--space-m); gap: 8px; } .tile .ico { width: 26px; height: 26px; stroke-width: 1.75; stroke-linejoin: round; color: var(--galaxy); } .tile h3 { margin: 0; } -.tile--planned :is(h3, .ico) { color: var(--muted); } +/* Planned services — one quiet line under the grid, never dead tiles */ +.planned-note { color: var(--muted); font-size: var(--fs-s); margin: var(--space-m) 0 0; } /* Article — 70ch column; on ≥1200px a sticky "On this page" rail sits to the right */ .article-layout { display: grid; grid-template-columns: minmax(0, 70ch); } @@ -710,7 +707,7 @@ mark { background: var(--tint-cherenkov); color: inherit; border-radius: calc(va .band-bg::before { content: ""; position: absolute; inset: -45% -30%; background: var(--nebula); - animation: nebula 12s ease-in-out infinite alternate; + animation: nebula 18s ease-in-out infinite alternate; } /* Photo hero, animated path: the photo itself moves (slow Ken Burns zoom — the unmistakable "alive" signal) and carries its scrim so the AA zones @@ -722,12 +719,6 @@ mark { background: var(--tint-cherenkov); color: inherit; border-radius: calc(va background: var(--hero-scrim), url("/brand/hero.jpg") center / cover; animation: kenburns 26s ease-in-out infinite alternate; } - .hero-band .band-bg::after { - content: ""; position: absolute; inset: -45% -30%; - background: var(--nebula-glow); - mix-blend-mode: screen; /* blobs GLOW over the photo instead of tinting it */ - animation: glowdrift 9s ease-in-out infinite alternate; - } /* Whole-page wash — slow drift, clearly alive */ .has-ambient::before { animation: ambient 36s ease-in-out infinite alternate; } /* Hero content rises in once, gently staggered */ @@ -745,13 +736,9 @@ mark { background: var(--tint-cherenkov); color: inherit; border-radius: calc(va .suggest li { transition: background-color var(--dur) var(--ease); } /* same quiet fade as every hover */ .card:hover, .search-results li:hover { transform: translateY(-2px); } /* the one elevate gesture (no cover zoom) */ } -@keyframes nebula { /* inert unless applied inside the block above */ - from { transform: translate3d(-8%, -5%, 0) rotate(-6deg) scale(1); opacity: 0.75; } - to { transform: translate3d(8%, 6%, 0) rotate(6deg) scale(1.3); opacity: 1; } -} -@keyframes glowdrift { - from { transform: translate3d(-13%, -9%, 0) rotate(-6deg) scale(1); opacity: 0.5; } - to { transform: translate3d(13%, 10%, 0) rotate(6deg) scale(1.3); opacity: 1; } +@keyframes nebula { /* Gemini-style aurora: slow, ample, gentle breath */ + from { transform: translate3d(-9%, -6%, 0) rotate(-5deg) scale(1); opacity: 0.85; } + to { transform: translate3d(9%, 7%, 0) rotate(5deg) scale(1.22); opacity: 1; } } @keyframes kenburns { from { transform: scale(1) translate3d(0, 0, 0); }