/* style-webinar-banner.css * * Sitewide webinar banner. Printed by inc/webinar-banner.php as the first * element inside , above #jd-nav-2026. * * The banner is static, not fixed or sticky. #jd-nav-2026 is sticky at top: 0, * so a sticky banner would need the nav's offset to track its height, which * breaks the moment the text wraps. Instead the banner scrolls away and the * nav takes the top of the viewport, which is also what users expect from an * announcement bar. */ .jd-webinar-banner { position: relative; z-index: 1003; /* One above #jd-nav-2026 so the close button is never covered. */ background: #222222; color: #ffffff; font-family: "Be Vietnam Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; line-height: 1.35; } .jd-webinar-banner__link { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px 14px; max-width: 1600px; margin: 0 auto; padding: 11px 56px 11px 25px; color: inherit; text-decoration: none; transition: color .2s ease-in-out; } .jd-webinar-banner__flag { flex: none; font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #222222; background: #6fff2c; border-radius: 3px; padding: 3px 8px; } .jd-webinar-banner__title { font-weight: 600; } .jd-webinar-banner__when { color: #b9bfbd; font-weight: 300; } .jd-webinar-banner__cta { font-weight: 600; color: #6fff2c; white-space: nowrap; } .jd-webinar-banner__link:hover .jd-webinar-banner__cta, .jd-webinar-banner__link:focus-visible .jd-webinar-banner__cta { color: #14eeee; } .jd-webinar-banner__close { position: absolute; top: 50%; right: 14px; transform: translateY(-50%); width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #9aa3a0; font-size: 20px; line-height: 1; cursor: pointer; transition: color .2s ease-in-out, background-color .2s ease-in-out; } .jd-webinar-banner__close:hover, .jd-webinar-banner__close:focus-visible { color: #ffffff; background: rgba(255, 255, 255, .12); } .jd-webinar-banner :focus-visible { outline: 2px solid #14eeee; outline-offset: 2px; } /* Below 900 the single line runs out of room. Drop the flag first: "Live webinar" is the least load-bearing part once the title and date are read. */ @media (max-width: 900px) { .jd-webinar-banner { font-size: 13px; } .jd-webinar-banner__flag { display: none; } .jd-webinar-banner__link { gap: 4px 10px; padding: 10px 48px 10px 18px; } } @media (max-width: 600px) { .jd-webinar-banner__link { flex-direction: column; align-items: flex-start; text-align: left; gap: 2px; padding: 10px 46px 10px 18px; } .jd-webinar-banner__when { font-size: 12px; } } @media (prefers-reduced-motion: reduce) { .jd-webinar-banner__link, .jd-webinar-banner__close { transition: none; } }