#orizzontalemenu_136311.orizzontalemenu_new {
.layout_subnav {
--fds-menu-bg: rgba(255, 255, 255, 0.75);
--fds-menu-border-color: rgba(255, 255, 255, 0.75);
--fds-menu-max-width: 240px;
margin: 0.5rem 0 0;
padding: 0;
max-width: var(--fds-menu-max-width);
position: relative;
background: var(--fds-menu-bg) !important;
backdrop-filter: blur(50px) saturate(180%); /* Richiede prefisso -webkit- per Safari */
border: 1px solid var(--fds-menu-border-color);
border-radius: 1rem;
opacity: 0;
transform: scale(0.99);
transition:
opacity 0.22s ease-out,
transform 0.22s ease-out;
transform-origin: 50% 0%;
left: 0 !important;
&::after {
content: "";
position: absolute;
inset: 0;
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0.1);
border-radius: 1rem;
backdrop-filter: blur(1px);
box-shadow:
inset -10px -8px 0px -11px rgba(255, 255, 255, 0.25),
inset 0px -9px 0px -8px rgba(255, 255, 255, 0.25);
opacity: 0.6;
z-index: -1;
filter: blur(1px) drop-shadow(4px 2px 4px #000) brightness(115%);
}
.subnav_content {
padding: 0rem;
> div {
padding: 0;
ul {
padding: 0.25rem 0;
}
}
.new_btn_sub.card {
--fds-menu-grid-gap-y: 0.25rem;
--fds-menu-grid-gap-x: 0.5rem;
--fds-menu-card-image-dimentions: 40px;
--fds-menu-card-image-bg: rgba(0, 0, 0, 0.05);
--fds-menu-card-image-bg-hover: rgba(255, 255, 255, 0.35);
--fds-menu-card-title-color: #333;
--fds-menu-card-subtitle-color: #333;
--fds-menu-card-padding-y: 0.5rem;
--fds-menu-card-padding-x: 0.75rem;
display: grid;
grid-template:
1fr 1fr / var(--fds-menu-card-image-dimentions)
repeat(6, minmax(auto, 1fr));
gap: var(--fds-menu-grid-gap-y) var(--fds-menu-grid-gap-x);
margin: 0 !important;
padding: var(--fds-menu-card-padding-y)
var(--fds-menu-card-padding-x) !important;
align-items: center;
cursor: pointer !important;
&:hover {
.card_image_container {
background-color: var(--fds-menu-card-image-bg-hover);
transition: filter 0.33s ease-in-out;
filter: drop-shadow(0px 0px 0px #fff) brightness(115%);
img {
filter: brightness(0) saturate(100%) invert(30%)
sepia(90%) saturate(2642%) hue-rotate(198deg)
brightness(95%) contrast(104%);
transition: 0.11s filter ease-in-out;
}
}
.testo.subtitle {
opacity: 1;
transition: 0.11s opacity ease-in-out;
}
}
.card_image_container {
grid-area: 1 / 1 / 3 / 3;
background-color: var(--fds-menu-card-image-bg);
border-radius: 0.5rem;
display: grid;
align-content: center;
justify-content: center;
max-height: var(--fds-menu-card-image-dimentions);
max-width: var(--fds-menu-card-image-dimentions);
aspect-ratio: 1/1;
overflow: visible;
.img_card {
float: none;
height: calc(
var(--fds-menu-card-image-dimentions) / 2px
);
width: calc(var(--fds-menu-card-image-dimentions) / 2);
object-fit: cover;
border-radius: calc(0.5rem - 1px);
}
}
.testo.title {
color: var(--fds-menu-card-title-color) !important;
grid-area: 1 / 2 / 1 / 8;
margin: 0 !important;
align-self: end;
font-size: 14px !important;
min-width: 0;
}
.testo.subtitle {
font-family: c-dmsans_18pt-regular;
grid-area: 2 / 2 / 2 / 8;
line-height: 1;
align-self: self-start;
font-size: 12px !important;
color: var(--fds-menu-card-subtitle-color) !important;
opacity: 0.75;
transition: 0.22s opacity ease-in-out;
min-width: 0;
}
}
}
}
.btn > .sub_pulsantiera {
transition: none;
}
.btn:hover .layout_subnav {
opacity: 1;
transform: scale(1);
translate: calc(calc(calc(var(--fds-menu-max-width) / 2) * -1) + 50px) 0;
}
}