diff --git a/DESIGN.md b/DESIGN.md index 3c8f10d..a1eb7a5 100644 --- a/DESIGN.md +++ b/DESIGN.md @@ -66,8 +66,11 @@ ctao.org animates nebula videos under Galaxy vignettes; our translation: 1. **Band nebula** — one `--nebula` stack (Cherenkov .38 / Azure .33 / Indigo .80 radial fields) used by hero + auth bands, static and animated - alike; the animated variant is an oversized pseudo-layer drifting via - `transform` only, 22s alternate. Clearly visible glow, never neon. + alike; the animated variant is an oversized `.band-bg::before` layer + drifting via `transform` only, 22s alternate. Clearly visible glow, never + neon. `.band-bg` (first child of every band) owns the `overflow: hidden` + clip — NEVER put overflow on the band itself: it would clip overlays like + the search-suggest dropdown. 2. **Whole-page ambient** — `.has-ambient::before`: fixed brand-hue wash (Cherenkov .16 / Azure .12 / Indigo .10 — visible pastel fields, white cards pop against them) drifting on a 60s alternate cycle. Opt-in per page diff --git a/src/pages/dashboard.astro b/src/pages/dashboard.astro index af2c414..f038b15 100644 --- a/src/pages/dashboard.astro +++ b/src/pages/dashboard.astro @@ -20,6 +20,7 @@ const tickets = [ ---
+
User area

Dashboard

diff --git a/src/pages/index.astro b/src/pages/index.astro index fdbb5e2..4215dc6 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -19,6 +19,7 @@ const services = [ ---
+
Cherenkov Telescope Array Observatory

CTAO Science Portal

diff --git a/src/pages/login.astro b/src/pages/login.astro index 6256e51..d5edf68 100644 --- a/src/pages/login.astro +++ b/src/pages/login.astro @@ -3,6 +3,7 @@ import Base from '../layouts/Base.astro'; ---
+
Mock — AAI integration pending diff --git a/src/pages/news/index.astro b/src/pages/news/index.astro index 4a2ac62..0608396 100644 --- a/src/pages/news/index.astro +++ b/src/pages/news/index.astro @@ -10,6 +10,7 @@ const iso = (d) => d.toISOString().slice(0, 10); ---
+
Cherenkov Telescope Array Observatory

News & Announcements

diff --git a/src/pages/proposals.astro b/src/pages/proposals.astro index 9b5742c..de0a8cd 100644 --- a/src/pages/proposals.astro +++ b/src/pages/proposals.astro @@ -3,6 +3,7 @@ import Base from '../layouts/Base.astro'; ---
+
Proposal Submission

Observation proposals

diff --git a/src/pages/search.astro b/src/pages/search.astro index 2ecde29..89bffe4 100644 --- a/src/pages/search.astro +++ b/src/pages/search.astro @@ -3,6 +3,7 @@ import Base from '../layouts/Base.astro'; ---
+
Science Portal

Search

diff --git a/src/pages/support.astro b/src/pages/support.astro index 8ddfcd6..9c08445 100644 --- a/src/pages/support.astro +++ b/src/pages/support.astro @@ -10,6 +10,7 @@ const channels = [ ---
+
User services

User Support

diff --git a/src/styles/global.css b/src/styles/global.css index 847de02..316291b 100644 --- a/src/styles/global.css +++ b/src/styles/global.css @@ -202,8 +202,11 @@ img { max-width: 100%; height: auto; display: block; } pseudo-layer (see the motion block at the end of this file). */ .hero-band { background: var(--nebula), var(--galaxy); - color: #fff; padding: var(--space-band) 0; position: relative; overflow: hidden; + color: #fff; padding: var(--space-band) 0; position: relative; + /* NO overflow:hidden here — it would clip the search-suggest dropdown. + The animated nebula is clipped by its own .band-bg frame instead. */ } +.band-bg { position: absolute; inset: 0; overflow: hidden; pointer-events: none; } .hero { position: relative; } /* content above the animated nebula layer */ .hero h1 { font-size: clamp(2rem, 6vw, 3.6rem); margin: 0 0 10px; line-height: 1.12; font-weight: 700; } .hero p { color: var(--cherenkov); font-size: 1.08rem; max-width: 62ch; margin: 0; } /* subtitle per BRAND D.3.4 */ @@ -224,10 +227,12 @@ img { max-width: 100%; height: auto; display: block; } .hero-search input:focus, .search-form input:focus { border-color: var(--azure); } /* Live suggestions under the hero search — plain links, Tab-accessible */ .suggest { - position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 5; - list-style: none; margin: 0; padding: 6px; text-align: left; + position: absolute; top: calc(100% + 8px); left: 0; right: 0; + z-index: 11; /* above the sticky header (10) — never slides under it on scroll */ + list-style: none; margin: 0; padding: 8px; text-align: left; background: #fff; border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-lifted); + max-height: min(60vh, 480px); overflow: auto; /* long lists scroll on mobile */ } .suggest:empty { display: none; } .suggest li { display: flex; align-items: center; gap: var(--space-s); padding: 0 12px; border-radius: calc(var(--radius) - 8px); } @@ -440,7 +445,7 @@ img { max-width: 100%; height: auto; display: block; } /* Auth (login mock) — nebula backdrop + floating card, modern auth pattern */ .auth-band { - min-height: calc(100dvh - 64px); position: relative; overflow: hidden; + min-height: calc(100dvh - 64px); position: relative; display: grid; place-items: center; padding: var(--space-band) var(--gutter); background: var(--nebula), var(--galaxy); } @@ -490,9 +495,10 @@ img { max-width: 100%; height: auto; display: block; } @media (prefers-reduced-motion: no-preference) { @view-transition { navigation: auto; } html { scroll-behavior: smooth; } - /* Bands hand their glow to a slowly roaming pseudo-layer (same --nebula stack) */ + /* Bands hand their glow to a slowly roaming layer inside the .band-bg clip + frame (same --nebula stack) — the band itself never clips its overlays */ .hero-band, .auth-band { background: var(--galaxy); } - .hero-band::before, .auth-band::before { + .band-bg::before { content: ""; position: absolute; inset: -45% -30%; background: var(--nebula); animation: nebula 22s ease-in-out infinite alternate;