.pdo-adsanity-banner {
--pdo-purple: #cb6ce6;
--pdo-purple-mid: #a64ec1;
--pdo-purple-dark: #642879;
--pdo-deep: #34163f;
--pdo-text: #211b25;
--pdo-muted: #6f6573;

position: relative;
display: block;
width: 100%;
max-width: 970px;
margin: 0 auto;
overflow: hidden;
border-radius: 16px;
text-decoration: none !important;
color: inherit !important;

background:
radial-gradient(
circle at 88% 20%,
rgba(203,108,230,.24),
transparent 28%
),
radial-gradient(
circle at 8% 100%,
rgba(203,108,230,.13),
transparent 32%
),
linear-gradient(
115deg,
#fffdfd 0%,
#fbf4fc 48%,
#f1daf7 100%
);

border: 1px solid #ead8ef;

box-shadow:
0 10px 26px rgba(68,27,81,.10);

transition:
transform .35s cubic-bezier(.16,1,.3,1),
box-shadow .35s ease,
border-color .35s ease;
}

.pdo-adsanity-banner:hover {
transform: translateY(-3px);

border-color: rgba(203,108,230,.45);

box-shadow:
0 18px 40px rgba(68,27,81,.16);
}

/* ---------------------------------
MAIN GRID
---------------------------------- */

.pdo-adsanity-inner {
position: relative;
z-index: 2;

display: grid;

grid-template-columns:
150px
minmax(0, 1fr)
120px
190px;

gap: 22px;

align-items: center;

min-height: 155px;

padding: 20px 24px;
}

/* ---------------------------------
LOGO
---------------------------------- */

.pdo-adsanity-logo-wrap {
position: relative;

display: flex;
align-items: center;
justify-content: center;

min-height: 105px;

padding: 16px;

border-radius: 18px;

background:
rgba(255,255,255,.88);

border:
1px solid rgba(255,255,255,.96);

box-shadow:
0 8px 22px rgba(79,31,94,.08);

animation:
pdoAdLogoFloat 5.5s ease-in-out infinite;
}

.pdo-adsanity-logo-wrap::after {
content: "";

position: absolute;

inset: 14%;

border-radius: 50%;

background:
radial-gradient(
circle,
rgba(203,108,230,.14),
transparent 70%
);

filter: blur(12px);

opacity: .6;

animation:
pdoAdLogoGlow 4.8s ease-in-out infinite;

pointer-events: none;
}

.pdo-adsanity-logo {
position: relative;

z-index: 2;

display: block;

width: 100%;

max-width: 125px;

height: auto;
}

/* ---------------------------------
COPY
---------------------------------- */

.pdo-adsanity-copy {
min-width: 0;
}

.pdo-adsanity-eyebrow {
display: flex;
align-items: center;

gap: 8px;

margin: 0 0 7px;

color: var(--pdo-purple-dark);

font-family:
Arial,
Helvetica,
sans-serif;

font-size: 10px;

line-height: 1.2;

font-weight: 800;

letter-spacing: 1px;

text-transform: uppercase;
}

.pdo-adsanity-eyebrow::before {
content: "";

flex: 0 0 auto;

width: 7px;
height: 7px;

border-radius: 50%;

background:
var(--pdo-purple);

box-shadow:
0 0 0 5px
rgba(203,108,230,.12);

animation:
pdoAdDotPulse 2.8s ease-in-out infinite;
}

.pdo-adsanity-title {
margin: 0 0 7px;

color: var(--pdo-text);

font-family:
Arial,
Helvetica,
sans-serif;

font-size: 25px;

line-height: 1.07;

font-weight: 800;

letter-spacing: -.45px;
}

.pdo-adsanity-description {
margin: 0;

max-width: 520px;

color: var(--pdo-muted);

font-family:
Arial,
Helvetica,
sans-serif;

font-size: 13px;

line-height: 1.45;
}

/* ---------------------------------
KEKE IMAGE
---------------------------------- */

.pdo-adsanity-person {
display: flex;
flex-direction: column;

align-items: center;

justify-content: center;

text-align: center;
}

.pdo-adsanity-photo-wrap {
position: relative;

display: flex;

align-items: center;

justify-content: center;

width: 96px;

height: 96px;
}

