.toggle-switch-container {
--switch-duration: 550ms;
position: relative;
display: inline-block;
vertical-align: bottom;
margin-bottom: 5px;
width: 250px;
max-width: 100%;
font-family: inherit;
}
.toggle-switch-container *, .toggle-switch-container *::before,
.toggle-switch-container *::after { box-sizing: border-box; }
.toggle-switch-container.is-menu-open { z-index: 1000; }
.toggle-switch-container .switch-container {
position: relative;
display: flex;
width: 100%;
height: 36px;
border: 1px solid #ccc;
border-radius: 5px;
overflow: hidden;
font-size: 14px;
background: transparent;
}
.toggle-switch-container .switch-option {
position: relative;
z-index: 2;
flex: 1 1 50%;
display: flex;
align-items: center;
justify-content: center;
min-width: 0;
background: transparent;
font-size: 14px !important;
font-weight: 600 !important;
font-style: normal;
font-family: inherit;
text-decoration: none !important;
color: #1385ca;
}
.toggle-switch-container #sportive { color: #4d4d4d; }
.toggle-switch-container.is-enhanced #sportive { padding-right: 24px; }
.toggle-switch-container .slider {
position: absolute;
z-index: 1;
inset: 0 auto 0 0;
width: 50%;
border-radius: 4px;
background: #1385ca;
pointer-events: none;
transform: translateX(0);
}
.toggle-switch-container.is-ready .slider {
transition: transform var(--switch-duration) cubic-bezier(.22, 1, .36, 1),
background-color var(--switch-duration) ease;
}
.toggle-switch-container.is-ready .switch-option,
.toggle-switch-container.is-ready .sports-menu-toggle {
transition: color 250ms ease;
}
.toggle-switch-container .active-sportive .slider,
.toggle-switch-container .preview-sportive .slider {
transform: translateX(100%);
background: #4d4d4d;
}
.toggle-switch-container .active-institutional #institutional { color: #fff; }
.toggle-switch-container .active-sportive #sportive { color: #fff; }
.toggle-switch-container .preview-sportive #institutional { color: #1385ca; }
.toggle-switch-container .preview-sportive #sportive { color: #fff; }
.toggle-switch-container .preview-institutional .slider {
transform: translateX(0);
background: #1385ca;
}
.toggle-switch-container .preview-institutional #institutional { color: #fff; }
.toggle-switch-container .preview-institutional #sportive { color: #4d4d4d; }
.toggle-switch-container .sports-menu-toggle {
display: none;
position: absolute;
z-index: 3;
top: 0;
right: 0;
width: 26px;
height: 34px;
margin: 0;
padding: 0;
border: 0;
border-radius: 0 4px 4px 0;
background: transparent;
color: #4d4d4d;
cursor: pointer;
align-items: center;
justify-content: center;
}
.toggle-switch-container.is-enhanced .sports-menu-toggle { display: flex; }
.toggle-switch-container .active-sportive .sports-menu-toggle,
.toggle-switch-container .preview-sportive .sports-menu-toggle { color: #fff; }
.toggle-switch-container .preview-institutional .sports-menu-toggle { color: #4d4d4d; }
.toggle-switch-container .sports-menu-toggle::before {
content: "";
width: 7px;
height: 7px;
border-right: 2px solid currentColor;
border-bottom: 2px solid currentColor;
transform: translateY(-2px) rotate(45deg);
transition: transform 250ms ease;
}
.toggle-switch-container .sports-menu-toggle[aria-expanded="true"]::before {
transform: translateY(2px) rotate(225deg);
} .toggle-switch-container .sports-subsites {
position: absolute;
top: 100%;
left: 0;
width: 100%;
padding-top: 8px;
z-index: 10;
}
.toggle-switch-container .sports-subsites[hidden] { display: none !important; }
.toggle-switch-container .sports-subsites-list {
display: grid;
gap: 3px;
padding: 8px;
margin: 0;
background: rgb(77 77 77 / 92%);
-webkit-backdrop-filter: blur(16px);
backdrop-filter: blur(16px);
border: 1px solid rgb(255 255 255 / 18%);
border-radius: 12px;
box-shadow: 0 12px 30px rgb(0 0 0 / 18%), inset 0 1px 0 rgb(255 255 255 / 8%);
max-height: min(70vh, 380px);
overflow-y: auto;
overscroll-behavior: contain;
animation: sports-menu-in 220ms cubic-bezier(.22, 1, .36, 1) both;
}
.toggle-switch-container .sports-subsite {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 11px;
width: 100%;
min-height: 40px;
padding: 9px 12px;
margin: 0;
border: 0;
box-shadow: none;
border-radius: 7px;
background: rgb(255 255 255 / 4%);
color: #fff !important;
text-decoration: none !important;
font-family: inherit;
font-size: 12px !important;
font-weight: 600 !important;
line-height: 1.4;
letter-spacing: .4px;
transition: background-color 160ms ease;
}
.toggle-switch-container .sports-subsite::before {
content: "";
flex: 0 0 10px;
height: 10px;
border-radius: 50%;
background: var(--sport-color);
box-shadow: 0 0 0 3px rgb(255 255 255 / 6%);
}
.toggle-switch-container .sports-subsite::after {
content: "";
flex: 0 0 5px;
height: 5px;
margin-left: auto;
border-top: 1.5px solid rgb(255 255 255 / 55%);
border-right: 1.5px solid rgb(255 255 255 / 55%);
transform: rotate(45deg);
}
.toggle-switch-container .sports-subsite:hover,
.toggle-switch-container .sports-subsite:focus-visible {
background: rgb(255 255 255 / 12%);
}
.toggle-switch-container :is(.switch-option, .sports-menu-toggle, .sports-subsite):focus-visible {
outline: 2px solid currentColor;
outline-offset: -3px;
}
.toggle-switch-container .sports-subsite:focus-visible { outline: 2px solid #fff; }
.sports-subsite[data-sport="strada"] { --sport-color: #978775; }
.sports-subsite[data-sport="pista"] { --sport-color: #d91b5b; }
.sports-subsite[data-sport="fuoristrada"] { --sport-color: #009344; }
.sports-subsite[data-sport="giovanile"] { --sport-color: #27a9e1; }
.sports-subsite[data-sport="amatoriale"] { --sport-color: #fbaf3f; }
.sports-subsite[data-sport="paraciclismo"] { --sport-color: #ed1c24; }
.sports-subsite[data-sport="magliaazzurra"] { --sport-color: #1a8ad8; }
@keyframes sports-menu-in {
from { opacity: 0; transform: translateY(-6px); }
to { opacity: 1; transform: translateY(0); }
}
@media (pointer: coarse) {
.toggle-switch-container .switch-container { height: 44px; }
.toggle-switch-container .sports-menu-toggle { width: 44px; height: 42px; }
.toggle-switch-container.is-enhanced #sportive { padding-right: 40px; }
.toggle-switch-container .sports-subsite { min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
.toggle-switch-container *, .toggle-switch-container *::before {
transition: none !important;
animation: none !important;
}
}