/* * jp-alerts banner styling. * * Two concerns live here: * 1. Behavior — the alert is collapsed by default and revealed by JavaScript * after a delay, so it cannot flash before the timed reveal (its markup is * the first element inside ). * 2. Design — a self-contained match of the previous third-party bar: navy * background with a faint book pattern, centered gold Poppins text, and a * white close control. Kept in the plugin so the banner depends on no paid * service. The alert post's custom_css loads after this block and can still * override any of it. */ /* * Poppins is self-hosted (SIL Open Font License 1.1, see fonts/README.txt) so the * banner makes no third-party request. Only the latin and latin-ext subsets ship, * which cover every character the site's alert copy uses. */ @font-face { font-family: "Poppins"; font-style: normal; font-weight: 400; font-display: swap; src: url( "../fonts/poppins-400-latin.woff2" ) format( "woff2" ); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Poppins"; font-style: normal; font-weight: 400; font-display: swap; src: url( "../fonts/poppins-400-latin-ext.woff2" ) format( "woff2" ); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Poppins"; font-style: normal; font-weight: 600; font-display: swap; src: url( "../fonts/poppins-600-latin.woff2" ) format( "woff2" ); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Poppins"; font-style: normal; font-weight: 600; font-display: swap; src: url( "../fonts/poppins-600-latin-ext.woff2" ) format( "woff2" ); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } .pngx-alert { position: relative; max-height: 0; overflow: hidden; transition: max-height 0.4s ease-in-out; background-color: #061F3B; background-image: url( "../images/alert-bar-pattern.png" ); background-repeat: no-repeat; background-position: center center; background-size: cover; font-family: "Poppins", "Helvetica Neue", Arial, sans-serif; color: #D1C47E; text-align: center; } .pngx-alert.alert-closed { display: none; } /* Centered content column with room for the close control on the right. */ .pngx-alert .wrap { box-sizing: border-box; max-width: 1200px; margin: 0 auto; padding: 26px 60px; } /* The plugin markup wraps content in

; neutralize theme spacing. */ .pngx-alert figure, .pngx-alert figcaption { display: block; margin: 0; padding: 0; } .pngx-alert .pngx-alert-title, .pngx-alert .pngx-alert-content, .pngx-alert .pngx-alert-content p { margin: 0; color: #D1C47E; font-family: "Poppins", "Helvetica Neue", Arial, sans-serif; font-weight: 400; line-height: 1.35; } .pngx-alert .pngx-alert-title { margin-bottom: 6px; font-size: clamp( 18px, 2.4vw, 34px ); } .pngx-alert .pngx-alert-content, .pngx-alert .pngx-alert-content p { font-size: clamp( 16px, 2.2vw, 30px ); } /* * Desktop sizes are pinned rather than fluid so the copy lands at exactly 30px, * with the title one step above it to keep the hierarchy. */ @media ( min-width: 1024px ) { .pngx-alert .pngx-alert-title { font-size: 34px; } .pngx-alert .pngx-alert-content, .pngx-alert .pngx-alert-content p { font-size: 30px; } } /* * The theme styles every form/fieldset with a white background and flex layout. * Neutralize that inside the alert so message markup that happens to include a * form cannot punch a white block through the navy bar. */ .pngx-alert form, .pngx-alert fieldset { margin: 0; padding: 0; border: 0; background: transparent; display: block; justify-content: normal; } /* Keep any inline links (e.g. a verify link) legible against the navy background. */ .pngx-alert a { color: #FFFFFF; text-decoration: underline; } /* Featured image is optional; center it when present. */ .pngx-alert .pngx-alert-img { margin: 12px auto 0; } .pngx-alert .pngx-alert-img img { max-width: 100%; height: auto; } /* * Close control: a thin white x in the top-right corner, matching the prior bar. * It is a real