:root {
--ita-alu-gold: #d2ad57;
--ita-alu-gold-light: #f3dc8c;
--ita-alu-black: #050505;
--ita-alu-cream: #f7f2e8;
}
.ita-alu {
background: linear-gradient(180deg, #111 0%, var(--ita-alu-black) 36%, #000 100%) !important;
border: 1px solid rgba(210, 173, 87, .72) !important;
border-radius: 28px !important;
bottom: auto;
box-shadow: 0 22px 60px rgba(0, 0, 0, .58), 0 0 26px rgba(210, 173, 87, .12) !important;
color: var(--ita-alu-cream) !important;
font-family: Georgia, "Times New Roman", serif !important;
overflow: hidden;
position: fixed;
top: 50%;
transform: translateY(-50%) scale(.5);
width: min(300px, calc(100vw - 28px));
z-index: 99990;
}
.ita-alu--left { left: 22px; transform-origin: center left; }
.ita-alu--right { right: 22px; transform-origin: center right; }
.ita-alu__header {
align-items: center;
background: transparent !important;
border: 0 !important;
color: var(--ita-alu-gold-light) !important;
display: flex;
font-family: Georgia, "Times New Roman", serif !important;
font-size: 18px;
justify-content: space-between;
letter-spacing: 4px;
min-height: 53px;
padding: 0 17px;
position: relative;
text-shadow: 0 0 12px rgba(230, 192, 95, .45);
z-index: 5;
}
.ita-alu__header::after {
background: linear-gradient(90deg, transparent, rgba(210, 173, 87, .85), transparent);
bottom: 0;
content: "";
height: 1px;
left: 12%;
position: absolute;
width: 76%;
}
.ita-alu__close {
appearance: none;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
color: var(--ita-alu-gold-light) !important;
cursor: pointer;
font-family: Arial, sans-serif !important;
font-size: 25px;
line-height: 1;
padding: 2px 0 3px 12px;
}
.ita-alu__slides { position: relative; }
.ita-alu__slide {
background: transparent !important;
border: 0 !important;
display: none;
padding: 5px 14px 10px;
text-align: center;
}
.ita-alu__slide.is-active { animation: itaAluFade .35s ease; display: block; }
.ita-alu__slide a,
.ita-alu__slide a:hover {
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
color: inherit !important;
text-decoration: none !important;
}
.ita-alu__visual {
height: 330px;
margin: 0 auto 8px;
overflow: hidden;
position: relative;
width: 100%;
}
.ita-alu__moon {
background:
radial-gradient(circle at 36% 31%, rgba(255, 240, 166, .8) 0 4%, transparent 5%),
radial-gradient(circle at 63% 43%, rgba(163, 117, 35, .18) 0 9%, transparent 10%),
radial-gradient(circle at 44% 65%, rgba(155, 109, 28, .15) 0 12%, transparent 13%),
radial-gradient(circle at 38% 34%, #ffe997 0%, #e5bd56 59%, #b98025 100%);
border-radius: 50%;
box-shadow: 0 0 16px #d5a83d, 0 0 42px rgba(232, 185, 68, .68), 0 0 68px rgba(232, 185, 68, .28);
height: 175px;
left: 50%;
position: absolute;
top: 5px;
transform: translateX(-50%);
width: 175px;
z-index: 1;
}
.ita-alu__slide img {
aspect-ratio: 16 / 9;
border: 1px solid rgba(245, 220, 140, .82) !important;
border-radius: 13px !important;
bottom: 0;
box-shadow: 0 -9px 25px rgba(0, 0, 0, .55), 0 8px 22px rgba(0, 0, 0, .72) !important;
display: block;
height: 140px !important;
left: 50%;
object-fit: cover;
position: absolute;
transform: translateX(-50%);
width: 100% !important;
z-index: 2;
}
.ita-alu__slide h3 {
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
color: var(--ita-alu-cream) !important;
display: -webkit-box;
font-family: Georgia, "Times New Roman", serif !important;
font-size: 25px !important;
font-weight: 400 !important;
letter-spacing: -.5px;
line-height: 1.05 !important;
margin: 4px 5px 13px !important;
min-height: 53px;
overflow: hidden;
padding: 0 !important;
text-shadow: 0 2px 9px #000;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
.ita-alu__reference,
.ita-alu__price {
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
font-family: Georgia, "Times New Roman", serif !important;
padding: 0 !important;
}
.ita-alu__reference {
color: #efe5cf !important;
font-size: 14px !important;
font-weight: 400 !important;
letter-spacing: 1.2px;
margin: 0 0 4px !important;
}
.ita-alu__price {
color: var(--ita-alu-gold-light) !important;
font-size: 17px !important;
font-weight: 700 !important;
margin: 0 !important;
}
.ita-alu__dots {
align-items: center;
background: transparent !important;
display: flex;
gap: 6px;
justify-content: center;
min-height: 28px;
padding: 0 10px 12px;
}
.ita-alu__dot {
appearance: none;
background: #574728 !important;
border: 0 !important;
border-radius: 50px !important;
box-shadow: none !important;
cursor: pointer;
height: 7px;
padding: 0 !important;
transition: width .2s ease, background .2s ease;
width: 7px;
}
.ita-alu__dot.is-active { background: var(--ita-alu-gold-light) !important; width: 22px; }
@keyframes itaAluFade {
from { opacity: .25; transform: translateX(5px); }
to { opacity: 1; transform: translateX(0); }
}
@media (max-width: 600px) {
.ita-alu { bottom: auto; top: 50%; width: 270px; }
.ita-alu--left { left: 12px; }
.ita-alu--right { right: 12px; }
.ita-alu__header { font-size: 16px; min-height: 47px; }
.ita-alu__slide { padding: 5px 11px 8px; }
.ita-alu__visual { height: 300px; }
.ita-alu__moon { height: 160px; width: 160px; }
.ita-alu__slide img { height: 125px !important; }
.ita-alu__slide h3 { font-size: 22px !important; min-height: 47px; }
}
@media (prefers-reduced-motion: reduce) {
.ita-alu__slide.is-active { animation: none; }
}