.adf-cap {
--adf-cap-w: 244px;
--adf-cap-h: 120px;
--adf-cap-pad: 16px;
--adf-cap-ease: cubic-bezier(0.34, 1.45, 0.64, 1);
--adf-cap-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
position: fixed;
left: max(16px, env(safe-area-inset-left, 0px));
bottom: max(16px, env(safe-area-inset-bottom, 0px));
z-index: 99980;
font-family: "GT Walsheim", "GT Walsheim Regular", "gt-walsheim-regular", system-ui, sans-serif;
-webkit-font-smoothing: antialiased;
pointer-events: none;
}
.adf-cap *,
.adf-cap *::before,
.adf-cap *::after {
box-sizing: border-box;
} .adf-cap button,
.adf-cap [type="button"],
.adf-cap [type="submit"] {
appearance: none;
-webkit-appearance: none;
background: transparent;
background-color: transparent;
border: 0;
border-radius: 0;
box-shadow: none;
color: inherit;
display: block;
font-family: inherit;
font-size: inherit;
font-weight: inherit;
line-height: inherit;
margin: 0;
padding: 0;
text-decoration: none;
text-shadow: none;
text-transform: none;
letter-spacing: normal;
} .adf-cap__fab {
pointer-events: auto;
position: absolute;
left: 0;
bottom: 0;
width: 64px;
height: 64px;
padding: 8px !important;
border: 0 !important;
border-radius: 4px !important;
background: #fff !important;
background-color: #fff !important;
color: inherit !important;
box-shadow: 0 8px 28px rgba(0, 0, 0, 0.18);
cursor: pointer;
display: grid !important;
place-items: center;
opacity: 0;
visibility: hidden;
transform: translate3d(-12px, 18px, 0) scale(0.72);
transition:
opacity 0.28s ease,
visibility 0.28s,
transform 0.45s var(--adf-cap-ease),
box-shadow 0.25s ease;
overflow: hidden;
}
.adf-cap__fab img {
width: 44px;
height: 44px;
object-fit: contain;
display: block;
pointer-events: none;
}
.adf-cap__fab:hover {
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.22);
transform: translate3d(0, 0, 0) scale(1.05);
}
.adf-cap__fab:focus-visible {
outline: 2px solid #feea0f;
outline-offset: 3px;
}
.adf-cap.is-closed .adf-cap__fab {
opacity: 1;
visibility: visible;
transform: translate3d(0, 0, 0) scale(1);
animation: adf-cap-fab-in 0.55s var(--adf-cap-ease) both;
}
.adf-cap.is-closed .adf-cap__fab::after {
content: "";
position: absolute;
inset: -2px;
border-radius: 6px;
border: 2px solid rgba(254, 234, 15, 0.85);
opacity: 0;
animation: adf-cap-pulse 2.8s ease-out 1.2s 2;
pointer-events: none;
}
@keyframes adf-cap-fab-in {
from {
opacity: 0;
transform: translate3d(-16px, 24px, 0) scale(0.6);
}
to {
opacity: 1;
transform: translate3d(0, 0, 0) scale(1);
}
}
@keyframes adf-cap-pulse {
0% {
opacity: 0.9;
transform: scale(1);
}
100% {
opacity: 0;
transform: scale(1.35);
}
} .adf-cap__panel {
pointer-events: auto;
position: relative;
width: var(--adf-cap-w);
height: var(--adf-cap-h);
padding: var(--adf-cap-pad);
background: #fff;
display: flex;
align-items: center;
gap: 10px;
box-shadow: 0 10px 36px rgba(0, 0, 0, 0.16);
transform-origin: bottom left;
opacity: 1;
visibility: visible;
transform: translate3d(0, 0, 0) scale(1);
transition:
opacity 0.28s ease,
visibility 0.28s,
transform 0.5s var(--adf-cap-ease),
box-shadow 0.3s ease;
}
.adf-cap.is-closed .adf-cap__panel {
opacity: 0;
visibility: hidden;
pointer-events: none;
transform: translate3d(-8px, 20px, 0) scale(0.22);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
transition:
opacity 0.22s ease,
visibility 0.22s,
transform 0.38s var(--adf-cap-ease-out),
box-shadow 0.22s ease;
}
.adf-cap.is-entering .adf-cap__panel {
animation: adf-cap-enter 0.65s var(--adf-cap-ease) both;
}
@keyframes adf-cap-enter {
0% {
opacity: 0;
transform: translate3d(-24px, 40px, 0) scale(0.55) rotate(-2deg);
}
60% {
opacity: 1;
transform: translate3d(2px, -4px, 0) scale(1.03) rotate(0.4deg);
}
100% {
opacity: 1;
transform: translate3d(0, 0, 0) scale(1) rotate(0deg);
}
}
.adf-cap__close {
position: absolute;
top: 12px;
right: 14px;
width: 24px;
height: 24px;
padding: 0 !important;
border: 0 !important;
border-radius: 2px !important;
background: transparent !important;
background-color: transparent !important;
color: inherit !important;
box-shadow: none !important;
cursor: pointer;
display: grid !important;
place-items: center;
transition: background 0.2s ease, transform 0.2s ease;
}
.adf-cap__close img,
.adf-cap__close svg {
width: 11px;
height: 11px;
display: block;
}
.adf-cap__close:hover {
background: rgba(0, 0, 0, 0.06);
transform: rotate(90deg);
}
.adf-cap__close:focus-visible {
outline: 2px solid #feea0f;
outline-offset: 2px;
}
.adf-cap__logo {
flex: 0 0 88px;
width: 88px;
height: 88px;
display: block;
object-fit: contain;
object-position: center;
background: transparent;
border-radius: 0;
}
.adf-cap__copy {
flex: 1 1 auto;
min-width: 0;
width: 101px;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
gap: 5px;
padding-right: 12px;
}
.adf-cap__text {
margin: 0;
color: #000;
font-size: 16px;
line-height: 16px;
font-weight: 400;
letter-spacing: 0;
width: 101px;
max-width: 101px;
white-space: normal;
word-break: break-word;
overflow-wrap: break-word;
}
.adf-cap__omart {
display: block;
width: 67px;
height: 15px;
}
.adf-cap__omart img,
.adf-cap__omart svg {
width: 67px;
height: 15px;
display: block;
} @media (max-width: 480px) {
.adf-cap {
--adf-cap-w: min(244px, calc(100vw - 32px));
left: 12px;
bottom: 12px;
}
.adf-cap__fab {
width: 56px;
height: 56px;
}
.adf-cap__fab img {
width: 38px;
height: 38px;
}
}
@media (prefers-reduced-motion: reduce) {
.adf-cap__panel,
.adf-cap__fab,
.adf-cap__close {
transition: none !important;
animation: none !important;
}
.adf-cap.is-closed .adf-cap__fab::after {
animation: none !important;
}
}
@media print {
.adf-cap {
display: none !important;
}
}