<div class="site">
<header class="site__header">
<div id="header-84587-66696" class="header">
<div class="header__inner">
<a class="header__logo" href="#" title="zplane">
<img width="164" height="50" src="/assets/images/logo.7e7ebc0793.svg" alt="zplane" class="header__logo-img">
</a>
<div class="header__contents">
<div class="header__icon-buttons">
<button class="button" type="button" title="Open menu" aria-expanded="false" aria-controls="header-84587-66696-menu" data-action="open">
<span class="button__icon">
<svg class="icon icon--bars" viewBox="0 0 200 200" aria-hidden="true">
<use xlink:href="/assets/icons/icons.dcaca1c147.svg#bars"></use>
</svg> </span>
</button>
<div class="header__icon-button">
<a class="button" title="Partner Area" href="#">
<span class="button__icon">
<svg class="icon icon--lock-keyhole" viewBox="0 0 200 200" aria-hidden="true">
<use xlink:href="/assets/icons/icons.dcaca1c147.svg#lock-keyhole"></use>
</svg> </span>
</a>
</div>
</div>
<div class="header__menu" id="header-84587-66696-menu" hidden>
<div class="header__menu-close">
<button class="button" type="button" title="Close menu" data-action="close">
<span class="button__icon">
<svg class="icon icon--xmark" viewBox="0 0 200 200" aria-hidden="true">
<use xlink:href="/assets/icons/icons.dcaca1c147.svg#xmark"></use>
</svg> </span>
</button>
</div>
<ul class="header__navigation">
<li class="header__navigation-item" data-floating-root>
<span class="header__navigation-link">
<button class="link" type="button" data-link-block data-link-type="internal" aria-expanded="false" aria-haspopup="true" aria-controls="header-84587-66696-navigation-menu-1"><span class="link__text u-underline">Company</span><span class="link__icon"><svg class="icon icon--caret-down-solid" viewBox="0 0 200 200" aria-hidden="true">
<use xlink:href="/assets/icons/icons.dcaca1c147.svg#caret-down-solid"></use>
</svg></span></button>
</span>
<ul class="header__navigation-menu" id="header-84587-66696-navigation-menu-1" data-floating-placements="bottom" data-floating-offset="16" role="menu" hidden>
<li class="header__navigation-menu-item" role="presentation">
<a class="link" data-link-type="internal" href="#" role="menuitem"><span class="link__text u-underline">Overview</span></a>
</li>
<li class="header__navigation-menu-item" role="presentation">
<a class="link" data-link-type="internal" href="#" role="menuitem"><span class="link__text u-underline">Pressroom</span></a>
</li>
<li class="header__navigation-menu-item" role="presentation">
<a class="link" data-link-type="internal" href="#" role="menuitem"><span class="link__text u-underline">Blog & News</span></a>
</li>
</ul>
</li>
<li class="header__navigation-item" data-floating-root>
<span class="header__navigation-link">
<a class="link" data-link-block data-link-type="internal" href="#" aria-current="true"><span class="link__text u-underline">Technology</span></a>
</span>
</li>
<li class="header__navigation-item" data-floating-root>
<span class="header__navigation-link">
<a class="link" data-link-block data-link-type="internal" href="#"><span class="link__text u-underline">Licensing</span></a>
</span>
</li>
<li class="header__navigation-item" data-floating-root>
<span class="header__navigation-link">
<a class="link" data-link-block data-link-type="internal" href="#"><span class="link__text u-underline">Partner</span></a>
</span>
</li>
<li class="header__navigation-item" data-floating-root>
<span class="header__navigation-link">
<a class="link" data-link-block data-link-type="internal" href="#"><span class="link__text u-underline">Contact</span></a>
</span>
</li>
</ul>
<div class="header__navigation-highlight"></div>
</div>
<div class="header__login-button">
<a class="button" href="#">
<span class="button__icon">
<svg class="icon icon--lock-keyhole" viewBox="0 0 200 200" aria-hidden="true">
<use xlink:href="/assets/icons/icons.dcaca1c147.svg#lock-keyhole"></use>
</svg> </span>
<span class="button__text u-underline">Partner Area</span>
</a>
</div>
</div>
</div>
</div>
</header>
<nav class="site__breadcrumb" aria-current="Current position">
<nav class="breadcrumb" aria-label="Current position on site">
<ol class="breadcrumb__crumbs" role="list">
<li class="breadcrumb__crumb"><a class="breadcrumb__link u-underline" href="#"><span class="breadcrumb__link-icon"><svg class="icon icon--house" viewBox="0 0 200 200" aria-hidden="true">
<use xlink:href="/assets/icons/icons.dcaca1c147.svg#house"></use>
</svg></span><span class="breadcrumb__link-text u-hidden-visually">Startseite</span></a><svg class="icon icon--angle-right breadcrumb__arrow" viewBox="0 0 200 200" aria-hidden="true">
<use xlink:href="/assets/icons/icons.dcaca1c147.svg#angle-right"></use>
</svg></li>
<li class="breadcrumb__crumb"><a class="breadcrumb__link u-underline" href="#"><span class="breadcrumb__link-icon"><svg class="icon icon--arrow-turn-down-right" viewBox="0 0 200 200" aria-hidden="true">
<use xlink:href="/assets/icons/icons.dcaca1c147.svg#arrow-turn-down-right"></use>
</svg></span><span class="breadcrumb__link-text">Unterseite</span></a><svg class="icon icon--angle-right breadcrumb__arrow" viewBox="0 0 200 200" aria-hidden="true">
<use xlink:href="/assets/icons/icons.dcaca1c147.svg#angle-right"></use>
</svg></li>
<li class="breadcrumb__crumb"><a class="breadcrumb__link u-underline" href="#" aria-current="page"><span class="breadcrumb__link-icon"><svg class="icon icon--arrow-turn-down-right" viewBox="0 0 200 200" aria-hidden="true">
<use xlink:href="/assets/icons/icons.dcaca1c147.svg#arrow-turn-down-right"></use>
</svg></span><span class="breadcrumb__link-text">Artikel</span></a></li>
</ol>
<script type="application/ld+json">
{
"@context": "https:\/\/schema.org",
"@type": "BreadcrumbList",
"itemListElement": [{
"@type": "ListItem",
"position": 1,
"name": "Startseite",
"item": "#"
},
{
"@type": "ListItem",
"position": 2,
"name": "Unterseite",
"item": "#"
},
{
"@type": "ListItem",
"position": 3,
"name": "Artikel",
"item": "#"
}
]
}
</script>
</nav>
</nav>
<div class="site__stage">
<div id="stage-99226-23766" class="stage">
<div class="stage__inner">
<div class="stage__content">
<div class="stage__headline">
<h1 class="headline"><span class="headline__kicker"><em class="headline__highlight">Stretch & Pitch</em><span class="u-hidden-visually">: </span></span><span class="headline__text">Elastique</span><span class="headline__subhead"><span class="u-hidden-visually">, </span><em class="headline__highlight">Industry-leading time stretching and pitch shifting engines</em></span></h1>
</div>
<div class="stage__text">
Elastique family offers time-stretching and pitch shifting engines, optimized for different use cases.
</div>
<div class="stage__pills">
<div class="pills">
<div class="pills__pill">
<div class="pill pill--orange"><span class="pill__text u-underline">Analysis</span></div>
</div>
<div class="pills__pill">
<div class="pill pill--yellow"><span class="pill__text u-underline">Broadcast</span></div>
</div>
<div class="pills__pill">
<div class="pill pill--green"><span class="pill__text u-underline">DJ Tool</span></div>
</div>
</div>
</div>
</div>
<div class="stage__media">
<div class="stage__icon">
<img class="stage__icon-inner" width="50" height="50" role="presentation" alt="" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 96 96'%3E%3Cpath fill='%23fff' fill-rule='evenodd' d='M96 0H0v96h96zM21 29.5a355 355 0 0 0 53 0l3.3-3.3 4.8-4.7-8-5.8c-21.1 2.3-31.8 2-53.1 0zm54.2 36.7a361 361 0 0 0-53 0L20.4 68c-2.2 2.1-3.8 3.7-6.4 6 3.2 2.6 4.9 3.7 8.1 5.9q26.6-3.1 53.1 0zM74 55.9c-21.3-.3-32-.2-53.4 0V42c21.4.2 32 .2 53.4 0z'/%3E%3C/svg%3E
">
</div>
</div>
</div>
</div>
</div>
<main class="site__content">
<div id="page-12660-12505" class="page">
</div>
</main>
<footer class="site__footer">
<div id="footer-30351-77157" class="footer">
<div class="footer__inner">
<div class="footer__sitemap">
<div class="footer__section">
<div id="footer-30351-77157-sitemap-section-1" class="footer__section-headline">
<span class="headline" data-headline-size="6"><span class="headline__text">Information</span></span>
</div>
<ul class="footer__links" role="list" aria-labelledby="footer-30351-77157-sitemap-section-1">
<li class="footer__link"><a class="link" data-link-type="internal" href="#"><span class="link__text u-underline">About us</span></a></li>
<li class="footer__link"><a class="link" data-link-type="internal" href="#"><span class="link__text u-underline">Contact</span></a></li>
<li class="footer__link"><a class="link" data-link-type="internal" href="#"><span class="link__text u-underline">Service</span></a></li>
<li class="footer__link"><a class="link" data-link-type="internal" href="#"><span class="link__text u-underline">Blog & News</span></a></li>
<li class="footer__link"><a class="link" data-link-type="internal" href="#"><span class="link__text u-underline">Pressroom</span></a></li>
</ul>
</div>
<div class="footer__section">
<div id="footer-30351-77157-sitemap-section-2" class="footer__section-headline">
<span class="headline" data-headline-size="6"><span class="headline__text">Licensing</span></span>
</div>
<ul class="footer__links" role="list" aria-labelledby="footer-30351-77157-sitemap-section-2">
<li class="footer__link"><a class="link" data-link-type="internal" href="#"><span class="link__text u-underline">Information</span></a></li>
<li class="footer__link"><a class="link" data-link-type="internal" href="#"><span class="link__text u-underline">Models</span></a></li>
<li class="footer__link"><a class="link" data-link-type="internal" href="#"><span class="link__text u-underline">SDK Content</span></a></li>
<li class="footer__link"><a class="link" data-link-type="internal" href="#"><span class="link__text u-underline">Support</span></a></li>
</ul>
</div>
<div class="footer__section">
<div id="footer-30351-77157-sitemap-section-3" class="footer__section-headline">
<span class="headline" data-headline-size="6"><span class="headline__text">SDK Products</span></span>
</div>
<ul class="footer__links" role="list" aria-labelledby="footer-30351-77157-sitemap-section-3">
<li class="footer__link"><a class="link" data-link-type="internal" href="#"><span class="link__text u-underline">4TUNE</span></a></li>
<li class="footer__link"><a class="link" data-link-type="internal" href="#"><span class="link__text u-underline">ATAAK!</span></a></li>
<li class="footer__link"><a class="link" data-link-type="internal" href="#"><span class="link__text u-underline">AUFTAKT</span></a></li>
<li class="footer__link"><a class="link" data-link-type="internal" href="#"><span class="link__text u-underline">BARBEATQ</span></a></li>
<li class="footer__link"><a class="link" data-link-type="internal" href="#"><span class="link__text u-underline">CWAVE</span></a></li>
<li class="footer__link"><a class="link" data-link-type="internal" href="#"><span class="link__text u-underline">ELASTIQUE</span></a></li>
<li class="footer__link"><a class="link" data-link-type="internal" href="#"><span class="link__text u-underline">ESPACE</span></a></li>
<li class="footer__link"><a class="link" data-link-type="internal" href="#"><span class="link__text u-underline">FXPACK</span></a></li>
<li class="footer__link"><a class="link" data-link-type="internal" href="#"><span class="link__text u-underline">KORT</span></a></li>
<li class="footer__link"><a class="link" data-link-type="internal" href="#"><span class="link__text u-underline">METERING</span></a></li>
<li class="footer__link"><a class="link" data-link-type="internal" href="#"><span class="link__text u-underline">RESTORE</span></a></li>
<li class="footer__link"><a class="link" data-link-type="internal" href="#"><span class="link__text u-underline">RETUNE</span></a></li>
<li class="footer__link"><a class="link" data-link-type="internal" href="#"><span class="link__text u-underline">TONART</span></a></li>
<li class="footer__link"><a class="link" data-link-type="internal" href="#"><span class="link__text u-underline">ZREVERB</span></a></li>
</ul>
</div>
</div>
<div class="footer__icon-buttons">
<a class="button" title="Email contact" href="#">
<span class="button__icon">
<svg class="icon icon--envelope" viewBox="0 0 200 200" aria-hidden="true">
<use xlink:href="/assets/icons/icons.dcaca1c147.svg#envelope"></use>
</svg> </span>
</a>
<a class="button" title="Facebook" href="#">
<span class="button__icon">
<svg class="icon icon--facebook" viewBox="0 0 200 200" aria-hidden="true">
<use xlink:href="/assets/icons/icons.dcaca1c147.svg#facebook"></use>
</svg> </span>
</a>
<a class="button" title="LinkedIn" href="#">
<span class="button__icon">
<svg class="icon icon--linkedin" viewBox="0 0 200 200" aria-hidden="true">
<use xlink:href="/assets/icons/icons.dcaca1c147.svg#linkedin"></use>
</svg> </span>
</a>
<a class="button" title="X" href="#">
<span class="button__icon">
<svg class="icon icon--x" viewBox="0 0 200 200" aria-hidden="true">
<use xlink:href="/assets/icons/icons.dcaca1c147.svg#x"></use>
</svg> </span>
</a>
<a class="button" title="YouTube" href="#">
<span class="button__icon">
<svg class="icon icon--youtube" viewBox="0 0 200 200" aria-hidden="true">
<use xlink:href="/assets/icons/icons.dcaca1c147.svg#youtube"></use>
</svg> </span>
</a>
</div>
<div class="footer__closing-line">
<img width="164" height="50" src="/assets/images/logo.7e7ebc0793.svg" alt="zplane" class="footer__logo">
<ul class="footer__meta-links">
<li class="footer__meta-link">
<a class="link" data-link-type="internal" href="#"><span class="link__text u-underline">Imprint</span></a>
</li>
<li class="footer__meta-link">
<a class="link" data-link-type="internal" href="#"><span class="link__text u-underline">Privacy Policy</span></a>
</li>
</ul>
</div>
</div>
</div>
</footer>
</div>
{% set contentTag = contentTag ?? 'main' %}
<div {{ html_attributes({
id: id ?? false,
class: 'site',
}, attrs ?? {}) }}>
<header {{ html_attributes({
class: 'site__header',
}, headerAttrs ?? {}) }}>
{% include '@header' with header only %}
</header>
{% if breadcrumb|default %}
<nav class="site__breadcrumb" aria-current="{{ 'Current position' | t('site') }}">
{% include '@breadcrumb' with breadcrumb only %}
</nav>
{% endif %}
{% if stage|default %}
<div class="site__stage">
{% include '@stage' with stage only %}
</div>
{% endif %}
<{{ contentTag }} {{ html_attributes({
class: 'site__content',
}, contentAttrs ?? {}) }}>
{% include '@page' with page only %}
</{{ contentTag }}>
<footer {{ html_attributes({
class: 'site__footer',
}, footerAttrs ?? {}) }}>
{% include '@footer' with footer only %}
</footer>
</div>
{
"header": {
"logo": {
"text": "zplane",
"link": "#"
},
"navigation": [
{
"text": "Company",
"link": "#",
"children": [
{
"text": "Pressroom",
"link": "#"
},
{
"text": "Blog & News",
"link": "#"
}
]
},
{
"text": "Technology",
"link": "#",
"active": true
},
{
"text": "Licensing",
"link": "#"
},
{
"text": "Partner",
"link": "#"
},
{
"text": "Contact",
"link": "#"
}
],
"iconButtons": [
{
"link": "#",
"title": "Partner Area",
"icon": "lock-keyhole"
}
],
"loginButton": {
"link": "#",
"text": "Partner Area",
"icon": "lock-keyhole"
}
},
"stage": {
"headline": {
"text": "Elastique",
"subhead": "__Industry-leading time stretching and pitch shifting engines__",
"kicker": "__Stretch & Pitch__"
},
"text": "Elastique family offers time-stretching and pitch shifting engines, optimized for different use cases.",
"images": false,
"icon": "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 96 96'%3E%3Cpath fill='%23fff' fill-rule='evenodd' d='M96 0H0v96h96zM21 29.5a355 355 0 0 0 53 0l3.3-3.3 4.8-4.7-8-5.8c-21.1 2.3-31.8 2-53.1 0zm54.2 36.7a361 361 0 0 0-53 0L20.4 68c-2.2 2.1-3.8 3.7-6.4 6 3.2 2.6 4.9 3.7 8.1 5.9q26.6-3.1 53.1 0zM74 55.9c-21.3-.3-32-.2-53.4 0V42c21.4.2 32 .2 53.4 0z'/%3E%3C/svg%3E\n",
"pills": [
{
"text": "Analysis",
"color": "orange"
},
{
"text": "Broadcast",
"color": "yellow"
},
{
"text": "DJ Tool",
"color": "green"
}
]
},
"page": {
"blocks": []
},
"breadcrumb": {
"items": [
{
"text": "Startseite",
"link": "#"
},
{
"text": "Unterseite",
"link": "#"
},
{
"text": "Artikel",
"link": "#"
}
]
},
"footer": {
"sitemap": [
{
"title": "Information",
"links": [
{
"link": "#",
"text": "About us"
},
{
"link": "#",
"text": "Contact"
},
{
"link": "#",
"text": "Service"
},
{
"link": "#",
"text": "Blog & News"
},
{
"link": "#",
"text": "Pressroom"
}
]
},
{
"title": "Licensing",
"links": [
{
"link": "#",
"text": "Information"
},
{
"link": "#",
"text": "Models"
},
{
"link": "#",
"text": "SDK Content"
},
{
"link": "#",
"text": "Support"
}
]
},
{
"title": "SDK Products",
"links": [
{
"link": "#",
"text": "4TUNE"
},
{
"link": "#",
"text": "ATAAK!"
},
{
"link": "#",
"text": "AUFTAKT"
},
{
"link": "#",
"text": "BARBEATQ"
},
{
"link": "#",
"text": "CWAVE"
},
{
"link": "#",
"text": "ELASTIQUE"
},
{
"link": "#",
"text": "ESPACE"
},
{
"link": "#",
"text": "FXPACK"
},
{
"link": "#",
"text": "KORT"
},
{
"link": "#",
"text": "METERING"
},
{
"link": "#",
"text": "RESTORE"
},
{
"link": "#",
"text": "RETUNE"
},
{
"link": "#",
"text": "TONART"
},
{
"link": "#",
"text": "ZREVERB"
}
]
}
],
"iconButtons": [
{
"link": "#",
"title": "Email contact",
"icon": "envelope"
},
{
"link": "#",
"title": "Facebook",
"icon": "facebook"
},
{
"link": "#",
"title": "LinkedIn",
"icon": "linkedin"
},
{
"link": "#",
"title": "X",
"icon": "x"
},
{
"link": "#",
"title": "YouTube",
"icon": "youtube"
}
],
"metaLinks": [
{
"link": "#",
"text": "Imprint"
},
{
"link": "#",
"text": "Privacy Policy"
}
]
}
}
@use 'layers';
@property --site-header-background-opacity {
initial-value: 0;
syntax: '<alpha-value>';
}
@layer site {
.site {
background-color: var(--color-gray-050);
background-image: linear-gradient(to bottom, var(--color-white), var(--color-gray-050));
background-position: 0 0;
background-repeat: 0;
background-size: 100% 20rem;
display: flex;
flex-direction: column;
inline-size: 100%;
max-inline-size: 100vw;
min-block-size: 100vh;
overflow: clip;
position: relative;
}
.site__header {
inline-size: 100%;
inset-block-start: 0;
inset-inline: 0;
padding-block: clamp(0.8rem, 2.5vw, 3.6rem);
padding-inline: var(--grid-padding);
position: sticky;
z-index: #{layers.position('header')};
&::before {
background-color: var(--color-white);
box-shadow: var(--box-shadow-xxl);
content: '';
inset: 0;
opacity: var(--site-header-background-opacity, 0);
position: absolute;
transition-property: opacity;
}
}
.site__breadcrumb {
margin-block: 0.8rem;
padding-inline: var(--grid-padding);
}
.site__stage {
inline-size: 100%;
margin-block: 4.8rem;
margin-inline: auto;
max-inline-size: var(--grid-container);
padding-inline: var(--grid-padding);
}
.site__content {
inline-size: 100%;
margin-block: 4.8rem;
margin-inline: auto;
max-inline-size: var(--grid-container);
padding-inline: var(--grid-padding);
}
.site__footer {
inline-size: 100%;
margin-block-start: 6rem;
margin-inline: auto;
max-inline-size: var(--grid-container);
padding-block-end: 3.6rem;
padding-inline: var(--grid-padding);
}
}
import onLoad from '../../../javascripts/utils/onLoad';
onLoad<HTMLElement>('.site__header', ($header) => {
const threshold = 100;
document.addEventListener('scroll', () => {
$header.style.setProperty(
'--site-header-background-opacity',
Math.min(1, window.scrollY / threshold).toPrecision(4),
);
}, { passive: true });
});
No notes defined.