/*360 */ /* Enhanced iframe container with mobile touch optimization */ /*.iframe-container {*/ /* touch-action: manipulation;*/ /* -webkit-overflow-scrolling: touch;*/ /*}*/ /*.iframe-container iframe {*/ /* touch-action: manipulation;*/ /* -webkit-user-select: none;*/ /* -webkit-touch-callout: none;*/ /* -webkit-tap-highlight-color: transparent;*/ /*}*/ /* Prevent body scroll when iframe is active - fallback if JS fails */ /*body:has(.iframe-container.is-visible) {*/ /* overflow: hidden !important;*/ /* position: fixed !important;*/ /* width: 100% !important;*/ /* height: 100% !important;*/ /*}*/ /* Mobile-specific optimizations */ /*@media (hover: none) and (pointer: coarse) {*/ /* .iframe-container iframe {*/ /* touch-action: pan-x pan-y manipulation;*/ /* }*/ /* Ensure full viewport coverage on mobile */ /* .iframe-container {*/ /* -webkit-touch-callout: none;*/ /* -webkit-user-select: none;*/ /* user-select: none;*/ /* }*/ /*}*/ /* iOS Safari specific fixes */ /*@supports (-webkit-touch-callout: none) {*/ /* .iframe-container iframe {*/ /* -webkit-touch-callout: none;*/ /* -webkit-user-select: none;*/ /* }*/ /*}*/ /* Additional mobile viewport fixes */ /*@media screen and (max-width: 768px) {*/ /* .iframe-container.is-visible {*/ /* position: fixed;*/ /* top: 0;*/ /* left: 0;*/ /* right: 0;*/ /* bottom: 0;*/ /* z-index: 9999;*/ /* }*/ /*}*/ /*NAVBAR------------------------------------------------------------------------------------------------------------------*/ .nav__wrap.is-inversed .hamburger-nav__toggle-bar { background-color: var(--text--inversed); } .nav__wrap.is-inversed .language__toggle { color: var(--text--inversed); } .nav__wrap .language__toggle { color: var(--text--primary); } } /* Nav Dark BG */ .navigation__dark-bg { transition: all 0.7s cubic-bezier(0.5, 0.5, 0, 1); } [data-navigation-status="active"] .navigation__dark-bg { opacity: 0.33; visibility: visible; } /* Nav Group BG */ .hamburger-nav__bg { background-color: transparent; transition: background-color 0.7s cubic-bezier(0.5, 0.5, 0, 1), backdrop-filter 0.7s cubic-bezier(0.5, 0.5, 0, 1); will-change: background-color, backdrop-filter; } [data-navigation-status="active"] .hamburger-nav__bg { background-color: rgba(243, 238, 232, 0.78); width: 100%; height: 100%; -webkit-backdrop-filter: blur(3.5px); backdrop-filter: blur(3.5px); } /* Nav Label */ .hamburger-nav__label { display: block; opacity: 1; transition: opacity 0.3s ease; } [data-navigation-status="active"] .hamburger-nav__label { display: none; opacity: 0; transition: opacity 0.3s ease; } /* Nav Group */ .hamburger-nav__group { transition: all 0.5s cubic-bezier(0.5, 0.5, 0, 1), transform 0.7s cubic-bezier(0.5, 0.5, 0, 1); transform: scale(0.15) rotate(0.001deg); opacity: 0; visibility: hidden; } [data-navigation-status="active"] .hamburger-nav__group { transform: scale(1) rotate(0.001deg); opacity: 1; visibility: visible; } /* Active Link */ .hamburger-nav__a[aria-current] .hamburger-nav__p { /*opacity: 0.33,*/ color: #02737c; } /* Active Indicator */ /*.hamburger-nav__dot {*/ /* transition: all 0.7s cubic-bezier(0.5, 0.5, 0, 1);*/ /* transform: scale(0) rotate(0.001deg);*/ /* opacity: 0.5;*/ /*}*/ /*.hamburger-nav__a[aria-current] .hamburger-nav__dot {*/ /* transform: scale(1) rotate(0.001deg);*/ /* opacity: 1;*/ /*}*/ .hamburger-nav__a:hover .hamburger-nav__p { color: #02737c; } /*.hamburger-nav .hamburger-nav__a:hover .hamburger-nav__dot {*/ /* transform: scale(1) rotate(0.001deg);*/ /* opacity: 0.25;*/ /*}*/ /* Hamburger Button */ .hamburger-nav__toggle { transition: transform 0.7s cubic-bezier(0.5, 0.5, 0, 1); transform: translate(0em, 0em) rotate(0.001deg); } [data-navigation-status="active"] .hamburger-nav__toggle { transform: translate(-1em, 1em) rotate(0.001deg); } .hamburger-nav__toggle .hamburger-nav__toggle-bar { transition: transform 0.7s cubic-bezier(0.5, 0.5, 0, 1); transform: translateY(-0.15em) rotate(0.001deg); } .hamburger-nav__toggle:hover .hamburger-nav__toggle-bar { transform: translateY(0.15em) rotate(0.001deg); } [data-navigation-status="active"] .hamburger-nav__toggle .hamburger-nav__toggle-bar { transform: translateY(0em) rotate(45deg); } .hamburger-nav__toggle .hamburger-nav__toggle-bar:nth-child(2) { transition: transform 0.7s cubic-bezier(0.5, 0.5, 0, 1); transform: translateY(0.15em) rotate(0.001deg); } .hamburger-nav__toggle:hover .hamburger-nav__toggle-bar:nth-child(2) { transform: translateY(-0.15em) rotate(0.001deg); } [data-navigation-status="active"] .hamburger-nav__toggle .hamburger-nav__toggle-bar:nth-child(2) { transform: translateY(0em) rotate(-45deg); } /* ==================================================================== Language switcher BG==================================================================== */ /* Hide all icons */ .locale-icon { display: none; } /* Show icon only when the sibling link has .w--current */ .locale.w-locales-item:has(.btn-locale.w--current) .locale-icon { display: inline-block; } /* ── Text opacity for locales ───────────────────────── */ .btn-locale { opacity: 0.5; /* inactive by default */ transition: opacity 0.2s ease; /* smooth fade */ } .btn-locale:hover { opacity: 1; } .btn-locale.w--current { opacity: 1; /* active = fully visible */ } /* UNDERLINED BUTTON------------------------------------------------------------------------------------------------------------------*/ .underline-link::before, .underline-link.is--alt::before, .underline-link.is--alt::after { content: ""; position: absolute; bottom: 0em; left: 0; width: 100%; height: 0.0625em; background-color: currentColor; transition: transform 0.735s cubic-bezier(0.625, 0.05, 0, 1); transform-origin: right; transform: scaleX(0) rotate(0.001deg); } .underline-link:hover::before { transform-origin: left; transform: scaleX(1) rotate(0.001deg); } /* Alt */ .underline-link.is--alt::before { transform-origin: left; transform: scaleX(1) rotate(0.001deg); transition-delay: 0.3s; } .underline-link.is--alt:hover::before { transform-origin: right; transform: scaleX(0) rotate(0.001deg); transition-delay: 0s; } .underline-link.is--alt::after { transform-origin: right; transform: scaleX(0) rotate(0.001deg); transition-delay: 0s; } .underline-link.is--alt:hover::after { transform-origin: left; transform: scaleX(1) rotate(0.001deg); transition-delay: 0.3s; } .underline-link.is--alt.--text-grey::after { content: ""; position: absolute; bottom: 0em; left: 0; width: 100%; height: 0.0625em; background-color: #313131; transition: transform 0.735s cubic-bezier(0.625, 0.05, 0, 1); transform-origin: right; transform: scaleX(0) rotate(0.001deg); } .underline-link:hover::before { transform-origin: left; transform: scaleX(1) rotate(0.001deg); } /* Alt */ .underline-link.is--alt::before { transform-origin: left; transform: scaleX(1) rotate(0.001deg); transition-delay: 0.3s; } .underline-link.is--alt:hover::before { transform-origin: right; transform: scaleX(0) rotate(0.001deg); transition-delay: 0s; } .underline-link.is--alt::after { transform-origin: right; transform: scaleX(0) rotate(0.001deg); transition-delay: 0s; } .underline-link.is--alt:hover::after { transform-origin: left; transform: scaleX(1) rotate(0.001deg); transition-delay: 0.3s; } /* UNDERLINED BUTTON GREY------------------------------------------------------------------------------------------------------------------*/ .underline-link.--grey::before, ::after { content: ""; position: absolute; bottom: 0em; left: 0; width: 100%; height: 0.0625em; background-color: red; transition: transform 0.735s cubic-bezier(0.625, 0.05, 0, 1); transform-origin: right; transform: scaleX(0) rotate(0.001deg); } .underline-link:hover::before { transform-origin: left; transform: scaleX(1) rotate(0.001deg); } /* Alt */ .underline-link.is--alt::before { transform-origin: left; transform: scaleX(1) rotate(0.001deg); transition-delay: 0.3s; } .underline-link.is--alt:hover::before { transform-origin: right; transform: scaleX(0) rotate(0.001deg); transition-delay: 0s; } .underline-link.is--alt::after { transform-origin: right; transform: scaleX(0) rotate(0.001deg); transition-delay: 0s; } .underline-link.is--alt:hover::after { transform-origin: left; transform: scaleX(1) rotate(0.001deg); transition-delay: 0.3s; } .underline-link.is--alt.--text-grey::after { content: ""; position: absolute; bottom: 0em; left: 0; width: 100%; height: 0.0625em; background-color: #313131; transition: transform 0.735s cubic-bezier(0.625, 0.05, 0, 1); transform-origin: right; transform: scaleX(0) rotate(0.001deg); } .underline-link:hover::before { transform-origin: left; transform: scaleX(1) rotate(0.001deg); } /* Alt */ .underline-link.is--alt::before { transform-origin: left; transform: scaleX(1) rotate(0.001deg); transition-delay: 0.3s; } .underline-link.is--alt:hover::before { transform-origin: right; transform: scaleX(0) rotate(0.001deg); transition-delay: 0s; } .underline-link.is--alt::after { transform-origin: right; transform: scaleX(0) rotate(0.001deg); transition-delay: 0s; } .underline-link.is--alt:hover::after { transform-origin: left; transform: scaleX(1) rotate(0.001deg); transition-delay: 0.3s; } /* ==================================================================== /* Animate Accordion Bottom Grid */ /*==================================================================== */ .accordion-css__item-bottom { transition: grid-template-rows 0.6s cubic-bezier(0.625, 0.05, 0, 1); } [data-accordion-status="active"] .accordion-css__item-bottom { grid-template-rows: 1fr; } /* Animate Icon */ .accordion-css__item-icon { transition: transform 0.6s cubic-bezier(0.625, 0.05, 0, 1); } [data-accordion-status="active"] .accordion-css__item-icon { transform: rotate(0.001deg); } /* ==================================================================== /* DIRECTIONAL BUTTON HOVER */ /*==================================================================== */ .btn .btn__text, .btn--hero .btn__text { transition: color 1s cubic-bezier(0.625, 0.05, 0, 1); } .btn:hover .btn__text, .btn:hover .btn__text--hero { color: #1d3e57; } .btn .btn__circle, .btn--hero .btn__circle { transition: transform 0.7s cubic-bezier(0.625, 0.05, 0, 1), background-color 0.4s cubic-bezier(0.625, 0.05, 0, 1); transform: translate(-50%, -50%) scale(0) rotate(0.001deg); background-color: rgba(255, 255, 255, 0.6); } .btn:hover .btn__circle, .btn--hero:hover .btn__circle { transform: translate(-50%, -50%) scale(1.2) rotate(0.001deg); } /* ==================================================================== Glass effect on Omaya 50 pop ups /*==================================================================== */ .point__modal { -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } /* ==================================================================== Team section ==================================================================== */ /* initial state */ .member .member__details { transform: translateY(3.7em); opacity: 0; transition: transform 1600ms cubic-bezier(0.16, 1, 0.3, 1), opacity 200ms cubic-bezier(0.16, 1, 0.3, 1); will-change: transform, opacity; } /* hover state */ .member:hover .member__details { transform: translateY(0em); opacity: 1; } /* optional: accessibility */ @media (prefers-reduced-motion: reduce) { .member .member__details { transition-duration: 0.01ms; } }