/* ========================================= Environment Banner + Drawer + Backdrop ========================================= */ /* ---- Variables ---- */ :root { /* Match your banner's rendered height (min-height + padding + border) */ --env-banner-height: 40px; /* Optional: If you have a fixed-top navbar, set its height */ --navbar-height: 56px; /* typical Bootstrap 5 fixed-top navbar */ } /* ---- Environment Banner ---- */ .env-banner { position: fixed; top: 0; left: 0; right: 0; z-index: 2000; display: flex; align-items: center; justify-content: center; min-height: 32px; padding: 6px 10px; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; font-size: 14px; font-weight: 600; color: #111; background: #fff; /* base, overridden by env themes */ border-bottom: 1px solid rgba(0,0,0,0.08); } /* Dot (optional) */ .env-banner .dot { width: 8px; height: 8px; border-radius: 50%; margin-right: 8px; } /* Environment themes */ .env-banner.dev { background: #eef2ff; } .env-banner.dev .dot { background: #6366f1; } .env-banner.test { background: #fffbe6; } .env-banner.test .dot { background: #f59e0b; } /* ---- Page content offset (apply to when banner exists) ---- */ .env-offset { padding-top: var(--env-banner-height); } /* If you also have a fixed-top navbar, add this class to as well */ .env-offset.with-fixed-navbar { padding-top: calc(var(--env-banner-height) + var(--navbar-height)); } /* Optional: if your banner is taller on very small screens */ @media (max-width: 360px) { :root { --env-banner-height: 44px; } } /* ========================================= Off-canvas Mobile Drawer ========================================= */ .mobile-drawer { position: fixed; top: 0; /* overridden when banner exists */ left: 0; width: 80vw; max-width: 320px; /* adjust as needed */ height: 100vh; /* overridden when banner exists */ background: #fff; box-shadow: 0 4px 24px rgba(0,0,0,0.18); overflow-y: auto; z-index: 2400; /* above backdrop (2300) and banner (2000) */ transform: translateX(-100%); /* closed state */ transition: transform 200ms ease; } /* Drawer open state (toggle via JS) */ .mobile-drawer.is-open { transform: translateX(0); } /* When banner exists, start drawer below it */ body.env-offset .mobile-drawer { top: var(--env-banner-height); height: calc(100vh - var(--env-banner-height)); } /* If you also have a fixed navbar, stack both offsets */ body.env-offset.with-fixed-navbar .mobile-drawer { top: calc(var(--env-banner-height) + var(--navbar-height)); height: calc(100vh - var(--env-banner-height) - var(--navbar-height)); } /* iOS notch safe-area padding at top (optional) */ @supports (padding-top: env(safe-area-inset-top)) { body.env-offset .mobile-drawer { padding-top: env(safe-area-inset-top); } body.env-offset.with-fixed-navbar .mobile-drawer { padding-top: env(safe-area-inset-top); } } /* Drawer link styling (optional but recommended) */ .mobile-drawer a { display: flex; align-items: center; gap: 12px; padding: 12px 16px; color: inherit; text-decoration: none; } .mobile-drawer a:hover { background: rgba(0,0,0,0.04); } .mobile-drawer .icon { width: 24px; height: 24px; } /* ========================================= Backdrop (covers the banner) ========================================= */ .drawer-backdrop { position: fixed; inset: 0; /* top/right/bottom/left: 0 */ background: rgba(0,0,0,0.35); opacity: 0; pointer-events: none; z-index: 2300; /* ABOVE the banner (2000) but BELOW the drawer (2400) */ transition: opacity 150ms ease; } /* Visible state (toggle via JS) */ .drawer-backdrop.is-visible { opacity: 1; pointer-events: auto; } /* IMPORTANT: Because backdrop should cover the banner, we DO NOT offset backdrop with body.env-offset. Therefore, no body.env-offset overrides for .drawer-backdrop are included. */