/** * AECT pop-up widget — site-wide CTA. * Designs: Figma 10142:9227 (expanded), 10143:10261 (collapsed), * 10142:8281 (mobile), 10143:9344 (placement on home). */ /* Outer "rail": mirrors ``'s sizing exactly so its right edge sits * on the same content edge. Site CSS: * html { max-width: 1920px; margin-left: auto; margin-right: auto; } * So the rail is fixed-positioned, capped at 1920px, and centered in * the layout viewport via auto margins on both sides. */ .aect-widget { position: fixed; top: 0; left: 0; right: 0; max-width: 1920px; margin-left: auto; margin-right: auto; height: 0; z-index: 9990; pointer-events: none; font-family: 'Proxima Nova', Arial, sans-serif; color: #fff; } /* Visible card pinned to the rail's right edge and centered vertically. */ .aect-widget__card { position: absolute; top: 50vh; right: 0; transform: translateY(-50%); pointer-events: auto; } .aect-widget__close, .aect-widget__banner, .aect-widget__expand { pointer-events: auto; } /* ---------- Expanded state ---------- */ .aect-widget[data-state="expanded"] .aect-widget__expand { display: none; } .aect-widget__close { position: absolute; top: -48px; right: 16px; width: 32px; height: 32px; padding: 0; border: 1px solid #a20067; border-radius: 999px; background: #fff; box-shadow: 0 8px 24px rgba(81, 88, 97, 0.16); cursor: pointer; display: flex; align-items: center; justify-content: center; } .aect-widget__close svg { width: 12px; height: 12px; /* Figma close-icon path is a `+`; rotate 45deg to render as X. */ transform: rotate(45deg); } .aect-widget__close:focus-visible { outline: 2px solid #a20067; outline-offset: 2px; } .aect-widget__banner { position: relative; display: flex; flex-direction: column; align-items: center; gap: 24px; padding: 56px 24px 16px; /* Sized for the fallback font weight the site loads — the Figma's 248px * assumes a true Proxima Nova Extrabold that's not in the bundle. */ width: 324px; border-bottom-left-radius: 24px; border-top-left-radius: 24px; background-image: linear-gradient(117.95deg, #3f2a56 0%, #a20067 50%, #3f2a56 100%); text-decoration: none; transition: transform 0.2s ease; } .aect-widget__banner, .aect-widget__banner:link, .aect-widget__banner:visited, .aect-widget__banner:hover, .aect-widget__banner:focus, .aect-widget__banner:focus-visible, .aect-widget__banner:active { color: #fff; text-decoration: none; } .aect-widget__banner:hover, .aect-widget__banner:focus-visible { transform: translateX(-4px); outline: none; } .aect-widget__icon { position: absolute; left: 50%; top: -42px; transform: translateX(-50%); width: 100px; height: 84px; object-fit: contain; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.4)); } .aect-widget__copy { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; align-self: stretch; } .aect-widget__title { margin: 0; color: #fff; font-weight: 800; font-size: 19px; line-height: normal; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.4); white-space: nowrap; } .aect-widget__title-em { color: #d5bed9; font-style: italic; } .aect-widget__cta { margin: 0; color: #fff; font-size: 16px; line-height: normal; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.4); white-space: nowrap; } .aect-widget__arrow { width: 16px; height: 14px; margin-left: 4px; color: #fff; /* Inline alignment so the arrow sits next to "reveals" on whichever * line it ends up on (single line desktop, second line mobile). */ vertical-align: middle; } /* Mobile-only line break inside the title and subtitle copy. Hidden by * default; @media (max-width: 767px) restores it so the text wraps to * two lines exactly per Figma 10142:8281. */ .aect-widget__break { display: none; } /* ---------- Collapsed state ---------- */ .aect-widget[data-state="collapsed"] .aect-widget__close, .aect-widget[data-state="collapsed"] .aect-widget__banner { display: none; } .aect-widget__expand { display: flex; align-items: center; justify-content: center; /* Per Figma 10143:10261: padding 24px/16px around a 24×24 icon → 56×72 outer. */ padding: 24px 16px; border: none; border-bottom-left-radius: 16px; border-top-left-radius: 16px; background-image: linear-gradient(98.15deg, #3f2a56 0%, #a20067 70%, #ccaed0 100%); cursor: pointer; color: #fff; } .aect-widget__expand-arrow { width: 24px; height: 24px; display: block; } .aect-widget__expand:focus-visible { outline: 2px solid #a20067; outline-offset: 2px; } /* ---------- Mobile (Figma 10142:8281, placement 10143:9341) ---------- */ @media (max-width: 767px) { .aect-widget__banner { width: 200px; padding: 48px 24px 16px; gap: 24px; } .aect-widget__icon { width: 80px; height: 68px; top: -34px; } .aect-widget__title { font-size: 19px; white-space: normal; } .aect-widget__cta { font-size: 16px; flex-wrap: wrap; white-space: normal; } .aect-widget__break { display: inline; } .aect-widget__close { top: -40px; right: 12px; } } /* ---------- Print: never show widget on printed pages ---------- */ @media print { .aect-widget { display: none !important; } }