/* * maintenance-banner.css * * Standalone styling for the site-wide "Scheduled maintenance" notice * (markup: Pages/Shared/_MaintenanceBanner.cshtml, component: * wwwroot/js/maintenance-banner.js). * * The banner renders from THREE layouts with very different visual * vocabularies: * - _Layout.cshtml (admin, DaisyUI semantic colors) * - _CoverLayout.cshtml (public auth pages, NAStage tokens, dark hero) * - _NotableLayout.cshtml (public catalog, NAStage tokens, sticky navbar) * * Rather than thread three sets of utility classes through the markup, this * file defines its OWN token layer (`--mb-*`) that resolves against the * `data-theme` attribute on . All three layouts already set that * attribute, so the banner picks up light/dark automatically and the result * is consistent across layouts. * * The banner is a *forward-looking* notice — it shows in the [start-24h, start) * window and hides once maintenance begins — so the tone is "heads up, scheduled" * rather than "alert, broken now". Visual language reflects that: amber accent * (informational warning), inset card with rounded corners (sits in the page * flow rather than ribboning across it), generous breathing room. */ /* ── Token layer ───────────────────────────────────────────────────────── Defaults assume light theme; the [data-theme="dark"] override below swaps to the dark palette. Both reuse the NAStage --amber / --text tokens where available (notable.out.css) and fall back to literal values so the banner still renders correctly when only site.out.css is loaded (admin). */ :root { --mb-bg: #FEF8EC; --mb-bg-strong: #FBEFD2; --mb-border: rgba(181, 139, 27, 0.28); --mb-icon: #B58B1B; --mb-icon-bg: rgba(181, 139, 27, 0.12); --mb-title: #1A1A1D; --mb-body: #5C5C66; --mb-emphasis: #1A1A1D; --mb-dismiss: #6B6B72; --mb-dismiss-hover-bg: rgba(0, 0, 0, 0.05); --mb-shadow: 0 1px 2px rgba(0, 0, 0, 0.04); } [data-theme="dark"] { --mb-bg: rgba(212, 165, 40, 0.08); --mb-bg-strong: rgba(212, 165, 40, 0.14); --mb-border: rgba(212, 165, 40, 0.28); --mb-icon: #D4A528; --mb-icon-bg: rgba(212, 165, 40, 0.16); --mb-title: #F0F0F3; --mb-body: #A0A0AB; --mb-emphasis: #F0F0F3; --mb-dismiss: #A0A0AB; --mb-dismiss-hover-bg: rgba(255, 255, 255, 0.06); --mb-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); } /* ── Outer wrapper ─────────────────────────────────────────────────────── Sits in the page flow (no fixed/sticky) — gets symmetric vertical breathing room from its own padding so it looks intentional in any layout, including ones (like _NotableLayout) where
has no padding and the navbar above has none either. */ .mb-wrap { padding: 18px clamp(16px, 4vw, 40px) 18px; font-family: 'Inter', -apple-system, system-ui, sans-serif; } /* ── Card ─────────────────────────────────────────────────────────────── */ .mb-card { max-width: 1440px; margin: 0 auto; display: flex; align-items: center; gap: 12px; padding: 9px 12px; background: var(--mb-bg); border: 1px solid var(--mb-border); border-radius: 10px; box-shadow: var(--mb-shadow); } /* ── Icon disc ────────────────────────────────────────────────────────── */ .mb-icon { flex-shrink: 0; width: 28px; height: 28px; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center; background: var(--mb-icon-bg); color: var(--mb-icon); } .mb-icon svg { width: 16px; height: 16px; } /* ── Copy block ──────────────────────────────────────────────────────── */ .mb-copy { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; font-size: 13px; line-height: 1.4; color: var(--mb-body); } .mb-title { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--mb-icon); line-height: 1.4; } .mb-body { color: var(--mb-body); } .mb-emphasis { color: var(--mb-emphasis); font-weight: 600; white-space: nowrap; } .mb-msg { color: var(--mb-emphasis); } /* ── Dismiss button ──────────────────────────────────────────────────── */ .mb-dismiss { flex-shrink: 0; background: transparent; border: none; width: 26px; height: 26px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; color: var(--mb-dismiss); transition: background 0.15s ease, color 0.15s ease, transform 0.08s ease; -webkit-tap-highlight-color: transparent; touch-action: manipulation; font-family: inherit; } @media (hover: hover) { .mb-dismiss:hover { background: var(--mb-dismiss-hover-bg); color: var(--mb-emphasis); } } .mb-dismiss:active { transform: scale(0.94); } .mb-dismiss svg { width: 16px; height: 16px; } /* ── Mobile ──────────────────────────────────────────────────────────── */ @media (max-width: 600px) { .mb-wrap { padding: 12px 12px 12px; } .mb-card { align-items: flex-start; gap: 10px; padding: 8px 10px; border-radius: 8px; } .mb-icon { width: 24px; height: 24px; margin-top: 1px; } .mb-icon svg { width: 14px; height: 14px; } .mb-copy { font-size: 12.5px; } .mb-emphasis { white-space: normal; } .mb-dismiss { width: 24px; height: 24px; margin-top: 1px; } }