html { font-size: 1vw; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; font-feature-settings: "ss01", "liga", "kern"; } body:has([data-cursor]:hover) .cursor { opacity: 1; } /* 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); } [data-split="heading"] { visibility: hidden; } .line { overflow: hidden; display: block; } .line > span { display: inline-block; } .text-line-mask{ padding-bottom: 0.2em; margin-bottom: -0.2em; } /* 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-content__text{ --text-duplicate-distance: 1.5em; text-shadow: 0px var(--text-duplicate-distance) currentColor; } .btn-content__text.is-button{ --text-duplicate-distance: 1.5em; text-shadow: 0px var(--text-duplicate-distance) white; } /* Only apply hover animations if they are actually not supported */ @media (hover:hover) and (pointer:fine){ .btn-link:hover .btn-content__text{ transform: translate(0px, calc(-1 * var(--text-duplicate-distance))); } .btn-link:hover .btn-content__bg{ transform: translate(0px, 0%) rotate(0deg); } } /* Modal Form */ .modal-contact { position: fixed; top: 0; left: 0; width: 100%; height: 100%; display: none; z-index: 1000; } .modal--bg { position: absolute; right: 0; top: 0; height: 100%; clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%); } .modal-text-wrapper, .modal-form, .modal-close-link { opacity: 0; } @media (max-width: 900px) { .modal--bg { width: 100%; } } body.no-scroll { overflow: hidden; height: 100vh; }