:root {
--hcpa-nav-blue: #0b57d0;
--hcpa-nav-yellow-rgb: 245, 197, 27;
}
.hcpa-section-navigator {
position: fixed;
left: 50%;
bottom: 22px;
transform: translateX(-50%);
width: 58px;
height: 58px;
padding: 0;
margin: 0;
border: 1px solid rgba(255,255,255,.58);
border-radius: 999px;
background: rgba(var(--hcpa-nav-yellow-rgb), .76);
-webkit-backdrop-filter: blur(3px);
backdrop-filter: blur(3px);
box-shadow: 0 6px 20px rgba(0,0,0,.18);
cursor: pointer;
z-index: 2147483000;
appearance: none;
-webkit-appearance: none;
transition: box-shadow .2s ease, background-color .2s ease, opacity .16s ease;
}
.hcpa-section-navigator[hidden],
.hcpa-section-navigator.hcpa-nav-hidden {
display: none !important;
}
.hcpa-section-navigator:hover,
.hcpa-section-navigator:focus-visible {
background: rgba(var(--hcpa-nav-yellow-rgb), .9);
box-shadow: 0 8px 24px rgba(0,0,0,.24);
outline: none;
}
.hcpa-section-navigator:focus-visible {
box-shadow: 0 0 0 3px rgba(255,255,255,.92), 0 0 0 6px rgba(11,87,208,.42), 0 8px 24px rgba(0,0,0,.24);
}
.hcpa-nav-chevron {
position: absolute;
left: 50%;
width: 17px;
height: 17px;
border-right: 4px solid var(--hcpa-nav-blue);
border-bottom: 4px solid var(--hcpa-nav-blue);
transform: translateX(-50%) rotate(45deg);
transform-origin: center;
opacity: .95;
}
.hcpa-nav-chevron-one {
top: 12px;
animation: hcpa-chevron-pulse 1.35s ease-in-out infinite;
}
.hcpa-nav-chevron-two {
top: 27px;
animation: hcpa-chevron-pulse 1.35s ease-in-out .18s infinite;
}
@keyframes hcpa-chevron-pulse {
0%, 100% {
opacity: .28;
transform: translate(-50%, -2px) rotate(45deg);
}
50% {
opacity: 1;
transform: translate(-50%, 3px) rotate(45deg);
}
}
@media (max-width: 921px) {
.hcpa-section-navigator {
display: none !important;
}
}
@media (prefers-reduced-motion: reduce) {
.hcpa-nav-chevron-one,
.hcpa-nav-chevron-two {
animation: none !important;
opacity: 1;
}
html {
scroll-behavior: auto;
}
} .hcpa-section-navigator.hcpa-nav-collision-hidden {
opacity: 0 !important;
pointer-events: none !important;
}