.s4-sub-to-newsletter {
--s4-newsletter-size: clamp(100px, 10vw, 200px);
--s4-ring-font-size: clamp(13px, 3.6vw, 20px);
width: var(--s4-newsletter-size);
height: var(--s4-newsletter-size);
display: block;
transition: transform 0.3s ease;
}
.s4-sub-to-newsletter:hover {
transform: scale(1.05);
}
.s4-sub-to-newsletter__seal {
position: relative;
width: 100%;
height: 100%;
display: grid;
place-items: center;
}
.s4-sub-to-newsletter__ring {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
transform-origin: 50% 50%;
animation: s4-newsletter-ring-spin 20s linear infinite;
}
.s4-sub-to-newsletter__ring text {
font-size: var(--s4-ring-font-size);
font-weight: 400;
letter-spacing: 1.10px;
fill: #fff;
}
.s4-sub-to-newsletter__logo {
position: relative;
z-index: 1;
width: clamp(30px, 25%, 60px);
height: auto;
display: block;
}
@keyframes s4-newsletter-ring-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@media (prefers-reduced-motion: reduce) {
.s4-sub-to-newsletter__ring {
animation: none;
}
}.s4-breadcrumbs {
padding: 20px 30px 20px clamp(30px, 2.5vw, 50px);
font-weight: 350;
}
.s4-breadcrumbs.breadcrumbs-bg-red {
color: #fff;
background: #c14b54; }
.s4-breadcrumbs.breadcrumbs-bg-black {
color: #fff;
background: #2A2A2B;
backdrop-filter: blur(30px);
-webkit-backdrop-filter: blur(30px);
}
.s4-breadcrumbs.breadcrumbs-bg-white {
color: #000;
background: #ffffff;
backdrop-filter: blur(30px);
-webkit-backdrop-filter: blur(30px);
}
.s4-breadcrumbs #breadcrumbs a,
.s4-breadcrumbs #breadcrumbs .breadcrumb_last {
font-size: max(1rem, 13px);
opacity: 0.4;
margin: 0 5px;
}
.s4-breadcrumbs #breadcrumbs a {
text-decoration: none;
position: relative;
display: inline-block;
color: inherit;
}
.s4-breadcrumbs #breadcrumbs a::after {
content: '';
position: absolute;
top: calc(100% + 1px);
left: 0;
width: 0;
height: 1.5px;
background: currentColor;
transition: width 0.3s ease;
}
.s4-breadcrumbs #breadcrumbs a:hover::after {
width: 100%;
}
.s4-breadcrumbs #breadcrumbs .breadcrumb_last {
opacity: 1;
}
@media screen and (max-width: 575px) {
.s4-breadcrumbs {
padding: 10px 20px;
}
}