/* ========================================================================== maintenance-mode.css Maintenance banner (top of nav) + SweetAlert2 popup styling. Uses the site's Inter font family, #054f99 blue and #fedc00 yellow palette, and the standard max-width:1023px / min-width:1024px breakpoints. ========================================================================== */ /* ── CSS custom property ─────────────────────────────────────────────────── */ /* Actual banner pixel height is set by JS at runtime (handles font-scaling */ /* and text-wrapping on all viewports). Until JS runs the nav is unaffected. */ :root { --mb-h: 0px; } /* ══════════════════════════════════════════════════════════════════════════ 1. MAINTENANCE BANNER ══════════════════════════════════════════════════════════════════════════ */ #mb-banner { position: fixed; top: 0; left: 0; width: 100%; z-index: 2000; /* above #Nav (z-index:1999) */ background: #054f99; border-bottom: 3px solid #fedc00; box-sizing: border-box; } /* Container – mirrors site's w1542 max-width approach */ #mb-banner .mb-inner { display: flex; align-items: center; max-width: 1542px; margin: 0 auto; padding: 11px 35px; gap: 14px; box-sizing: border-box; } /* Yellow circular icon badge (matches announcement.css badge style) */ #mb-banner .mb-icon { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; min-width: 32px; min-height: 32px; background: #fedc00; border-radius: 50%; line-height: 0; } #mb-banner .mb-icon .img { width: 18px; height: 18px; display: block; } /* Text group */ #mb-banner .mb-content { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; flex: 1; min-width: 0; } #mb-banner .mb-title { font-family: 'Inter-Bold', Arial, sans-serif; font-size: 14px; color: #fff; white-space: nowrap; line-height: 1.3; } #mb-banner .mb-sep { color: #fedc00; font-size: 14px; flex-shrink: 0; } #mb-banner .mb-msg { font-family: 'Inter-Regular', Arial, sans-serif; font-size: 13px; color: rgba(255, 255, 255, 0.9); line-height: 1.4; min-width: 0; } /* Dismiss / close button */ #mb-banner .mb-close { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; min-width: 28px; background: transparent; border: 1.5px solid rgba(255, 255, 255, 0.45); border-radius: 50%; color: #fff; cursor: pointer; font-size: 16px; line-height: 1; padding: 0; margin-left: 8px; transition: background-color 0.2s, border-color 0.2s; } #mb-banner .mb-close:hover, #mb-banner .mb-close:focus { background-color: rgba(255, 255, 255, 0.18); border-color: rgba(255, 255, 255, 0.8); outline: none; } #mb-banner .mb-close .mb-close-icon { display: block; width: 12px; height: 12px; line-height: 0; } /* ══════════════════════════════════════════════════════════════════════════ 2. LAYOUT COMPENSATION Added via JS to once the banner height is measured. ══════════════════════════════════════════════════════════════════════════ */ /* ElvesLab layout – shift the fixed #Nav down below the banner */ body.maintenance-active #Master #Nav { top: var(--mb-h) !important; } /* Push #Master content down by banner height so existing page padding-top values (110–128 px) continue to clear the (now-shifted) nav correctly. */ body.maintenance-active #Master { padding-top: var(--mb-h) !important; } /* Standard _Layout.cshtml – .sticky-bar.stick has z-index:999 */ body.maintenance-active .header.sticky-bar.stick { top: var(--mb-h) !important; } /* ══════════════════════════════════════════════════════════════════════════ 3. RESPONSIVE – MOBILE (max-width: 1023px) Follows site convention: vw-based sizing matching master.v1.0.min.css ══════════════════════════════════════════════════════════════════════════ */ @media screen and (max-width: 1023px) { #mb-banner .mb-inner { padding: 2.558vw 8.140vw; /* 11px / 35px at 430px */ gap: 3.256vw; /* 14px at 430px */ max-width: 358.605vw; } #mb-banner .mb-icon { width: 7.442vw; /* 32px at 430px */ height: 7.442vw; min-width: 28px; min-height: 28px; } #mb-banner .mb-icon .img { width: 4.186vw; /* 18px at 430px */ height: 4.186vw; } /* Close button */ #mb-banner .mb-close { width: 6.512vw; /* 28px at 430px */ height: 6.512vw; min-width: 24px; font-size: 3.721vw; /* 16px at 430px */ margin-left: 1.860vw; /* 8px at 430px */ } #mb-banner .mb-close .mb-close-icon { width: 2.791vw; /* 12px at 430px */ height: 2.791vw; } /* Stack title + message vertically on small screens */ #mb-banner .mb-content { flex-direction: column; align-items: flex-start; gap: 0.930vw 2.326vw; /* 4px / 10px at 430px */ } #mb-banner .mb-title { font-size: 3.256vw; /* 14px at 430px */ } #mb-banner .mb-sep { display: none; /* no separator in stacked layout */ } #mb-banner .mb-msg { font-size: 3.023vw; /* 13px at 430px */ } } /* ══════════════════════════════════════════════════════════════════════════ 4. RESPONSIVE – DESKTOP (min-width: 1024px) vw-based sizing matching master.v1.0.min.css desktop scale ══════════════════════════════════════════════════════════════════════════ */ @media screen and (min-width: 1024px) { #mb-banner .mb-inner { padding: 0.688vw 2.188vw; /* 11px / 35px at 1600px */ gap: 0.875vw; /* 14px at 1600px */ max-width: 96.375vw; } #mb-banner .mb-icon { width: 2vw; /* 32px at 1600px */ height: 2vw; min-width: 26px; min-height: 26px; } #mb-banner .mb-icon .img { width: 1.125vw; /* 18px at 1600px */ height: 1.125vw; } /* Close button */ #mb-banner .mb-close { width: 1.75vw; /* 28px at 1600px */ height: 1.75vw; min-width: 22px; font-size: 1vw; /* 16px at 1600px */ margin-left: 0.5vw; /* 8px at 1600px */ } #mb-banner .mb-close .mb-close-icon { width: 0.75vw; /* 12px at 1600px */ height: 0.75vw; } #mb-banner .mb-title { font-size: 0.875vw; /* 14px at 1600px */ } #mb-banner .mb-sep { font-size: 0.875vw; /* 14px at 1600px */ } #mb-banner .mb-msg { font-size: 0.813vw; /* 13px at 1600px */ } } /* ══════════════════════════════════════════════════════════════════════════ 5. MAINTENANCE POPUP (SweetAlert2 shell + inner template) Matches site card styling: 22px border-radius, Inter fonts, brand palette. ══════════════════════════════════════════════════════════════════════════ */ /* Override SweetAlert2 popup shape */ .swal2-popup.mb-popup { border-radius: 22px !important; padding: 40px 32px 32px !important; font-family: 'Inter-Regular', Arial, sans-serif !important; box-shadow: 0 8px 32px rgba(5, 79, 153, 0.14) !important; max-width: 440px !important; width: 90vw !important; } /* Popup body template wrapper */ .mb-popup-body { text-align: center; } /* Yellow circular icon (matches site's badge / announce style) */ .mb-popup-icon { width: 68px; height: 68px; background: #fedc00; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 18px; line-height: 0; } .mb-popup-icon .img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; } .mb-popup-title { font-family: 'Inter-Bold', Arial, sans-serif; font-size: 20px; color: #054f99; margin: 0 0 10px; line-height: 1.3; } .mb-popup-msg { font-family: 'Inter-Regular', Arial, sans-serif; font-size: 14px; color: #454545; line-height: 1.6; margin: 0; } /* Confirm button – pill shape, site blue, Inter-SemiBold */ .swal2-popup.mb-popup .swal2-confirm { font-family: 'Inter-SemiBold', Arial, sans-serif !important; font-size: 14px !important; background-color: #0169af !important; border-radius: 24px !important; padding: 12px 36px !important; border: none !important; transition: background-color 0.2s, box-shadow 0.2s !important; } .swal2-popup.mb-popup .swal2-confirm:hover { background-color: #054f99 !important; box-shadow: 0 6px 18px rgba(5, 79, 153, 0.45) !important; } @media screen and (min-width: 1024px) { .swal2-popup.mb-popup { border-radius: 1.375vw !important; padding: 2.5vw 2vw 2vw !important; font-family: 'Inter-Regular', Arial, sans-serif !important; box-shadow: 0 0.5vw 2vw rgba(5, 79, 153, 0.14) !important; max-width: 27.5vw !important; width: 90vw !important; } .mb-popup-title { font-size: 1.25vw; margin: 0 0 0.625vw; } .mb-popup-msg { font-size: 0.875vw; } .mb-popup-icon { width: 4.25vw; height: 4.25vw; margin: 0 auto 1.125vw; } .swal2-popup.mb-popup .swal2-confirm { font-size: 0.875vw !important; border-radius: 1.5vw !important; padding: 0.75vw 2.25vw !important; } } /* Mobile popup sizing */ @media screen and (max-width: 1023px) { .swal2-popup.mb-popup { padding: 9.302vw 7.442vw 7.442vw !important; /* ~40px / 32px at 430px */ border-radius: 5.116vw !important; /* ~22px at 430px */ max-width: 88vw !important; width: 88vw !important; } .mb-popup-icon { width: 15.814vw; /* 68px at 430px */ height: 15.814vw; margin-bottom: 4.186vw; /* 18px at 430px */ } .mb-popup-icon .img { width: 100%; height: 100%; } .mb-popup-title { font-size: 4.651vw; /* 20px at 430px */ } .mb-popup-msg { font-size: 3.256vw; /* 14px at 430px */ } .swal2-popup.mb-popup .swal2-confirm { font-size: 3.256vw !important; /* ~14px at 430px */ padding: 2.791vw 8.372vw !important; /* ~12px / 36px at 430px */ border-radius: 5.581vw !important; /* ~24px at 430px */ margin-top: 5.581vw !important; /* ~24px at 430px */ } } /* ══════════════════════════════════════════════════════════════════════════ 3. FULL-PAGE 503 MAINTENANCE PAGE (Views/Shared/Maintenance.cshtml) Served standalone by MaintenanceModeMiddleware. EVERY rule is scoped under #MaintenancePage — this stylesheet is loaded on every site page, so bare element/.card/.btn selectors here would clobber the live site. The wrapper id exists ONLY on the maintenance view. ══════════════════════════════════════════════════════════════════════════ */ #MaintenancePage, #MaintenancePage *, #MaintenancePage *::before, #MaintenancePage *::after { box-sizing: border-box; } #MaintenancePage { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color: #454545; background: linear-gradient(165deg, #eef5fc 0%, #f7fbff 55%, #ffffff 100%); } #MaintenancePage .card { width: 100%; max-width: 440px; text-align: center; background: #fff; border-radius: 22px; padding: 40px 32px 28px; box-shadow: 0 8px 32px rgba(5, 79, 153, .14); } #MaintenancePage .logo { height: 42px; width: auto; margin: 0 auto 22px; display: block; } #MaintenancePage .icon { width: 68px; height: 68px; background: #fedc00; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 18px; line-height: 0; } #MaintenancePage .icon img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; } #MaintenancePage h1 { font-size: 20px; line-height: 1.3; margin: 0 0 10px; color: #054f99; } #MaintenancePage .msg { font-size: 14px; line-height: 1.6; margin: 0 auto; color: #454545; max-width: 38ch; } #MaintenancePage .actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 24px; } #MaintenancePage .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 28px; border-radius: 24px; font-size: 14px; font-weight: 600; text-decoration: none; cursor: pointer; border: 1.5px solid transparent; transition: background .2s, border-color .2s, color .2s, box-shadow .2s; } #MaintenancePage .btn svg { width: 16px; height: 16px; } #MaintenancePage .btn-primary { background: #0169af; color: #fff; } #MaintenancePage .btn-primary:hover { background: #054f99; box-shadow: 0 6px 18px rgba(5, 79, 153, .45); } #MaintenancePage .btn-secondary { background: #fff; color: #0169af; border-color: #cfe0ef; } #MaintenancePage .btn-secondary:hover { border-color: #0169af; background: #f3f8fd; } #MaintenancePage .copyright { margin-top: 28px; padding-top: 18px; border-top: 1px solid #eef2f6; font-size: 12px; color: #9aa6b2; } @media (max-width: 420px) { #MaintenancePage .card { padding: 32px 22px 24px; } #MaintenancePage .btn { width: 100%; } }