.banner-fixed {
position: fixed;
left: 15px;
bottom: 30px;
z-index: 20;
width: 285px;
min-height: 65px;
display: flex;
align-items: center;
background: #ffffff;
box-shadow: 0 10px 32px rgba(0, 0, 0, 0.18);
border-radius: 20px;
overflow: hidden;
cursor: pointer;
transition: transform 0.25s ease, box-shadow 0.25s ease;
will-change: transform, box-shadow;
}
.banner-fixed:hover {
transform: translateY(-2px);
box-shadow: 0 16px 40px rgba(0, 0, 0, 0.22),
0 0 0 1px rgba(255, 255, 255, 0.08);
}
.banner-fixed__image {
width: 25%;
height: 100%;
min-height: 65px;
display: flex;
align-items: center;
justify-content: center;
padding: 0 10px;
z-index: 1;
}
.banner-fixed__image img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.banner-fixed__title {
width: 75%;
padding: 0 16px 0 0;
display: flex;
align-items: center;
justify-content: center;
position: relative;
z-index: 1;
background: transparent;
transition: background-color 0.25s ease, color 0.25s ease;
}
.banner-fixed__title p {
max-width: 180px;
font-size: 18px;
font-weight: 700;
line-height: 1.2;
color: #0f172a;
transition: color 0.25s ease;
}
.banner-fixed:hover .banner-fixed__title {
background: linear-gradient(
135deg,
color-mix(in srgb, var(--banner-accent, #026cbc) 85%, #ffffff 15%),
color-mix(in srgb, var(--banner-accent, #026cbc) 60%, #ffffff 40%)
);
color: #ffffff;
}
.banner-fixed:hover .banner-fixed__title p {
color: #ffffff;
}
.banner-fixed__link {
position: absolute;
inset: 0;
z-index: 2;
display: block;
cursor: pointer;
}
.banner-fixed__close {
position: absolute;
right: 10px;
top: 10px;
width: 20px;
height: 20px;
border: none;
border-radius: 100px;
background: #e9e9e9;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
transition: background-color 0.3s ease, color 0.3s ease;
z-index: 3;
color: #000000;
padding: 0;
}
.banner-fixed__close:hover {
background: #000000;
color: #ffffff;
}
.banner-fixed__close svg {
width: 15px;
height: 15px;
stroke: currentColor;
}
@media (max-width: 768px) {
.banner-fixed {
bottom: 65px;
}
}
@media (max-width: 430px) {
.banner-fixed__title {
padding: 0 30px 0 0;
}
.banner-fixed {
width: 240px;
}
.banner-fixed__title p {
max-width: 150px;
font-size: 16px;
}
}