style: one protagonist per surface — photo hero keeps Ken Burns only (flares removed), login gets Gemini-style large soft aurora; services trimmed to 4 real tiles + planned line
This commit is contained in:
ctao
+8
-14
@@ -27,15 +27,10 @@ const services = [
|
||||
icon: '<rect x="4" y="4" width="7" height="7" rx="1.5"/><rect x="13" y="4" width="7" height="7" rx="1.5"/><rect x="4" y="13" width="7" height="7" rx="1.5"/><rect x="13" y="13" width="7" height="7" rx="1.5"/>' },
|
||||
{ title: 'User Support', href: '/support', desc: 'Help desk, FAQ, user forum and mailing lists.',
|
||||
icon: '<circle cx="12" cy="12" r="9"/><circle cx="12" cy="12" r="4"/><path d="m5.7 5.7 3.5 3.5m5.6 0 3.5-3.5m0 12.6-3.5-3.5m-5.6 0-3.5 3.5"/>' },
|
||||
{ title: 'Software', planned: true, desc: 'Science analysis tools and pipelines — planned.',
|
||||
icon: '<rect x="3" y="4.5" width="18" height="15" rx="2"/><path d="m7 9.5 3 2.5-3 2.5M12.5 15H17"/>' },
|
||||
{ title: 'Documentation', planned: true, desc: 'User guides and technical documentation — planned.',
|
||||
icon: '<path d="M12 6.7C10.6 5.2 8.6 4.5 5.7 4.5H4v13.6h1.7c2.9 0 4.9.7 6.3 2.2 1.4-1.5 3.4-2.2 6.3-2.2H20V4.5h-1.7c-2.9 0-4.9.7-6.3 2.2z"/><path d="M12 6.7v13.6"/>' },
|
||||
{ title: 'Scheduling', planned: true, desc: 'Public mid- and long-term scheduling information — planned.',
|
||||
icon: '<rect x="3.5" y="5" width="17" height="15" rx="2"/><path d="M3.5 9.5h17M8 3v4M16 3v4"/>' },
|
||||
{ title: 'Science alerts', planned: true, desc: 'Public science alert information — planned.',
|
||||
icon: '<path d="M12 4.5a5.5 5.5 0 0 0-5.5 5.5c0 3.6-1.2 5-1.9 5.7h14.8c-.7-.7-1.9-2.1-1.9-5.7A5.5 5.5 0 0 0 12 4.5z"/><path d="M10 19a2 2 0 0 0 4 0"/>' },
|
||||
];
|
||||
// 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'];
|
||||
---
|
||||
<Base title="CTAO Science Portal" description="News, observation proposals, data and user services of the Cherenkov Telescope Array Observatory" ambient>
|
||||
{/* Photographic hero: LST-1 under the La Palma night sky (copied from the
|
||||
@@ -71,17 +66,16 @@ const services = [
|
||||
<div class="section-head"><h2>Services</h2></div>
|
||||
<div class="grid">
|
||||
{services.map((s) => (
|
||||
<article class={s.planned ? 'card tile tile--planned' : 'card tile'}>
|
||||
<article class="card tile">
|
||||
<svg class="ico" aria-hidden="true" viewBox="0 0 24 24" set:html={s.icon} />
|
||||
<h3>{s.href
|
||||
? (s.ext
|
||||
? <a class="external" href={s.href} target="_blank" rel="noopener">{s.title}</a>
|
||||
: <a href={s.href}>{s.title}</a>)
|
||||
: s.title}</h3>
|
||||
<h3>{s.ext
|
||||
? <a class="external" href={s.href} target="_blank" rel="noopener">{s.title}</a>
|
||||
: <a href={s.href}>{s.title}</a>}</h3>
|
||||
<p class="desc">{s.desc}</p>
|
||||
</article>
|
||||
))}
|
||||
</div>
|
||||
<p class="planned-note">Planned services: {planned.join(' · ')}</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
+12
-25
@@ -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); }
|
||||
|
||||
Reference in New Issue
Block a user