.pdo-adsanity-photo-glow {
position: absolute;

width: 82px;
height: 82px;

border-radius: 50%;

background:
radial-gradient(
circle,
rgba(203,108,230,.28),
rgba(203,108,230,0) 72%
);

filter: blur(8px);

animation:
pdoAdPhotoGlow 4s ease-in-out infinite;

pointer-events: none;
}

.pdo-adsanity-photo-ring {
position: absolute;

width: 91px;
height: 91px;

border-radius: 50%;

border:
1px solid rgba(166,78,193,.27);

animation:
pdoAdOrbit 11s linear infinite;
}

.pdo-adsanity-photo-ring::after {
content: "";

position: absolute;

width: 7px;
height: 7px;

top: 3px;
right: 17px;

border-radius: 50%;

background:
var(--pdo-purple);

box-shadow:
0 0 0 4px rgba(203,108,230,.10),
0 0 10px rgba(203,108,230,.42);
}

.pdo-adsanity-photo-ring-2 {
position: absolute;

width: 104px;
height: 104px;

border-radius: 50%;

border:
1px dashed rgba(203,108,230,.16);

animation:
pdoAdOrbitReverse 16s linear infinite;
}

.pdo-adsanity-photo-pulse {
position: absolute;

width: 78px;
height: 78px;

border-radius: 50%;

border:
1px solid rgba(203,108,230,.28);

animation:
pdoAdPulseRing 3.8s ease-out infinite;

pointer-events: none;
}

.pdo-adsanity-photo {
position: relative;

z-index: 3;

display: block;

width: 72px;

height: 72px;

object-fit: cover;

object-position: center top;

border-radius: 50%;

border:
3px solid #fff;

box-shadow:
0 7px 18px rgba(73,27,87,.18);

transition:
transform .4s cubic-bezier(.16,1,.3,1),
box-shadow .4s ease;
}

.pdo-adsanity-banner:hover
.pdo-adsanity-photo {

transform:
scale(1.045);

box-shadow:
0 11px 23px rgba(73,27,87,.23);
}

.pdo-adsanity-person-label {
margin-top: 5px;

color:
var(--pdo-purple-dark);

font-family:
Arial,
Helvetica,
sans-serif;

font-size: 9px;

line-height: 1.25;

font-weight: 800;

white-space: nowrap;
}

/* ---------------------------------
CTA
---------------------------------- */

.pdo-adsanity-cta-wrap {
display: flex;

align-items: center;

justify-content: flex-end;
}

.pdo-adsanity-cta {
position: relative;

display: inline-flex;

min-width: 180px;

min-height: 48px;

padding:
0 20px;

align-items: center;

justify-content: center;

gap: 11px;

overflow: hidden;

border-radius: 999px;

background:
linear-gradient(
100deg,
#642879 0%,
#83369d 50%,
#b44bcf 100%
);

color:
#ffffff;

font-family:
Arial,
Helvetica,
sans-serif;

font-size:
13px;

line-height:
1;

font-weight:
800;

white-space:
nowrap;

box-shadow:
0 9px 20px
rgba(100,40,121,.21);

transition:
transform .3s ease,
box-shadow .3s ease;
}

.pdo-adsanity-cta::before {
content: "";

position: absolute;

top: 0;
bottom: 0;

left: -110px;

width: 70px;

transform:
skewX(-20deg);

background:
linear-gradient(
90deg,
transparent,
rgba(255,255,255,.30),
transparent
);

animation:
pdoAdButtonShine 5.5s ease-in-out infinite;
}

.pdo-adsanity-banner:hover
.pdo-adsanity-cta {

transform:
translateY(-2px);

box-shadow:
0 13px 27px
rgba(100,40,121,.29);
}

.pdo-adsanity-arrow {
position: relative;

z-index: 2;

font-size:
19px;

line-height:
1;

transition:
transform .3s ease;
}

.pdo-adsanity-banner:hover
.pdo-adsanity-arrow {

transform:
translateX(5px);
}

/* ---------------------------------
BACKGROUND DECORATION
---------------------------------- */

.pdo-adsanity-orbit {
position:
absolute;

z-index:
1;

width:
260px;

height:
260px;

right:
110px;

top:
-135px;

border-radius:
50%;

border:
1px solid
rgba(100,40,121,.07);

pointer-events:
none;

animation:
pdoAdBgOrbit 24s linear infinite;
}

.pdo-adsanity-orbit::after {
content:
"";

position:
absolute;

width:
7px;

height:
7px;

left:
36px;

bottom:
42px;

border-radius:
50%;

background:
rgba(203,108,230,.8);

box-shadow:
0 0 12px rgba(203,108,230,.35);
}

