@keyframes mo-sps-cm-gradient-flow {
0%,
100% {
background-position:
8% 48%,
88% 22%,
-90% 50%;
}
22% {
background-position:
42% 58%,
35% 55%,
5% 50%;
}
48% {
background-position:
92% 44%,
12% 68%,
95% 50%;
}
72% {
background-position:
55% 38%,
72% 35%,
155% 50%;
}
}
@keyframes mo-sps-rocket-takeoff {
0%,
100% {
transform: translateY(4px) rotate(-3deg);
}
18% {
transform: translateY(1px) rotate(-1deg) scale(1.01);
}
42% {
transform: translateY(-9px) rotate(2deg) scale(1.04);
}
58% {
transform: translateY(-14px) rotate(4deg) scale(1.06);
}
78% {
transform: translateY(-5px) rotate(1deg) scale(1.02);
}
}
@keyframes mo-sps-flame-flicker {
0% {
transform: scale(1, 1) translateY(0);
opacity: 1;
}
33% {
transform: scale(1.12, 1.18) translateY(2px);
opacity: 0.94;
}
66% {
transform: scale(0.92, 0.88) translateY(-1px);
opacity: 1;
}
100% {
transform: scale(1.05, 1.1) translateY(1px);
opacity: 0.97;
}
}
@keyframes mo-sps-cm-teal-ambient {
0%,
100% {
border-color: rgba(27, 155, 161, 0.32);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.85),
inset 0 -1px 0 rgba(27, 155, 161, 0.12),
0 8px 24px rgba(15, 80, 78, 0.08),
0 2px 8px rgba(27, 155, 161, 0.1);
}
50% {
border-color: rgba(27, 155, 161, 0.48);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.92),
inset 0 -1px 0 rgba(27, 155, 161, 0.2),
0 10px 30px rgba(15, 80, 78, 0.09),
0 4px 14px rgba(27, 155, 161, 0.16),
0 0 40px rgba(45, 184, 190, 0.14);
}
}
#mo-sps-cross-marketing-notice.mo-sps-cross-marketing-banner {
position: relative;
display: block;
visibility: visible;
opacity: 1;
margin: 6px 15px 6px 0;
padding: 0;
max-width: 100%;
border: 1px solid rgba(27, 155, 161, 0.28);
border-radius: 12px;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.85),
inset 0 -1px 0 rgba(27, 155, 161, 0.1),
0 8px 24px rgba(15, 80, 78, 0.06),
0 2px 8px rgba(27, 155, 161, 0.08);
overflow: hidden;
background-color: #e8f7f6;
color: #1d2327;
animation: mo-sps-cm-teal-ambient 18s ease-in-out infinite;
}
#mo-sps-cross-marketing-notice.mo-sps-cross-marketing-banner::before {
content: "";
position: absolute;
inset: 0;
z-index: 0;
background-image:
linear-gradient(
135deg,
#f4fcfb 0%,
#e5f5f3 24%,
#d8f2ef 44%,
#e8f7f6 58%,
#dff3f1 78%,
#f0faf9 100%
),
linear-gradient(
215deg,
rgba(255, 255, 255, 0.78) 0%,
rgba(255, 255, 255, 0.28) 40%,
transparent 54%,
rgba(27, 155, 161, 0.08) 100%
),
linear-gradient(
118deg,
transparent 0%,
transparent 36%,
rgba(27, 155, 161, 0) 42%,
rgba(13, 148, 136, 0.18) 47%,
rgba(45, 200, 195, 0.26) 50%,
rgba(13, 148, 136, 0.18) 53%,
rgba(27, 155, 161, 0) 58%,
transparent 65%,
transparent 100%
);
background-size: 320% 160%, 280% 280%, 420% 100%;
background-position: 0% 50%, 100% 40%, -100% 50%;
animation: mo-sps-cm-gradient-flow 22s cubic-bezier(0.42, 0.05, 0.58, 0.95) infinite;
}
#mo-sps-cross-marketing-notice.mo-sps-cross-marketing-banner::after {
content: "";
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
opacity: 1;
background-image:
radial-gradient(ellipse 95% 55% at 50% 108%, rgba(27, 155, 161, 0.06) 0%, transparent 52%),
radial-gradient(ellipse 80% 40% at 50% -8%, rgba(255, 255, 255, 0.72) 0%, transparent 55%),
radial-gradient(rgba(27, 155, 161, 0.07) 1px, transparent 1px);
background-size: 100% 100%, 100% 100%, 20px 20px;
background-position: center, center, 0 0;
}
@media (prefers-reduced-motion: reduce) {
#mo-sps-cross-marketing-notice.mo-sps-cross-marketing-banner {
animation: none;
}
#mo-sps-cross-marketing-notice.mo-sps-cross-marketing-banner::before {
animation: none;
background-position: 48% 50%, 50% 50%, 50% 50%;
background-size: 100% 100%, 100% 100%, 100% 100%;
}
#mo-sps-cross-marketing-notice.mo-sps-cross-marketing-banner .mo-sps-cross-marketing-banner__rocket-motion-inner {
animation: none !important;
}
#mo-sps-cross-marketing-notice.mo-sps-cross-marketing-banner .mo-sps-cross-marketing-banner__rocket-flame {
animation: none !important;
}
#mo-sps-cross-marketing-notice.mo-sps-cross-marketing-banner .mo-sps-cross-marketing-banner__tile-wrap:hover .mo-sps-cross-marketing-banner__tile,
#mo-sps-cross-marketing-notice.mo-sps-cross-marketing-banner .mo-sps-cross-marketing-banner__tile-wrap:focus-visible .mo-sps-cross-marketing-banner__tile {
transform: none;
}
#mo-sps-cross-marketing-notice.mo-sps-cross-marketing-banner .mo-sps-cross-marketing-banner__tiles-inline {
animation: none !important;
filter: none;
}
}
#mo-sps-cross-marketing-notice.mo-sps-cross-marketing-banner .mo-sps-cross-marketing-banner__inner {
position: relative;
z-index: 1;
padding: 16px 46px 32px 18px;
}
#mo-sps-cross-marketing-notice.mo-sps-cross-marketing-banner .mo-sps-cross-marketing-banner__main {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px 18px;
}
#mo-sps-cross-marketing-notice.mo-sps-cross-marketing-banner .mo-sps-cross-marketing-banner__copy {
flex: 1 1 200px;
min-width: 0;
display: flex;
flex-direction: column;
align-items: flex-start;
align-self: center;
justify-content: flex-start;
padding-top: 6px;
}
#mo-sps-cross-marketing-notice.mo-sps-cross-marketing-banner .mo-sps-cross-marketing-banner__tiles-inline {
position: relative;
z-index: 2;
flex: 0 0 auto;
align-self: center;
}
#mo-sps-cross-marketing-notice.mo-sps-cross-marketing-banner .mo-sps-cross-marketing-banner__cta-wrap {
flex: 0 0 auto;
align-self: center;
}
#mo-sps-cross-marketing-notice.mo-sps-cross-marketing-banner .mo-sps-cross-marketing-banner__line {
margin: 0 0 4px;
padding: 0;
font-size: 13px;
line-height: 1.48;
font-weight: 400;
color: #2c3338;
text-shadow: none;
}
#mo-sps-cross-marketing-notice.mo-sps-cross-marketing-banner .mo-sps-cross-marketing-banner__tagline.mo-sps-cross-marketing-banner__line {
margin: 0;
line-height: 1.42;
font-size: 13px;
}
#mo-sps-cross-marketing-notice.mo-sps-cross-marketing-banner .mo-sps-cross-marketing-banner__brand-trailer {
display: inline;
white-space: nowrap;
}
#mo-sps-cross-marketing-notice.mo-sps-cross-marketing-banner .mo-sps-cross-marketing-banner__em-dash {
vertical-align: 0.08em;
}
#mo-sps-cross-marketing-notice.mo-sps-cross-marketing-banner .mo-sps-cross-marketing-banner__brand-inline-img {
display: inline-block;
vertical-align: -0.6em;
width: auto;
height: 2em;
max-height: 20px;
max-width: min(52vw, 230px);
margin-left: 0;
object-fit: contain;
}
#mo-sps-cross-marketing-notice.mo-sps-cross-marketing-banner .mo-sps-cross-marketing-banner__rocket {
flex: 0 0 auto;
align-self: center;
}
#mo-sps-cross-marketing-notice.mo-sps-cross-marketing-banner .mo-sps-cross-marketing-banner__rocket-anchor {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 76px;
min-height: 90px;
}
#mo-sps-cross-marketing-notice.mo-sps-cross-marketing-banner .mo-sps-cross-marketing-banner__rocket-ring {
position: relative;
z-index: 1;
width: 76px;
height: 76px;
border-radius: 50%;
padding: 3px;
box-sizing: border-box;
background: linear-gradient(145deg, #8ee4df 0%, #4ec9c3 38%, #1b9ba1 72%, #148f8a 100%);
box-shadow:
0 0 0 1px rgba(255, 255, 255, 0.65),
0 4px 14px rgba(15, 80, 78, 0.15),
0 2px 8px rgba(27, 155, 161, 0.35);
}
#mo-sps-cross-marketing-notice.mo-sps-cross-marketing-banner .mo-sps-cross-marketing-banner__rocket-disc {
width: 100%;
height: 100%;
border-radius: 50%;
background: linear-gradient(180deg, #2db8be 0%, #1b9ba1 52%, #0f7a76 100%);
overflow: hidden;
}
#mo-sps-cross-marketing-notice.mo-sps-cross-marketing-banner .mo-sps-cross-marketing-banner__rocket-motion {
position: absolute;
left: 0;
top: calc((100% - 76px) / 2);
width: 76px;
height: 76px;
box-sizing: border-box;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
padding-top: 0;
z-index: 2;
pointer-events: none;
overflow: visible;
}
#mo-sps-cross-marketing-notice.mo-sps-cross-marketing-banner .mo-sps-cross-marketing-banner__rocket-motion-inner {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
transform-origin: 50% 58%;
animation: mo-sps-rocket-takeoff 2.8s ease-in-out infinite;
will-change: transform;
}
#mo-sps-cross-marketing-notice.mo-sps-cross-marketing-banner .mo-sps-cross-marketing-banner__rocket-exhaust {
margin-top: -6px;
position: relative;
z-index: 0;
line-height: 0;
pointer-events: none;
filter: drop-shadow(0 3px 8px rgba(255, 112, 67, 0.55)) drop-shadow(0 0 10px rgba(255, 171, 64, 0.35));
}
#mo-sps-cross-marketing-notice.mo-sps-cross-marketing-banner .mo-sps-cross-marketing-banner__rocket-flame {
display: block;
width: 22px;
height: 26px;
transform-origin: 50% 0%;
animation: mo-sps-flame-flicker 0.38s ease-in-out infinite;
will-change: transform, opacity;
}
#mo-sps-cross-marketing-notice.mo-sps-cross-marketing-banner .mo-sps-cross-marketing-banner__rocket-svg {
display: block;
margin-top: 0;
transform-origin: 50% 80%;
filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.5));
}
#mo-sps-cross-marketing-notice.mo-sps-cross-marketing-banner .mo-sps-cross-marketing-banner__title {
margin: 4px 0 4px;
padding: 0;
font-size: 16px;
font-weight: 700;
line-height: 1.25;
color: #0f3d40;
text-shadow: none;
width: 100%;
}
#mo-sps-cross-marketing-notice.mo-sps-cross-marketing-banner .mo-sps-cross-marketing-banner__tiles {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
justify-content: center;
gap: 10px 14px;
margin: 0;
padding: 0;
list-style: none;
}
#mo-sps-cross-marketing-notice.mo-sps-cross-marketing-banner .mo-sps-cross-marketing-banner__tile-wrap {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
margin: 0;
padding: 0;
list-style: none;
outline: none;
}
#mo-sps-cross-marketing-notice.mo-sps-cross-marketing-banner .mo-sps-cross-marketing-banner__tile {
width: 40px;
height: 40px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
box-shadow:
0 2px 6px rgba(15, 80, 78, 0.1),
inset 0 1px 0 rgba(255, 255, 255, 0.75),
inset 0 -1px 0 rgba(27, 155, 161, 0.12);
border: 1px solid rgba(15, 23, 42, 0.1);
transition: transform 0.22s ease, box-shadow 0.22s ease;
}
#mo-sps-cross-marketing-notice.mo-sps-cross-marketing-banner .mo-sps-cross-marketing-banner__tile-wrap:hover .mo-sps-cross-marketing-banner__tile,
#mo-sps-cross-marketing-notice.mo-sps-cross-marketing-banner .mo-sps-cross-marketing-banner__tile-wrap:focus-visible .mo-sps-cross-marketing-banner__tile {
transform: translateY(-7px) scale(1.08);
box-shadow:
0 8px 18px rgba(15, 80, 78, 0.18),
inset 0 1px 0 rgba(255, 255, 255, 0.85),
inset 0 -1px 0 rgba(27, 155, 161, 0.1);
z-index: 2;
}
#mo-sps-cross-marketing-notice.mo-sps-cross-marketing-banner .mo-sps-cross-marketing-banner__tile-tip {
position: absolute;
left: 50%;
top: calc(100% + 8px);
transform: translateX(-50%) translateY(-4px);
min-width: 200px;
max-width: min(92vw, 320px);
padding: 8px 10px;
background: rgba(15, 23, 42, 0.96);
color: #f8fafc;
font-size: 11.5px;
line-height: 1.35;
font-weight: 500;
border-radius: 8px;
text-align: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
z-index: 6;
}
#mo-sps-cross-marketing-notice.mo-sps-cross-marketing-banner .mo-sps-cross-marketing-banner__tile-tip::before {
content: "";
position: absolute;
bottom: 100%;
left: 50%;
margin-left: -7px;
border: 7px solid transparent;
border-bottom-color: rgba(15, 23, 42, 0.96);
}
#mo-sps-cross-marketing-notice.mo-sps-cross-marketing-banner .mo-sps-cross-marketing-banner__tile-wrap:hover .mo-sps-cross-marketing-banner__tile-tip,
#mo-sps-cross-marketing-notice.mo-sps-cross-marketing-banner .mo-sps-cross-marketing-banner__tile-wrap:focus-visible .mo-sps-cross-marketing-banner__tile-tip {
opacity: 1;
visibility: visible;
transform: translateX(-50%) translateY(0);
}
#mo-sps-cross-marketing-notice.mo-sps-cross-marketing-banner .mo-sps-cross-marketing-banner__tile--logo {
padding: 0;
overflow: hidden;
background: transparent;
border: none;
box-shadow:
0 2px 6px rgba(15, 80, 78, 0.12),
inset 0 0 0 1px rgba(255, 255, 255, 0.65);
}
#mo-sps-cross-marketing-notice.mo-sps-cross-marketing-banner .mo-sps-cross-marketing-banner__tile-img {
display: block;
width: 40px;
height: 40px;
border-radius: 10px;
object-fit: cover;
}
#mo-sps-cross-marketing-notice.mo-sps-cross-marketing-banner .mo-sps-cross-marketing-banner__btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 8px 18px;
min-height: 36px;
box-sizing: border-box;
border: 1px solid rgba(15, 118, 110, 0.45);
border-radius: 8px;
font-size: 14px;
font-weight: 700;
line-height: 1.2;
text-decoration: none;
color: #fff !important;
background: linear-gradient(180deg, #0d9488 0%, #0f766e 100%);
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
box-shadow:
0 0 0 1px rgba(255, 255, 255, 0.35),
0 4px 14px rgba(15, 118, 110, 0.28),
inset 0 1px 0 rgba(255, 255, 255, 0.22),
inset 0 -2px 0 rgba(0, 0, 0, 0.12);
cursor: pointer;
transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease, border-color 0.2s ease;
white-space: nowrap;
}
#mo-sps-cross-marketing-notice.mo-sps-cross-marketing-banner .mo-sps-cross-marketing-banner__btn:hover,
#mo-sps-cross-marketing-notice.mo-sps-cross-marketing-banner .mo-sps-cross-marketing-banner__btn:focus {
color: #fff !important;
background: linear-gradient(180deg, #0f766e 0%, #115e59 100%);
border-color: rgba(15, 118, 110, 0.55);
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.28);
box-shadow:
0 0 0 1px rgba(255, 255, 255, 0.35),
0 6px 18px rgba(15, 118, 110, 0.35),
inset 0 1px 0 rgba(255, 255, 255, 0.22),
inset 0 -2px 0 rgba(0, 0, 0, 0.15);
outline: none;
}
#mo-sps-cross-marketing-notice.mo-sps-cross-marketing-banner .mo-sps-cross-marketing-banner__btn:focus-visible {
outline: 2px solid #0d9488;
outline-offset: 2px;
}
#mo-sps-cross-marketing-notice.mo-sps-cross-marketing-banner .mo-sps-cross-marketing-banner__dismiss {
position: absolute;
top: 4px;
right: 6px;
z-index: 3;
border: none;
background: transparent;
color: rgba(44, 51, 56, 0.65);
font-size: 24px;
line-height: 1;
cursor: pointer;
padding: 4px 8px;
border-radius: 4px;
transition: color 0.15s ease, background 0.15s ease;
}
#mo-sps-cross-marketing-notice.mo-sps-cross-marketing-banner .mo-sps-cross-marketing-banner__dismiss:hover {
color: #1d2327;
background: rgba(27, 155, 161, 0.12);
}
@media screen and (max-width: 782px) {
#mo-sps-cross-marketing-notice.mo-sps-cross-marketing-banner .mo-sps-cross-marketing-banner__inner {
padding-right: 44px;
padding-bottom: 36px;
}
#mo-sps-cross-marketing-notice.mo-sps-cross-marketing-banner .mo-sps-cross-marketing-banner__main {
flex-direction: column;
align-items: stretch;
}
#mo-sps-cross-marketing-notice.mo-sps-cross-marketing-banner .mo-sps-cross-marketing-banner__rocket {
align-self: center;
}
#mo-sps-cross-marketing-notice.mo-sps-cross-marketing-banner .mo-sps-cross-marketing-banner__tiles-inline {
align-self: center;
}
#mo-sps-cross-marketing-notice.mo-sps-cross-marketing-banner .mo-sps-cross-marketing-banner__cta-wrap {
align-self: stretch;
}
#mo-sps-cross-marketing-notice.mo-sps-cross-marketing-banner .mo-sps-cross-marketing-banner__btn {
width: 100%;
max-width: 100%;
justify-content: center;
}
}