From 5beb9906231224948a8274866c466ea6affebe31 Mon Sep 17 00:00:00 2001 From: Disco DeDisco Date: Tue, 12 May 2026 23:58:36 -0400 Subject: [PATCH] =?UTF-8?q?brief=20banner:=20portal=20over=20the=20wordmar?= =?UTF-8?q?k=20+=20h2=20header=20area=20(small=20margin=20from=20viewport?= =?UTF-8?q?=20edges)=20w.=20`position:=20fixed;=20top:=200.5rem;=20left:?= =?UTF-8?q?=200.5rem;=20right:=200.5rem;=20z-index:=2010000`=20=E2=80=94?= =?UTF-8?q?=20mirrors=20`#id=5Fguard=5Fportal`'s=20lift=20contract=20so=20?= =?UTF-8?q?the=20Brief=20escapes=20every=20game=20overlay's=20stacking=20c?= =?UTF-8?q?ontext=20the=20same=20way=20the=20guard=20portal=20does;=20with?= =?UTF-8?q?out=20this=20lift=20the=20Brief=20landed=20in=20document=20flow?= =?UTF-8?q?=20as=20nextSibling=20of=20`#id=5Fbrief=5Fbanner=5Fanchor`=20(i?= =?UTF-8?q?nside=20`.container`,=20which=20itself=20has=20no=20stacking=20?= =?UTF-8?q?context)=20=E2=80=94=20fine=20on=20pages=20w.=20no=20fixed=20ov?= =?UTF-8?q?erlays,=20but=20on=20room.html=20the=20gate=20/=20role-select?= =?UTF-8?q?=20/=20sig=20/=20sky=20backdrops=20(z-index=20100-200,=20`posit?= =?UTF-8?q?ion:=20fixed;=20inset:=200`,=20`backdrop-filter:=20blur(...)`)?= =?UTF-8?q?=20ate=20the=20Brief=20alive:=20the=20user=20saw=20the=20post-s?= =?UTF-8?q?hare=20/=20invite=20Brief=20outline=20blurred=20behind=20the=20?= =?UTF-8?q?Gaussian=20glass=20instead=20of=20in=20front=20of=20it;=20centr?= =?UTF-8?q?ing=20via=20`max-width:=20960px`=20+=20auto=20inline=20margins?= =?UTF-8?q?=20matches=20`.container`'s=20max-width=20so=20landscape=20view?= =?UTF-8?q?ports=20see=20the=20Brief=20centred=20over=20the=20page-content?= =?UTF-8?q?=20column=20rather=20than=20spanning=20the=20sidebar=20gutters;?= =?UTF-8?q?=20existing=20`margin-bottom:=200.75rem`=20dropped=20(vestigial?= =?UTF-8?q?=20=E2=80=94=20fixed=20positioning=20doesn't=20push=20siblings,?= =?UTF-8?q?=20and=20there's=20only=20one=20Brief=20at=20a=20time=20so=20th?= =?UTF-8?q?e=20inline-stack=20case=20the=20margin=20was=20hedging=20on=20n?= =?UTF-8?q?ever=20happens);=20Django=20messages=20banner=20(the=20`.note-b?= =?UTF-8?q?anner.note-banner--message`=20shell=20rendered=20by=20`{%=20if?= =?UTF-8?q?=20messages=20%}`=20in=20base.html=20for=20magic-link=20confirm?= =?UTF-8?q?ations=20/=20errors)=20inherits=20the=20same=20portal=20treatme?= =?UTF-8?q?nt=20since=20both=20kinds=20share=20the=20same=20base=20class?= =?UTF-8?q?=20=E2=80=94=20UX=20is=20now=20uniform=20regardless=20of=20whic?= =?UTF-8?q?h=20overlay=20the=20user=20is=20staring=20through=20when=20the?= =?UTF-8?q?=20message=20arrives;=2042=20Brief-touching=20FTs=20(test=5Fcor?= =?UTF-8?q?e=5Fbud=5Fbtn=20+=20test=5Fbill=5Fmy=5Fbuds=20+=20test=5Fbill?= =?UTF-8?q?=5Fmy=5Fnotes)=20green=20w.=20no=20positional=20assertion=20reg?= =?UTF-8?q?ressions=20=E2=80=94=20Selenium=20clicks=20`.note-banner=5F=5Fn?= =?UTF-8?q?vm`=20/=20`.note-banner=5F=5Ffyi`=20/=20etc.=20the=20same=20w.?= =?UTF-8?q?=20position:fixed=20as=20it=20did=20inline?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Code architected by Disco DeDisco Git commit message Co-Authored-By: Claude Opus 4.7 --- src/static_src/scss/_note.scss | 19 +++++++++++++++++-- 1 file changed, 17 insertions(+), 2 deletions(-) diff --git a/src/static_src/scss/_note.scss b/src/static_src/scss/_note.scss index 9c4a20c..e2c0b45 100644 --- a/src/static_src/scss/_note.scss +++ b/src/static_src/scss/_note.scss @@ -1,6 +1,22 @@ -// ── Note banner (slides in below page h2 after unlock) ───────────────────── +// ── Note banner (Brief portal) ───────────────────────────────────────────── +// Portals over the page wordmark + h2 header area when shown — `position: +// fixed` w. `z-index: 10000` lifts it above every game overlay (gate / +// role-select / sig / sky backdrops at z 100-200, tray at 310, kit bag at +// 318+, etc.) the same way `#id_guard_portal` does. Without this lift the +// Brief would land in document flow inside `.container` (after the +// `#id_brief_banner_anchor` div) and disappear behind any `position: fixed` +// overlay that sat above it in the z-stack — e.g. on room.html the gate +// overlay's Gaussian-blur backdrop ate the Brief alive. .note-banner { + position: fixed; + top: 0.5rem; + left: 0.5rem; + right: 0.5rem; + z-index: 10000; + max-width: 960px; // match `.container` max-width so wide viewports + margin-left: auto; // see the Brief centred above the page rather + margin-right: auto; // than stretched across landscape sidebars display: flex; align-items: center; gap: 0.75rem; @@ -9,7 +25,6 @@ backdrop-filter: blur(8px); border: 0.1rem solid rgba(var(--secUser), 0.4); border-radius: 0.5rem; - margin-bottom: 0.75rem; .note-banner__body { flex: 1;