/* Practitioner training promo — popup, desktop top bar, phone bottom bar. Markup in inc/hwg-practitioner-promo.php. The classes hwg-promo / hwg-promo--eb / hwg-promo--regular / hwg-abar-off are set by the inline boot script in . */ .hwg-pp[hidden], .hwg-pp [hidden] { display: none !important; } /* Both versions ship in the HTML; the visitor's clock picks one. */ .hwg-v { display: none; } html.hwg-promo--eb .hwg-v--eb, html.hwg-promo--regular .hwg-v--regular { display: inline; } /* ---------------------------------------------------------------- popup */ .hwg-pp { position: fixed; inset: 0; z-index: 1200; display: flex; align-items: center; justify-content: center; padding: 24px; font-family: 'Poppins', sans-serif; } .hwg-pp__backdrop { position: absolute; inset: 0; background: rgba(33, 58, 45, 0.6); opacity: 0; transition: opacity 0.3s ease; } .hwg-pp__dialog { position: relative; display: grid; grid-template-columns: 1fr; width: min(100%, 540px); max-height: calc(100vh - 48px); overflow: auto; background: #fffaf0; color: #213a2d; border-radius: 20px; box-shadow: 0 30px 80px rgba(20, 35, 27, 0.35); opacity: 0; transform: translateY(16px) scale(0.98); transition: opacity 0.3s ease, transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1); outline: none; } .hwg-pp__dialog--image { width: min(100%, 860px); grid-template-columns: 38% 1fr; } .hwg-pp *, .hwg-pp *::before, .hwg-pp *::after { box-sizing: border-box; } /* The dialog takes focus on open; the theme's dotted :focus outline would ring the whole card. */ .hwg-pp .hwg-pp__dialog:focus, .hwg-pp .hwg-pp__dialog:focus-visible { outline: none; } .hwg-pp.is-open .hwg-pp__backdrop { opacity: 1; } .hwg-pp.is-open .hwg-pp__dialog { opacity: 1; transform: none; } .hwg-pp__media { position: relative; min-height: 440px; background: #e6caba; } .hwg-pp .hwg-pp__img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 20%; } .hwg-pp__content { align-self: center; padding: 56px 52px 48px; } .hwg-pp .hwg-pp__eyebrow { margin: 0 0 16px; font: 600 13px/1.4 'Poppins', sans-serif; letter-spacing: 0.16em; text-transform: uppercase; color: #a65b40; } .hwg-pp .hwg-pp__eyebrow:empty { display: none; } .hwg-pp .hwg-pp__title { margin: 0 0 18px; font-family: Restora, Georgia, serif; font-weight: 400; font-size: 42px; line-height: 1.08; letter-spacing: 0; text-transform: none; color: #213a2d; } .hwg-pp__count { color: #be7154; white-space: nowrap; } .hwg-pp .hwg-pp__body { margin: 0 0 30px; font-size: 16px; line-height: 1.65; color: rgba(33, 58, 45, 0.85); } .hwg-pp .hwg-pp__body strong, .hwg-pp .hwg-pp__body b { font-weight: 600; color: #213a2d; } .hwg-pp__actions { display: flex; flex-wrap: wrap; gap: 12px; } .hwg-pp .hwg-pp__btn { display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 0 30px; border: 1px solid transparent; border-radius: 999px; font: 600 15px/1 'Poppins', sans-serif; letter-spacing: 1px; text-transform: uppercase; text-decoration: none; transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease; } .hwg-pp .hwg-pp__btn--primary { background: #be7154; color: #fff; } .hwg-pp .hwg-pp__btn--primary:hover, .hwg-pp .hwg-pp__btn--primary:focus-visible { background: #a65b40; color: #fff; } .hwg-pp .hwg-pp__btn--secondary { background: transparent; border-color: rgba(33, 58, 45, 0.45); color: #213a2d; } .hwg-pp .hwg-pp__btn--secondary:hover, .hwg-pp .hwg-pp__btn--secondary:focus-visible { background: #213a2d; border-color: #213a2d; color: #fffaf0; } .hwg-pp .hwg-pp__btn:focus-visible, .hwg-pp .hwg-pp__close:focus-visible { outline: 2px solid #213a2d; outline-offset: 3px; } .hwg-pp .hwg-pp__close { position: absolute; top: 14px; right: 14px; z-index: 2; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 250, 240, 0.92); color: #213a2d; cursor: pointer; } .hwg-pp .hwg-pp__close:hover { background: #f9e9dc; } html.hwg-pp-lock, html.hwg-pp-lock body { overflow: hidden; } /* ------------------------------------------------- desktop top bar */ .hwg-abar { display: none; background: #213a2d; color: #fffaf0; font-family: 'Poppins', sans-serif; } .hwg-abar *, .hwg-pfoot * { box-sizing: border-box; } @media (min-width: 960px) { html.hwg-promo:not(.hwg-abar-off) .hwg-abar { display: block; } } .hwg-abar__inner { position: relative; display: flex; align-items: center; justify-content: center; gap: 20px; max-width: 1500px; margin: 0 auto; padding: 11px 58px 11px 24px; } .hwg-abar .hwg-abar__text { margin: 0; font-size: 14.5px; line-height: 1.45; } .hwg-abar .hwg-abar__lead { font-weight: 600; color: #e6caba; } .hwg-abar .hwg-promo__count { display: inline-block; margin-left: 8px; padding: 2px 10px; border-radius: 999px; background: #e6caba; color: #213a2d; font-size: 11.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; } .hwg-abar__actions { display: flex; flex: none; align-items: center; gap: 18px; } .hwg-abar .hwg-abar__link { color: #fffaf0; font-size: 13.5px; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; } .hwg-abar .hwg-abar__link:hover { color: #e6caba; } .hwg-abar .hwg-abar__btn { padding: 9px 22px; border-radius: 999px; background: #be7154; color: #fff; font-size: 12.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; white-space: nowrap; transition: background-color 0.15s ease; } .hwg-abar .hwg-abar__btn:hover { background: #a65b40; color: #fff; } .hwg-abar .hwg-abar__close { position: absolute; top: 50%; right: 14px; display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: rgba(255, 250, 240, 0.7); transform: translateY(-50%); cursor: pointer; } .hwg-abar .hwg-abar__close:hover { background: rgba(255, 250, 240, 0.14); color: #fffaf0; } .hwg-abar .hwg-abar__close:focus-visible, .hwg-abar .hwg-abar__btn:focus-visible, .hwg-abar .hwg-abar__link:focus-visible { outline: 2px solid #e6caba; outline-offset: 3px; } /* ---------------------------------------------- phone bottom bar */ .hwg-pfoot { display: none; } @media (max-width: 959px) { html.hwg-promo .hwg-pfoot { position: fixed; right: 0; bottom: 0; left: 0; z-index: 99; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); background: #213a2d; color: #fff; box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.18); font-family: 'Poppins', sans-serif; } /* The podcast bar steps aside while the promo runs, and returns on its own after it. */ html.hwg-promo .hwg-mfoot { display: none; } html.hwg-promo body { padding-bottom: 84px; } } .hwg-pfoot .hwg-pfoot__title { display: block; color: #e9c4a8; font-size: 16px; font-weight: 600; line-height: 1.25; } .hwg-pfoot .hwg-pfoot__sub { display: block; font-size: 13px; line-height: 1.35; opacity: 0.82; } .hwg-pfoot .hwg-promo__count { font-weight: 600; opacity: 1; } .hwg-pfoot .hwg-pfoot__btn { flex: none; padding: 11px 20px; border-radius: 999px; background: #fff; color: #213a2d; font-size: 14px; font-weight: 600; text-decoration: none; white-space: nowrap; } .hwg-pfoot .hwg-pfoot__btn:focus-visible { outline: 2px solid #e9c4a8; outline-offset: 3px; } /* --------------------------------------------------- popup breakpoints */ @media (min-width: 640px) and (max-width: 959px) { .hwg-pp__content { padding: 48px 36px 40px; } .hwg-pp .hwg-pp__title { font-size: 34px; } } /* Phones: bottom sheet with a short photo strip. */ @media (max-width: 639px) { .hwg-pp { align-items: flex-end; padding: 0; } .hwg-pp__dialog, .hwg-pp__dialog--image { width: 100%; grid-template-columns: 1fr; max-height: 92vh; max-height: 92dvh; border-radius: 20px 20px 0 0; transform: translateY(40px); } .hwg-pp__media { height: 180px; min-height: 0; } .hwg-pp .hwg-pp__img { object-position: 50% 22%; } .hwg-pp__content { padding: 28px 22px calc(24px + env(safe-area-inset-bottom, 0px)); } .hwg-pp .hwg-pp__eyebrow { margin-bottom: 10px; font-size: 12px; } .hwg-pp .hwg-pp__title { margin-bottom: 12px; font-size: 32px; } .hwg-pp .hwg-pp__body { margin-bottom: 22px; font-size: 15px; } .hwg-pp__actions { flex-direction: column; gap: 10px; } .hwg-pp .hwg-pp__btn { width: 100%; } } @media (prefers-reduced-motion: reduce) { .hwg-pp__backdrop, .hwg-pp__dialog { transition: none; } }