html.lenis { height: auto; } .lenis.lenis-smooth { scroll-behavior: auto; } .lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; } .lenis.lenis-stopped { overflow: hidden; } /* >>> WIZARDRY START <<< */ body { font-size: 1.1111111111111112vw; } /* Max Font Size */ @media screen and (min-width:1600px) { body { font-size: 17.77777777777778px; } } /* Container Max Width */ .container { max-width: 1600px; } /* Min Font Size */ @media screen and (max-width:991px) { body { font-size: 11.011111111111111px; } } @media screen and (max-width:1260px) { .body { font-size: 14px; } } /* >>> WIZARDRY END <<< */ .case-slider, .cursor { pointer-events: none; } /* Global attribute to easily control easing and timing of all targetted elements */ [data-button-anim-target] { transition: transform 0.525s cubic-bezier(0.625, 0.05, 0, 1); } /* Fake a duplicate text element using text shadow without blur */ /* We save the distance in a variable for easy use in the CSS animation */ .btn-icon-content__text { --text-duplicate-distance: 1.5em; text-shadow: 0px var(--text-duplicate-distance) currentColor; } /* Only apply hover animations if they are actually not supported */ @media (hover:hover) and (pointer:fine) { .btn-icon-link:hover .btn-icon-content__text { transform: translate(0px, calc(-1 * var(--text-duplicate-distance))); } .btn-icon-link:hover .btn-icon-icon__bg { transform: rotate(90deg); } .btn-icon-link:hover .btn-icon-icon__arrow { transform: translate(a200%, 0px); } .btn-icon-link:hover .btn-icon-content__bg { transform: translate(0px, 0%) rotate(0deg); } } .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: #131313; 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; } .case_rich-text p:last-child { margin-bottom: 0; } /* ------------ Custom Cursor Tooltip ------------ */ body:has([data-cursor]:hover) .cursor { opacity: 1; } .button:hover .button-bg { transform: scale(0.95); } /* ------------ Flickity Slider - Setup ------------ */ [data-flickity-status="active"] [data-flickity-list]::after { content: "flickity"; display: none; } [data-flickity-status="active"] [data-flickity-list] { display: block; } [data-flickity-list] .flickity-viewport { overflow: visible; width: 100%; } [data-flickity-control][disabled] { visibility: hidden; opacity: 0; pointer-events: none; } [data-flickity-dot="active"] { background-color: #131313; } /* ------------ Flickity Slider - Cards ------------ */ /* Desktop */ @media screen and (min-width: 992px) { [data-flickity-type="cards"] { --flick-col: 3; --flick-gap: 2em; } /* Turn Flickity OFF & Hide Controls */ [data-flickity-type="cards"]:is([data-flickity-count="1"], [data-flickity-count="2"], [data-flickity-count="3"]) [data-flickity-list]::after { content: ""; display: block; } [data-flickity-type="cards"]:is([data-flickity-count="1"], [data-flickity-count="2"], [data-flickity-count="3"]) [data-flickity-list] { display: flex; } [data-flickity-type="cards"]:is([data-flickity-count="1"], [data-flickity-count="2"], [data-flickity-count="3"]) [data-flickity-controls] { display: none; } [data-flickity-type="cards"] [data-flickity-dot]:nth-last-child(-n+2) { display: none; } /* Hide last two dots */ } /* Tablet */ @media (min-width: 768px) and (max-width: 991px) { [data-flickity-type="cards"] { --flick-col: 2.5; --flick-gap: 1.5em; } /* Turn Flickity OFF & Hide Controls */ [data-flickity-type="cards"]:is([data-flickity-count="1"], [data-flickity-count="2"]) [data-flickity-list]::after { content: ""; display: block; } [data-flickity-type="cards"]:is([data-flickity-count="1"], [data-flickity-count="2"]) [data-flickity-list] { display: flex; } [data-flickity-type="cards"]:is([data-flickity-count="1"], [data-flickity-count="2"]) [data-flickity-controls] { display: none; } [data-flickity-type="cards"] [data-flickity-dot]:nth-last-child(1) { display: none; } /* Hide last dot */ } /* Mobile */ @media screen and (max-width: 767px) { [data-flickity-type="cards"] { --flick-col: 1.5; --flick-gap: 1em; } /* Turn Flickity OFF & Hide Controls */ [data-flickity-type="cards"]:is([data-flickity-count="1"]) [data-flickity-list]::after { content: ""; display: block; } [data-flickity-type="cards"]:is([data-flickity-count="1"]) [data-flickity-list] { display: flex; } [data-flickity-type="cards"]:is([data-flickity-count="1"]) [data-flickity-controls] { display: none; } } /* Split Lines Text */ .line { position: relative; } .line-mask { position: absolute; top: 0; right: 0; background-color: white; opacity: 0.65; height: 100%; width: 100%; z-index: 2; } /* Testimonial cards */ .testimonial-card-wrapper { aspect-ratio: 0.8; } .testimonial-card-wrapper:not(:first-child) { margin: 0 0 0 -10vw; } .testimonial-card-content { will-change: transform; } /* Testimonials Mobile: show only 4 cards */ @media screen and (max-width: 767px) { .testimonial-card-wrapper:nth-child(n+5) { display: none; } } /* Testimonials Tablet: show only 6 cards */ @media screen and (min-width: 768px) and (max-width: 991px) { .testimonial-card-wrapper:nth-child(n+7) { display: none; } } /* Border Bottom */ .border-bottom { background-image: radial-gradient(circle, #F5A623 2px, transparent 2px); background-size: 12px 3px; /* first value = spacing, second = height */ background-position: bottom; background-repeat: repeat-x; padding-bottom: 1px; } /* Bubble Arrow Button */ .btn-bubble-arrow__content { transition: transform 0.635s cubic-bezier(0.625, 0.05, 0, 1); transform: translateX(-2em) rotate(0.001deg); } .btn-bubble-arrow__arrow { transition: transform 0.635s cubic-bezier(0.625, 0.05, 0, 1); transform: scale(0) rotate(0.001deg); transform-origin: left; } .btn-bubble-arrow__arrow-svg { transition: transform 0.635s cubic-bezier(0.625, 0.05, 0, 1); transform: rotate(-90deg); } .btn-bubble-arrow__arrow.is--duplicate { position: absolute; z-index: 2; right: 0.25em; transform: scale(1) rotate(0.001deg); transform-origin: right; } /* Hover */ .btn-bubble-arrow:hover .btn-bubble-arrow__content { transform: translateX(0em) rotate(0.001deg); } .btn-bubble-arrow:hover .btn-bubble-arrow__arrow-svg { transform: rotate(-45deg); } .btn-bubble-arrow:hover .btn-bubble-arrow__arrow { transform: scale(1) rotate(0.001deg); } .btn-bubble-arrow:hover .btn-bubble-arrow__arrow.is--duplicate { transform: scale(0) rotate(0.001deg); } /* 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; } .accordion-css__list { align-items: flex-start; /* keep all your other existing styles */ } .accordion-css__item { list-style: none; width: fit-content; max-width: 100%; transition: width 0.6s cubic-bezier(0.625, 0.05, 0, 1); align-self: flex-start; } .accordion-css_item-title-wrap { background-color: transparent; transition: background-color 0.6s cubic-bezier(0.625, 0.05, 0, 1); } [data-accordion-status="active"].accordion-css__item { width: 100%; } [data-accordion-status="active"] .accordion-css_item-title-wrap { background-color: color-mix(in srgb, var(--background--primary-dark) 8%, transparent); }