/* ============================================================================= Banner ============================================================================= */ .ha-banner { width: 100%; min-height: 80px; display: flex; align-items: center; justify-content: center; position: relative; z-index: 8; overflow: hidden; text-align: center; } .ha-banner--shortcode { display: block; } .ha-banner[data-link-url] { cursor: pointer; } .ha-banner__inner { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 0.5rem; padding: 0.5rem 1rem; } .ha-banner__content { flex: 1; min-width: 0; } .ha-banner__title { margin: 0; font-size: 1.5rem; color: inherit; } .ha-banner__message { font-size: 18px; } .ha-banner__message a { color: color-mix(in hsl, hsl(169.66, 56.863%, 10%), white 25%); text-decoration: underline; } .ha-banner__message a:hover { color: #0b2823; } .ha-banner__subtitle { margin: 0.25rem 0 0; font-size: 1rem; color: inherit; } .ha-banner__message p { margin: 0.25rem 0 0; color: inherit; } .ha-banner__cta { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; } .ha-banner__button { display: inline-flex; align-items: center; justify-content: center; padding: 6px 14px; font-size: 1rem; text-decoration: none; color: inherit; } /* ============================================================================= Banner ⇄ site header integration (Bricks / BricksExtras "X-Header") ============================================================================= */ /* * The banner (#ha-banner) is injected at the very top of in normal flow. * The site header (#brx-header) is a BricksExtras overlay header pinned at top:0, * so by default the banner and header occupy the same space. * * Goal: the header sits below the banner and scrolls away *with* it, then pins * to the top once the banner has fully scrolled past. * * To do that we take the resting (non-sticky) header out of its pinned * position:fixed and place it absolutely just below the banner, so it scrolls * with the document. announcements.js measures the banner into --ha-banner-height * and sets the header's data-x-scroll to that height, which tells BricksExtras to * defer .x-header_sticky-active until the banner is scrolled past. At that point * this rule stops matching and BricksExtras pins the header at top:0 as usual — * a seamless hand-off, since the absolute header reaches top:0 at the same scroll * position where the sticky state takes over. */ :root { --ha-banner-height: 0px; } body:has(#ha-banner) #brx-header:not(.x-header_sticky-active) { position: absolute; top: var(--ha-banner-height); } body:has(#ha-banner) #brx-header#brx-header { transition: none !important; } /* * Account for the WP admin bar (logged-in users). The header is absolutely * positioned relative to the initial containing block, which ignores the * html margin the admin bar adds, so we add the bar height explicitly. */ body.admin-bar:has(#ha-banner) #brx-header:not(.x-header_sticky-active) { top: calc(var(--wp-admin--admin-bar--height, 32px) + var(--ha-banner-height)); } /* ============================================================================= Popup ============================================================================= */ dialog.ha-popup { margin: auto; padding: 2rem; width: min(520px, calc(100vw - 2rem)); max-height: 80vh; overflow-y: auto; border: none; background: #fff; opacity: 1; transform: scale(1); transition: opacity 0.25s ease, transform 0.25s ease; } @starting-style { dialog.ha-popup[open] { opacity: 0; transform: scale(0.95); } } dialog.ha-popup::backdrop { background: rgba(0, 0, 0, 0.8); opacity: 1; transition: opacity 0.25s ease; } @starting-style { dialog.ha-popup[open]::backdrop { opacity: 0; } } dialog.ha-popup.is-closing { opacity: 0; transform: scale(0.95); } dialog.ha-popup.is-closing::backdrop { opacity: 0; } .ha-popup__close { position: absolute; top: 0.75rem; right: 0.75rem; background: transparent; border: 0; font-size: 1.5rem; line-height: 1; cursor: pointer; } .ha-popup__content { display: flex; flex-direction: column; gap: 1rem; } .ha-popup__title { margin: 0; } .ha-popup__subtitle { margin: 0; } .ha-popup__message p { margin: 0; font-size: 2rem; line-height: 2.5rem; font-family: "Mulish", sans-serif; } .ha-popup__media img { width: 100%; height: auto; } .ha-popup__actions { display: flex; flex-wrap: wrap; gap: 0.5rem; } .ha-popup__primary, .ha-popup__secondary { display: inline-flex; align-items: center; justify-content: center; padding: 10px 20px; text-decoration: none; cursor: pointer; } dialog.ha-popup[data-link-url] { cursor: pointer; } body.bap-popup-open { overflow: hidden; } /* ============================================================================= Popup — Split template ============================================================================= */ dialog.ha-popup--template-split { width: min(800px, calc(100vw - 1rem)); padding: 0; } dialog.ha-popup--template-split[open] .ha-popup__inner { display: flex; min-height: 408px; max-height: 90vh; overflow: hidden; } .ha-popup__panel { flex: 0 0 50%; overflow: hidden; } .ha-popup__panel--left { display: flex; flex-direction: column; justify-content: center; gap: 1.5rem; padding: 2.5rem; color: #fff; } .ha-popup__panel--left .ha-popup__title, .ha-popup__panel--left .ha-popup__subtitle, .ha-popup__panel--left .ha-popup__message { color: inherit; margin: 0; } .ha-popup__panel--right { position: relative; } .ha-popup__panel-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } /* pseudo elements for the close button */ dialog.ha-popup--template-split .ha-popup__close { position: absolute; top: 36px; right: 24px; color: #fff; z-index: 1; /* text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6); */ text-indent: -9999px; width: 24px; height: 24px; } dialog.ha-popup--template-split .ha-popup__close::before, dialog.ha-popup--template-split .ha-popup__close::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 2px; background-color: #fff; transform: rotate(45deg); } dialog.ha-popup--template-split .ha-popup__close::before { transform: rotate(-45deg); } dialog.ha-popup--template-split .ha-popup__close::after { transform: rotate(45deg); } dialog.ha-popup--template-split .ha-popup__primary { display: block; width: 100%; background-color: #009cde; color: #fff; text-align: center; padding: 1.25rem; border-radius: 4px; text-decoration: none; font-size: 1.5rem; line-height: 2rem; font-weight: 500; font-family: "Mulish", sans-serif; transition: background-color 0.25s ease; } dialog.ha-popup--template-split .ha-popup__primary:hover { background-color: #0080b3; } @media (max-width: 768px) { dialog.ha-popup--template-split { width: calc(100vw - 2rem); max-width: calc(100vw - 2rem); margin: auto; max-height: 90vh; } dialog.ha-popup--template-split[open] .ha-popup__inner { flex-direction: column; height: auto; max-height: 90vh; overflow-y: auto; } .ha-popup__panel { flex: none; width: 100%; } .ha-popup__panel--right { order: -1; height: 200px; } .ha-popup__panel-image { position: absolute; } }