/** * Regional site suggestion banner and region switcher. * * The banner is injected at the top of by js/pz_global.js when the * visitor's IP suggests a different regional site from the one the URL serves. * * Styling deliberately mirrors pztheme's own conventions rather than inventing * a look: .pz-button is 16px/bold with a 40px pill radius on --core-color, and * .pz-button-transparent is the same size with a 2px outline. Reusing those * makes the banner read as part of the site instead of a bolted-on notice. * * Brand custom properties come from the active theme * (pztheme/css/global/colorPallete.css). Every var() carries a literal * fallback because this module renders under seventeen themes, and the ones * that never defined the palette would otherwise get unstyled controls. * * The band is --accent-1 rather than the lighter --accent-2: the site header * is itself --accent-2, so a lavender banner would merge into it instead of * announcing itself. * * Sizes are absolute (px) rather than em or %, because body is set to 87.5% * (14px) — sizing relative to that is what made the first version feel too * small. The theme states its own button size in px for the same reason. */ .pz-region-banner { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1rem 1.5rem; padding: 1.125rem 1.5rem; background: var(--accent-1, #37155C); border-bottom: 3px solid var(--core-color, #8F27F6); color: #fff; /* Inherit the theme's face (proxima-nova) rather than naming it, so the banner follows whichever theme is active. */ font-family: inherit; font-size: 21px; line-height: 1.4; } .pz-region-banner__message { flex: 0 1 auto; margin: 0; font-weight: 600; } /* Buttons carry the theme's pill geometry. font: inherit first, because a