/* ---------------------------------
ANIMATION KEYFRAMES
---------------------------------- */

@keyframes pdoAdLogoFloat {

0%,
100% {
transform:
translateY(0);
}

50% {
transform:
translateY(-5px);
}

}

@keyframes pdoAdLogoGlow {

0%,
100% {
opacity:
.45;

transform:
scale(.92);
}

50% {
opacity:
.85;

transform:
scale(1.06);
}

}

@keyframes pdoAdDotPulse {

0%,
100% {
box-shadow:
0 0 0 5px
rgba(203,108,230,.10);
}

50% {
box-shadow:
0 0 0 8px
rgba(203,108,230,.04);
}

}

@keyframes pdoAdOrbit {

from {
transform:
rotate(0deg);
}

to {
transform:
rotate(360deg);
}

}

@keyframes pdoAdOrbitReverse {

from {
transform:
rotate(360deg);
}

to {
transform:
rotate(0deg);
}

}

@keyframes pdoAdPhotoGlow {

0%,
100% {
opacity:
.55;

transform:
scale(.94);
}

50% {
opacity:
.9;

transform:
scale(1.08);
}

}

@keyframes pdoAdPulseRing {

0% {
transform:
scale(.84);

opacity:
.5;
}

70% {
transform:
scale(1.25);

opacity:
0;
}

100% {
transform:
scale(1.25);

opacity:
0;
}

}

@keyframes pdoAdButtonShine {

0% {
left:
-110px;
}

35% {
left:
-110px;
}

55% {
left:
calc(100% + 80px);
}

100% {
left:
calc(100% + 80px);
}

}

@keyframes pdoAdBgOrbit {

to {
transform:
rotate(360deg);
}

}

/* ---------------------------------
TABLET
---------------------------------- */

@media (max-width: 850px) {

.pdo-adsanity-inner {

grid-template-columns:
125px
minmax(0,1fr)
95px;

gap:
17px;

padding:
18px 20px;
}

.pdo-adsanity-cta-wrap {

grid-column:
2 / 4;

justify-content:
flex-start;

margin-top:
-4px;
}

.pdo-adsanity-cta {

min-height:
42px;

min-width:
175px;
}

.pdo-adsanity-title {

font-size:
21px;
}

.pdo-adsanity-description {

font-size:
12px;
}

}

/* ---------------------------------
MOBILE
---------------------------------- */

@media (max-width: 560px) {

.pdo-adsanity-inner {

grid-template-columns:
92px
minmax(0,1fr);

gap:
14px;

min-height:
0;

padding:
17px;
}

.pdo-adsanity-logo-wrap {

min-height:
80px;

padding:
11px;

border-radius:
14px;
}

.pdo-adsanity-eyebrow {

font-size:
8px;

letter-spacing:
.65px;
}

.pdo-adsanity-title {

margin-bottom:
4px;

font-size:
17px;

line-height:
1.1;
}

.pdo-adsanity-description {

display:
none;
}

.pdo-adsanity-person {

display:
none;
}

.pdo-adsanity-cta-wrap {

grid-column:
1 / 3;

justify-content:
stretch;

margin-top:
0;
}

.pdo-adsanity-cta {

width:
100%;

min-width:
0;

min-height:
42px;

font-size:
12px;
}

.pdo-adsanity-orbit {

display:
none;
}

}

/* ---------------------------------
ACCESSIBILITY
---------------------------------- */

@media (prefers-reduced-motion: reduce) {

.pdo-adsanity-banner,
.pdo-adsanity-logo-wrap,
.pdo-adsanity-logo-wrap::after,
.pdo-adsanity-eyebrow::before,
.pdo-adsanity-photo-glow,
.pdo-adsanity-photo-ring,
.pdo-adsanity-photo-ring-2,
.pdo-adsanity-photo-pulse,
.pdo-adsanity-photo,
.pdo-adsanity-cta,
.pdo-adsanity-cta::before,
.pdo-adsanity-arrow,
.pdo-adsanity-orbit {

animation:
none !important;

transition:
none !important;
}

}

For Expecting Parents & Caregivers

Protecting your baby from RSV starts before delivery.

Learn about RSV protection, build your RSV birth plan,
and prepare questions for your care team.

Featuring Keke Palmer

Explore Protect From Day One

→