ctao/portal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: unclip search-suggest dropdown — nebula clip moved to dedicated .band-bg layer; suggest above sticky header

Browse Source
This commit is contained in:
ctao
2026-07-24 23:44:54 +02:00
parent 3b736af25e
commit 2de0cf148e
9 changed files with 24 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/styles/global.css
+12 -6
View File
@@ -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;