/* * Universal Notice banner. * * Layout/positioning rules are anchored on the #un-notice id selector and use * !important so a hostile theme can't override the overlay/dialog placement. * Colors are driven by CSS custom properties injected inline from PHP. */ #un-notice.un-notice { position: fixed !important; inset: 0 !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; width: 100vw !important; height: 100vh !important; height: 100dvh !important; z-index: 2147483600 !important; display: none !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; font-family: inherit; font-size: 16px; line-height: 1.5; color: var(--un-fg, #1f2937); } #un-notice.un-notice.un-visible { display: flex !important; align-items: center; justify-content: center; } #un-notice.un-notice *, #un-notice.un-notice *::before, #un-notice.un-notice *::after { box-sizing: border-box; } .un-notice__overlay { position: absolute !important; inset: 0 !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; background: var(--un-overlay, rgba(0, 0, 0, .7)); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); animation: un-fade-in .25s ease-out; } .un-notice__dialog { position: relative; z-index: 1; width: min(560px, calc(100vw - 32px)); max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); overflow: auto; background: var(--un-bg, #ffffff); color: var(--un-fg, #1f2937); border-radius: 12px; box-shadow: 0 24px 64px rgba(0, 0, 0, .35); padding: 32px 28px 26px; animation: un-pop-in .3s cubic-bezier(.2, .9, .3, 1.1); } .un-notice__title { margin: 0 0 12px; font-size: 22px; font-weight: 700; line-height: 1.25; color: var(--un-accent, #1e3a8a); } .un-notice__body { margin: 0 0 22px; font-size: 15px; } .un-notice__body > :first-child { margin-top: 0; } .un-notice__body > :last-child { margin-bottom: 0; } .un-notice__body p { margin: 0 0 10px; } .un-notice__body a { color: var(--un-accent, #1e3a8a); text-decoration: underline; } /* ----------- Photo mode ----------- */ /* The dialog sizes itself to the image's natural width (--un-img-w, injected inline from PHP), capped to the viewport. On desktop with room to spare the image shows at its exact size; on mobile / narrow viewports it scales down proportionally. The image fills the dialog edge-to-edge with the button beneath it. */ .un-notice__dialog.un-notice--image { width: min(var(--un-img-w, 560px), calc(100vw - 32px)); max-width: calc(100vw - 32px); padding: 0; } .un-notice--image .un-notice__image { display: block; width: 100%; height: auto; margin: 0; border-radius: 12px 12px 0 0; } .un-notice--image .un-notice__actions { padding: 12px 16px; } .un-notice__actions { display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; } .un-notice__btn { appearance: none; -webkit-appearance: none; border: 1px solid var(--un-accent, #1e3a8a); background: var(--un-accent, #1e3a8a); color: #ffffff; border-radius: 8px; padding: 12px 22px; font-size: 15px; font-weight: 600; font-family: inherit; line-height: 1.2; cursor: pointer; transition: filter .15s ease, transform .05s ease; min-width: 140px; } .un-notice__btn:hover, .un-notice__btn:focus { filter: brightness(.92); outline: none; } .un-notice__btn:active { transform: translateY(1px); } @keyframes un-fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes un-pop-in { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } } /* When the notice is visible we also prevent background scrolling so the blocking overlay actually blocks. The class is added to by JS. */ html.un-locked, html.un-locked body { overflow: hidden !important; } /* ----------- Responsive ----------- */ @media (max-width: 520px) { .un-notice__dialog { width: calc(100vw - 16px); padding: 24px 18px 20px; border-radius: 10px; } .un-notice__dialog.un-notice--image { width: min(var(--un-img-w, 560px), calc(100vw - 16px)); padding: 0; } .un-notice__title { font-size: 19px; } .un-notice__body { font-size: 14.5px; } .un-notice__btn { width: 100%; min-width: 0; } .un-notice__actions { justify-content: stretch; } } @media (prefers-reduced-motion: reduce) { .un-notice__overlay, .un-notice__dialog { animation: none !important; } }