/* ========================================================================== Periodic Inspection Notice — landing modal Self-contained component. All selectors are prefixed with `bl-notice` so nothing here can collide with Bootstrap or the site styles. Rendered by assets/js/periodic-notice.js ========================================================================== */ /* Scroll lock applied to while the notice is open */ .bl-notice-lock, .bl-notice-lock body { overflow: hidden !important; } .bl-notice-overlay { position: fixed; inset: 0; z-index: 20000; /* above the WhatsApp widget (9999) and the fixed header */ display: flex; align-items: center; justify-content: center; padding: 24px 16px; padding: max(24px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); background: rgba(15, 23, 42, 0.65); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); opacity: 0; transition: opacity 0.25s ease; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; } .bl-notice-overlay.is-visible { opacity: 1; } .bl-notice-dialog { position: relative; width: 100%; max-width: 560px; margin: auto; background: #ffffff; border-radius: 16px; box-shadow: 0 24px 64px rgba(15, 23, 42, 0.35); font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; text-align: left; overflow: hidden; transform: translateY(16px) scale(0.98); transition: transform 0.25s ease; /* mobile-ux-fix.js disables selection on ; keep the notice readable */ -webkit-user-select: text; user-select: text; } .bl-notice-overlay.is-visible .bl-notice-dialog { transform: translateY(0) scale(1); } /* The dialog receives programmatic focus on open; it must not paint a ring. */ .bl-notice-dialog:focus { outline: none; } /* --- Header ------------------------------------------------------------- */ .bl-notice-header { display: flex; align-items: center; gap: 12px; padding: 20px 56px 20px 24px; background: #DC2626; color: #ffffff; } .bl-notice-icon { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: rgba(255, 255, 255, 0.18); } .bl-notice-icon svg { width: 22px; height: 22px; display: block; fill: #ffffff; } .bl-notice-title { margin: 0; font-size: 1.0625rem; font-weight: 700; line-height: 1.35; letter-spacing: 0.02em; color: #ffffff; } .bl-notice-close { position: absolute; top: 14px; right: 14px; display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.15); color: #ffffff; font-size: 20px; line-height: 1; cursor: pointer; transition: background-color 0.2s ease; } .bl-notice-close:hover, .bl-notice-close:focus-visible { background: rgba(255, 255, 255, 0.32); } .bl-notice-close svg { width: 16px; height: 16px; display: block; fill: currentColor; } /* --- Body -------------------------------------------------------------- */ .bl-notice-body { padding: 24px; max-height: min(60vh, 520px); overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; } .bl-notice-body p { margin: 0 0 14px; font-size: 0.9375rem; line-height: 1.7; color: #334155; } .bl-notice-body p:last-child { margin-bottom: 0; } .bl-notice-body strong { color: #0f172a; font-weight: 600; } /* --- Footer ------------------------------------------------------------ */ .bl-notice-footer { padding: 0 24px 24px; } .bl-notice-btn { display: block; width: 100%; padding: 14px 20px; border: 0; border-radius: 10px; background: #DC2626; color: #ffffff; font-family: inherit; font-size: 0.9375rem; font-weight: 600; line-height: 1.2; cursor: pointer; transition: background-color 0.2s ease, transform 0.15s ease; } .bl-notice-btn:hover { background: #B91C1C; } .bl-notice-btn:active { transform: translateY(1px); } .bl-notice-close:focus-visible, .bl-notice-btn:focus-visible { outline: 3px solid rgba(220, 38, 38, 0.45); outline-offset: 2px; } /* --- Tablet ------------------------------------------------------------ */ @media (max-width: 991.98px) { .bl-notice-dialog { max-width: 520px; } } /* --- Mobile ------------------------------------------------------------ */ @media (max-width: 575.98px) { .bl-notice-overlay { align-items: flex-end; padding: 12px 12px max(12px, env(safe-area-inset-bottom)); } .bl-notice-dialog { max-width: 100%; border-radius: 14px; max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px); display: flex; flex-direction: column; } .bl-notice-header { padding: 16px 52px 16px 18px; gap: 10px; } .bl-notice-icon { width: 34px; height: 34px; } .bl-notice-icon svg { width: 19px; height: 19px; } .bl-notice-title { font-size: 0.9375rem; } .bl-notice-close { top: 11px; right: 11px; width: 32px; height: 32px; } .bl-notice-body { flex: 1 1 auto; padding: 18px; max-height: none; } .bl-notice-body p { font-size: 0.875rem; line-height: 1.65; margin-bottom: 12px; } .bl-notice-footer { flex: 0 0 auto; padding: 0 18px 18px; } } /* Very short viewports (landscape phones) */ @media (max-height: 480px) { .bl-notice-overlay { align-items: flex-start; } .bl-notice-body { max-height: none; } } /* --- Motion / contrast preferences ------------------------------------- */ @media (prefers-reduced-motion: reduce) { .bl-notice-overlay, .bl-notice-dialog, .bl-notice-btn, .bl-notice-close { transition: none; } .bl-notice-dialog { transform: none; } } @media print { .bl-notice-overlay { display: none !important; } } /* ========================================================================== Periodic Inspection Notice — permanent band above the footer Static markup lives in each page, immediately before