/* Stil: projects.html */
/*Heading Visibility*/
[data-split="heading"] {
visibility: hidden;
}
.wf-design-mode [data-split="heading"], .w-editor [data-split="heading"] {
visibility: visible !important;
}
/*Cards Hover*/
.overlay-gradient {
background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, 0.80) 100%);
transition: background 0.5s ease;
}
.overlay-gradient::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(180deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.7) 100%);
opacity: 0;
transition: opacity 0.5s ease;
z-index: 0;
}
#hover-card:hover .overlay-gradient::after {
opacity: 1;
}
#hover-card:hover .use-cases_content-wrapper {
transform: translatey(-2rem);
transition: transform .7s cubic-bezier(.19, 1, .22, 1);
}
/*Full Slider*/
.swiper-slide.is-active .progress-line {
background-color: rgba(255, 255, 255, 1);
/* full white for active thumb */
}
.text-content.swiper {
z-index: 1;
display: flex !important;
justify-content: center !important;
flex-direction: column !important;
}
/*Impact Logs Hover*/
.home-logs_item:has(.link.list:hover), .impact-log_item:has(.link.list:hover), .impact_slider-item:has(.link.list:hover), .values_card:hover {
background-color: var(--base-color-brand--chlorophyll) !important;
transition: all 1s cubic-bezier(.19, 1, .22, 1) !important;
transform: translatey(-0.5rem)
}
.home-logs_item, .impact-log_item, .impact_slider-item, .values_card {
transition: all 1s cubic-bezier(.19, 1, .22, 1) !important;
}
.section_see-more #hover-card::before {
content: '';
background-color: rgba(1, 1, 1, 0.2);
position: absolute;
width: 100%;
height: 100%;
left: 0;
}
/*Media query*/
@media (max-width: 990px) {
.slider_cards, .home-logs_wrapper.mb {
padding-right: 2rem !important;
padding-left: 1rem !important;
}
.use-cases_cards-wrapper.swiper-wrapper, .home-logs_list.swiper-wrapper {
display: flex !important;
flex-direction: row !important;
}
.hover-card.swiper-slide, .home-logs_item.swiper-slide {
flex-shrink: 0;
width: auto !important;
max-width: 100% !important;
display: flex !important;
flex-direction: column !important;
}
}
/* Stil: projects.html */
.drawer-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0); z-index: 9998; pointer-events: none; transition: background 0.4s ease; }
.drawer-overlay.open { background: rgba(0,0,0,0.45); pointer-events: auto; }
.drawer-panel { position: fixed; top: 0; right: 0; width: 520px; max-width: 100%; height: 100%; background: #fff; z-index: 9999; transform: translateX(100%); transition: transform 0.45s cubic-bezier(0.22,1,0.36,1); display: flex; flex-direction: column; box-shadow: -8px 0 40px rgba(0,0,0,0.12); }
.drawer-panel.open { transform: translateX(0); }
.drawer-header { display: flex; align-items: center; justify-content: space-between; padding: 1.5rem 2rem; border-bottom: 1px solid #f0f0f0; flex-shrink: 0; }
.drawer-header-title { font-family: 'Cormorant Garamond', serif; font-size: 1.5rem; font-weight: 700; color: #292929; }
.drawer-close { width: 40px; height: 40px; border: none; background: #f5f5f5; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.25s ease; color: #292929; }
.drawer-body { flex: 1; overflow-y: auto; padding: 2rem; }
body.drawer-open { overflow: hidden; }
.application-form_wrapper .form-step { display: none; }
.application-form_wrapper .form-step.active { display: block; }
.application-form_wrapper .step-indicator { display: flex; gap: 0.5rem; margin-bottom: 2rem; }
.application-form_wrapper .step-dot { width: 48px; height: 4px; border-radius: 2px; background: #d9d9d9; }
.application-form_wrapper .step-dot.active { background: #292929; }
.application-form_wrapper .form-step { animation: fadeInStep 0.5s ease forwards; }
.application-form_wrapper .step-dot.completed { background: #4a7c59; }
.application-form_wrapper .step-dot.active { width: 64px; }
.application-form_wrapper .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.application-form_wrapper .form-group { margin-bottom: 1.5rem; }
.application-form_wrapper .form-label { display: block; font-size: 0.875rem; font-weight: 600; margin-bottom: 0.5rem; text-transform: uppercase; letter-spacing: 0.02em; }
.application-form_wrapper .form-input { width: 100%; padding: 1rem 1.25rem; font-size: 1rem; border: 1.5px solid #e0e0e0; border-radius: 12px; box-sizing: border-box; }
.application-form_wrapper .form-input:focus { border-color: #292929; outline: none; box-shadow: 0 0 0 3px rgba(41,41,41,0.08); }
.application-form_wrapper .upload-zone { position: relative; border: 2px dashed #d0d0d0; border-radius: 16px; padding: 2.5rem 2rem; text-align: center; cursor: pointer; background: #fff; transition: border-color 0.3s, background 0.3s; }
.application-form_wrapper .upload-zone:hover { border-color: #292929; background: #fafafa; }
.application-form_wrapper .upload-zone.has-file { border-color: #4a7c59; background: #f0f7f2; border-style: solid; }
.application-form_wrapper .upload-zone input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.application-form_wrapper .upload-icon { width: 48px; height: 48px; margin: 0 auto 1rem; color: #a0a0a0; transition: color 0.3s; }
.application-form_wrapper .upload-zone:hover .upload-icon { color: #292929; }
.application-form_wrapper .upload-zone.has-file .upload-icon { color: #4a7c59; }
.application-form_wrapper .upload-text { font-size: 0.9375rem; color: #666; line-height: 1.5; }
.application-form_wrapper .upload-text strong { color: #292929; font-weight: 600; }
.application-form_wrapper .upload-zone.has-file .upload-text strong { color: #4a7c59; }
.application-form_wrapper .upload-hint { font-size: 0.8125rem; color: #999; margin-top: 0.5rem; }
.application-form_wrapper .file-name { font-size: 0.875rem; color: #4a7c59; font-weight: 600; margin-top: 0.75rem; display: none; align-items: center; justify-content: center; gap: 0.5rem; }
.application-form_wrapper .file-name.visible { display: flex; }
.application-form_wrapper .edu-select-wrapper { margin-bottom: 2rem; }
.application-form_wrapper .edu-select { width: 100%; padding: 1rem 1.25rem; font-size: 1rem; border: 1.5px solid #e0e0e0; border-radius: 12px; outline: none; cursor: pointer; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23292929' viewBox='0 0 16 16'%3E%3Cpath d='M2.558 6.295a.25.25 0 0 1 0-.353l.884-.884a.25.25 0 0 1 .354 0L8 9.263l4.205-4.205a.25.25 0 0 1 .353 0l.884.884a.25.25 0 0 1 0 .353L8.177 11.56a.25.25 0 0 1-.354 0L2.558 6.295z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1.25rem center; }
.application-form_wrapper .step-title { font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 700; margin-bottom: 0.5rem; }
.application-form_wrapper .step-desc { font-size: 1rem; color: #666; margin-bottom: 2rem; line-height: 1.6; }
.application-form_wrapper .success-message { display: none; text-align: center; padding: 3rem 1rem; }
.application-form_wrapper .success-message.visible { display: block; }
.application-form_wrapper .success-icon { width: 80px; height: 80px; background: #4a7c59; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 1.5rem; }
.application-form_wrapper .form-nav { display: flex; justify-content: space-between; align-items: center; margin-top: 2.5rem; gap: 1rem; }
.application-form_wrapper .form-btn { padding: 1rem 2.5rem; border-radius: 60px; cursor: pointer; border: none; font-weight: 600; font-size: 0.9375rem; letter-spacing: 0.02em; transition: all 0.3s ease; }
.application-form_wrapper .form-btn-next { background: #292929; color: #fff; margin-left: auto; }
.application-form_wrapper .form-btn-next:hover { background: #1a1a1a; transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,0.15); }
.application-form_wrapper .form-btn-back { background: transparent; color: #292929; border: 1.5px solid #d0d0d0; }
.application-form_wrapper .form-btn-back:hover { border-color: #292929; background: #f5f5f5; }
.application-form_wrapper .form-btn-submit { background: #4a7c59; color: #fff; margin-left: auto; }
.application-form_wrapper .form-btn-submit:hover { background: #3d6a4b; transform: translateY(-2px); box-shadow: 0 8px 24px rgba(74,124,89,0.3); }
@keyframes fadeInStep { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 767px) { .drawer-panel { width: 100%; } }
/* Smaller header logo */
.nav-logo svg text, .nav-logo.mob svg text { font-size: 32px !important; }
.nav-logo svg, .nav-logo.mob svg { width: 220px; height: 44px; }
/* Contact section form - drawer style */
.section_contact .contact-form-drawer .form-group { margin-bottom: 1.5rem; }
.section_contact .contact-form-drawer .form-label { display: block; font-size: 0.875rem; font-weight: 600; margin-bottom: 0.5rem; text-transform: uppercase; letter-spacing: 0.02em; color: #292929; }
.section_contact .contact-form-drawer .form-input { width: 100%; padding: 1rem 1.25rem; font-size: 1rem; border: 1.5px solid #e0e0e0; border-radius: 12px; box-sizing: border-box; font-family: inherit; }
.section_contact .contact-form-drawer .form-input:focus { border-color: #292929; outline: none; box-shadow: 0 0 0 3px rgba(41,41,41,0.08); }
.section_contact .contact-form-drawer .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.section_contact .contact-form-drawer .form-btn-next { padding: 1rem 2.5rem; border-radius: 60px; cursor: pointer; border: none; font-weight: 600; font-size: 0.9375rem; background: #292929; color: #fff; margin-left: auto; transition: all 0.3s ease; }
.section_contact .contact-form-drawer .form-btn-next:hover { background: #1a1a1a; transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,0.15); }
.section_contact .contact-form-drawer .form-nav { display: flex; justify-content: flex-end; margin-top: 2.5rem; }
.section_contact .contact-form-drawer .step-indicator { display: flex; gap: 0.5rem; margin-bottom: 2rem; }
.section_contact .contact-form-drawer .step-dot { width: 48px; height: 4px; border-radius: 2px; background: #d9d9d9; }
.section_contact .contact-form-drawer .step-dot.active { background: #292929; width: 64px; }
.section_contact .contact-form-drawer .step-title { font-family: 'Cormorant Garamond', serif; font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 700; color: #292929; margin-bottom: 0.5rem; }
.section_contact .contact-form-drawer .step-desc { font-size: 1rem; color: #666; margin-bottom: 2rem; line-height: 1.6; }
.section_contact .contact-form-drawer .contact-step { display: none; }
.section_contact .contact-form-drawer .contact-step.active { display: block; }
.section_contact .contact-form-drawer .upload-zone { position: relative; border: 2px dashed #d0d0d0; border-radius: 16px; padding: 2rem; text-align: center; cursor: pointer; background: #fff; transition: border-color 0.3s, background 0.3s; }
.section_contact .contact-form-drawer .upload-zone:hover { border-color: #292929; background: #fafafa; }
.section_contact .contact-form-drawer .upload-zone.has-file { border-color: #4a7c59; background: #f0f7f2; border-style: solid; }
.section_contact .contact-form-drawer .upload-zone input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.section_contact .contact-form-drawer .upload-text { font-size: 0.9375rem; color: #666; }
.section_contact .contact-form-drawer .upload-hint { font-size: 0.8125rem; color: #999; margin-top: 0.5rem; }
.section_contact .contact-form-drawer .file-name { display: none; align-items: center; justify-content: center; gap: 0.5rem; font-size: 0.875rem; color: #4a7c59; font-weight: 600; margin-top: 0.5rem; }
.section_contact .contact-form-drawer .file-name.visible { display: flex; }
.section_contact .contact-form-drawer .form-btn-back { padding: 1rem 2rem; border-radius: 60px; cursor: pointer; border: 1.5px solid #d0d0d0; background: transparent; color: #292929; font-weight: 600; }
.section_contact .contact-form-drawer .form-btn-submit { padding: 1rem 2.5rem; border-radius: 60px; cursor: pointer; border: none; font-weight: 600; background: #4a7c59; color: #fff; margin-left: auto; }
.section_contact .contact-form-drawer .contact-success { text-align: center; padding: 2rem 0; }
@media (max-width: 600px) { .section_contact .contact-form-drawer .form-row { grid-template-columns: 1fr; } }
/* Stil: projects.html */
/* Logo invert on dark bg*/
.logo_link:hover .logo-img {
filter: none;
transition: all 1s cubic-bezier(.19, 1, .22, 1) !important;
}
.logo_link:hover .logo-img.black {
filter: invert();
}
.logo_link .logo-img {
transition: all 1s cubic-bezier(.19, 1, .22, 1) !important;
}
/*Timeline slider*/
#cards-swiper .slick-current {
background-color: var(--base-color-brand--chlorophyll) !important;
transition: all 1s cubic-bezier(.19, 1, .22, 1) !important;
}
#dates-swiper .slick-current .text-size-regular {
color: var(--base-color-brand--chlorophyll) !important;
transition: all 1s cubic-bezier(.19, 1, .22, 1) !important;
}
.slick-track {
display: flex !important;
}
.slick-list {
margin: 0 0.4rem;
}
.slick-slide {
height: inherit !important;
margin: 0 0.4rem;
}
@media (hover: hover) and (pointer:fine) {
.tab-content__item-h.horizontal:not(.active):hover .content-item__nr.horizontal {
transform: translate(25%, 0px);
color: var(--base-color-brand--black) !important;
}
}
.tab-content__item-h.horizontal.active {
transition: all 1s cubic-bezier(.19, 1, .22, 1) !important;
}
.tab-content__item-h.horizontal.active h4, .tab-content__item-h.horizontal.active p {
color: var(--base-color-brand--black) !important;
}
.tab-content__item-h.horizontal.active .content-item__nr.horizontal {
color: var(--base-color-brand--black);
!important; transition: all 1s cubic-bezier(.19, 1, .22, 1) !important;
}
/* Stil: projects.html */
/* Make text look crisper and more legible in all browsers */
body {
-webkit-font-smoothing: antialiased !important;
-moz-osx-font-smoothing: grayscale !important;
font-smoothing: antialiased !important;
text-rendering: optimizeLegibility !important;
}
/* Focus state style for keyboard navigation for the focusable elements */
*[tabindex]:focus-visible, input[type="file"]:focus-visible {
outline: 0.125rem solid #4d65ff;
outline-offset: 0.125rem;
}
/* Set color style to inherit */
.inherit-color * {
color: inherit;
}
/* Get rid of top margin on first element in any rich text element */
.w-richtext > :not(div):first-child, .w-richtext > div:first-child > :first-child {
margin-top: 0 !important;
}
/* Get rid of bottom margin on last element in any rich text element */
.w-richtext>:last-child, .w-richtext ol li:last-child, .w-richtext ul li:last-child {
margin-bottom: 0 !important;
}
/* Make sure containers never lose their center alignment */
.container-medium,.container-small, .container-large {
margin-right: auto !important;
margin-left: auto !important;
}
/*
Make the following elements inherit typography styles from the parent and not have hardcoded values.
Important: You will not be able to style for example "All Links" in Designer with this CSS applied.
Uncomment this CSS to use it in the project. Leave this message for future hand-off.
*/
/*
a,
.w-input,
.w-select,
.w-tab-link,
.w-nav-link,
.w-dropdown-btn,
.w-dropdown-toggle,
.w-dropdown-link {
color: inherit;
text-decoration: inherit;
font-size: inherit;
}
*/
/* Apply "..." after 3 lines of text */
.text-style-3lines {
display: -webkit-box;
overflow: hidden;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
/* Apply "..." after 2 lines of text */
.text-style-2lines {
display: -webkit-box;
overflow: hidden;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
/* Adds inline flex display */
.display-inlineflex {
display: inline-flex;
}
/* These classes are never overwritten */
.hide {
display: none !important;
}
@media screen and (max-width: 991px) {
.hide, .hide-tablet {
display: none !important;
}
}
@media screen and (max-width: 767px) {
.hide-mobile-landscape {
display: none !important;
}
}
@media screen and (max-width: 479px) {
.hide-mobile {
display: none !important;
}
}
.margin-0 {
margin: 0rem !important;
}
.padding-0 {
padding: 0rem !important;
}
.spacing-clean {
padding: 0rem !important;
margin: 0rem !important;
}
.margin-top {
margin-right: 0rem !important;
margin-bottom: 0rem !important;
margin-left: 0rem !important;
}
.padding-top {
padding-right: 0rem !important;
padding-bottom: 0rem !important;
padding-left: 0rem !important;
}
.margin-right {
margin-top: 0rem !important;
margin-bottom: 0rem !important;
margin-left: 0rem !important;
}
.padding-right {
padding-top: 0rem !important;
padding-bottom: 0rem !important;
padding-left: 0rem !important;
}
.margin-bottom {
margin-top: 0rem !important;
margin-right: 0rem !important;
margin-left: 0rem !important;
}
.padding-bottom {
padding-top: 0rem !important;
padding-right: 0rem !important;
padding-left: 0rem !important;
}
.margin-left {
margin-top: 0rem !important;
margin-right: 0rem !important;
margin-bottom: 0rem !important;
}
.padding-left {
padding-top: 0rem !important;
padding-right: 0rem !important;
padding-bottom: 0rem !important;
}
.margin-horizontal {
margin-top: 0rem !important;
margin-bottom: 0rem !important;
}
.padding-horizontal {
padding-top: 0rem !important;
padding-bottom: 0rem !important;
}
.margin-vertical {
margin-right: 0rem !important;
margin-left: 0rem !important;
}
.padding-vertical {
padding-right: 0rem !important;
padding-left: 0rem !important;
}
.btn_icon {
width: 16px;
height: 16px;
overflow: visible;
position: relative;
}
.btn_path {
transition: transform 0.65s cubic-bezier(0.785, 0.135, 0.15, 0.86);
position: absolute;
width: 16px;
height: 16px;
left: 0;
top: 0;
}
.btn_path:first-child {
transition-delay: 0.1s;
}
.btn_path:last-child {
transform: translateX(-100%);
transition-delay: 0;
}
.btn_circle {
transform: translateY(-50%) scale(1);
transition: transform 0.65s cubic-bezier(0.785, 0.135, 0.15, 0.86);
z-index: 1;
pointer-events: none;
}
@media (max-width: 991px) {
.navbar_menu.is-page-height-tablet {
height: 100dvh !important;
}
}
/* Hover effect */
@media (hover: hover) and (pointer: fine) {
.btn:hover .btn_circle {
transform: translateY(-50%) scale(15);
}
[data-wf--button-main--variant='green'] .btn:hover, .btn.submit .btn.submit:hover {
background-color: var(--base-color-brand--black) !important;
transition: all 0.5s ease-in-out;
transition-delay: 0.2s;
}
.btn:hover {
background-color: var(--base-color-brand--chlorophyll);
transition: all 0.5s ease-in-out;
transition-delay: 0.2s;
}
.btn:hover .btn_path:first-child {
transform: translateX(100%);
transition-delay: 0;
}
.btn:hover .btn_path:last-child {
transform: translateX(0);
transition-delay: 0.1s;
}
.btn:hover .btn_text {
color: var(--base-color-brand--black) !important;
transition: all 150ms ease-in-out !important;
}
}
.btn .btn_text {
transition: all 1150ms ease-in-out !important;
}
.hover_video_wrapper .video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
pointer-events: none;
/* So text/overlay on top can be clicked */
}
.tab_link {
opacity: 0.6;
transition: all 1s cubic-bezier(.19, 1, .22, 1) !important;
overflow: hidden !important;
}
.tab_link .sub_element {
margin-left: -0.5rem;
transition: all 0.4s cubic-bezier(.19, 1, .22, 1) !important;
}
.tab_link.w--current {
opacity: 1;
}
.tab_link.w--current .sub_element {
opacity: 1;
margin-left: 0rem !important;
transition: all 0.4s cubic-bezier(.19, 1, .22, 1) !important;
}
.slider-button-left:hover .arrow {
color: var(--base-color-brand--chlorophyll) !important;
}
.slider-button-left:hover .arrow.grey {
color: var(--base-color-brand--black) !important;
}
.slider-button-left.grey:hover .arrow.grey {
color: var(--base-color-brand--black) !important;
}
.nav_link.w--current .nav-text {
color: var(--base-color-brand--black) !important;
}
@keyframes scroll {
from {
transform: translateX(0);
}
to {
transform: translateX(-100%);
}
}
.logos-track {
animation: scroll 20s linear infinite;
}
.logos-track.reverse {
animation: scroll 40s linear infinite;
}
.logos-track.slow {
animation: scroll 45s linear infinite;
}
.logos-row:hover > .logos-track {
animation-play-state: paused
}
.logos-track.reverse {
animation-direction: reverse;
}
.logo_link {
-webkit-transform: translateZ(0);
}