/* Environment banner — main (IMP-0199 feature, reworked under IMP-0424 / Audit #1231). * * Loaded from _env_banner_head.html, which renders ONLY when environment_banner is set, * i.e. never on production. That is the whole safety story for this file: the offsets * below re-point chrome that main.css anchors to the viewport top, and they cannot reach * the live site because the that pulls them in is not emitted there. Nothing in * main.css / root.css / session-runtime.css had to be edited to make room. * * BUG-1036: the banner used to be a sticky z-index:9999 strip with no height contract, so * it painted over the fixed .sidebar and, on scroll, over the whole sticky .header. The * fix is a KNOWN height published as --env-banner-h and consumed by everything that is * anchored to y=0. The height must stay exact, hence the single line + overflow:hidden — * a banner that wraps silently invalidates every offset below. * * Loaded after the app stylesheets (and after {% block extra_css %}), so these single-class * selectors win on order without needing extra specificity or !important. */ :root { --env-banner-h: 34px; } /* Hidden state, set on before first paint by env-banner.js. Zeroing the variable is what makes a dismissed banner cost nothing: every offset below collapses with it. */ html.env-banner-hidden { --env-banner-h: 0px; } html.env-banner-hidden .env-banner { display: none; } .env-banner { position: sticky; top: 0; /* Above page chrome (sidebar/mobile-nav 100, header 50) and below full-screen overlays (modal/journal 200+, support widget 10000), which are meant to cover it. */ z-index: 150; height: var(--env-banner-h); display: flex; align-items: center; justify-content: center; gap: 0.75rem; /* Symmetric so the message stays optically centred despite the absolute close button. */ padding-inline: 2.25rem; background: #7c2d12; color: #fff; font: 600 13px/1 system-ui, sans-serif; white-space: nowrap; overflow: hidden; } .env-banner__detail { font-weight: 400; opacity: 0.85; min-width: 0; overflow: hidden; text-overflow: ellipsis; } .env-banner__link { color: #fff; text-decoration: underline; flex: 0 0 auto; } .env-banner__close { position: absolute; inset-inline-end: 0.25rem; top: 50%; transform: translateY(-50%); width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; padding: 0; background: transparent; border: 0; border-radius: 4px; color: #fff; line-height: 1; cursor: pointer; opacity: 0.8; } .env-banner__close::before { content: "\00d7"; font-size: 18px; } .env-banner__close:hover { opacity: 1; background: rgba(255, 255, 255, 0.15); } .env-banner__close:focus-visible { outline: 2px solid #fff; outline-offset: 1px; } /* Phones: drop the secondary sentence rather than let it wrap or truncate the label. */ @media (max-width: 700px) { :root { --env-banner-h: 30px; } .env-banner { gap: 0.5rem; font-size: 12px; } .env-banner__detail { display: none; } } @media print { .env-banner { display: none; } } /* --------------------------------------------------------------------------- Chrome offsets (BUG-1036). Everything main anchors to the viewport top moves down by the banner; anything sized to the full viewport loses that much height. --------------------------------------------------------------------------- */ /* In-page anchors clear the banner as well as the sticky header (root.css:99). */ html { scroll-padding-top: calc(72px + var(--env-banner-h)); } /* main.css:65 .sidebar is fixed at top:0 — without this the banner covers the logo. */ .sidebar { top: var(--env-banner-h); height: calc(100dvh - var(--env-banner-h)); } /* main.css:204 .header is sticky at top:0 — without this it slides under the banner. */ .header { top: var(--env-banner-h); } /* discovery.css:86, welcome.css:166 — page-level sticky bars on /stories and /welcome. */ .browse-search-bar { top: var(--env-banner-h); } .welcome-header { top: var(--env-banner-h); } /* mobile.css:536 — the offline notice is fixed at top:0 and would land under the banner. */ .offline-banner { top: var(--env-banner-h); } /* Session reader (BUG-1037): session-runtime.css:19 pins .session-header at top:0 and .session-main clears it with a 60px margin; both have to grow by the banner, or the exit-session button sits underneath it. state-sidebar.css:65 is the same story. */ .session-header { top: var(--env-banner-h); } .session-main { margin-top: calc(60px + var(--env-banner-h)); } .state-sidebar { top: var(--env-banner-h); height: calc(100dvh - var(--env-banner-h)); }