/* ============================================================================ maintenance.css — look of the site lock / DEV mode (see js/maintenance.js). Hooks on : .site-locked — a regular visitor is locked out (home page). .site-locked-admin — DEV mode is on but an admin is viewing (site stays usable; only the yellow padlock next to the gear lights up). ========================================================================== */ /* Opaque cover dropped on a locked subpage while we decide redirect vs reveal. */ #maint-cover{ position: fixed; inset: 0; background: #000; z-index: 99999; } /* ---- HOME, LOCKED (regular visitor) -------------------------------------- */ /* The whole world goes away — menu, stream AND chat. Only the account/login button stays (so people can still sign in) and the centred notice shows. */ .site-locked .top-hud, .site-locked .menu-burger, .site-locked .section-nav, .site-locked .menu-backdrop, .site-locked #view-world{ display: none !important; } /* The centred "under maintenance" notice — full screen, nothing else. */ .maint-note{ display: none; } .site-locked .maint-note{ display: flex; position: fixed; inset: 0; z-index: 4000; /* above the page, below the account button */ align-items: center; justify-content: center; padding: 2rem 1.2rem; text-align: center; background: #000; } .maint-note-title{ font-size: clamp(1.6rem, 5vw, 3rem); letter-spacing: .04em; font-weight: 800; color: #fff; } /* Keep the login button reachable above the notice. */ .site-locked .account-hud{ z-index: 4001; } /* ---- HOME, DEV MODE ON (admin viewing) ----------------------------------- */ /* No banner. The only cue is the yellow padlock button next to the gear (#dev-lock-btn in index.html), revealed here. */ .dev-lock-btn{ display: none; } .site-locked-admin .dev-lock-btn{ display: inline-flex; } .dev-lock-btn{ align-items: center; justify-content: center; width: 34px; height: 34px; border: none; background: none; color: #f5c518; /* the ROOT PANEL / DEV yellow */ cursor: default; } .dev-lock-btn svg{ width: 20px; height: 20px; }