#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; } }