/*LIGHTBOX------------------------------------------------------------------------------------------------------------------*/ /* Lightbox */ [data-bunny-lightbox-status] .bunny-lightbox__calc { transition: transform 0.3s cubic-bezier(0.625, 0.05, 0, 1), opacity 0.3s linear, visibility 0.3s linear; opacity: 0; visibility: hidden; transform: scale(0.9) rotate(0.001deg); } [data-bunny-lightbox-status="active"] .bunny-lightbox__calc { opacity: 1; visibility: visible; transform: scale(1) rotate(0.001deg); } [data-bunny-lightbox-status] .bunny-lightbox__dark, [data-bunny-lightbox-status] .bunny-lightbox__close { transition: opacity 0.3s linear, visibility 0.3s linear; opacity: 0; visibility: hidden; } [data-bunny-lightbox-status="active"] .bunny-lightbox__dark, [data-bunny-lightbox-status="active"] .bunny-lightbox__close { opacity: 1; visibility: visible; } /* Animation */ [data-bunny-lightbox-init] :is(.bunny-lightbox-player__placeholder, .bunny-lightbox-player__dark, .bunny-lightbox-player__playpause, .bunny-lightbox-player__loading) { transition: opacity 0.3s linear, visibility 0.3s linear; } /* Placeholder */ [data-bunny-lightbox-init][data-player-status="playing"] .bunny-lightbox-player__placeholder, [data-bunny-lightbox-init][data-player-status="paused"] .bunny-lightbox-player__placeholder, [data-bunny-lightbox-init][data-player-activated="true"][data-player-status="ready"] .bunny-lightbox-player__placeholder { opacity: 0; visibility: hidden; } /* Dark Overlay */ [data-bunny-lightbox-init][data-player-status="paused"] .bunny-lightbox-player__dark, [data-bunny-lightbox-init][data-player-status="playing"][data-player-hover="active"] .bunny-lightbox-player__dark { opacity: 0.3; } [data-bunny-lightbox-init][data-player-status="playing"] .bunny-lightbox-player__dark { opacity: 0; } /* Play/Pause */ [data-bunny-lightbox-init][data-player-status="playing"] .bunny-lightbox-player__playpause, [data-bunny-lightbox-init][data-player-status="loading"] .bunny-lightbox-player__playpause { opacity: 0; } [data-bunny-lightbox-init][data-player-status="playing"][data-player-hover="active"] .bunny-lightbox-player__playpause { opacity: 1; } [data-bunny-lightbox-init][data-player-status="playing"] .bunny-lightbox-player__play-svg, [data-bunny-lightbox-init][data-player-status="loading"] .bunny-lightbox-player__play-svg { display: none; } [data-bunny-lightbox-init][data-player-status="playing"] .bunny-lightbox-player__pause-svg, [data-bunny-lightbox-init][data-player-status="loading"] .bunny-lightbox-player__pause-svg { display: block; } /* Loading */ [data-bunny-lightbox-init][data-player-status="loading"] .bunny-lightbox-player__loading { opacity: 1; visibility: visible; } /* Interface */ .bunny-lightbox-player__interface { transition: all 0.6s cubic-bezier(0.625, 0.05, 0, 1); } [data-bunny-lightbox-init][data-player-status="playing"] .bunny-lightbox-player__interface, [data-bunny-lightbox-init][data-player-status="loading"] .bunny-lightbox-player__interface { opacity: 0; transform: translateY(1em) rotate(0.001deg); } [data-bunny-lightbox-init][data-player-status="playing"][data-player-hover="active"] .bunny-lightbox-player__interface, [data-bunny-lightbox-init][data-player-status="loading"][data-player-hover="active"] .bunny-lightbox-player__interface { opacity: 1; transform: translateY(0em) rotate(0.001deg); } /* Timeline */ [data-bunny-lightbox-init][data-player-status="idle"][data-player-activated="false"] .bunny-lightbox-player__timeline, [data-bunny-lightbox-init][data-player-status="ready"][data-player-activated="false"] .bunny-lightbox-player__timeline { pointer-events: none; } /* Timeline Handle */ [data-bunny-lightbox-init] .bunny-lightbox-player__timeline-handle { transition: transform 0.15s ease-in-out; } [data-bunny-lightbox-init][data-timeline-drag="true"] .bunny-lightbox-player__timeline-handle { transform: translate(-50%, -50%) scale(1); } /* Fullscreen */ [data-bunny-lightbox-init][data-player-fullscreen="true"] .bunny-lightbox-player__fullscreen-shrink-svg { display: block; } [data-bunny-lightbox-init][data-player-fullscreen="true"] .bunny-lightbox-player__fullscreen-scale-svg { display: none; } /* Mute */ [data-bunny-lightbox-init][data-player-muted="true"] .bunny-lightbox-player__volume-mute-svg { display: block; } [data-bunny-lightbox-init][data-player-muted="true"] .bunny-lightbox-player__volume-up-svg { display: none; } /* Cover Mode */ [data-bunny-lightbox-init][data-player-update-size="cover"] { height: 100%; top: 0; left: 0; position: absolute; } [data-bunny-lightbox-init][data-player-update-size="cover"] [data-player-before] { display: none; } [data-bunny-lightbox-init][data-player-update-size="cover"][data-player-fullscreen="false"] .bunny-lightbox-player__video { object-fit: cover; } /*360------------------------------------------------------------------------------------------------------------------*/ /*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; } } /* Prevent zoom when sidebar is open */ body.sidebar-open { touch-action: pan-y !important; } /* Preserve aspect ratios for specific image classes */ .sidebar__visual-wrap .image._4x3 { aspect-ratio: 4/3 !important; object-fit: cover !important; width: 100% !important; height: auto !important; } .sidebar__visual-wrap .image._9x16 { aspect-ratio: 9/16 !important; object-fit: cover !important; width: 100% !important; height: auto !important; } /* Fix grid layout */ .sidebar__visual-wrap.is-gird { display: flex !important; gap: 1rem !important; } .sidebar__visual-wrap.is-gird .visual__col-1 { flex: 1 !important; } .sidebar__visual-wrap.is-gird .visual__col-1 .image { width: 100% !important; height: 100% !important; object-fit: cover !important; } /* Ensure videos maintain aspect ratio */ .sidebar__visual-wrap video.image { width: 100% !important; height: auto !important; aspect-ratio: 16/9 !important; object-fit: cover !important; } /* Remove any touch-action restrictions from media elements */ .sidebar__visual-wrap, .sidebar__visual-wrap .image, .sidebar__visual-wrap video, .sidebar__visual-wrap img { touch-action: auto !important; } /* Prevent zoom only on interactive elements */ body.sidebar-open button, body.sidebar-open a { touch-action: manipulation !important; }