/* Words */ [data-split-words] { padding-bottom: 0.11em; } [data-split-words] .single-word { overflow: hidden; bubbleChart position: relative; padding: 0.11em; margin: -0.11em -0.11em -0.22em -0.11em; } [data-split-words] .single-word-inner { position: relative; } .sticky-header .navbar-no-shadow-container { padding: 0; background: #050807; } .sticky-header .navbar-wrapper { padding: 2px 0 8px; } .sticky-header .link-text.is-02 { font-size: 15px; } .sticky-header .navbar-brand { width: 150px; top: 2px; } .sticky-header .navbar-button { transform: scale(0.8); margin-left: -20px; } /* Hover effect for both .news-item and .news-item-v2 */ .news-item:hover, .news-item-v2:hover { transform: scale(0.95) rotate(0.001deg); } .news-item:hover .news-arrow, .news-item-v2:hover .news-arrow { transform: scale(1.2) rotate(0.001deg); } .news-item:hover .news-image-item, .news-item-v2:hover .news-image-item { opacity: 0.6; } .research-image-wrapper { transition: all 0.3s; } .research-image-wrapper[data-item-index-status="not-active"] { opacity: 0; visibility: hidden; pointer-events: none; } .program.active { opacity: 1; transform: scale(1); } /* Menu Mobile */ .navbar-research { z-index: 100; } /* Hamburger */ .hamburger { pointer-events: all; width: 4em; height: 4em; border-radius: 3em; display: flex; justify-content: center; align-items: center; cursor: pointer; overflow: hidden; z-index: 120; transition: all .4s cubic-bezier(0.36, 0, 0.66, 0); transform: translateY(0%) scale(0) rotate(0.001deg); } .hamburger .bar { position: absolute; width: 35%; height: 1.5px; background: white; transition: all 0.3s; opacity: 1; transform: translateY(0px) scaleX(1) rotate(0.001deg); } .hamburger .bar.first { transform: translateY(-5.5px) scaleX(1) rotate(0.001deg); } .hamburger .bar.last { transform: translateY(5.5px) scaleX(1) rotate(0.001deg); } @media (hover: hover) { /* Hamburger - Hover */ .hamburger:hover { opacity: 0.9; } .hamburger:hover .bar.first { transform: translateY(-5.5px) scaleX(0.75) rotate(0.001deg); } .hamburger:hover .bar.middle { transform: translateY(0px) scaleX(1.25) rotate(0.001deg); } .hamburger:hover .bar.last { transform: translateY(5.5px) scaleX(0.75) rotate(0.001deg); } } /* Hamburger - Active */ [data-navigation="active"] .hamburger { transform: translateY(0%) scale(1) rotate(0.001deg); } [data-navigation-status="active"] .hamburger .bar.first { transform: translateY(0px) scaleX(1) rotate(-45deg); } [data-navigation-status="active"] .hamburger .bar.middle { transform: translateX(0px) scaleX(0) rotate(0.001deg); opacity: 0; } [data-navigation-status="active"] .hamburger .bar.last { transform: translateY(0px) scaleX(1) rotate(45deg); } /* Navigation */ .nav-floating .link-text, .nav-floating .text-dropdown { font-size: 28px !important; } .navbar-floating-container { transform: translate(calc(100% + 6vw), 0) rotate(0.001deg); transition: transform .8s cubic-bezier(.7, 0, .2, 1); will-change: transform; } .nav-floating li { transform: translate(15vw, 0) rotate(0.001deg); transition: all .8s cubic-bezier(.7, 0, .2, 1); will-change: transform; } .nav-floating li:nth-child(2) { transition-delay: .04s; } .nav-floating li:nth-child(3) { transition-delay: .08s; } .nav-floating li:nth-child(4) { transition-delay: .12s; } .nav-floating li:nth-child(5) { transition-delay: .16s; } .nav-floating li:nth-child(6) { transition-delay: .20s; } /* Navigation - Active */ [data-navigation-status="active"] .navbar-floating-container { transform: translate(0, 0) rotate(0.001deg); } [data-navigation-status="active"] .navbar-floating-bg { opacity: 1; pointer-events: auto; } [data-navigation-status="active"] .nav-floating li { transform: translate(0, 0) rotate(0.001deg); } /* Responsive */ @media (max-width: 991px) { .hamburger { top: 45px; right: 40px; background: white; transform: translateY(0%) scale(1) rotate(0); /* Show on mobile */ } .hamburger .bar { background: #10069f; } [data-navigation="active"] .hamburger { background: #10069f; } [data-navigation="active"] .hamburger .bar { background: white; } .slick-dots { top: auto !important; bottom: 0px; } .programs-slick-dots { top: auto !important; bottom: 0px; } .projects-slick-dots { top: auto !important; bottom: 0px; } } @media (max-width: 768px) { .hamburger { top: 40px; } .nav-floating .link-text { font-size: 1.8em !important; } } .footer-light:before { content: ""; display: block; position: absolute; top: -40px; bottom: -40px; width: 100%; background: #121416; } /* Modal Styles */ #bubbleModal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(15, 17, 35, 0.8); display: flex; justify-content: center; align-items: center; z-index: 999; } #bubbleModal { opacity: 0; transform: scale(1); transition: opacity 0.3s ease, transform 0.3s ease; pointer-events: none; } #bubbleModal.active { opacity: 1; transform: scale(1); pointer-events: auto; } .bubble-node text { transition: opacity 0.5s ease; /* duration and easing */ } .modal-content { background: white; padding: 30px; border-radius: 12px; max-width: 600px; width: 90%; position: relative; font-family: sans-serif; } .modal-content h3 { margin-top: 0; } .modal-content ul { list-style: disc; padding-left: 20px; } .modal-content li { margin-bottom: 8px; } .close { position: absolute; top: 12px; right: 20px; font-size: 24px; color: #1b21ab; cursor: pointer; } .select2-container { min-width: 280px; } .select2-selection { overflow: auto; max-height: 90px; } .slick-current.slick-center>.projects-carousel-item { opacity: 1; transform: scale(1.05); transition: opacity 0.3s ease, transform 0.3s ease; } /* Base helper for multi-line clamping */ .line-clamp { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; } /* One-line (classic ellipsis) */ .whitespace-nowrap { white-space: nowrap; } .line-clamp-1 { overflow: hidden; text-overflow: ellipsis; } /* Multi-line variants */ .line-clamp-2 { -webkit-line-clamp: 2; } .line-clamp-3 { -webkit-line-clamp: 3; } .line-clamp-4 { -webkit-line-clamp: 4; } .line-clamp-5 { -webkit-line-clamp: 5; } .line-clamp-6 { -webkit-line-clamp: 6; } /* To resolve carret issue */ .transform-none { transform: none !important; } .select2-search__field { margin-left: 0px !important; padding: 0px 10px !important; } /* Start. Resolve Scrollbar Issue. */ /* It should be hidden when tag is empty in Edge and Safari */ .select2-container--default .select2-selection--multiple { padding-right: 0px !important; } .select2-container .select2-selection--multiple { display: flex !important; background: beige; } /* End */