.announcement-popup-overlay { position: fixed; inset: 0; background-color: rgba(15, 23, 42, 0.65); display: flex; align-items: center; justify-content: center; padding: 1rem; z-index: 1080; opacity: 0; transition: opacity 0.2s ease-out; } .announcement-popup-overlay.is-visible { opacity: 1; } .announcement-popup-overlay[hidden] { display: none !important; } body.announcement-popup-open { overflow: hidden; } .announcement-popup { background-color: #ffffff; border-radius: 12px; max-width: 520px; width: 100%; max-height: calc(100vh - 2rem); overflow-y: auto; box-shadow: 0 30px 60px rgba(15, 23, 42, 0.35); position: relative; animation: announcement-popup-pop 0.25s ease-out; } @keyframes announcement-popup-pop { from { transform: translateY(20px) scale(0.96); opacity: 0; } to { transform: translateY(0) scale(1); opacity: 1; } } .announcement-popup-close { position: absolute; top: 0.5rem; right: 0.5rem; background: rgba(15, 23, 42, 0.55); color: #ffffff; border: none; border-radius: 999px; width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; font-size: 1rem; z-index: 2; transition: background-color 0.15s ease-out; } .announcement-popup-close:hover, .announcement-popup-close:focus { background-color: rgba(15, 23, 42, 0.85); outline: none; } .announcement-popup-image { display: block; width: 100%; max-height: 260px; object-fit: cover; border-top-left-radius: 12px; border-top-right-radius: 12px; } .announcement-popup-body { padding: 1.5rem 1.75rem 1.75rem; } .announcement-popup-body h2 { margin-top: 0; margin-bottom: 0.75rem; font-size: 1.4rem; } .announcement-popup-content { color: #334155; line-height: 1.5; margin-bottom: 1rem; } .announcement-popup-content :last-child { margin-bottom: 0; } .announcement-popup-action { display: inline-block; margin-top: 0.5rem; } @media (max-width: 480px) { .announcement-popup-body { padding: 1.25rem; } .announcement-popup-body h2 { font-size: 1.2rem; } } /* Parish patron feast: when the feast theme is active, the standard popup takes on the martyr palette (oxblood + gold) with a palm-and-crown ribbon. Theme classes and --theme-icon-parish-patron / --gold come from site.css on , so they resolve here too. Reverts to the white card automatically when the theme changes. */ body.theme-parish-patron .announcement-popup-overlay { background-color: rgba(42, 6, 12, 0.72); } body.theme-parish-patron .announcement-popup { border: 1px solid rgba(232, 181, 60, 0.55); box-shadow: 0 30px 70px rgba(42, 6, 12, 0.5); } body.theme-parish-patron .announcement-popup-close { background: rgba(42, 6, 12, 0.6); } body.theme-parish-patron .announcement-popup-close:hover, body.theme-parish-patron .announcement-popup-close:focus { background-color: rgba(42, 6, 12, 0.9); } body.theme-parish-patron .announcement-popup-body::before { content: ""; display: block; height: 60px; margin-bottom: 1.25rem; border-radius: 10px; background: var(--theme-icon-parish-patron) left 18px center / 40px no-repeat, linear-gradient(135deg, #2a060c 0%, #6b1420 55%, #c9791f 130%); box-shadow: inset 0 0 0 1px rgba(232, 181, 60, 0.5); } body.theme-parish-patron .announcement-popup-body h2 { font-family: var(--font-heading, Georgia, serif); color: #5c1019; padding-bottom: 0.6rem; border-bottom: 2px solid rgba(232, 181, 60, 0.55); }