/* | The strip of banners above the panel, and the room the topbar makes for it | (#1103). | | 🚨 The defect this fixes, measured on 2026-09-21: Filament makes the | topbar's CONTAINER sticky, and our banners were the first child of | with no positioning at all. So the header stayed and the banner scrolled | away — 37 pixels of scrolling were enough to lose it completely, on a page | announcing an outage. | | Nobody had seen it before because nobody had ever announced a window: the | banner has been in the codebase since 2026-05-15 and #752 was the first | time it was switched on for real. */ /* | One sticky container for ALL the top banners rather than one sticky rule | per banner, and that is not tidiness: the scheduled-maintenance strip and | the two blocks of the connection banner can be on screen together. Made | sticky one by one they would each claim `top: 0` and stack on top of each | other; in a container they stack the way they read. */ .ssmt-banners { position: sticky; top: 0; /* Above the topbar's 30, so the strip stays on top as the header slides up underneath it. */ z-index: 40; /* | 🚨 SOLID, ALWAYS — and deliberately NOT the chrome knob. | | Sticky means the page scrolls underneath, and the banners' dark tones | are 40% tints (`dark:bg-amber-950/40` in | `components/panel-banner.blade.php`). On a transparent strip that 60% | was the page's own text, readable through a notice about an outage. | The tint stays; it now lays over this surface instead of the page, so | the colours barely move. Light mode was opaque already. | | The obvious home was `--ssmt-chrome-veil` in `panel-surfaces.css`, | which makes the topbar, the sidebar and the footer solid — and it was | the first version of this rule. Measured wrong: that knob exists to be | raised (its own comment suggests `.15`), and at `.15` the strip fell to | 0.85 and the text came back through. How much of the backdrop the frame | lets through is a question of look; whether a maintenance notice can | be read is not, so it does not get a knob. */ background-color: var(--tew-color-surface); } /* | The header makes room. Without this the topbar sticks at 0 too and ends up | behind the banners — the same disappearance, moved to the other element. | | 🚨 SAME SPECIFICITY AS FILAMENT'S OWN `.fi-topbar-ctn { top: 0 }`, AND THIS | FILE LOADS FIRST. By the ordinary cascade that loses. It wins because | Filament's rule lives inside an `@layer`, and a layered rule loses to an | unlayered one whatever the order — so the extra `body ` that looks | necessary is specificity paid for nothing. | | Measured in a browser, not reasoned about: the same declaration injected as | the FIRST stylesheet of the page moved the topbar from 0 to 33px. If a | Filament upgrade ever takes that rule out of its layer, this is the line | that goes quiet, and the symptom is the banner covering the header. | | The fallback is `0px` and it is the whole no-banner case: an empty strip | measures zero, so the header sits exactly where Filament puts it. */ .fi-topbar-ctn { top: var(--ssmt-banners-height, 0px); }