<div class="header ">
<div class="header__inner h-container">
<div class="grid grid--no-gutter header__grid">
<div class="grid__col grid__col--md-1 header__logo-col">
<div class="logo header__logo">
<a href="https://play.ee" class="logo__content logo__link">
<svg viewBox="0 0 58 62" xmlns="http://www.w3.org/2000/svg" class="logo__svg">
<path d="M8.93299 7.67307c0 2.85703-1.6054 4.32633-3.45778 4.32633-.82328 0-1.68772-.3265-2.22285-.8571v4.1222H.700195V3.42839H3.29352v.65303c.5763-.61221 1.48191-.81628 2.22286-.81628 2.26402 0 3.41661 1.95908 3.41661 4.40793zm-2.55217-.04081c0-1.4285-.53513-2.12234-1.56423-2.12234-1.35841 0-1.77005.93873-1.77005 2.12234 0 1.18361.4528 2.16315 1.72889 2.16315 1.07026 0 1.60539-.69384 1.60539-2.16315zM10.085 9.71379V0h2.5933v9.34646c0 .40814.1646.44895.494.44895.1234 0 .3293 0 .5351-.08162v1.99991c-.5351.2041-1.0291.2857-1.3996.2857-1.2349 0-2.2228-.6939-2.2228-2.28561zM22.187 6.53028v5.30582h-2.3464l-.1646-.8163c-.6998.898-1.6054 1.0204-2.2229 1.0204-1.8935 0-3.2519-1.1836-3.2519-2.89781 0-.97955.4528-1.67339 1.1526-2.04072.5351-.2857 1.1937-.40814 1.9347-.40814h2.3463v-.16325c0-.61222-.494-1.02036-1.4407-1.02036-.6175 0-1.2761.20407-2.0171.89791l-1.8523-1.55094c.9879-1.10198 2.5521-1.59175 3.9929-1.59175 2.4286 0 3.8694 1.26524 3.8694 3.26514zm-2.5934 1.99989h-1.9347c-.2881 0-.4939.04082-.6586.16326-.1646.12244-.247.2857-.247.48977 0 .40814.3705.77547 1.1115.77547.9056 0 1.6877-.61221 1.7288-1.4285zM25.48 11.5505l-3.1284-8.08126h2.8403l1.6877 5.14259 1.8935-5.14259h2.8404L26.7149 15.3054h-2.7991l1.5642-3.7549zM9.17956 30.8964l-1.44074-1.6326c-1.0291.8163-2.22285 1.1837-3.58126 1.1837C1.85238 30.4066 0 29.3863 0 27.3456c0-1.7142 1.31725-2.7754 2.63449-3.6325-.49396-.4898-1.31724-1.3877-1.31724-2.6121 0-1.8366 1.81121-2.8978 3.45777-2.8978 1.72888 0 3.29311 1.1836 3.29311 2.8978 0 1.2652-.82327 2.1632-1.81121 2.9386l1.39958 1.551c.24698-.5306.49396-1.1837.69978-1.9183l2.30522.4081c-.3705 1.3469-.82332 2.4489-1.35845 3.306l1.68775 1.8774-1.81124 1.6326zm-2.9638-3.3468l-1.89354-2.1223c-.98794.653-1.81122 1.2652-1.81122 1.9999 0 .653.61746.8571 1.44074.8571.86444-.0408 1.60539-.2857 2.26402-.7347zM4.5692 22.5703c.65862-.4489 1.11142-.8979 1.11142-1.4693 0-.449-.24698-.8571-.86444-.8571-.53513 0-.98793.2857-.98793.8163 0 .4898.41164 1.102.74095 1.5101zM8.76833 38.7736v5.5507H6.175v-4.612c0-.653 0-1.7142-1.31725-1.7142-1.60539 0-1.60539 1.5101-1.60539 2.408v3.9182H.700195v-8.3669H3.29352v.7754c.61746-.7754 1.52307-.9795 2.38751-.9795 1.93471.0408 3.0873 1.1836 3.0873 3.0203zM9.75586 40.1613c0-2.2856 1.60544-4.3672 4.36334-4.3672 2.7169 0 4.3223 2.0407 4.3223 4.3672 0 2.2856-1.6054 4.3671-4.3223 4.3671-2.7579 0-4.36334-2.0815-4.36334-4.3671zm6.09224 0c0-1.0612-.3293-2.1224-1.7289-2.1224-1.3995 0-1.77 1.0612-1.77 2.1224 0 1.0203.3293 2.1631 1.77 2.1631 1.3584 0 1.7289-1.102 1.7289-2.1631zM27.8267 40.202c0 2.857-1.6054 4.3264-3.4578 4.3264-.8233 0-1.6877-.3266-2.2228-.8571v4.1222h-2.5934V35.9574h2.6345v.6122c.5763-.6122 1.4819-.8163 2.2229-.8163 2.2228.0408 3.4166 1.9591 3.4166 4.4487zm-2.5933-.0408c0-1.4285-.5352-2.1223-1.5643-2.1223-1.3584 0-1.77.9387-1.77 2.1223 0 1.1836.4528 2.1632 1.7289 2.1632 1.0702 0 1.6054-.7347 1.6054-2.1632zM36.6768 41.0592h-5.5571c.0823.653.6175 1.1836 1.7289 1.1836.6174 0 1.3172-.2449 1.77-.8163l1.7701 1.5509c-.9056 1.0204-2.0994 1.551-3.5813 1.551-3.1284 0-4.281-2.1632-4.281-4.3263 0-2.0816 1.1526-4.408 4.1575-4.408 2.6345 0 4.0341 1.8775 4.0341 4.4488 0 .2449-.0412.4489-.0412.8163zm-2.4286-1.8775c-.0412-.7755-.741-1.2652-1.6054-1.2652-1.0703 0-1.4819.6938-1.5643 1.2652h3.1697zM7.98581 55.997v5.3059H5.63946l-.16466-.8163c-.69978.8979-1.60539 1.0203-2.22285 1.0203C1.35841 61.5069 0 60.3233 0 58.6091c0-.9795.452803-1.6733 1.15259-2.0407.53513-.2857 1.19375-.4081 1.93471-.4081h2.34634v-.1225c0-.6122-.49397-1.0203-1.44074-1.0203-.61746 0-1.27608.2041-2.01703.8979L.123492 54.3645c1.070258-1.102 2.634488-1.5918 4.075228-1.5918 2.34635 0 3.78709 1.2244 3.78709 3.2243zm-2.59333 1.9999H3.45777c-.28815 0-.49397.0408-.65862.1633-.16466.1224-.24699.2857-.24699.4898 0 .4081.37048.7754 1.11143.7754.90561 0 1.68772-.5714 1.72889-1.4285zM9.5498 59.1807v-9.7138h2.5933v9.3465c0 .4081.1647.4489.494.4489.1235 0 .3293 0 .5351-.0816v1.9999c-.5351.2041-1.0291.2857-1.3995.2857-1.2761.0408-2.2229-.653-2.2229-2.2856zM14.2842 59.1807v-9.7138h2.5933v9.3465c0 .4081.1647.4489.494.4489.1235 0 .3293 0 .5351-.0816v1.9999c-.5351.2041-1.0291.2857-1.3996.2857-1.2349.0408-2.2228-.653-2.2228-2.2856zM19.0996 49.4669h2.6345v2.3264h-2.6345v-2.3264zm.0412 3.4692h2.5933v8.3669h-2.5933v-8.3669zM30.9145 55.997v5.3059h-2.3463l-.1647-.8163c-.6998.8979-1.6054 1.0203-2.2228 1.0203-1.8936 0-3.252-1.1836-3.252-2.8978 0-.9795.4528-1.6733 1.1526-2.0407.5351-.2857 1.1938-.4081 1.9347-.4081h2.3464v-.1225c0-.6122-.494-1.0203-1.4408-1.0203-.6174 0-1.2761.2041-2.017.8979l-1.8524-1.5509c1.0703-1.102 2.6345-1.5918 4.0752-1.5918 2.3464 0 3.7871 1.2244 3.7871 3.2243zm-2.5933 1.9999h-1.9347c-.2882 0-.494.0408-.6586.1633-.1647.1224-.247.2857-.247.4898 0 .4081.3704.7754 1.1114.7754.9056 0 1.6877-.5714 1.7289-1.4285zM40.6698 55.7523v5.5507h-2.5933v-4.612c0-.653 0-1.7142-1.3172-1.7142-1.6054 0-1.6054 1.5102-1.6054 2.4081v3.9181h-2.5934v-8.3669h2.5934v.7755c.6174-.7755 1.523-.9795 2.3875-.9795 1.9759.0408 3.1284 1.1836 3.1284 3.0202zM41.6582 57.14c0-2.204 1.3584-4.4079 4.2399-4.4079 1.77 0 3.1284.8162 3.7459 2.5304l-2.4287.9796c-.1235-.7755-.6586-1.3061-1.3172-1.3061-1.1938 0-1.6054 1.102-1.6054 2.1632 0 1.0611.3705 2.1223 1.5642 2.1223.6586 0 1.2349-.4897 1.3584-1.2244l2.3464.8979c-.5763 1.5918-1.8936 2.5713-3.6636 2.5713-2.9227.0408-4.2399-2.1632-4.2399-4.3263zM57.9591 57.9971h-5.5572c.0824.653.6175 1.1836 1.7289 1.1836.6175 0 1.3173-.2449 1.7701-.8163l1.77 1.551c-.9056 1.0203-2.0994 1.5509-3.5813 1.5509-3.1284 0-4.281-2.1631-4.281-4.3263 0-2.0815 1.1526-4.4079 4.1576-4.4079 2.6344 0 4.034 1.8774 4.034 4.4487 0 .2449 0 .4898-.0411.8163zm-2.4287-1.8775c-.0412-.7754-.741-1.2652-1.6054-1.2652-1.0703 0-1.4819.6938-1.5642 1.2652h3.1696z" />
</svg>
<span class="h-visually-hidden">
</span>
</a>
</div>
<div class="logo header__logo header__logo--negative">
<a href="https://play.ee" class="logo__content logo__link">
<svg viewBox="0 0 58 62" xmlns="http://www.w3.org/2000/svg" class="logo__svg">
<path d="M8.93299 7.67307c0 2.85703-1.6054 4.32633-3.45778 4.32633-.82328 0-1.68772-.3265-2.22285-.8571v4.1222H.700195V3.42839H3.29352v.65303c.5763-.61221 1.48191-.81628 2.22286-.81628 2.26402 0 3.41661 1.95908 3.41661 4.40793zm-2.55217-.04081c0-1.4285-.53513-2.12234-1.56423-2.12234-1.35841 0-1.77005.93873-1.77005 2.12234 0 1.18361.4528 2.16315 1.72889 2.16315 1.07026 0 1.60539-.69384 1.60539-2.16315zM10.085 9.71379V0h2.5933v9.34646c0 .40814.1646.44895.494.44895.1234 0 .3293 0 .5351-.08162v1.99991c-.5351.2041-1.0291.2857-1.3996.2857-1.2349 0-2.2228-.6939-2.2228-2.28561zM22.187 6.53028v5.30582h-2.3464l-.1646-.8163c-.6998.898-1.6054 1.0204-2.2229 1.0204-1.8935 0-3.2519-1.1836-3.2519-2.89781 0-.97955.4528-1.67339 1.1526-2.04072.5351-.2857 1.1937-.40814 1.9347-.40814h2.3463v-.16325c0-.61222-.494-1.02036-1.4407-1.02036-.6175 0-1.2761.20407-2.0171.89791l-1.8523-1.55094c.9879-1.10198 2.5521-1.59175 3.9929-1.59175 2.4286 0 3.8694 1.26524 3.8694 3.26514zm-2.5934 1.99989h-1.9347c-.2881 0-.4939.04082-.6586.16326-.1646.12244-.247.2857-.247.48977 0 .40814.3705.77547 1.1115.77547.9056 0 1.6877-.61221 1.7288-1.4285zM25.48 11.5505l-3.1284-8.08126h2.8403l1.6877 5.14259 1.8935-5.14259h2.8404L26.7149 15.3054h-2.7991l1.5642-3.7549zM9.17956 30.8964l-1.44074-1.6326c-1.0291.8163-2.22285 1.1837-3.58126 1.1837C1.85238 30.4066 0 29.3863 0 27.3456c0-1.7142 1.31725-2.7754 2.63449-3.6325-.49396-.4898-1.31724-1.3877-1.31724-2.6121 0-1.8366 1.81121-2.8978 3.45777-2.8978 1.72888 0 3.29311 1.1836 3.29311 2.8978 0 1.2652-.82327 2.1632-1.81121 2.9386l1.39958 1.551c.24698-.5306.49396-1.1837.69978-1.9183l2.30522.4081c-.3705 1.3469-.82332 2.4489-1.35845 3.306l1.68775 1.8774-1.81124 1.6326zm-2.9638-3.3468l-1.89354-2.1223c-.98794.653-1.81122 1.2652-1.81122 1.9999 0 .653.61746.8571 1.44074.8571.86444-.0408 1.60539-.2857 2.26402-.7347zM4.5692 22.5703c.65862-.4489 1.11142-.8979 1.11142-1.4693 0-.449-.24698-.8571-.86444-.8571-.53513 0-.98793.2857-.98793.8163 0 .4898.41164 1.102.74095 1.5101zM8.76833 38.7736v5.5507H6.175v-4.612c0-.653 0-1.7142-1.31725-1.7142-1.60539 0-1.60539 1.5101-1.60539 2.408v3.9182H.700195v-8.3669H3.29352v.7754c.61746-.7754 1.52307-.9795 2.38751-.9795 1.93471.0408 3.0873 1.1836 3.0873 3.0203zM9.75586 40.1613c0-2.2856 1.60544-4.3672 4.36334-4.3672 2.7169 0 4.3223 2.0407 4.3223 4.3672 0 2.2856-1.6054 4.3671-4.3223 4.3671-2.7579 0-4.36334-2.0815-4.36334-4.3671zm6.09224 0c0-1.0612-.3293-2.1224-1.7289-2.1224-1.3995 0-1.77 1.0612-1.77 2.1224 0 1.0203.3293 2.1631 1.77 2.1631 1.3584 0 1.7289-1.102 1.7289-2.1631zM27.8267 40.202c0 2.857-1.6054 4.3264-3.4578 4.3264-.8233 0-1.6877-.3266-2.2228-.8571v4.1222h-2.5934V35.9574h2.6345v.6122c.5763-.6122 1.4819-.8163 2.2229-.8163 2.2228.0408 3.4166 1.9591 3.4166 4.4487zm-2.5933-.0408c0-1.4285-.5352-2.1223-1.5643-2.1223-1.3584 0-1.77.9387-1.77 2.1223 0 1.1836.4528 2.1632 1.7289 2.1632 1.0702 0 1.6054-.7347 1.6054-2.1632zM36.6768 41.0592h-5.5571c.0823.653.6175 1.1836 1.7289 1.1836.6174 0 1.3172-.2449 1.77-.8163l1.7701 1.5509c-.9056 1.0204-2.0994 1.551-3.5813 1.551-3.1284 0-4.281-2.1632-4.281-4.3263 0-2.0816 1.1526-4.408 4.1575-4.408 2.6345 0 4.0341 1.8775 4.0341 4.4488 0 .2449-.0412.4489-.0412.8163zm-2.4286-1.8775c-.0412-.7755-.741-1.2652-1.6054-1.2652-1.0703 0-1.4819.6938-1.5643 1.2652h3.1697zM7.98581 55.997v5.3059H5.63946l-.16466-.8163c-.69978.8979-1.60539 1.0203-2.22285 1.0203C1.35841 61.5069 0 60.3233 0 58.6091c0-.9795.452803-1.6733 1.15259-2.0407.53513-.2857 1.19375-.4081 1.93471-.4081h2.34634v-.1225c0-.6122-.49397-1.0203-1.44074-1.0203-.61746 0-1.27608.2041-2.01703.8979L.123492 54.3645c1.070258-1.102 2.634488-1.5918 4.075228-1.5918 2.34635 0 3.78709 1.2244 3.78709 3.2243zm-2.59333 1.9999H3.45777c-.28815 0-.49397.0408-.65862.1633-.16466.1224-.24699.2857-.24699.4898 0 .4081.37048.7754 1.11143.7754.90561 0 1.68772-.5714 1.72889-1.4285zM9.5498 59.1807v-9.7138h2.5933v9.3465c0 .4081.1647.4489.494.4489.1235 0 .3293 0 .5351-.0816v1.9999c-.5351.2041-1.0291.2857-1.3995.2857-1.2761.0408-2.2229-.653-2.2229-2.2856zM14.2842 59.1807v-9.7138h2.5933v9.3465c0 .4081.1647.4489.494.4489.1235 0 .3293 0 .5351-.0816v1.9999c-.5351.2041-1.0291.2857-1.3996.2857-1.2349.0408-2.2228-.653-2.2228-2.2856zM19.0996 49.4669h2.6345v2.3264h-2.6345v-2.3264zm.0412 3.4692h2.5933v8.3669h-2.5933v-8.3669zM30.9145 55.997v5.3059h-2.3463l-.1647-.8163c-.6998.8979-1.6054 1.0203-2.2228 1.0203-1.8936 0-3.252-1.1836-3.252-2.8978 0-.9795.4528-1.6733 1.1526-2.0407.5351-.2857 1.1938-.4081 1.9347-.4081h2.3464v-.1225c0-.6122-.494-1.0203-1.4408-1.0203-.6174 0-1.2761.2041-2.017.8979l-1.8524-1.5509c1.0703-1.102 2.6345-1.5918 4.0752-1.5918 2.3464 0 3.7871 1.2244 3.7871 3.2243zm-2.5933 1.9999h-1.9347c-.2882 0-.494.0408-.6586.1633-.1647.1224-.247.2857-.247.4898 0 .4081.3704.7754 1.1114.7754.9056 0 1.6877-.5714 1.7289-1.4285zM40.6698 55.7523v5.5507h-2.5933v-4.612c0-.653 0-1.7142-1.3172-1.7142-1.6054 0-1.6054 1.5102-1.6054 2.4081v3.9181h-2.5934v-8.3669h2.5934v.7755c.6174-.7755 1.523-.9795 2.3875-.9795 1.9759.0408 3.1284 1.1836 3.1284 3.0202zM41.6582 57.14c0-2.204 1.3584-4.4079 4.2399-4.4079 1.77 0 3.1284.8162 3.7459 2.5304l-2.4287.9796c-.1235-.7755-.6586-1.3061-1.3172-1.3061-1.1938 0-1.6054 1.102-1.6054 2.1632 0 1.0611.3705 2.1223 1.5642 2.1223.6586 0 1.2349-.4897 1.3584-1.2244l2.3464.8979c-.5763 1.5918-1.8936 2.5713-3.6636 2.5713-2.9227.0408-4.2399-2.1632-4.2399-4.3263zM57.9591 57.9971h-5.5572c.0824.653.6175 1.1836 1.7289 1.1836.6175 0 1.3173-.2449 1.7701-.8163l1.77 1.551c-.9056 1.0203-2.0994 1.5509-3.5813 1.5509-3.1284 0-4.281-2.1631-4.281-4.3263 0-2.0815 1.1526-4.4079 4.1576-4.4079 2.6344 0 4.034 1.8774 4.034 4.4487 0 .2449 0 .4898-.0411.8163zm-2.4287-1.8775c-.0412-.7754-.741-1.2652-1.6054-1.2652-1.0703 0-1.4819.6938-1.5642 1.2652h3.1696z" />
</svg>
<span class="h-visually-hidden">
</span>
</a>
</div>
</div>
<div class="grid__col grid__col--md-11 header__main-col">
<div class="header__container">
<div class="header__container-inner h-container">
<div class="header__content-wrapper">
<nav class="navigation header__navigation">
<ul class="navigation__list navigation__list--parents">
<li class="navigation__item ">
<svg class="icon navigation__arrow-icon">
<use xlink:href="../../inc/svg/global.bc9cdd731ad718497c5d8f03d08908d4.svg#arrow-right-long-54"></use>
</svg>
<a href="#" class="navigation__link">
Home
</a>
<span class="navigation__description">Home is the place to be #staythefuckhome</span>
</li>
<li class="navigation__item has-children is-current ">
<svg class="icon navigation__arrow-icon">
<use xlink:href="../../inc/svg/global.bc9cdd731ad718497c5d8f03d08908d4.svg#arrow-right-long-54"></use>
</svg>
<a href="#" class="navigation__link">
Services
<svg class="icon navigation__chevron">
<use xlink:href="../../inc/svg/global.bc9cdd731ad718497c5d8f03d08908d4.svg#chevron-bottom-24"></use>
</svg>
</a>
<span class="navigation__description">Everything digital under one roof.</span>
<ul class="navigation__list navigation__list--children">
<li class="navigation__item ">
<a href="#" class="navigation__link">
Business transformation
</a>
<svg class="icon navigation__arrow-icon">
<use xlink:href="../../inc/svg/global.bc9cdd731ad718497c5d8f03d08908d4.svg#tiny-arrow-right-long-24"></use>
</svg>
</li>
<li class="navigation__item ">
<a href="#" class="navigation__link">
Design & Innovation
</a>
<svg class="icon navigation__arrow-icon">
<use xlink:href="../../inc/svg/global.bc9cdd731ad718497c5d8f03d08908d4.svg#tiny-arrow-right-long-24"></use>
</svg>
</li>
<li class="navigation__item ">
<a href="#" class="navigation__link">
Development
</a>
<svg class="icon navigation__arrow-icon">
<use xlink:href="../../inc/svg/global.bc9cdd731ad718497c5d8f03d08908d4.svg#tiny-arrow-right-long-24"></use>
</svg>
</li>
<li class="navigation__item ">
<a href="#" class="navigation__link">
Maintenance
</a>
<svg class="icon navigation__arrow-icon">
<use xlink:href="../../inc/svg/global.bc9cdd731ad718497c5d8f03d08908d4.svg#tiny-arrow-right-long-24"></use>
</svg>
</li>
</ul>
</li>
<li class="navigation__item has-children ">
<svg class="icon navigation__arrow-icon">
<use xlink:href="../../inc/svg/global.bc9cdd731ad718497c5d8f03d08908d4.svg#arrow-right-long-54"></use>
</svg>
<a href="#" class="navigation__link">
Work
<svg class="icon navigation__chevron">
<use xlink:href="../../inc/svg/global.bc9cdd731ad718497c5d8f03d08908d4.svg#chevron-bottom-24"></use>
</svg>
</a>
<span class="navigation__description">Home is the place to be #staythefuckhome</span>
<ul class="navigation__list navigation__list--children">
<li class="navigation__item ">
<a href="#" class="navigation__link">
Business transformation
</a>
<svg class="icon navigation__arrow-icon">
<use xlink:href="../../inc/svg/global.bc9cdd731ad718497c5d8f03d08908d4.svg#tiny-arrow-right-long-24"></use>
</svg>
</li>
<li class="navigation__item ">
<a href="#" class="navigation__link">
Design & Innovation
</a>
<svg class="icon navigation__arrow-icon">
<use xlink:href="../../inc/svg/global.bc9cdd731ad718497c5d8f03d08908d4.svg#tiny-arrow-right-long-24"></use>
</svg>
</li>
<li class="navigation__item ">
<a href="#" class="navigation__link">
Development
</a>
<svg class="icon navigation__arrow-icon">
<use xlink:href="../../inc/svg/global.bc9cdd731ad718497c5d8f03d08908d4.svg#tiny-arrow-right-long-24"></use>
</svg>
</li>
</ul>
</li>
<li class="navigation__item ">
<svg class="icon navigation__arrow-icon">
<use xlink:href="../../inc/svg/global.bc9cdd731ad718497c5d8f03d08908d4.svg#arrow-right-long-54"></use>
</svg>
<a href="#" class="navigation__link">
About
</a>
<span class="navigation__description">Home is the place to be #staythefuckhome</span>
</li>
<li class="navigation__item ">
<svg class="icon navigation__arrow-icon">
<use xlink:href="../../inc/svg/global.bc9cdd731ad718497c5d8f03d08908d4.svg#arrow-right-long-54"></use>
</svg>
<a href="#" class="navigation__link">
Contact
</a>
<span class="navigation__description">Got a project you dream of realizing? Get in touch!</span>
</li>
</ul>
</nav>
<div class="header__contact">
<div class="header__contact-item">
<div class="header__contact-label text-small">Email</div>
<div class="header__contact-data">
<a href="mailto:contact@something.com" class="link header__link">contact@something.com</a>
</div>
</div>
<div class="header__contact-item">
<div class="header__contact-label text-small">Connect</div>
<div class="header__contact-data">
<a href="tel:56565656" class="link header__link">56565656</a>
</div>
</div>
</div>
</div>
</div>
<figure class="image header__background-image">
<img loading="lazy" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20800%20480%22%3E%3C%2Fsvg%3E" data-srcset="//via.placeholder.com/360x216 360w, //via.placeholder.com/720x432 720w, //via.placeholder.com/1000x600 1000w, //via.placeholder.com/2000x1200 2000w, //via.placeholder.com/800x480 800w, //via.placeholder.com/1600x960 1600w, //via.placeholder.com/1200x720 1200w, //via.placeholder.com/2400x1440 2400w" data-sizes="auto" alt="" class="image__img lazyload">
</figure>
</div>
<div class="header__burger-wrapper">
<button type="button" class="header__burger js-toggle-menu" aria-label="Toggle mobile menu" aria-expanded="false">
<span class="header__burger-box">
<span class="header__burger-inner">
<span class="header__burger-top"></span>
<span class="header__burger-middle"></span>
<span class="header__burger-bottom"></span>
</span>
</span>
</button>
<button type="button" class="header__burger header__burger--negative js-toggle-menu" aria-label="Toggle mobile menu">
<span class="header__burger-box">
<span class="header__burger-inner">
<span class="header__burger-top"></span>
<span class="header__burger-middle"></span>
<span class="header__burger-bottom"></span>
</span>
</span>
</button>
</div>
<div class="header__circle"></div>
</div>
</div>
</div>
</div>
<div class="header {{ modifier }} {{ class }}">
<div class="header__inner h-container">
<div class="grid grid--no-gutter header__grid">
<div class="grid__col grid__col--md-1 header__logo-col">
{% include '@logo' with { class: 'header__logo', data: data.logo } %}
{% include '@logo' with { class: 'header__logo header__logo--negative', data: data.logo } %}
</div>
<div class="grid__col grid__col--md-11 header__main-col">
<div class="header__container">
<div class="header__container-inner h-container">
<div class="header__content-wrapper">
{% if data.navigation %}
{% include '@navigation' with { modifier: '', class: 'header__navigation', data: data.navigation } %}
{% endif %}
{% if data.contacts %}
<div class="header__contact">
{% for item in data.contacts %}
<div class="header__contact-item">
{% if item.label %}
<div class="header__contact-label text-small">{{ item.label }}</div>
{% endif %}
{% if item.data %}
<div class="header__contact-data">
{% if item.link %}<a href="{{ item.link }}" class="link header__link">{{ item.data }}</a>{% else %}{{ item.data }}{% endif %}
</div>
{% endif %}
</div>
{% endfor %}
</div>
{% endif %}
</div>
</div>
{% if data.bgImage %}
{% include '@image' with { data: data.bgImage|srcset('800x480'), class: 'header__background-image', modifier: '' } %}
{% endif %}
</div>
{% if data.navigation or data.contacts %}
<div class="header__burger-wrapper">
<button type="button" class="header__burger js-toggle-menu" aria-label="{{ data.toggleLabel }}" aria-expanded="false">
<span class="header__burger-box">
<span class="header__burger-inner">
<span class="header__burger-top"></span>
<span class="header__burger-middle"></span>
<span class="header__burger-bottom"></span>
</span>
</span>
</button>
<button type="button" class="header__burger header__burger--negative js-toggle-menu" aria-label="{{ data.toggleLabel }}">
<span class="header__burger-box">
<span class="header__burger-inner">
<span class="header__burger-top"></span>
<span class="header__burger-middle"></span>
<span class="header__burger-bottom"></span>
</span>
</span>
</button>
</div>
<div class="header__circle"></div>
{% endif %}
</div>
</div>
</div>
</div>
{
"language": "en-US",
"data": {
"logo": {
"link": "https://play.ee"
},
"navigation": {
"items": [
{
"link": "#",
"title": "Home",
"description": "Home is the place to be #staythefuckhome"
},
{
"link": "#",
"title": "Services",
"description": "Everything digital under one roof.",
"current": "true",
"children": [
{
"link": "#",
"title": "Business transformation"
},
{
"link": "#",
"title": "Design & Innovation"
},
{
"link": "#",
"title": "Development"
},
{
"link": "#",
"title": "Maintenance"
}
]
},
{
"link": "#",
"title": "Work",
"description": "Home is the place to be #staythefuckhome",
"children": [
{
"link": "#",
"title": "Business transformation"
},
{
"link": "#",
"title": "Design & Innovation"
},
{
"link": "#",
"title": "Development"
}
]
},
{
"link": "#",
"title": "About",
"description": "Home is the place to be #staythefuckhome"
},
{
"link": "#",
"title": "Contact",
"description": "Got a project you dream of realizing? Get in touch!"
}
]
},
"toggleLabel": "Toggle mobile menu",
"bgImage": true,
"contacts": [
{
"label": "Email",
"data": "contact@something.com",
"link": "mailto:contact@something.com"
},
{
"label": "Connect",
"data": "56565656",
"link": "tel:56565656"
}
]
}
}
.header {
position: fixed;
top: 0;
left: 0;
width: 100%;
padding: 20px 0 0;
z-index: map-get($zindex, 'header');
@include bp(md-min) {
padding: 32px 0 0;
}
&:before {
@include bp(md-min) {
content: '';
position: absolute;
top: 0;
bottom: 100%;
left: 0;
width: 100%;
z-index: -1;
background-color: $color-brand-01;
transition-property: bottom;
transition-duration: $transition-duration;
transition-timing-function: $transition-easing-in;
}
body.is-hovering-nav & {
@include bp(md-min) {
bottom: 0;
transition-timing-function: $transition-easing-out;
}
}
}
&.is-drawer {
@include bp(md-min) {
pointer-events: none;
}
body.is-header-open & {
@include bp(md-min) {
pointer-events: all;
}
}
}
}
.header--no-navigation {
.navigation {
display: none;
}
.header__burger {
display: none;
}
}
.header__logo-col {
position: relative;
z-index: 2;
opacity: .01;
transform: translateY(calc(-100% + 35px)); /* stylelint-disable-line plugin/no-unsupported-browser-features */
transition-property: opacity, transform;
transition-duration: $transition-duration;
transition-timing-function: $transition-easing-in;
overflow: hidden;
@include bp(md-min) {
padding-bottom: 24px;
}
body.core-has-loaded &,
.header.is-ready & {
opacity: 1;
transform: translateY(0);
transition-timing-function: $transition-easing-out;
}
}
.header__logo {
color: $color-text-03;
body.is-header-open & {
color: $color-text-03;
}
.header.is-drawer & {
@include bp(md-min) {
pointer-events: all;
}
}
body.core-has-loaded:not(.global-has-loaded) & {
.logo__svg {
fill: $color-text-03;
}
}
}
.header__logo--negative {
position: absolute;
top: 0;
left: 0;
width: 100%;
z-index: 1;
color: $color-brand-01;
}
.header__main-col {
@include bp(md-min) {
position: relative;
}
}
.header__container {
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: $color-brand-01;
height: var(--app-height);
z-index: 1;
opacity: 1;
visibility: visible;
transform: translateY(-100%);
transition-property: transform, opacity, visibility;
transition-duration: $transition-duration;
transition-timing-function: $transition-easing-in;
transition-delay: $transition-duration;
@include bp(md-min) {
position: relative;
top: auto;
left: auto;
width: auto;
height: auto;
background-color: transparent;
z-index: map-get($zindex, 'default');
opacity: 1;
visibility: visible;
transform: translateY(0);
transition-delay: 0ms;
}
.header.is-drawer & {
@include bp(md-min) {
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: transparent;
height: var(--app-height);
z-index: 1;
opacity: .01;
visibility: hidden;
}
body.is-header-open & {
transition-delay: 0ms;
transform: translateY(0);
opacity: 1;
visibility: visible;
transition-timing-function: $transition-easing-out;
}
}
body.is-navigation-hidden & {
@include bp(md-min) {
opacity: 0;
visibility: hidden;
}
}
body.is-header-open & {
transform: translateY(0);
transition-timing-function: $transition-easing-in;
}
}
.header__container-inner {
height: 100%;
overflow: auto;
@include bp(md-min) {
overflow: visible;
}
.header:not(.is-drawer) & {
@include bp(md-min) {
padding: 0;
}
}
.header.is-drawer & {
@include bp(md-min) {
overflow-y: scroll;
margin-right: -20px;
margin-left: -20px;
width: auto;
}
@include bp(xl-min) {
overflow: hidden;
margin-right: auto;
margin-left: auto;
}
}
}
.header__content-wrapper {
padding-top: 104px;
padding-bottom: 32px;
@include bp(sm-min) {
padding-top: 120px;
padding-bottom: 72px;
position: relative;
}
@media only screen and (min-width: #{$bp-sm-min}) and (orientation: portrait) {
height: 100%;
}
@include bp(md-min) {
height: 100%;
}
.header:not(.is-drawer) & {
@include bp(md-min) {
padding: 8px 0 0;
margin-left: -15px;
margin-right: -15px;
}
}
.header.is-drawer & {
@include bp(md-min) {
padding-top: 104px;
padding-bottom: 32px;
}
@include bp(xl-min) {
overflow-y: scroll;
margin-right: calc((1920px / 14 + 20px) * -1); /* stylelint-disable-line plugin/no-unsupported-browser-features */
padding-right: calc(1920px / 14 + 6px); /* stylelint-disable-line plugin/no-unsupported-browser-features */
}
@include bp(xxl-min) {
padding-top: 164px;
padding-bottom: 72px;
}
}
}
.header__navigation {
transition-property: opacity;
transition-duration: $transition-duration;
transition-timing-function: $transition-easing-out;
opacity: .01;
@include bp(md-min) {
opacity: 1;
}
.header.is-drawer & {
@include bp(md-min) {
padding-right: 20px;
padding-bottom: 64px;
}
@include bp(xl-min) {
padding-right: 0;
}
}
body.is-header-open & {
opacity: 1;
transition-timing-function: $transition-easing-in;
}
}
.header__contact {
color: $color-text-03;
transition-property: opacity, visibility;
transition-duration: $transition-duration;
transition-timing-function: $transition-easing-in;
transition-delay: 0ms;
opacity: .01;
visibility: hidden;
margin-top: 46px;
@media only screen and (min-width: #{$bp-sm-min}) and (orientation: portrait) {
position: fixed;
top: 100%;
transform: translateY(-100%);
z-index: 2;
margin-top: 0;
padding-bottom: 120px;
}
@include bp(md-min) {
margin-left: 20px;
position: fixed;
top: 100%;
transform: translateY(-100%);
z-index: 2;
margin-top: 0;
padding-bottom: 120px;
}
@include bp(xl-min) {
margin-left: 0;
}
body.is-header-open & {
opacity: 1;
visibility: visible;
transition-delay: $transition-duration;
transition-timing-function: $transition-easing-out;
}
}
.header__contact-item {
&:not(:first-child) {
margin-top: 35px;
}
}
.header__link {
color: $color-text-03;
font-weight: $font-weight-regular;
}
.header__burger-wrapper {
position: absolute;
top: 20px;
right: 15px;
z-index: 3;
transition-property: opacity, transform;
transition-duration: $transition-duration;
transition-timing-function: $transition-easing-in;
transform: translateY(-45px);
opacity: .01;
width: 36px;
height: 36px;
@include bp(sm-min) {
right: calc(100vw / 14 - 5px); /* stylelint-disable-line plugin/no-unsupported-browser-features */
}
@include bp(md-min) {
top: 3px;
right: -5px;
transform: translateY(-64px);
}
body.core-has-loaded &,
.header.is-ready & {
@media only screen and (max-width: $bp-md-min - 1) {
transform: translateY(0);
opacity: 1;
}
}
body.is-navigation-hidden & {
transform: translateY(0);
opacity: 1;
transition-timing-function: $transition-easing-out;
}
.header.is-drawer & {
@include bp(md-min) {
pointer-events: all;
}
}
&:hover {
body.is-header-open & {
transform: rotate(90deg);
transition-timing-function: $transition-easing-out;
}
}
}
.header__burger {
border-radius: 0;
border: none;
-webkit-appearance: none;
margin: 0;
padding: 0;
display: inline-flex;
background: transparent;
flex-flow: row wrap;
justify-content: center;
align-items: center;
align-content: center;
cursor: pointer;
position: absolute;
top: 0;
left: 0;
}
.header__burger--negative {
z-index: 1;
color: $color-brand-01;
opacity: 1;
transition: opacity $transition-duration;
transition-delay: $transition-duration * 2;
body:not(.global-has-loaded) &,
body.is-header-open & {
opacity: .01;
transition-delay: 0ms;
}
}
.header__burger-box {
display: flex;
align-items: center;
justify-content: center;
position: relative;
width: 36px;
height: 36px;
}
.header__burger-inner {
position: relative;
width: 25px;
height: 2px;
transition: transform $transition-duration * 1.75 $transition-easing-in;
> * {
display: block;
position: absolute;
width: 25px;
height: 2px;
transition: transform $transition-duration;
background-color: $color-text-03;
will-change: transform; /* stylelint-disable-line plugin/no-unsupported-browser-features */
.header__burger--negative & {
background-color: $color-brand-01;
}
body.is-header-open & {
background-color: $color-text-03;
}
}
body.is-header-open & {
transform: rotate(-90deg);
transition: transform $transition-duration * 2.25 $transition-easing-out;
}
}
.header__burger-top {
transform: rotate(0turn) translateY(-250%);
.header__burger-wrapper:hover & {
body:not(.is-header-open) & {
transform: rotate(0turn) translateY(-315%);
}
}
body.is-header-open & {
transform: rotate(.125turn + .5turn);
}
}
.header__burger-middle {
transform: rotate(0turn);
body.is-header-open & {
transform: rotate(.125turn + .5turn);
}
}
.header__burger-bottom {
transform: rotate(0turn) translateY(5px);
.header__burger-wrapper:hover & {
body:not(.is-header-open) & {
transform: rotate(0turn) translateY(6px);
}
}
body.is-header-open & {
transform: rotate(.375turn + .5turn);
}
}
.header__circle {
display: none;
background-color: $color-brand-01;
transform: translateX(calc(50% - 18px)) translateY(calc(-50% + 18px)) scale(0); /* stylelint-disable-line plugin/no-unsupported-browser-features */
border-radius: $border-radius-round;
transition-property: transform;
transition-duration: $transition-duration;
transition-timing-function: $transition-easing-in;
transition-delay: $transition-duration;
position: absolute;
top: 0;
right: 0;
width: 215vw;
height: 215vw;
@include bp(md-min) {
display: block;
}
body.is-header-open & {
transition-timing-function: $transition-easing-out;
transition-delay: 0ms;
transform: translateX(calc(50% - 18px)) translateY(calc(-50% + 18px)) scale(1); /* stylelint-disable-line plugin/no-unsupported-browser-features */
}
}
.header__background-image {
position: fixed;
z-index: -1;
top: 0;
left: 0;
bottom: 0;
width: 100%;
pointer-events: none;
opacity: .01;
transition-property: opacity;
transition-duration: $transition-duration;
transition-timing-function: $transition-easing-out;
transition-delay: 0ms;
@include bp(md-min) {
display: none;
}
body.is-header-open & {
opacity: 1;
transition-timing-function: $transition-easing-in;
transition-delay: $transition-duration;
}
}
.image__img {
.header__background-image & {
object-fit: cover; /* stylelint-disable-line plugin/no-unsupported-browser-features */
width: 100%;
height: 100%;
}
}
.navigation__description {
.header--no-description & {
display: none;
}
}
import Component from '../component/component';
import Helpers from '../helpers/helpers';
import Navigation from '../navigation/navigation';
import '../logo/logo';
import './header.scss';
interface IHeaderSettings {
animationSpeed: number;
darkClass: string;
drawerClass: string;
navHiddenClass: string;
navTopClass: string;
openClass: string;
readyClass: string;
}
export default class Header extends Component {
static initSelector: string = '.header';
public container: JQuery;
public menuToggle: JQuery;
public body: JQuery;
public navigation: JQuery;
public navigationInstance: Navigation;
public isOpen: boolean;
public sections: JQuery;
public currentTheme: string;
public lastScrollTop: number;
public direction: string;
public activeSection: JQuery;
public logoNegative: JQuery;
public burgerNegative: JQuery;
settings: IHeaderSettings;
constructor(target: HTMLElement) {
super(target);
this.menuToggle = this.element.find('.js-toggle-menu');
this.body = $('body');
this.settings = {
animationSpeed: 250,
darkClass: 'is-header-dark',
drawerClass: 'is-drawer',
navHiddenClass: 'is-navigation-hidden',
navTopClass: 'navigation--idle',
openClass: 'is-header-open',
readyClass: 'is-ready',
};
this.navigation = this.element.find('.header__navigation');
this.navigationInstance = new Navigation(this.navigation[0]);
this.isOpen = false;
this.sections = $('[data-theme]');
this.currentTheme = 'default';
this.lastScrollTop = 0;
this.direction = 'none';
this.activeSection = $('.hero');
this.logoNegative = this.element.find('.header__logo--negative');
this.burgerNegative = this.element.find('.header__burger--negative');
this.init();
}
init(): void {
this.element.addClass(this.settings.readyClass);
this.menuToggle.on('click', this.toggleHandler.bind(this));
this.navigationInstance.addTriggerListeners();
this.setState();
if (this.sections.length) {
this.setSectionTheme();
}
$(window).on('scroll', this.scrollHandler.bind(this));
}
scrollHandler(): void {
this.setScrollDirection();
if ($(window).width() >= Helpers.bp.sm) {
this.setState();
}
if (this.sections.length) {
this.setSectionTheme();
}
}
toggleHandler(): void {
if (this.body.hasClass(this.settings.openClass)) {
this.close();
} else {
this.open();
}
}
setScrollDirection(): void {
const st: number = window.pageYOffset || document.documentElement.scrollTop;
if (st > this.lastScrollTop) {
this.direction = 'down';
} else {
this.direction = 'up';
}
this.lastScrollTop = st <= 0 ? 0 : st;
}
open(): void {
this.body.addClass(this.settings.openClass);
this.menuToggle.attr('aria-expanded', 'true');
this.isOpen = true;
Helpers.disableScroll();
this.navigation.removeClass(this.settings.readyClass);
setTimeout(() => {
this.navigation.addClass(this.settings.readyClass);
}, 150);
}
close(): void {
const activeNav: JQuery = this.navigationInstance.dropdownItems.filter('.' + this.navigationInstance.settings.activeClass);
this.body.removeClass(this.settings.openClass);
this.menuToggle.attr('aria-expanded', 'false');
this.isOpen = false;
this.navigationInstance.animateClose(activeNav);
Helpers.enableScroll();
}
setState(): void {
if ($(window).scrollTop() > 5) {
this.body.addClass(this.settings.navHiddenClass);
if (!this.element.hasClass(this.settings.drawerClass)) {
window.setTimeout(() => {
if ($(window).scrollTop() > 5) {
this.element.addClass(this.settings.drawerClass);
}
}, this.settings.animationSpeed);
}
if (this.navigation.hasClass(this.settings.navTopClass)) {
window.setTimeout(() => {
if ($(window).scrollTop() > 5) {
this.navigation.removeClass(this.settings.navTopClass);
this.navigationInstance.removeMouseListeners();
this.navigationInstance.addClickListeners();
this.navigationInstance.setIniHeights();
}
}, this.settings.animationSpeed);
}
if (this.navigationInstance.dropdownItems.filter('.' + this.navigationInstance.settings.activeClass).length) {
this.body.removeClass(this.navigationInstance.settings.navHoverClass);
this.navigationInstance.close();
}
} else {
if (!this.isOpen) {
this.element.removeClass(this.settings.drawerClass);
this.navigation.addClass(this.settings.navTopClass);
this.body.removeClass(this.settings.navHiddenClass);
this.navigationInstance.addTriggerListeners();
this.navigationInstance.setIniHeights();
}
}
}
setSectionTheme(): void {
const currentSection: JQuery = this.cycleSections();
if (currentSection !== undefined) {
this.activeSection = currentSection;
this.currentTheme = this.getSectionTheme(currentSection);
this.body.removeClass(this.settings.darkClass);
} else {
this.currentTheme = 'light';
this.body.addClass(this.settings.darkClass);
}
this.moveMask(this.logoNegative);
this.moveMask(this.burgerNegative);
}
moveMask(element: JQuery): void {
let topLeft: number;
let topRight: number;
let bottomLeft: number;
let bottomRight: number;
const viewTop: number = $(window).scrollTop();
const offsetTop: number = parseInt(this.element.css('padding-top'));
const elementHeight: number = element.outerHeight(true);
const elementBottom: number = viewTop + offsetTop + elementHeight;
const sectionTop: number = this.activeSection.offset().top;
const sectionBottom: number = this.activeSection.offset().top + this.activeSection.outerHeight(true);
if (this.currentTheme === 'dark') {
if (this.direction === 'up') {
if (sectionBottom < elementBottom) {
// Dark element turning white
const maskPercentage: number = this.roundResults((100 * (sectionBottom - viewTop - offsetTop) / (elementHeight)));
topLeft = maskPercentage;
topRight = maskPercentage;
bottomLeft = 100;
bottomRight = 100;
} else {
// White element turning dark
const maskPercentage: number = this.roundResults((100 * (sectionTop - viewTop - offsetTop) / (elementHeight)));
topLeft = 0;
topRight = 0;
bottomLeft = maskPercentage;
bottomRight = maskPercentage;
}
} else {
if (sectionBottom > elementBottom) {
// Dark element turning white
const maskPercentage: number = this.roundResults((100 * (sectionTop - viewTop - offsetTop) / (elementHeight)));
topLeft = 0;
topRight = 0;
bottomLeft = maskPercentage;
bottomRight = maskPercentage;
} else {
// White element turning dark
const maskPercentage: number = this.roundResults((100 * (sectionBottom - viewTop - offsetTop) / (elementHeight)));
topLeft = maskPercentage;
topRight = maskPercentage;
bottomLeft = 100;
bottomRight = 100;
}
}
const polygon: string = '0% ' + topLeft + '%, 100% ' + topRight + '%, 100% ' + bottomRight + '%, 0% ' + bottomLeft + '%';
element.css({ 'clip-path': 'polygon(' + polygon + ')' });
} else {
element.css({ 'clip-path': '' });
}
}
roundResults(percentage: number): number {
return Math.min(100, Math.max(0, percentage));
}
cycleSections(): JQuery {
let currentSection: JQuery;
this.sections.each((index: number, element: HTMLElement) => {
if (this.isSectionScreen($(element))) {
currentSection = $(element);
}
});
return currentSection;
}
getSectionTheme(section: JQuery): string {
return section.data('theme');
}
isSectionScreen(target: JQuery): boolean {
const win: JQuery<Window> = $(window);
const viewTop: number = win.scrollTop();
const top: number = target.offset().top + parseInt(target.css('margin-top'));
const compareTop: number = top;
const compareBottom: number = top + target.outerHeight(true);
const offsetTop: number = parseInt(this.element.css('padding-top'));
const logoHeight: number = offsetTop + $('.header__logo').outerHeight(true);
return (compareBottom >= (viewTop + offsetTop)) && (compareTop <= (viewTop + logoHeight));
}
}
<div class="header header--no-description ">
<div class="header__inner h-container">
<div class="grid grid--no-gutter header__grid">
<div class="grid__col grid__col--md-1 header__logo-col">
<div class="logo header--no-description header__logo">
<a href="https://play.ee" class="logo__content logo__link">
<svg viewBox="0 0 58 62" xmlns="http://www.w3.org/2000/svg" class="logo__svg">
<path d="M8.93299 7.67307c0 2.85703-1.6054 4.32633-3.45778 4.32633-.82328 0-1.68772-.3265-2.22285-.8571v4.1222H.700195V3.42839H3.29352v.65303c.5763-.61221 1.48191-.81628 2.22286-.81628 2.26402 0 3.41661 1.95908 3.41661 4.40793zm-2.55217-.04081c0-1.4285-.53513-2.12234-1.56423-2.12234-1.35841 0-1.77005.93873-1.77005 2.12234 0 1.18361.4528 2.16315 1.72889 2.16315 1.07026 0 1.60539-.69384 1.60539-2.16315zM10.085 9.71379V0h2.5933v9.34646c0 .40814.1646.44895.494.44895.1234 0 .3293 0 .5351-.08162v1.99991c-.5351.2041-1.0291.2857-1.3996.2857-1.2349 0-2.2228-.6939-2.2228-2.28561zM22.187 6.53028v5.30582h-2.3464l-.1646-.8163c-.6998.898-1.6054 1.0204-2.2229 1.0204-1.8935 0-3.2519-1.1836-3.2519-2.89781 0-.97955.4528-1.67339 1.1526-2.04072.5351-.2857 1.1937-.40814 1.9347-.40814h2.3463v-.16325c0-.61222-.494-1.02036-1.4407-1.02036-.6175 0-1.2761.20407-2.0171.89791l-1.8523-1.55094c.9879-1.10198 2.5521-1.59175 3.9929-1.59175 2.4286 0 3.8694 1.26524 3.8694 3.26514zm-2.5934 1.99989h-1.9347c-.2881 0-.4939.04082-.6586.16326-.1646.12244-.247.2857-.247.48977 0 .40814.3705.77547 1.1115.77547.9056 0 1.6877-.61221 1.7288-1.4285zM25.48 11.5505l-3.1284-8.08126h2.8403l1.6877 5.14259 1.8935-5.14259h2.8404L26.7149 15.3054h-2.7991l1.5642-3.7549zM9.17956 30.8964l-1.44074-1.6326c-1.0291.8163-2.22285 1.1837-3.58126 1.1837C1.85238 30.4066 0 29.3863 0 27.3456c0-1.7142 1.31725-2.7754 2.63449-3.6325-.49396-.4898-1.31724-1.3877-1.31724-2.6121 0-1.8366 1.81121-2.8978 3.45777-2.8978 1.72888 0 3.29311 1.1836 3.29311 2.8978 0 1.2652-.82327 2.1632-1.81121 2.9386l1.39958 1.551c.24698-.5306.49396-1.1837.69978-1.9183l2.30522.4081c-.3705 1.3469-.82332 2.4489-1.35845 3.306l1.68775 1.8774-1.81124 1.6326zm-2.9638-3.3468l-1.89354-2.1223c-.98794.653-1.81122 1.2652-1.81122 1.9999 0 .653.61746.8571 1.44074.8571.86444-.0408 1.60539-.2857 2.26402-.7347zM4.5692 22.5703c.65862-.4489 1.11142-.8979 1.11142-1.4693 0-.449-.24698-.8571-.86444-.8571-.53513 0-.98793.2857-.98793.8163 0 .4898.41164 1.102.74095 1.5101zM8.76833 38.7736v5.5507H6.175v-4.612c0-.653 0-1.7142-1.31725-1.7142-1.60539 0-1.60539 1.5101-1.60539 2.408v3.9182H.700195v-8.3669H3.29352v.7754c.61746-.7754 1.52307-.9795 2.38751-.9795 1.93471.0408 3.0873 1.1836 3.0873 3.0203zM9.75586 40.1613c0-2.2856 1.60544-4.3672 4.36334-4.3672 2.7169 0 4.3223 2.0407 4.3223 4.3672 0 2.2856-1.6054 4.3671-4.3223 4.3671-2.7579 0-4.36334-2.0815-4.36334-4.3671zm6.09224 0c0-1.0612-.3293-2.1224-1.7289-2.1224-1.3995 0-1.77 1.0612-1.77 2.1224 0 1.0203.3293 2.1631 1.77 2.1631 1.3584 0 1.7289-1.102 1.7289-2.1631zM27.8267 40.202c0 2.857-1.6054 4.3264-3.4578 4.3264-.8233 0-1.6877-.3266-2.2228-.8571v4.1222h-2.5934V35.9574h2.6345v.6122c.5763-.6122 1.4819-.8163 2.2229-.8163 2.2228.0408 3.4166 1.9591 3.4166 4.4487zm-2.5933-.0408c0-1.4285-.5352-2.1223-1.5643-2.1223-1.3584 0-1.77.9387-1.77 2.1223 0 1.1836.4528 2.1632 1.7289 2.1632 1.0702 0 1.6054-.7347 1.6054-2.1632zM36.6768 41.0592h-5.5571c.0823.653.6175 1.1836 1.7289 1.1836.6174 0 1.3172-.2449 1.77-.8163l1.7701 1.5509c-.9056 1.0204-2.0994 1.551-3.5813 1.551-3.1284 0-4.281-2.1632-4.281-4.3263 0-2.0816 1.1526-4.408 4.1575-4.408 2.6345 0 4.0341 1.8775 4.0341 4.4488 0 .2449-.0412.4489-.0412.8163zm-2.4286-1.8775c-.0412-.7755-.741-1.2652-1.6054-1.2652-1.0703 0-1.4819.6938-1.5643 1.2652h3.1697zM7.98581 55.997v5.3059H5.63946l-.16466-.8163c-.69978.8979-1.60539 1.0203-2.22285 1.0203C1.35841 61.5069 0 60.3233 0 58.6091c0-.9795.452803-1.6733 1.15259-2.0407.53513-.2857 1.19375-.4081 1.93471-.4081h2.34634v-.1225c0-.6122-.49397-1.0203-1.44074-1.0203-.61746 0-1.27608.2041-2.01703.8979L.123492 54.3645c1.070258-1.102 2.634488-1.5918 4.075228-1.5918 2.34635 0 3.78709 1.2244 3.78709 3.2243zm-2.59333 1.9999H3.45777c-.28815 0-.49397.0408-.65862.1633-.16466.1224-.24699.2857-.24699.4898 0 .4081.37048.7754 1.11143.7754.90561 0 1.68772-.5714 1.72889-1.4285zM9.5498 59.1807v-9.7138h2.5933v9.3465c0 .4081.1647.4489.494.4489.1235 0 .3293 0 .5351-.0816v1.9999c-.5351.2041-1.0291.2857-1.3995.2857-1.2761.0408-2.2229-.653-2.2229-2.2856zM14.2842 59.1807v-9.7138h2.5933v9.3465c0 .4081.1647.4489.494.4489.1235 0 .3293 0 .5351-.0816v1.9999c-.5351.2041-1.0291.2857-1.3996.2857-1.2349.0408-2.2228-.653-2.2228-2.2856zM19.0996 49.4669h2.6345v2.3264h-2.6345v-2.3264zm.0412 3.4692h2.5933v8.3669h-2.5933v-8.3669zM30.9145 55.997v5.3059h-2.3463l-.1647-.8163c-.6998.8979-1.6054 1.0203-2.2228 1.0203-1.8936 0-3.252-1.1836-3.252-2.8978 0-.9795.4528-1.6733 1.1526-2.0407.5351-.2857 1.1938-.4081 1.9347-.4081h2.3464v-.1225c0-.6122-.494-1.0203-1.4408-1.0203-.6174 0-1.2761.2041-2.017.8979l-1.8524-1.5509c1.0703-1.102 2.6345-1.5918 4.0752-1.5918 2.3464 0 3.7871 1.2244 3.7871 3.2243zm-2.5933 1.9999h-1.9347c-.2882 0-.494.0408-.6586.1633-.1647.1224-.247.2857-.247.4898 0 .4081.3704.7754 1.1114.7754.9056 0 1.6877-.5714 1.7289-1.4285zM40.6698 55.7523v5.5507h-2.5933v-4.612c0-.653 0-1.7142-1.3172-1.7142-1.6054 0-1.6054 1.5102-1.6054 2.4081v3.9181h-2.5934v-8.3669h2.5934v.7755c.6174-.7755 1.523-.9795 2.3875-.9795 1.9759.0408 3.1284 1.1836 3.1284 3.0202zM41.6582 57.14c0-2.204 1.3584-4.4079 4.2399-4.4079 1.77 0 3.1284.8162 3.7459 2.5304l-2.4287.9796c-.1235-.7755-.6586-1.3061-1.3172-1.3061-1.1938 0-1.6054 1.102-1.6054 2.1632 0 1.0611.3705 2.1223 1.5642 2.1223.6586 0 1.2349-.4897 1.3584-1.2244l2.3464.8979c-.5763 1.5918-1.8936 2.5713-3.6636 2.5713-2.9227.0408-4.2399-2.1632-4.2399-4.3263zM57.9591 57.9971h-5.5572c.0824.653.6175 1.1836 1.7289 1.1836.6175 0 1.3173-.2449 1.7701-.8163l1.77 1.551c-.9056 1.0203-2.0994 1.5509-3.5813 1.5509-3.1284 0-4.281-2.1631-4.281-4.3263 0-2.0815 1.1526-4.4079 4.1576-4.4079 2.6344 0 4.034 1.8774 4.034 4.4487 0 .2449 0 .4898-.0411.8163zm-2.4287-1.8775c-.0412-.7754-.741-1.2652-1.6054-1.2652-1.0703 0-1.4819.6938-1.5642 1.2652h3.1696z" />
</svg>
<span class="h-visually-hidden">
</span>
</a>
</div>
<div class="logo header--no-description header__logo header__logo--negative">
<a href="https://play.ee" class="logo__content logo__link">
<svg viewBox="0 0 58 62" xmlns="http://www.w3.org/2000/svg" class="logo__svg">
<path d="M8.93299 7.67307c0 2.85703-1.6054 4.32633-3.45778 4.32633-.82328 0-1.68772-.3265-2.22285-.8571v4.1222H.700195V3.42839H3.29352v.65303c.5763-.61221 1.48191-.81628 2.22286-.81628 2.26402 0 3.41661 1.95908 3.41661 4.40793zm-2.55217-.04081c0-1.4285-.53513-2.12234-1.56423-2.12234-1.35841 0-1.77005.93873-1.77005 2.12234 0 1.18361.4528 2.16315 1.72889 2.16315 1.07026 0 1.60539-.69384 1.60539-2.16315zM10.085 9.71379V0h2.5933v9.34646c0 .40814.1646.44895.494.44895.1234 0 .3293 0 .5351-.08162v1.99991c-.5351.2041-1.0291.2857-1.3996.2857-1.2349 0-2.2228-.6939-2.2228-2.28561zM22.187 6.53028v5.30582h-2.3464l-.1646-.8163c-.6998.898-1.6054 1.0204-2.2229 1.0204-1.8935 0-3.2519-1.1836-3.2519-2.89781 0-.97955.4528-1.67339 1.1526-2.04072.5351-.2857 1.1937-.40814 1.9347-.40814h2.3463v-.16325c0-.61222-.494-1.02036-1.4407-1.02036-.6175 0-1.2761.20407-2.0171.89791l-1.8523-1.55094c.9879-1.10198 2.5521-1.59175 3.9929-1.59175 2.4286 0 3.8694 1.26524 3.8694 3.26514zm-2.5934 1.99989h-1.9347c-.2881 0-.4939.04082-.6586.16326-.1646.12244-.247.2857-.247.48977 0 .40814.3705.77547 1.1115.77547.9056 0 1.6877-.61221 1.7288-1.4285zM25.48 11.5505l-3.1284-8.08126h2.8403l1.6877 5.14259 1.8935-5.14259h2.8404L26.7149 15.3054h-2.7991l1.5642-3.7549zM9.17956 30.8964l-1.44074-1.6326c-1.0291.8163-2.22285 1.1837-3.58126 1.1837C1.85238 30.4066 0 29.3863 0 27.3456c0-1.7142 1.31725-2.7754 2.63449-3.6325-.49396-.4898-1.31724-1.3877-1.31724-2.6121 0-1.8366 1.81121-2.8978 3.45777-2.8978 1.72888 0 3.29311 1.1836 3.29311 2.8978 0 1.2652-.82327 2.1632-1.81121 2.9386l1.39958 1.551c.24698-.5306.49396-1.1837.69978-1.9183l2.30522.4081c-.3705 1.3469-.82332 2.4489-1.35845 3.306l1.68775 1.8774-1.81124 1.6326zm-2.9638-3.3468l-1.89354-2.1223c-.98794.653-1.81122 1.2652-1.81122 1.9999 0 .653.61746.8571 1.44074.8571.86444-.0408 1.60539-.2857 2.26402-.7347zM4.5692 22.5703c.65862-.4489 1.11142-.8979 1.11142-1.4693 0-.449-.24698-.8571-.86444-.8571-.53513 0-.98793.2857-.98793.8163 0 .4898.41164 1.102.74095 1.5101zM8.76833 38.7736v5.5507H6.175v-4.612c0-.653 0-1.7142-1.31725-1.7142-1.60539 0-1.60539 1.5101-1.60539 2.408v3.9182H.700195v-8.3669H3.29352v.7754c.61746-.7754 1.52307-.9795 2.38751-.9795 1.93471.0408 3.0873 1.1836 3.0873 3.0203zM9.75586 40.1613c0-2.2856 1.60544-4.3672 4.36334-4.3672 2.7169 0 4.3223 2.0407 4.3223 4.3672 0 2.2856-1.6054 4.3671-4.3223 4.3671-2.7579 0-4.36334-2.0815-4.36334-4.3671zm6.09224 0c0-1.0612-.3293-2.1224-1.7289-2.1224-1.3995 0-1.77 1.0612-1.77 2.1224 0 1.0203.3293 2.1631 1.77 2.1631 1.3584 0 1.7289-1.102 1.7289-2.1631zM27.8267 40.202c0 2.857-1.6054 4.3264-3.4578 4.3264-.8233 0-1.6877-.3266-2.2228-.8571v4.1222h-2.5934V35.9574h2.6345v.6122c.5763-.6122 1.4819-.8163 2.2229-.8163 2.2228.0408 3.4166 1.9591 3.4166 4.4487zm-2.5933-.0408c0-1.4285-.5352-2.1223-1.5643-2.1223-1.3584 0-1.77.9387-1.77 2.1223 0 1.1836.4528 2.1632 1.7289 2.1632 1.0702 0 1.6054-.7347 1.6054-2.1632zM36.6768 41.0592h-5.5571c.0823.653.6175 1.1836 1.7289 1.1836.6174 0 1.3172-.2449 1.77-.8163l1.7701 1.5509c-.9056 1.0204-2.0994 1.551-3.5813 1.551-3.1284 0-4.281-2.1632-4.281-4.3263 0-2.0816 1.1526-4.408 4.1575-4.408 2.6345 0 4.0341 1.8775 4.0341 4.4488 0 .2449-.0412.4489-.0412.8163zm-2.4286-1.8775c-.0412-.7755-.741-1.2652-1.6054-1.2652-1.0703 0-1.4819.6938-1.5643 1.2652h3.1697zM7.98581 55.997v5.3059H5.63946l-.16466-.8163c-.69978.8979-1.60539 1.0203-2.22285 1.0203C1.35841 61.5069 0 60.3233 0 58.6091c0-.9795.452803-1.6733 1.15259-2.0407.53513-.2857 1.19375-.4081 1.93471-.4081h2.34634v-.1225c0-.6122-.49397-1.0203-1.44074-1.0203-.61746 0-1.27608.2041-2.01703.8979L.123492 54.3645c1.070258-1.102 2.634488-1.5918 4.075228-1.5918 2.34635 0 3.78709 1.2244 3.78709 3.2243zm-2.59333 1.9999H3.45777c-.28815 0-.49397.0408-.65862.1633-.16466.1224-.24699.2857-.24699.4898 0 .4081.37048.7754 1.11143.7754.90561 0 1.68772-.5714 1.72889-1.4285zM9.5498 59.1807v-9.7138h2.5933v9.3465c0 .4081.1647.4489.494.4489.1235 0 .3293 0 .5351-.0816v1.9999c-.5351.2041-1.0291.2857-1.3995.2857-1.2761.0408-2.2229-.653-2.2229-2.2856zM14.2842 59.1807v-9.7138h2.5933v9.3465c0 .4081.1647.4489.494.4489.1235 0 .3293 0 .5351-.0816v1.9999c-.5351.2041-1.0291.2857-1.3996.2857-1.2349.0408-2.2228-.653-2.2228-2.2856zM19.0996 49.4669h2.6345v2.3264h-2.6345v-2.3264zm.0412 3.4692h2.5933v8.3669h-2.5933v-8.3669zM30.9145 55.997v5.3059h-2.3463l-.1647-.8163c-.6998.8979-1.6054 1.0203-2.2228 1.0203-1.8936 0-3.252-1.1836-3.252-2.8978 0-.9795.4528-1.6733 1.1526-2.0407.5351-.2857 1.1938-.4081 1.9347-.4081h2.3464v-.1225c0-.6122-.494-1.0203-1.4408-1.0203-.6174 0-1.2761.2041-2.017.8979l-1.8524-1.5509c1.0703-1.102 2.6345-1.5918 4.0752-1.5918 2.3464 0 3.7871 1.2244 3.7871 3.2243zm-2.5933 1.9999h-1.9347c-.2882 0-.494.0408-.6586.1633-.1647.1224-.247.2857-.247.4898 0 .4081.3704.7754 1.1114.7754.9056 0 1.6877-.5714 1.7289-1.4285zM40.6698 55.7523v5.5507h-2.5933v-4.612c0-.653 0-1.7142-1.3172-1.7142-1.6054 0-1.6054 1.5102-1.6054 2.4081v3.9181h-2.5934v-8.3669h2.5934v.7755c.6174-.7755 1.523-.9795 2.3875-.9795 1.9759.0408 3.1284 1.1836 3.1284 3.0202zM41.6582 57.14c0-2.204 1.3584-4.4079 4.2399-4.4079 1.77 0 3.1284.8162 3.7459 2.5304l-2.4287.9796c-.1235-.7755-.6586-1.3061-1.3172-1.3061-1.1938 0-1.6054 1.102-1.6054 2.1632 0 1.0611.3705 2.1223 1.5642 2.1223.6586 0 1.2349-.4897 1.3584-1.2244l2.3464.8979c-.5763 1.5918-1.8936 2.5713-3.6636 2.5713-2.9227.0408-4.2399-2.1632-4.2399-4.3263zM57.9591 57.9971h-5.5572c.0824.653.6175 1.1836 1.7289 1.1836.6175 0 1.3173-.2449 1.7701-.8163l1.77 1.551c-.9056 1.0203-2.0994 1.5509-3.5813 1.5509-3.1284 0-4.281-2.1631-4.281-4.3263 0-2.0815 1.1526-4.4079 4.1576-4.4079 2.6344 0 4.034 1.8774 4.034 4.4487 0 .2449 0 .4898-.0411.8163zm-2.4287-1.8775c-.0412-.7754-.741-1.2652-1.6054-1.2652-1.0703 0-1.4819.6938-1.5642 1.2652h3.1696z" />
</svg>
<span class="h-visually-hidden">
</span>
</a>
</div>
</div>
<div class="grid__col grid__col--md-11 header__main-col">
<div class="header__container">
<div class="header__container-inner h-container">
<div class="header__content-wrapper">
<nav class="navigation header__navigation">
<ul class="navigation__list navigation__list--parents">
<li class="navigation__item ">
<svg class="icon navigation__arrow-icon">
<use xlink:href="../../inc/svg/global.bc9cdd731ad718497c5d8f03d08908d4.svg#arrow-right-long-54"></use>
</svg>
<a href="#" class="navigation__link">
Home
</a>
<span class="navigation__description">Home is the place to be #staythefuckhome</span>
</li>
<li class="navigation__item has-children is-current ">
<svg class="icon navigation__arrow-icon">
<use xlink:href="../../inc/svg/global.bc9cdd731ad718497c5d8f03d08908d4.svg#arrow-right-long-54"></use>
</svg>
<a href="#" class="navigation__link">
Services
<svg class="icon navigation__chevron">
<use xlink:href="../../inc/svg/global.bc9cdd731ad718497c5d8f03d08908d4.svg#chevron-bottom-24"></use>
</svg>
</a>
<span class="navigation__description">Everything digital under one roof.</span>
<ul class="navigation__list navigation__list--children">
<li class="navigation__item ">
<a href="#" class="navigation__link">
Business transformation
</a>
<svg class="icon navigation__arrow-icon">
<use xlink:href="../../inc/svg/global.bc9cdd731ad718497c5d8f03d08908d4.svg#tiny-arrow-right-long-24"></use>
</svg>
</li>
<li class="navigation__item ">
<a href="#" class="navigation__link">
Design & Innovation
</a>
<svg class="icon navigation__arrow-icon">
<use xlink:href="../../inc/svg/global.bc9cdd731ad718497c5d8f03d08908d4.svg#tiny-arrow-right-long-24"></use>
</svg>
</li>
<li class="navigation__item ">
<a href="#" class="navigation__link">
Development
</a>
<svg class="icon navigation__arrow-icon">
<use xlink:href="../../inc/svg/global.bc9cdd731ad718497c5d8f03d08908d4.svg#tiny-arrow-right-long-24"></use>
</svg>
</li>
<li class="navigation__item ">
<a href="#" class="navigation__link">
Maintenance
</a>
<svg class="icon navigation__arrow-icon">
<use xlink:href="../../inc/svg/global.bc9cdd731ad718497c5d8f03d08908d4.svg#tiny-arrow-right-long-24"></use>
</svg>
</li>
</ul>
</li>
<li class="navigation__item has-children ">
<svg class="icon navigation__arrow-icon">
<use xlink:href="../../inc/svg/global.bc9cdd731ad718497c5d8f03d08908d4.svg#arrow-right-long-54"></use>
</svg>
<a href="#" class="navigation__link">
Work
<svg class="icon navigation__chevron">
<use xlink:href="../../inc/svg/global.bc9cdd731ad718497c5d8f03d08908d4.svg#chevron-bottom-24"></use>
</svg>
</a>
<span class="navigation__description">Home is the place to be #staythefuckhome</span>
<ul class="navigation__list navigation__list--children">
<li class="navigation__item ">
<a href="#" class="navigation__link">
Business transformation
</a>
<svg class="icon navigation__arrow-icon">
<use xlink:href="../../inc/svg/global.bc9cdd731ad718497c5d8f03d08908d4.svg#tiny-arrow-right-long-24"></use>
</svg>
</li>
<li class="navigation__item ">
<a href="#" class="navigation__link">
Design & Innovation
</a>
<svg class="icon navigation__arrow-icon">
<use xlink:href="../../inc/svg/global.bc9cdd731ad718497c5d8f03d08908d4.svg#tiny-arrow-right-long-24"></use>
</svg>
</li>
<li class="navigation__item ">
<a href="#" class="navigation__link">
Development
</a>
<svg class="icon navigation__arrow-icon">
<use xlink:href="../../inc/svg/global.bc9cdd731ad718497c5d8f03d08908d4.svg#tiny-arrow-right-long-24"></use>
</svg>
</li>
</ul>
</li>
<li class="navigation__item ">
<svg class="icon navigation__arrow-icon">
<use xlink:href="../../inc/svg/global.bc9cdd731ad718497c5d8f03d08908d4.svg#arrow-right-long-54"></use>
</svg>
<a href="#" class="navigation__link">
About
</a>
<span class="navigation__description">Home is the place to be #staythefuckhome</span>
</li>
<li class="navigation__item ">
<svg class="icon navigation__arrow-icon">
<use xlink:href="../../inc/svg/global.bc9cdd731ad718497c5d8f03d08908d4.svg#arrow-right-long-54"></use>
</svg>
<a href="#" class="navigation__link">
Contact
</a>
<span class="navigation__description">Got a project you dream of realizing? Get in touch!</span>
</li>
</ul>
</nav>
<div class="header__contact">
<div class="header__contact-item">
<div class="header__contact-label text-small">Email</div>
<div class="header__contact-data">
<a href="mailto:contact@something.com" class="link header__link">contact@something.com</a>
</div>
</div>
<div class="header__contact-item">
<div class="header__contact-label text-small">Connect</div>
<div class="header__contact-data">
<a href="tel:56565656" class="link header__link">56565656</a>
</div>
</div>
</div>
</div>
</div>
<figure class="image header__background-image">
<img loading="lazy" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20800%20480%22%3E%3C%2Fsvg%3E" data-srcset="//via.placeholder.com/360x216 360w, //via.placeholder.com/720x432 720w, //via.placeholder.com/1000x600 1000w, //via.placeholder.com/2000x1200 2000w, //via.placeholder.com/800x480 800w, //via.placeholder.com/1600x960 1600w, //via.placeholder.com/1200x720 1200w, //via.placeholder.com/2400x1440 2400w" data-sizes="auto" alt="" class="image__img lazyload">
</figure>
</div>
<div class="header__burger-wrapper">
<button type="button" class="header__burger js-toggle-menu" aria-label="Toggle mobile menu" aria-expanded="false">
<span class="header__burger-box">
<span class="header__burger-inner">
<span class="header__burger-top"></span>
<span class="header__burger-middle"></span>
<span class="header__burger-bottom"></span>
</span>
</span>
</button>
<button type="button" class="header__burger header__burger--negative js-toggle-menu" aria-label="Toggle mobile menu">
<span class="header__burger-box">
<span class="header__burger-inner">
<span class="header__burger-top"></span>
<span class="header__burger-middle"></span>
<span class="header__burger-bottom"></span>
</span>
</span>
</button>
</div>
<div class="header__circle"></div>
</div>
</div>
</div>
</div>
<div class="header {{ modifier }} {{ class }}">
<div class="header__inner h-container">
<div class="grid grid--no-gutter header__grid">
<div class="grid__col grid__col--md-1 header__logo-col">
{% include '@logo' with { class: 'header__logo', data: data.logo } %}
{% include '@logo' with { class: 'header__logo header__logo--negative', data: data.logo } %}
</div>
<div class="grid__col grid__col--md-11 header__main-col">
<div class="header__container">
<div class="header__container-inner h-container">
<div class="header__content-wrapper">
{% if data.navigation %}
{% include '@navigation' with { modifier: '', class: 'header__navigation', data: data.navigation } %}
{% endif %}
{% if data.contacts %}
<div class="header__contact">
{% for item in data.contacts %}
<div class="header__contact-item">
{% if item.label %}
<div class="header__contact-label text-small">{{ item.label }}</div>
{% endif %}
{% if item.data %}
<div class="header__contact-data">
{% if item.link %}<a href="{{ item.link }}" class="link header__link">{{ item.data }}</a>{% else %}{{ item.data }}{% endif %}
</div>
{% endif %}
</div>
{% endfor %}
</div>
{% endif %}
</div>
</div>
{% if data.bgImage %}
{% include '@image' with { data: data.bgImage|srcset('800x480'), class: 'header__background-image', modifier: '' } %}
{% endif %}
</div>
{% if data.navigation or data.contacts %}
<div class="header__burger-wrapper">
<button type="button" class="header__burger js-toggle-menu" aria-label="{{ data.toggleLabel }}" aria-expanded="false">
<span class="header__burger-box">
<span class="header__burger-inner">
<span class="header__burger-top"></span>
<span class="header__burger-middle"></span>
<span class="header__burger-bottom"></span>
</span>
</span>
</button>
<button type="button" class="header__burger header__burger--negative js-toggle-menu" aria-label="{{ data.toggleLabel }}">
<span class="header__burger-box">
<span class="header__burger-inner">
<span class="header__burger-top"></span>
<span class="header__burger-middle"></span>
<span class="header__burger-bottom"></span>
</span>
</span>
</button>
</div>
<div class="header__circle"></div>
{% endif %}
</div>
</div>
</div>
</div>
{
"language": "en-US",
"data": {
"logo": {
"link": "https://play.ee"
},
"navigation": {
"items": [
{
"link": "#",
"title": "Home",
"description": "Home is the place to be #staythefuckhome"
},
{
"link": "#",
"title": "Services",
"description": "Everything digital under one roof.",
"current": "true",
"children": [
{
"link": "#",
"title": "Business transformation"
},
{
"link": "#",
"title": "Design & Innovation"
},
{
"link": "#",
"title": "Development"
},
{
"link": "#",
"title": "Maintenance"
}
]
},
{
"link": "#",
"title": "Work",
"description": "Home is the place to be #staythefuckhome",
"children": [
{
"link": "#",
"title": "Business transformation"
},
{
"link": "#",
"title": "Design & Innovation"
},
{
"link": "#",
"title": "Development"
}
]
},
{
"link": "#",
"title": "About",
"description": "Home is the place to be #staythefuckhome"
},
{
"link": "#",
"title": "Contact",
"description": "Got a project you dream of realizing? Get in touch!"
}
]
},
"toggleLabel": "Toggle mobile menu",
"bgImage": true,
"contacts": [
{
"label": "Email",
"data": "contact@something.com",
"link": "mailto:contact@something.com"
},
{
"label": "Connect",
"data": "56565656",
"link": "tel:56565656"
}
]
},
"modifier": "header--no-description"
}
.header {
position: fixed;
top: 0;
left: 0;
width: 100%;
padding: 20px 0 0;
z-index: map-get($zindex, 'header');
@include bp(md-min) {
padding: 32px 0 0;
}
&:before {
@include bp(md-min) {
content: '';
position: absolute;
top: 0;
bottom: 100%;
left: 0;
width: 100%;
z-index: -1;
background-color: $color-brand-01;
transition-property: bottom;
transition-duration: $transition-duration;
transition-timing-function: $transition-easing-in;
}
body.is-hovering-nav & {
@include bp(md-min) {
bottom: 0;
transition-timing-function: $transition-easing-out;
}
}
}
&.is-drawer {
@include bp(md-min) {
pointer-events: none;
}
body.is-header-open & {
@include bp(md-min) {
pointer-events: all;
}
}
}
}
.header--no-navigation {
.navigation {
display: none;
}
.header__burger {
display: none;
}
}
.header__logo-col {
position: relative;
z-index: 2;
opacity: .01;
transform: translateY(calc(-100% + 35px)); /* stylelint-disable-line plugin/no-unsupported-browser-features */
transition-property: opacity, transform;
transition-duration: $transition-duration;
transition-timing-function: $transition-easing-in;
overflow: hidden;
@include bp(md-min) {
padding-bottom: 24px;
}
body.core-has-loaded &,
.header.is-ready & {
opacity: 1;
transform: translateY(0);
transition-timing-function: $transition-easing-out;
}
}
.header__logo {
color: $color-text-03;
body.is-header-open & {
color: $color-text-03;
}
.header.is-drawer & {
@include bp(md-min) {
pointer-events: all;
}
}
body.core-has-loaded:not(.global-has-loaded) & {
.logo__svg {
fill: $color-text-03;
}
}
}
.header__logo--negative {
position: absolute;
top: 0;
left: 0;
width: 100%;
z-index: 1;
color: $color-brand-01;
}
.header__main-col {
@include bp(md-min) {
position: relative;
}
}
.header__container {
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: $color-brand-01;
height: var(--app-height);
z-index: 1;
opacity: 1;
visibility: visible;
transform: translateY(-100%);
transition-property: transform, opacity, visibility;
transition-duration: $transition-duration;
transition-timing-function: $transition-easing-in;
transition-delay: $transition-duration;
@include bp(md-min) {
position: relative;
top: auto;
left: auto;
width: auto;
height: auto;
background-color: transparent;
z-index: map-get($zindex, 'default');
opacity: 1;
visibility: visible;
transform: translateY(0);
transition-delay: 0ms;
}
.header.is-drawer & {
@include bp(md-min) {
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: transparent;
height: var(--app-height);
z-index: 1;
opacity: .01;
visibility: hidden;
}
body.is-header-open & {
transition-delay: 0ms;
transform: translateY(0);
opacity: 1;
visibility: visible;
transition-timing-function: $transition-easing-out;
}
}
body.is-navigation-hidden & {
@include bp(md-min) {
opacity: 0;
visibility: hidden;
}
}
body.is-header-open & {
transform: translateY(0);
transition-timing-function: $transition-easing-in;
}
}
.header__container-inner {
height: 100%;
overflow: auto;
@include bp(md-min) {
overflow: visible;
}
.header:not(.is-drawer) & {
@include bp(md-min) {
padding: 0;
}
}
.header.is-drawer & {
@include bp(md-min) {
overflow-y: scroll;
margin-right: -20px;
margin-left: -20px;
width: auto;
}
@include bp(xl-min) {
overflow: hidden;
margin-right: auto;
margin-left: auto;
}
}
}
.header__content-wrapper {
padding-top: 104px;
padding-bottom: 32px;
@include bp(sm-min) {
padding-top: 120px;
padding-bottom: 72px;
position: relative;
}
@media only screen and (min-width: #{$bp-sm-min}) and (orientation: portrait) {
height: 100%;
}
@include bp(md-min) {
height: 100%;
}
.header:not(.is-drawer) & {
@include bp(md-min) {
padding: 8px 0 0;
margin-left: -15px;
margin-right: -15px;
}
}
.header.is-drawer & {
@include bp(md-min) {
padding-top: 104px;
padding-bottom: 32px;
}
@include bp(xl-min) {
overflow-y: scroll;
margin-right: calc((1920px / 14 + 20px) * -1); /* stylelint-disable-line plugin/no-unsupported-browser-features */
padding-right: calc(1920px / 14 + 6px); /* stylelint-disable-line plugin/no-unsupported-browser-features */
}
@include bp(xxl-min) {
padding-top: 164px;
padding-bottom: 72px;
}
}
}
.header__navigation {
transition-property: opacity;
transition-duration: $transition-duration;
transition-timing-function: $transition-easing-out;
opacity: .01;
@include bp(md-min) {
opacity: 1;
}
.header.is-drawer & {
@include bp(md-min) {
padding-right: 20px;
padding-bottom: 64px;
}
@include bp(xl-min) {
padding-right: 0;
}
}
body.is-header-open & {
opacity: 1;
transition-timing-function: $transition-easing-in;
}
}
.header__contact {
color: $color-text-03;
transition-property: opacity, visibility;
transition-duration: $transition-duration;
transition-timing-function: $transition-easing-in;
transition-delay: 0ms;
opacity: .01;
visibility: hidden;
margin-top: 46px;
@media only screen and (min-width: #{$bp-sm-min}) and (orientation: portrait) {
position: fixed;
top: 100%;
transform: translateY(-100%);
z-index: 2;
margin-top: 0;
padding-bottom: 120px;
}
@include bp(md-min) {
margin-left: 20px;
position: fixed;
top: 100%;
transform: translateY(-100%);
z-index: 2;
margin-top: 0;
padding-bottom: 120px;
}
@include bp(xl-min) {
margin-left: 0;
}
body.is-header-open & {
opacity: 1;
visibility: visible;
transition-delay: $transition-duration;
transition-timing-function: $transition-easing-out;
}
}
.header__contact-item {
&:not(:first-child) {
margin-top: 35px;
}
}
.header__link {
color: $color-text-03;
font-weight: $font-weight-regular;
}
.header__burger-wrapper {
position: absolute;
top: 20px;
right: 15px;
z-index: 3;
transition-property: opacity, transform;
transition-duration: $transition-duration;
transition-timing-function: $transition-easing-in;
transform: translateY(-45px);
opacity: .01;
width: 36px;
height: 36px;
@include bp(sm-min) {
right: calc(100vw / 14 - 5px); /* stylelint-disable-line plugin/no-unsupported-browser-features */
}
@include bp(md-min) {
top: 3px;
right: -5px;
transform: translateY(-64px);
}
body.core-has-loaded &,
.header.is-ready & {
@media only screen and (max-width: $bp-md-min - 1) {
transform: translateY(0);
opacity: 1;
}
}
body.is-navigation-hidden & {
transform: translateY(0);
opacity: 1;
transition-timing-function: $transition-easing-out;
}
.header.is-drawer & {
@include bp(md-min) {
pointer-events: all;
}
}
&:hover {
body.is-header-open & {
transform: rotate(90deg);
transition-timing-function: $transition-easing-out;
}
}
}
.header__burger {
border-radius: 0;
border: none;
-webkit-appearance: none;
margin: 0;
padding: 0;
display: inline-flex;
background: transparent;
flex-flow: row wrap;
justify-content: center;
align-items: center;
align-content: center;
cursor: pointer;
position: absolute;
top: 0;
left: 0;
}
.header__burger--negative {
z-index: 1;
color: $color-brand-01;
opacity: 1;
transition: opacity $transition-duration;
transition-delay: $transition-duration * 2;
body:not(.global-has-loaded) &,
body.is-header-open & {
opacity: .01;
transition-delay: 0ms;
}
}
.header__burger-box {
display: flex;
align-items: center;
justify-content: center;
position: relative;
width: 36px;
height: 36px;
}
.header__burger-inner {
position: relative;
width: 25px;
height: 2px;
transition: transform $transition-duration * 1.75 $transition-easing-in;
> * {
display: block;
position: absolute;
width: 25px;
height: 2px;
transition: transform $transition-duration;
background-color: $color-text-03;
will-change: transform; /* stylelint-disable-line plugin/no-unsupported-browser-features */
.header__burger--negative & {
background-color: $color-brand-01;
}
body.is-header-open & {
background-color: $color-text-03;
}
}
body.is-header-open & {
transform: rotate(-90deg);
transition: transform $transition-duration * 2.25 $transition-easing-out;
}
}
.header__burger-top {
transform: rotate(0turn) translateY(-250%);
.header__burger-wrapper:hover & {
body:not(.is-header-open) & {
transform: rotate(0turn) translateY(-315%);
}
}
body.is-header-open & {
transform: rotate(.125turn + .5turn);
}
}
.header__burger-middle {
transform: rotate(0turn);
body.is-header-open & {
transform: rotate(.125turn + .5turn);
}
}
.header__burger-bottom {
transform: rotate(0turn) translateY(5px);
.header__burger-wrapper:hover & {
body:not(.is-header-open) & {
transform: rotate(0turn) translateY(6px);
}
}
body.is-header-open & {
transform: rotate(.375turn + .5turn);
}
}
.header__circle {
display: none;
background-color: $color-brand-01;
transform: translateX(calc(50% - 18px)) translateY(calc(-50% + 18px)) scale(0); /* stylelint-disable-line plugin/no-unsupported-browser-features */
border-radius: $border-radius-round;
transition-property: transform;
transition-duration: $transition-duration;
transition-timing-function: $transition-easing-in;
transition-delay: $transition-duration;
position: absolute;
top: 0;
right: 0;
width: 215vw;
height: 215vw;
@include bp(md-min) {
display: block;
}
body.is-header-open & {
transition-timing-function: $transition-easing-out;
transition-delay: 0ms;
transform: translateX(calc(50% - 18px)) translateY(calc(-50% + 18px)) scale(1); /* stylelint-disable-line plugin/no-unsupported-browser-features */
}
}
.header__background-image {
position: fixed;
z-index: -1;
top: 0;
left: 0;
bottom: 0;
width: 100%;
pointer-events: none;
opacity: .01;
transition-property: opacity;
transition-duration: $transition-duration;
transition-timing-function: $transition-easing-out;
transition-delay: 0ms;
@include bp(md-min) {
display: none;
}
body.is-header-open & {
opacity: 1;
transition-timing-function: $transition-easing-in;
transition-delay: $transition-duration;
}
}
.image__img {
.header__background-image & {
object-fit: cover; /* stylelint-disable-line plugin/no-unsupported-browser-features */
width: 100%;
height: 100%;
}
}
.navigation__description {
.header--no-description & {
display: none;
}
}
import Component from '../component/component';
import Helpers from '../helpers/helpers';
import Navigation from '../navigation/navigation';
import '../logo/logo';
import './header.scss';
interface IHeaderSettings {
animationSpeed: number;
darkClass: string;
drawerClass: string;
navHiddenClass: string;
navTopClass: string;
openClass: string;
readyClass: string;
}
export default class Header extends Component {
static initSelector: string = '.header';
public container: JQuery;
public menuToggle: JQuery;
public body: JQuery;
public navigation: JQuery;
public navigationInstance: Navigation;
public isOpen: boolean;
public sections: JQuery;
public currentTheme: string;
public lastScrollTop: number;
public direction: string;
public activeSection: JQuery;
public logoNegative: JQuery;
public burgerNegative: JQuery;
settings: IHeaderSettings;
constructor(target: HTMLElement) {
super(target);
this.menuToggle = this.element.find('.js-toggle-menu');
this.body = $('body');
this.settings = {
animationSpeed: 250,
darkClass: 'is-header-dark',
drawerClass: 'is-drawer',
navHiddenClass: 'is-navigation-hidden',
navTopClass: 'navigation--idle',
openClass: 'is-header-open',
readyClass: 'is-ready',
};
this.navigation = this.element.find('.header__navigation');
this.navigationInstance = new Navigation(this.navigation[0]);
this.isOpen = false;
this.sections = $('[data-theme]');
this.currentTheme = 'default';
this.lastScrollTop = 0;
this.direction = 'none';
this.activeSection = $('.hero');
this.logoNegative = this.element.find('.header__logo--negative');
this.burgerNegative = this.element.find('.header__burger--negative');
this.init();
}
init(): void {
this.element.addClass(this.settings.readyClass);
this.menuToggle.on('click', this.toggleHandler.bind(this));
this.navigationInstance.addTriggerListeners();
this.setState();
if (this.sections.length) {
this.setSectionTheme();
}
$(window).on('scroll', this.scrollHandler.bind(this));
}
scrollHandler(): void {
this.setScrollDirection();
if ($(window).width() >= Helpers.bp.sm) {
this.setState();
}
if (this.sections.length) {
this.setSectionTheme();
}
}
toggleHandler(): void {
if (this.body.hasClass(this.settings.openClass)) {
this.close();
} else {
this.open();
}
}
setScrollDirection(): void {
const st: number = window.pageYOffset || document.documentElement.scrollTop;
if (st > this.lastScrollTop) {
this.direction = 'down';
} else {
this.direction = 'up';
}
this.lastScrollTop = st <= 0 ? 0 : st;
}
open(): void {
this.body.addClass(this.settings.openClass);
this.menuToggle.attr('aria-expanded', 'true');
this.isOpen = true;
Helpers.disableScroll();
this.navigation.removeClass(this.settings.readyClass);
setTimeout(() => {
this.navigation.addClass(this.settings.readyClass);
}, 150);
}
close(): void {
const activeNav: JQuery = this.navigationInstance.dropdownItems.filter('.' + this.navigationInstance.settings.activeClass);
this.body.removeClass(this.settings.openClass);
this.menuToggle.attr('aria-expanded', 'false');
this.isOpen = false;
this.navigationInstance.animateClose(activeNav);
Helpers.enableScroll();
}
setState(): void {
if ($(window).scrollTop() > 5) {
this.body.addClass(this.settings.navHiddenClass);
if (!this.element.hasClass(this.settings.drawerClass)) {
window.setTimeout(() => {
if ($(window).scrollTop() > 5) {
this.element.addClass(this.settings.drawerClass);
}
}, this.settings.animationSpeed);
}
if (this.navigation.hasClass(this.settings.navTopClass)) {
window.setTimeout(() => {
if ($(window).scrollTop() > 5) {
this.navigation.removeClass(this.settings.navTopClass);
this.navigationInstance.removeMouseListeners();
this.navigationInstance.addClickListeners();
this.navigationInstance.setIniHeights();
}
}, this.settings.animationSpeed);
}
if (this.navigationInstance.dropdownItems.filter('.' + this.navigationInstance.settings.activeClass).length) {
this.body.removeClass(this.navigationInstance.settings.navHoverClass);
this.navigationInstance.close();
}
} else {
if (!this.isOpen) {
this.element.removeClass(this.settings.drawerClass);
this.navigation.addClass(this.settings.navTopClass);
this.body.removeClass(this.settings.navHiddenClass);
this.navigationInstance.addTriggerListeners();
this.navigationInstance.setIniHeights();
}
}
}
setSectionTheme(): void {
const currentSection: JQuery = this.cycleSections();
if (currentSection !== undefined) {
this.activeSection = currentSection;
this.currentTheme = this.getSectionTheme(currentSection);
this.body.removeClass(this.settings.darkClass);
} else {
this.currentTheme = 'light';
this.body.addClass(this.settings.darkClass);
}
this.moveMask(this.logoNegative);
this.moveMask(this.burgerNegative);
}
moveMask(element: JQuery): void {
let topLeft: number;
let topRight: number;
let bottomLeft: number;
let bottomRight: number;
const viewTop: number = $(window).scrollTop();
const offsetTop: number = parseInt(this.element.css('padding-top'));
const elementHeight: number = element.outerHeight(true);
const elementBottom: number = viewTop + offsetTop + elementHeight;
const sectionTop: number = this.activeSection.offset().top;
const sectionBottom: number = this.activeSection.offset().top + this.activeSection.outerHeight(true);
if (this.currentTheme === 'dark') {
if (this.direction === 'up') {
if (sectionBottom < elementBottom) {
// Dark element turning white
const maskPercentage: number = this.roundResults((100 * (sectionBottom - viewTop - offsetTop) / (elementHeight)));
topLeft = maskPercentage;
topRight = maskPercentage;
bottomLeft = 100;
bottomRight = 100;
} else {
// White element turning dark
const maskPercentage: number = this.roundResults((100 * (sectionTop - viewTop - offsetTop) / (elementHeight)));
topLeft = 0;
topRight = 0;
bottomLeft = maskPercentage;
bottomRight = maskPercentage;
}
} else {
if (sectionBottom > elementBottom) {
// Dark element turning white
const maskPercentage: number = this.roundResults((100 * (sectionTop - viewTop - offsetTop) / (elementHeight)));
topLeft = 0;
topRight = 0;
bottomLeft = maskPercentage;
bottomRight = maskPercentage;
} else {
// White element turning dark
const maskPercentage: number = this.roundResults((100 * (sectionBottom - viewTop - offsetTop) / (elementHeight)));
topLeft = maskPercentage;
topRight = maskPercentage;
bottomLeft = 100;
bottomRight = 100;
}
}
const polygon: string = '0% ' + topLeft + '%, 100% ' + topRight + '%, 100% ' + bottomRight + '%, 0% ' + bottomLeft + '%';
element.css({ 'clip-path': 'polygon(' + polygon + ')' });
} else {
element.css({ 'clip-path': '' });
}
}
roundResults(percentage: number): number {
return Math.min(100, Math.max(0, percentage));
}
cycleSections(): JQuery {
let currentSection: JQuery;
this.sections.each((index: number, element: HTMLElement) => {
if (this.isSectionScreen($(element))) {
currentSection = $(element);
}
});
return currentSection;
}
getSectionTheme(section: JQuery): string {
return section.data('theme');
}
isSectionScreen(target: JQuery): boolean {
const win: JQuery<Window> = $(window);
const viewTop: number = win.scrollTop();
const top: number = target.offset().top + parseInt(target.css('margin-top'));
const compareTop: number = top;
const compareBottom: number = top + target.outerHeight(true);
const offsetTop: number = parseInt(this.element.css('padding-top'));
const logoHeight: number = offsetTop + $('.header__logo').outerHeight(true);
return (compareBottom >= (viewTop + offsetTop)) && (compareTop <= (viewTop + logoHeight));
}
}
<div class="header ">
<div class="header__inner h-container">
<div class="grid grid--no-gutter header__grid">
<div class="grid__col grid__col--md-1 header__logo-col">
<div class="logo header__logo">
<a href="https://play.ee" class="logo__content logo__link">
<svg viewBox="0 0 58 62" xmlns="http://www.w3.org/2000/svg" class="logo__svg">
<path d="M8.93299 7.67307c0 2.85703-1.6054 4.32633-3.45778 4.32633-.82328 0-1.68772-.3265-2.22285-.8571v4.1222H.700195V3.42839H3.29352v.65303c.5763-.61221 1.48191-.81628 2.22286-.81628 2.26402 0 3.41661 1.95908 3.41661 4.40793zm-2.55217-.04081c0-1.4285-.53513-2.12234-1.56423-2.12234-1.35841 0-1.77005.93873-1.77005 2.12234 0 1.18361.4528 2.16315 1.72889 2.16315 1.07026 0 1.60539-.69384 1.60539-2.16315zM10.085 9.71379V0h2.5933v9.34646c0 .40814.1646.44895.494.44895.1234 0 .3293 0 .5351-.08162v1.99991c-.5351.2041-1.0291.2857-1.3996.2857-1.2349 0-2.2228-.6939-2.2228-2.28561zM22.187 6.53028v5.30582h-2.3464l-.1646-.8163c-.6998.898-1.6054 1.0204-2.2229 1.0204-1.8935 0-3.2519-1.1836-3.2519-2.89781 0-.97955.4528-1.67339 1.1526-2.04072.5351-.2857 1.1937-.40814 1.9347-.40814h2.3463v-.16325c0-.61222-.494-1.02036-1.4407-1.02036-.6175 0-1.2761.20407-2.0171.89791l-1.8523-1.55094c.9879-1.10198 2.5521-1.59175 3.9929-1.59175 2.4286 0 3.8694 1.26524 3.8694 3.26514zm-2.5934 1.99989h-1.9347c-.2881 0-.4939.04082-.6586.16326-.1646.12244-.247.2857-.247.48977 0 .40814.3705.77547 1.1115.77547.9056 0 1.6877-.61221 1.7288-1.4285zM25.48 11.5505l-3.1284-8.08126h2.8403l1.6877 5.14259 1.8935-5.14259h2.8404L26.7149 15.3054h-2.7991l1.5642-3.7549zM9.17956 30.8964l-1.44074-1.6326c-1.0291.8163-2.22285 1.1837-3.58126 1.1837C1.85238 30.4066 0 29.3863 0 27.3456c0-1.7142 1.31725-2.7754 2.63449-3.6325-.49396-.4898-1.31724-1.3877-1.31724-2.6121 0-1.8366 1.81121-2.8978 3.45777-2.8978 1.72888 0 3.29311 1.1836 3.29311 2.8978 0 1.2652-.82327 2.1632-1.81121 2.9386l1.39958 1.551c.24698-.5306.49396-1.1837.69978-1.9183l2.30522.4081c-.3705 1.3469-.82332 2.4489-1.35845 3.306l1.68775 1.8774-1.81124 1.6326zm-2.9638-3.3468l-1.89354-2.1223c-.98794.653-1.81122 1.2652-1.81122 1.9999 0 .653.61746.8571 1.44074.8571.86444-.0408 1.60539-.2857 2.26402-.7347zM4.5692 22.5703c.65862-.4489 1.11142-.8979 1.11142-1.4693 0-.449-.24698-.8571-.86444-.8571-.53513 0-.98793.2857-.98793.8163 0 .4898.41164 1.102.74095 1.5101zM8.76833 38.7736v5.5507H6.175v-4.612c0-.653 0-1.7142-1.31725-1.7142-1.60539 0-1.60539 1.5101-1.60539 2.408v3.9182H.700195v-8.3669H3.29352v.7754c.61746-.7754 1.52307-.9795 2.38751-.9795 1.93471.0408 3.0873 1.1836 3.0873 3.0203zM9.75586 40.1613c0-2.2856 1.60544-4.3672 4.36334-4.3672 2.7169 0 4.3223 2.0407 4.3223 4.3672 0 2.2856-1.6054 4.3671-4.3223 4.3671-2.7579 0-4.36334-2.0815-4.36334-4.3671zm6.09224 0c0-1.0612-.3293-2.1224-1.7289-2.1224-1.3995 0-1.77 1.0612-1.77 2.1224 0 1.0203.3293 2.1631 1.77 2.1631 1.3584 0 1.7289-1.102 1.7289-2.1631zM27.8267 40.202c0 2.857-1.6054 4.3264-3.4578 4.3264-.8233 0-1.6877-.3266-2.2228-.8571v4.1222h-2.5934V35.9574h2.6345v.6122c.5763-.6122 1.4819-.8163 2.2229-.8163 2.2228.0408 3.4166 1.9591 3.4166 4.4487zm-2.5933-.0408c0-1.4285-.5352-2.1223-1.5643-2.1223-1.3584 0-1.77.9387-1.77 2.1223 0 1.1836.4528 2.1632 1.7289 2.1632 1.0702 0 1.6054-.7347 1.6054-2.1632zM36.6768 41.0592h-5.5571c.0823.653.6175 1.1836 1.7289 1.1836.6174 0 1.3172-.2449 1.77-.8163l1.7701 1.5509c-.9056 1.0204-2.0994 1.551-3.5813 1.551-3.1284 0-4.281-2.1632-4.281-4.3263 0-2.0816 1.1526-4.408 4.1575-4.408 2.6345 0 4.0341 1.8775 4.0341 4.4488 0 .2449-.0412.4489-.0412.8163zm-2.4286-1.8775c-.0412-.7755-.741-1.2652-1.6054-1.2652-1.0703 0-1.4819.6938-1.5643 1.2652h3.1697zM7.98581 55.997v5.3059H5.63946l-.16466-.8163c-.69978.8979-1.60539 1.0203-2.22285 1.0203C1.35841 61.5069 0 60.3233 0 58.6091c0-.9795.452803-1.6733 1.15259-2.0407.53513-.2857 1.19375-.4081 1.93471-.4081h2.34634v-.1225c0-.6122-.49397-1.0203-1.44074-1.0203-.61746 0-1.27608.2041-2.01703.8979L.123492 54.3645c1.070258-1.102 2.634488-1.5918 4.075228-1.5918 2.34635 0 3.78709 1.2244 3.78709 3.2243zm-2.59333 1.9999H3.45777c-.28815 0-.49397.0408-.65862.1633-.16466.1224-.24699.2857-.24699.4898 0 .4081.37048.7754 1.11143.7754.90561 0 1.68772-.5714 1.72889-1.4285zM9.5498 59.1807v-9.7138h2.5933v9.3465c0 .4081.1647.4489.494.4489.1235 0 .3293 0 .5351-.0816v1.9999c-.5351.2041-1.0291.2857-1.3995.2857-1.2761.0408-2.2229-.653-2.2229-2.2856zM14.2842 59.1807v-9.7138h2.5933v9.3465c0 .4081.1647.4489.494.4489.1235 0 .3293 0 .5351-.0816v1.9999c-.5351.2041-1.0291.2857-1.3996.2857-1.2349.0408-2.2228-.653-2.2228-2.2856zM19.0996 49.4669h2.6345v2.3264h-2.6345v-2.3264zm.0412 3.4692h2.5933v8.3669h-2.5933v-8.3669zM30.9145 55.997v5.3059h-2.3463l-.1647-.8163c-.6998.8979-1.6054 1.0203-2.2228 1.0203-1.8936 0-3.252-1.1836-3.252-2.8978 0-.9795.4528-1.6733 1.1526-2.0407.5351-.2857 1.1938-.4081 1.9347-.4081h2.3464v-.1225c0-.6122-.494-1.0203-1.4408-1.0203-.6174 0-1.2761.2041-2.017.8979l-1.8524-1.5509c1.0703-1.102 2.6345-1.5918 4.0752-1.5918 2.3464 0 3.7871 1.2244 3.7871 3.2243zm-2.5933 1.9999h-1.9347c-.2882 0-.494.0408-.6586.1633-.1647.1224-.247.2857-.247.4898 0 .4081.3704.7754 1.1114.7754.9056 0 1.6877-.5714 1.7289-1.4285zM40.6698 55.7523v5.5507h-2.5933v-4.612c0-.653 0-1.7142-1.3172-1.7142-1.6054 0-1.6054 1.5102-1.6054 2.4081v3.9181h-2.5934v-8.3669h2.5934v.7755c.6174-.7755 1.523-.9795 2.3875-.9795 1.9759.0408 3.1284 1.1836 3.1284 3.0202zM41.6582 57.14c0-2.204 1.3584-4.4079 4.2399-4.4079 1.77 0 3.1284.8162 3.7459 2.5304l-2.4287.9796c-.1235-.7755-.6586-1.3061-1.3172-1.3061-1.1938 0-1.6054 1.102-1.6054 2.1632 0 1.0611.3705 2.1223 1.5642 2.1223.6586 0 1.2349-.4897 1.3584-1.2244l2.3464.8979c-.5763 1.5918-1.8936 2.5713-3.6636 2.5713-2.9227.0408-4.2399-2.1632-4.2399-4.3263zM57.9591 57.9971h-5.5572c.0824.653.6175 1.1836 1.7289 1.1836.6175 0 1.3173-.2449 1.7701-.8163l1.77 1.551c-.9056 1.0203-2.0994 1.5509-3.5813 1.5509-3.1284 0-4.281-2.1631-4.281-4.3263 0-2.0815 1.1526-4.4079 4.1576-4.4079 2.6344 0 4.034 1.8774 4.034 4.4487 0 .2449 0 .4898-.0411.8163zm-2.4287-1.8775c-.0412-.7754-.741-1.2652-1.6054-1.2652-1.0703 0-1.4819.6938-1.5642 1.2652h3.1696z" />
</svg>
<span class="h-visually-hidden">
</span>
</a>
</div>
<div class="logo header__logo header__logo--negative">
<a href="https://play.ee" class="logo__content logo__link">
<svg viewBox="0 0 58 62" xmlns="http://www.w3.org/2000/svg" class="logo__svg">
<path d="M8.93299 7.67307c0 2.85703-1.6054 4.32633-3.45778 4.32633-.82328 0-1.68772-.3265-2.22285-.8571v4.1222H.700195V3.42839H3.29352v.65303c.5763-.61221 1.48191-.81628 2.22286-.81628 2.26402 0 3.41661 1.95908 3.41661 4.40793zm-2.55217-.04081c0-1.4285-.53513-2.12234-1.56423-2.12234-1.35841 0-1.77005.93873-1.77005 2.12234 0 1.18361.4528 2.16315 1.72889 2.16315 1.07026 0 1.60539-.69384 1.60539-2.16315zM10.085 9.71379V0h2.5933v9.34646c0 .40814.1646.44895.494.44895.1234 0 .3293 0 .5351-.08162v1.99991c-.5351.2041-1.0291.2857-1.3996.2857-1.2349 0-2.2228-.6939-2.2228-2.28561zM22.187 6.53028v5.30582h-2.3464l-.1646-.8163c-.6998.898-1.6054 1.0204-2.2229 1.0204-1.8935 0-3.2519-1.1836-3.2519-2.89781 0-.97955.4528-1.67339 1.1526-2.04072.5351-.2857 1.1937-.40814 1.9347-.40814h2.3463v-.16325c0-.61222-.494-1.02036-1.4407-1.02036-.6175 0-1.2761.20407-2.0171.89791l-1.8523-1.55094c.9879-1.10198 2.5521-1.59175 3.9929-1.59175 2.4286 0 3.8694 1.26524 3.8694 3.26514zm-2.5934 1.99989h-1.9347c-.2881 0-.4939.04082-.6586.16326-.1646.12244-.247.2857-.247.48977 0 .40814.3705.77547 1.1115.77547.9056 0 1.6877-.61221 1.7288-1.4285zM25.48 11.5505l-3.1284-8.08126h2.8403l1.6877 5.14259 1.8935-5.14259h2.8404L26.7149 15.3054h-2.7991l1.5642-3.7549zM9.17956 30.8964l-1.44074-1.6326c-1.0291.8163-2.22285 1.1837-3.58126 1.1837C1.85238 30.4066 0 29.3863 0 27.3456c0-1.7142 1.31725-2.7754 2.63449-3.6325-.49396-.4898-1.31724-1.3877-1.31724-2.6121 0-1.8366 1.81121-2.8978 3.45777-2.8978 1.72888 0 3.29311 1.1836 3.29311 2.8978 0 1.2652-.82327 2.1632-1.81121 2.9386l1.39958 1.551c.24698-.5306.49396-1.1837.69978-1.9183l2.30522.4081c-.3705 1.3469-.82332 2.4489-1.35845 3.306l1.68775 1.8774-1.81124 1.6326zm-2.9638-3.3468l-1.89354-2.1223c-.98794.653-1.81122 1.2652-1.81122 1.9999 0 .653.61746.8571 1.44074.8571.86444-.0408 1.60539-.2857 2.26402-.7347zM4.5692 22.5703c.65862-.4489 1.11142-.8979 1.11142-1.4693 0-.449-.24698-.8571-.86444-.8571-.53513 0-.98793.2857-.98793.8163 0 .4898.41164 1.102.74095 1.5101zM8.76833 38.7736v5.5507H6.175v-4.612c0-.653 0-1.7142-1.31725-1.7142-1.60539 0-1.60539 1.5101-1.60539 2.408v3.9182H.700195v-8.3669H3.29352v.7754c.61746-.7754 1.52307-.9795 2.38751-.9795 1.93471.0408 3.0873 1.1836 3.0873 3.0203zM9.75586 40.1613c0-2.2856 1.60544-4.3672 4.36334-4.3672 2.7169 0 4.3223 2.0407 4.3223 4.3672 0 2.2856-1.6054 4.3671-4.3223 4.3671-2.7579 0-4.36334-2.0815-4.36334-4.3671zm6.09224 0c0-1.0612-.3293-2.1224-1.7289-2.1224-1.3995 0-1.77 1.0612-1.77 2.1224 0 1.0203.3293 2.1631 1.77 2.1631 1.3584 0 1.7289-1.102 1.7289-2.1631zM27.8267 40.202c0 2.857-1.6054 4.3264-3.4578 4.3264-.8233 0-1.6877-.3266-2.2228-.8571v4.1222h-2.5934V35.9574h2.6345v.6122c.5763-.6122 1.4819-.8163 2.2229-.8163 2.2228.0408 3.4166 1.9591 3.4166 4.4487zm-2.5933-.0408c0-1.4285-.5352-2.1223-1.5643-2.1223-1.3584 0-1.77.9387-1.77 2.1223 0 1.1836.4528 2.1632 1.7289 2.1632 1.0702 0 1.6054-.7347 1.6054-2.1632zM36.6768 41.0592h-5.5571c.0823.653.6175 1.1836 1.7289 1.1836.6174 0 1.3172-.2449 1.77-.8163l1.7701 1.5509c-.9056 1.0204-2.0994 1.551-3.5813 1.551-3.1284 0-4.281-2.1632-4.281-4.3263 0-2.0816 1.1526-4.408 4.1575-4.408 2.6345 0 4.0341 1.8775 4.0341 4.4488 0 .2449-.0412.4489-.0412.8163zm-2.4286-1.8775c-.0412-.7755-.741-1.2652-1.6054-1.2652-1.0703 0-1.4819.6938-1.5643 1.2652h3.1697zM7.98581 55.997v5.3059H5.63946l-.16466-.8163c-.69978.8979-1.60539 1.0203-2.22285 1.0203C1.35841 61.5069 0 60.3233 0 58.6091c0-.9795.452803-1.6733 1.15259-2.0407.53513-.2857 1.19375-.4081 1.93471-.4081h2.34634v-.1225c0-.6122-.49397-1.0203-1.44074-1.0203-.61746 0-1.27608.2041-2.01703.8979L.123492 54.3645c1.070258-1.102 2.634488-1.5918 4.075228-1.5918 2.34635 0 3.78709 1.2244 3.78709 3.2243zm-2.59333 1.9999H3.45777c-.28815 0-.49397.0408-.65862.1633-.16466.1224-.24699.2857-.24699.4898 0 .4081.37048.7754 1.11143.7754.90561 0 1.68772-.5714 1.72889-1.4285zM9.5498 59.1807v-9.7138h2.5933v9.3465c0 .4081.1647.4489.494.4489.1235 0 .3293 0 .5351-.0816v1.9999c-.5351.2041-1.0291.2857-1.3995.2857-1.2761.0408-2.2229-.653-2.2229-2.2856zM14.2842 59.1807v-9.7138h2.5933v9.3465c0 .4081.1647.4489.494.4489.1235 0 .3293 0 .5351-.0816v1.9999c-.5351.2041-1.0291.2857-1.3996.2857-1.2349.0408-2.2228-.653-2.2228-2.2856zM19.0996 49.4669h2.6345v2.3264h-2.6345v-2.3264zm.0412 3.4692h2.5933v8.3669h-2.5933v-8.3669zM30.9145 55.997v5.3059h-2.3463l-.1647-.8163c-.6998.8979-1.6054 1.0203-2.2228 1.0203-1.8936 0-3.252-1.1836-3.252-2.8978 0-.9795.4528-1.6733 1.1526-2.0407.5351-.2857 1.1938-.4081 1.9347-.4081h2.3464v-.1225c0-.6122-.494-1.0203-1.4408-1.0203-.6174 0-1.2761.2041-2.017.8979l-1.8524-1.5509c1.0703-1.102 2.6345-1.5918 4.0752-1.5918 2.3464 0 3.7871 1.2244 3.7871 3.2243zm-2.5933 1.9999h-1.9347c-.2882 0-.494.0408-.6586.1633-.1647.1224-.247.2857-.247.4898 0 .4081.3704.7754 1.1114.7754.9056 0 1.6877-.5714 1.7289-1.4285zM40.6698 55.7523v5.5507h-2.5933v-4.612c0-.653 0-1.7142-1.3172-1.7142-1.6054 0-1.6054 1.5102-1.6054 2.4081v3.9181h-2.5934v-8.3669h2.5934v.7755c.6174-.7755 1.523-.9795 2.3875-.9795 1.9759.0408 3.1284 1.1836 3.1284 3.0202zM41.6582 57.14c0-2.204 1.3584-4.4079 4.2399-4.4079 1.77 0 3.1284.8162 3.7459 2.5304l-2.4287.9796c-.1235-.7755-.6586-1.3061-1.3172-1.3061-1.1938 0-1.6054 1.102-1.6054 2.1632 0 1.0611.3705 2.1223 1.5642 2.1223.6586 0 1.2349-.4897 1.3584-1.2244l2.3464.8979c-.5763 1.5918-1.8936 2.5713-3.6636 2.5713-2.9227.0408-4.2399-2.1632-4.2399-4.3263zM57.9591 57.9971h-5.5572c.0824.653.6175 1.1836 1.7289 1.1836.6175 0 1.3173-.2449 1.7701-.8163l1.77 1.551c-.9056 1.0203-2.0994 1.5509-3.5813 1.5509-3.1284 0-4.281-2.1631-4.281-4.3263 0-2.0815 1.1526-4.4079 4.1576-4.4079 2.6344 0 4.034 1.8774 4.034 4.4487 0 .2449 0 .4898-.0411.8163zm-2.4287-1.8775c-.0412-.7754-.741-1.2652-1.6054-1.2652-1.0703 0-1.4819.6938-1.5642 1.2652h3.1696z" />
</svg>
<span class="h-visually-hidden">
</span>
</a>
</div>
</div>
<div class="grid__col grid__col--md-11 header__main-col">
<div class="header__container">
<div class="header__container-inner h-container">
<div class="header__content-wrapper">
<nav class="navigation header__navigation">
<ul class="navigation__list navigation__list--parents">
<li class="navigation__item ">
<svg class="icon navigation__arrow-icon">
<use xlink:href="../../inc/svg/global.bc9cdd731ad718497c5d8f03d08908d4.svg#arrow-right-long-54"></use>
</svg>
<a href="#" class="navigation__link">
Home
</a>
<span class="navigation__description">Home is the place to be #staythefuckhome</span>
</li>
<li class="navigation__item has-children is-current ">
<svg class="icon navigation__arrow-icon">
<use xlink:href="../../inc/svg/global.bc9cdd731ad718497c5d8f03d08908d4.svg#arrow-right-long-54"></use>
</svg>
<a href="#" class="navigation__link">
Services
<svg class="icon navigation__chevron">
<use xlink:href="../../inc/svg/global.bc9cdd731ad718497c5d8f03d08908d4.svg#chevron-bottom-24"></use>
</svg>
</a>
<span class="navigation__description">Everything digital under one roof.</span>
<ul class="navigation__list navigation__list--children">
<li class="navigation__item ">
<a href="#" class="navigation__link">
Business transformation
</a>
<svg class="icon navigation__arrow-icon">
<use xlink:href="../../inc/svg/global.bc9cdd731ad718497c5d8f03d08908d4.svg#tiny-arrow-right-long-24"></use>
</svg>
</li>
<li class="navigation__item ">
<a href="#" class="navigation__link">
Design & Innovation
</a>
<svg class="icon navigation__arrow-icon">
<use xlink:href="../../inc/svg/global.bc9cdd731ad718497c5d8f03d08908d4.svg#tiny-arrow-right-long-24"></use>
</svg>
</li>
<li class="navigation__item ">
<a href="#" class="navigation__link">
Development
</a>
<svg class="icon navigation__arrow-icon">
<use xlink:href="../../inc/svg/global.bc9cdd731ad718497c5d8f03d08908d4.svg#tiny-arrow-right-long-24"></use>
</svg>
</li>
<li class="navigation__item ">
<a href="#" class="navigation__link">
Maintenance
</a>
<svg class="icon navigation__arrow-icon">
<use xlink:href="../../inc/svg/global.bc9cdd731ad718497c5d8f03d08908d4.svg#tiny-arrow-right-long-24"></use>
</svg>
</li>
</ul>
</li>
<li class="navigation__item has-children ">
<svg class="icon navigation__arrow-icon">
<use xlink:href="../../inc/svg/global.bc9cdd731ad718497c5d8f03d08908d4.svg#arrow-right-long-54"></use>
</svg>
<a href="#" class="navigation__link">
Work
<svg class="icon navigation__chevron">
<use xlink:href="../../inc/svg/global.bc9cdd731ad718497c5d8f03d08908d4.svg#chevron-bottom-24"></use>
</svg>
</a>
<span class="navigation__description">Home is the place to be #staythefuckhome</span>
<ul class="navigation__list navigation__list--children">
<li class="navigation__item ">
<a href="#" class="navigation__link">
Business transformation
</a>
<svg class="icon navigation__arrow-icon">
<use xlink:href="../../inc/svg/global.bc9cdd731ad718497c5d8f03d08908d4.svg#tiny-arrow-right-long-24"></use>
</svg>
</li>
<li class="navigation__item ">
<a href="#" class="navigation__link">
Design & Innovation
</a>
<svg class="icon navigation__arrow-icon">
<use xlink:href="../../inc/svg/global.bc9cdd731ad718497c5d8f03d08908d4.svg#tiny-arrow-right-long-24"></use>
</svg>
</li>
<li class="navigation__item ">
<a href="#" class="navigation__link">
Development
</a>
<svg class="icon navigation__arrow-icon">
<use xlink:href="../../inc/svg/global.bc9cdd731ad718497c5d8f03d08908d4.svg#tiny-arrow-right-long-24"></use>
</svg>
</li>
</ul>
</li>
<li class="navigation__item ">
<svg class="icon navigation__arrow-icon">
<use xlink:href="../../inc/svg/global.bc9cdd731ad718497c5d8f03d08908d4.svg#arrow-right-long-54"></use>
</svg>
<a href="#" class="navigation__link">
About
</a>
<span class="navigation__description">Home is the place to be #staythefuckhome</span>
</li>
<li class="navigation__item ">
<svg class="icon navigation__arrow-icon">
<use xlink:href="../../inc/svg/global.bc9cdd731ad718497c5d8f03d08908d4.svg#arrow-right-long-54"></use>
</svg>
<a href="#" class="navigation__link">
Contact
</a>
<span class="navigation__description">Got a project you dream of realizing? Get in touch!</span>
</li>
</ul>
</nav>
<div class="header__contact">
<div class="header__contact-item">
<div class="header__contact-label text-small">Email</div>
<div class="header__contact-data">
<a href="mailto:contact@something.com" class="link header__link">contact@something.com</a>
</div>
</div>
<div class="header__contact-item">
<div class="header__contact-label text-small">Connect</div>
<div class="header__contact-data">
<a href="tel:56565656" class="link header__link">56565656</a>
</div>
</div>
</div>
</div>
</div>
<figure class="image header__background-image">
<img loading="lazy" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20800%20480%22%3E%3C%2Fsvg%3E" data-srcset="//via.placeholder.com/360x216 360w, //via.placeholder.com/720x432 720w, //via.placeholder.com/1000x600 1000w, //via.placeholder.com/2000x1200 2000w, //via.placeholder.com/800x480 800w, //via.placeholder.com/1600x960 1600w, //via.placeholder.com/1200x720 1200w, //via.placeholder.com/2400x1440 2400w" data-sizes="auto" alt="" class="image__img lazyload">
</figure>
</div>
<div class="header__burger-wrapper">
<button type="button" class="header__burger js-toggle-menu" aria-label="Toggle mobile menu" aria-expanded="false">
<span class="header__burger-box">
<span class="header__burger-inner">
<span class="header__burger-top"></span>
<span class="header__burger-middle"></span>
<span class="header__burger-bottom"></span>
</span>
</span>
</button>
<button type="button" class="header__burger header__burger--negative js-toggle-menu" aria-label="Toggle mobile menu">
<span class="header__burger-box">
<span class="header__burger-inner">
<span class="header__burger-top"></span>
<span class="header__burger-middle"></span>
<span class="header__burger-bottom"></span>
</span>
</span>
</button>
</div>
<div class="header__circle"></div>
</div>
</div>
</div>
</div>
<div style="height: 200vh"></div>
{% include '@header' %}
<div style="height: 200vh"></div>
{
"language": "en-US",
"data": {
"logo": {
"link": "https://play.ee"
},
"navigation": {
"items": [
{
"link": "#",
"title": "Home",
"description": "Home is the place to be #staythefuckhome"
},
{
"link": "#",
"title": "Services",
"description": "Everything digital under one roof.",
"current": "true",
"children": [
{
"link": "#",
"title": "Business transformation"
},
{
"link": "#",
"title": "Design & Innovation"
},
{
"link": "#",
"title": "Development"
},
{
"link": "#",
"title": "Maintenance"
}
]
},
{
"link": "#",
"title": "Work",
"description": "Home is the place to be #staythefuckhome",
"children": [
{
"link": "#",
"title": "Business transformation"
},
{
"link": "#",
"title": "Design & Innovation"
},
{
"link": "#",
"title": "Development"
}
]
},
{
"link": "#",
"title": "About",
"description": "Home is the place to be #staythefuckhome"
},
{
"link": "#",
"title": "Contact",
"description": "Got a project you dream of realizing? Get in touch!"
}
]
},
"toggleLabel": "Toggle mobile menu",
"bgImage": true,
"contacts": [
{
"label": "Email",
"data": "contact@something.com",
"link": "mailto:contact@something.com"
},
{
"label": "Connect",
"data": "56565656",
"link": "tel:56565656"
}
]
}
}
.header {
position: fixed;
top: 0;
left: 0;
width: 100%;
padding: 20px 0 0;
z-index: map-get($zindex, 'header');
@include bp(md-min) {
padding: 32px 0 0;
}
&:before {
@include bp(md-min) {
content: '';
position: absolute;
top: 0;
bottom: 100%;
left: 0;
width: 100%;
z-index: -1;
background-color: $color-brand-01;
transition-property: bottom;
transition-duration: $transition-duration;
transition-timing-function: $transition-easing-in;
}
body.is-hovering-nav & {
@include bp(md-min) {
bottom: 0;
transition-timing-function: $transition-easing-out;
}
}
}
&.is-drawer {
@include bp(md-min) {
pointer-events: none;
}
body.is-header-open & {
@include bp(md-min) {
pointer-events: all;
}
}
}
}
.header--no-navigation {
.navigation {
display: none;
}
.header__burger {
display: none;
}
}
.header__logo-col {
position: relative;
z-index: 2;
opacity: .01;
transform: translateY(calc(-100% + 35px)); /* stylelint-disable-line plugin/no-unsupported-browser-features */
transition-property: opacity, transform;
transition-duration: $transition-duration;
transition-timing-function: $transition-easing-in;
overflow: hidden;
@include bp(md-min) {
padding-bottom: 24px;
}
body.core-has-loaded &,
.header.is-ready & {
opacity: 1;
transform: translateY(0);
transition-timing-function: $transition-easing-out;
}
}
.header__logo {
color: $color-text-03;
body.is-header-open & {
color: $color-text-03;
}
.header.is-drawer & {
@include bp(md-min) {
pointer-events: all;
}
}
body.core-has-loaded:not(.global-has-loaded) & {
.logo__svg {
fill: $color-text-03;
}
}
}
.header__logo--negative {
position: absolute;
top: 0;
left: 0;
width: 100%;
z-index: 1;
color: $color-brand-01;
}
.header__main-col {
@include bp(md-min) {
position: relative;
}
}
.header__container {
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: $color-brand-01;
height: var(--app-height);
z-index: 1;
opacity: 1;
visibility: visible;
transform: translateY(-100%);
transition-property: transform, opacity, visibility;
transition-duration: $transition-duration;
transition-timing-function: $transition-easing-in;
transition-delay: $transition-duration;
@include bp(md-min) {
position: relative;
top: auto;
left: auto;
width: auto;
height: auto;
background-color: transparent;
z-index: map-get($zindex, 'default');
opacity: 1;
visibility: visible;
transform: translateY(0);
transition-delay: 0ms;
}
.header.is-drawer & {
@include bp(md-min) {
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: transparent;
height: var(--app-height);
z-index: 1;
opacity: .01;
visibility: hidden;
}
body.is-header-open & {
transition-delay: 0ms;
transform: translateY(0);
opacity: 1;
visibility: visible;
transition-timing-function: $transition-easing-out;
}
}
body.is-navigation-hidden & {
@include bp(md-min) {
opacity: 0;
visibility: hidden;
}
}
body.is-header-open & {
transform: translateY(0);
transition-timing-function: $transition-easing-in;
}
}
.header__container-inner {
height: 100%;
overflow: auto;
@include bp(md-min) {
overflow: visible;
}
.header:not(.is-drawer) & {
@include bp(md-min) {
padding: 0;
}
}
.header.is-drawer & {
@include bp(md-min) {
overflow-y: scroll;
margin-right: -20px;
margin-left: -20px;
width: auto;
}
@include bp(xl-min) {
overflow: hidden;
margin-right: auto;
margin-left: auto;
}
}
}
.header__content-wrapper {
padding-top: 104px;
padding-bottom: 32px;
@include bp(sm-min) {
padding-top: 120px;
padding-bottom: 72px;
position: relative;
}
@media only screen and (min-width: #{$bp-sm-min}) and (orientation: portrait) {
height: 100%;
}
@include bp(md-min) {
height: 100%;
}
.header:not(.is-drawer) & {
@include bp(md-min) {
padding: 8px 0 0;
margin-left: -15px;
margin-right: -15px;
}
}
.header.is-drawer & {
@include bp(md-min) {
padding-top: 104px;
padding-bottom: 32px;
}
@include bp(xl-min) {
overflow-y: scroll;
margin-right: calc((1920px / 14 + 20px) * -1); /* stylelint-disable-line plugin/no-unsupported-browser-features */
padding-right: calc(1920px / 14 + 6px); /* stylelint-disable-line plugin/no-unsupported-browser-features */
}
@include bp(xxl-min) {
padding-top: 164px;
padding-bottom: 72px;
}
}
}
.header__navigation {
transition-property: opacity;
transition-duration: $transition-duration;
transition-timing-function: $transition-easing-out;
opacity: .01;
@include bp(md-min) {
opacity: 1;
}
.header.is-drawer & {
@include bp(md-min) {
padding-right: 20px;
padding-bottom: 64px;
}
@include bp(xl-min) {
padding-right: 0;
}
}
body.is-header-open & {
opacity: 1;
transition-timing-function: $transition-easing-in;
}
}
.header__contact {
color: $color-text-03;
transition-property: opacity, visibility;
transition-duration: $transition-duration;
transition-timing-function: $transition-easing-in;
transition-delay: 0ms;
opacity: .01;
visibility: hidden;
margin-top: 46px;
@media only screen and (min-width: #{$bp-sm-min}) and (orientation: portrait) {
position: fixed;
top: 100%;
transform: translateY(-100%);
z-index: 2;
margin-top: 0;
padding-bottom: 120px;
}
@include bp(md-min) {
margin-left: 20px;
position: fixed;
top: 100%;
transform: translateY(-100%);
z-index: 2;
margin-top: 0;
padding-bottom: 120px;
}
@include bp(xl-min) {
margin-left: 0;
}
body.is-header-open & {
opacity: 1;
visibility: visible;
transition-delay: $transition-duration;
transition-timing-function: $transition-easing-out;
}
}
.header__contact-item {
&:not(:first-child) {
margin-top: 35px;
}
}
.header__link {
color: $color-text-03;
font-weight: $font-weight-regular;
}
.header__burger-wrapper {
position: absolute;
top: 20px;
right: 15px;
z-index: 3;
transition-property: opacity, transform;
transition-duration: $transition-duration;
transition-timing-function: $transition-easing-in;
transform: translateY(-45px);
opacity: .01;
width: 36px;
height: 36px;
@include bp(sm-min) {
right: calc(100vw / 14 - 5px); /* stylelint-disable-line plugin/no-unsupported-browser-features */
}
@include bp(md-min) {
top: 3px;
right: -5px;
transform: translateY(-64px);
}
body.core-has-loaded &,
.header.is-ready & {
@media only screen and (max-width: $bp-md-min - 1) {
transform: translateY(0);
opacity: 1;
}
}
body.is-navigation-hidden & {
transform: translateY(0);
opacity: 1;
transition-timing-function: $transition-easing-out;
}
.header.is-drawer & {
@include bp(md-min) {
pointer-events: all;
}
}
&:hover {
body.is-header-open & {
transform: rotate(90deg);
transition-timing-function: $transition-easing-out;
}
}
}
.header__burger {
border-radius: 0;
border: none;
-webkit-appearance: none;
margin: 0;
padding: 0;
display: inline-flex;
background: transparent;
flex-flow: row wrap;
justify-content: center;
align-items: center;
align-content: center;
cursor: pointer;
position: absolute;
top: 0;
left: 0;
}
.header__burger--negative {
z-index: 1;
color: $color-brand-01;
opacity: 1;
transition: opacity $transition-duration;
transition-delay: $transition-duration * 2;
body:not(.global-has-loaded) &,
body.is-header-open & {
opacity: .01;
transition-delay: 0ms;
}
}
.header__burger-box {
display: flex;
align-items: center;
justify-content: center;
position: relative;
width: 36px;
height: 36px;
}
.header__burger-inner {
position: relative;
width: 25px;
height: 2px;
transition: transform $transition-duration * 1.75 $transition-easing-in;
> * {
display: block;
position: absolute;
width: 25px;
height: 2px;
transition: transform $transition-duration;
background-color: $color-text-03;
will-change: transform; /* stylelint-disable-line plugin/no-unsupported-browser-features */
.header__burger--negative & {
background-color: $color-brand-01;
}
body.is-header-open & {
background-color: $color-text-03;
}
}
body.is-header-open & {
transform: rotate(-90deg);
transition: transform $transition-duration * 2.25 $transition-easing-out;
}
}
.header__burger-top {
transform: rotate(0turn) translateY(-250%);
.header__burger-wrapper:hover & {
body:not(.is-header-open) & {
transform: rotate(0turn) translateY(-315%);
}
}
body.is-header-open & {
transform: rotate(.125turn + .5turn);
}
}
.header__burger-middle {
transform: rotate(0turn);
body.is-header-open & {
transform: rotate(.125turn + .5turn);
}
}
.header__burger-bottom {
transform: rotate(0turn) translateY(5px);
.header__burger-wrapper:hover & {
body:not(.is-header-open) & {
transform: rotate(0turn) translateY(6px);
}
}
body.is-header-open & {
transform: rotate(.375turn + .5turn);
}
}
.header__circle {
display: none;
background-color: $color-brand-01;
transform: translateX(calc(50% - 18px)) translateY(calc(-50% + 18px)) scale(0); /* stylelint-disable-line plugin/no-unsupported-browser-features */
border-radius: $border-radius-round;
transition-property: transform;
transition-duration: $transition-duration;
transition-timing-function: $transition-easing-in;
transition-delay: $transition-duration;
position: absolute;
top: 0;
right: 0;
width: 215vw;
height: 215vw;
@include bp(md-min) {
display: block;
}
body.is-header-open & {
transition-timing-function: $transition-easing-out;
transition-delay: 0ms;
transform: translateX(calc(50% - 18px)) translateY(calc(-50% + 18px)) scale(1); /* stylelint-disable-line plugin/no-unsupported-browser-features */
}
}
.header__background-image {
position: fixed;
z-index: -1;
top: 0;
left: 0;
bottom: 0;
width: 100%;
pointer-events: none;
opacity: .01;
transition-property: opacity;
transition-duration: $transition-duration;
transition-timing-function: $transition-easing-out;
transition-delay: 0ms;
@include bp(md-min) {
display: none;
}
body.is-header-open & {
opacity: 1;
transition-timing-function: $transition-easing-in;
transition-delay: $transition-duration;
}
}
.image__img {
.header__background-image & {
object-fit: cover; /* stylelint-disable-line plugin/no-unsupported-browser-features */
width: 100%;
height: 100%;
}
}
.navigation__description {
.header--no-description & {
display: none;
}
}
import Component from '../component/component';
import Helpers from '../helpers/helpers';
import Navigation from '../navigation/navigation';
import '../logo/logo';
import './header.scss';
interface IHeaderSettings {
animationSpeed: number;
darkClass: string;
drawerClass: string;
navHiddenClass: string;
navTopClass: string;
openClass: string;
readyClass: string;
}
export default class Header extends Component {
static initSelector: string = '.header';
public container: JQuery;
public menuToggle: JQuery;
public body: JQuery;
public navigation: JQuery;
public navigationInstance: Navigation;
public isOpen: boolean;
public sections: JQuery;
public currentTheme: string;
public lastScrollTop: number;
public direction: string;
public activeSection: JQuery;
public logoNegative: JQuery;
public burgerNegative: JQuery;
settings: IHeaderSettings;
constructor(target: HTMLElement) {
super(target);
this.menuToggle = this.element.find('.js-toggle-menu');
this.body = $('body');
this.settings = {
animationSpeed: 250,
darkClass: 'is-header-dark',
drawerClass: 'is-drawer',
navHiddenClass: 'is-navigation-hidden',
navTopClass: 'navigation--idle',
openClass: 'is-header-open',
readyClass: 'is-ready',
};
this.navigation = this.element.find('.header__navigation');
this.navigationInstance = new Navigation(this.navigation[0]);
this.isOpen = false;
this.sections = $('[data-theme]');
this.currentTheme = 'default';
this.lastScrollTop = 0;
this.direction = 'none';
this.activeSection = $('.hero');
this.logoNegative = this.element.find('.header__logo--negative');
this.burgerNegative = this.element.find('.header__burger--negative');
this.init();
}
init(): void {
this.element.addClass(this.settings.readyClass);
this.menuToggle.on('click', this.toggleHandler.bind(this));
this.navigationInstance.addTriggerListeners();
this.setState();
if (this.sections.length) {
this.setSectionTheme();
}
$(window).on('scroll', this.scrollHandler.bind(this));
}
scrollHandler(): void {
this.setScrollDirection();
if ($(window).width() >= Helpers.bp.sm) {
this.setState();
}
if (this.sections.length) {
this.setSectionTheme();
}
}
toggleHandler(): void {
if (this.body.hasClass(this.settings.openClass)) {
this.close();
} else {
this.open();
}
}
setScrollDirection(): void {
const st: number = window.pageYOffset || document.documentElement.scrollTop;
if (st > this.lastScrollTop) {
this.direction = 'down';
} else {
this.direction = 'up';
}
this.lastScrollTop = st <= 0 ? 0 : st;
}
open(): void {
this.body.addClass(this.settings.openClass);
this.menuToggle.attr('aria-expanded', 'true');
this.isOpen = true;
Helpers.disableScroll();
this.navigation.removeClass(this.settings.readyClass);
setTimeout(() => {
this.navigation.addClass(this.settings.readyClass);
}, 150);
}
close(): void {
const activeNav: JQuery = this.navigationInstance.dropdownItems.filter('.' + this.navigationInstance.settings.activeClass);
this.body.removeClass(this.settings.openClass);
this.menuToggle.attr('aria-expanded', 'false');
this.isOpen = false;
this.navigationInstance.animateClose(activeNav);
Helpers.enableScroll();
}
setState(): void {
if ($(window).scrollTop() > 5) {
this.body.addClass(this.settings.navHiddenClass);
if (!this.element.hasClass(this.settings.drawerClass)) {
window.setTimeout(() => {
if ($(window).scrollTop() > 5) {
this.element.addClass(this.settings.drawerClass);
}
}, this.settings.animationSpeed);
}
if (this.navigation.hasClass(this.settings.navTopClass)) {
window.setTimeout(() => {
if ($(window).scrollTop() > 5) {
this.navigation.removeClass(this.settings.navTopClass);
this.navigationInstance.removeMouseListeners();
this.navigationInstance.addClickListeners();
this.navigationInstance.setIniHeights();
}
}, this.settings.animationSpeed);
}
if (this.navigationInstance.dropdownItems.filter('.' + this.navigationInstance.settings.activeClass).length) {
this.body.removeClass(this.navigationInstance.settings.navHoverClass);
this.navigationInstance.close();
}
} else {
if (!this.isOpen) {
this.element.removeClass(this.settings.drawerClass);
this.navigation.addClass(this.settings.navTopClass);
this.body.removeClass(this.settings.navHiddenClass);
this.navigationInstance.addTriggerListeners();
this.navigationInstance.setIniHeights();
}
}
}
setSectionTheme(): void {
const currentSection: JQuery = this.cycleSections();
if (currentSection !== undefined) {
this.activeSection = currentSection;
this.currentTheme = this.getSectionTheme(currentSection);
this.body.removeClass(this.settings.darkClass);
} else {
this.currentTheme = 'light';
this.body.addClass(this.settings.darkClass);
}
this.moveMask(this.logoNegative);
this.moveMask(this.burgerNegative);
}
moveMask(element: JQuery): void {
let topLeft: number;
let topRight: number;
let bottomLeft: number;
let bottomRight: number;
const viewTop: number = $(window).scrollTop();
const offsetTop: number = parseInt(this.element.css('padding-top'));
const elementHeight: number = element.outerHeight(true);
const elementBottom: number = viewTop + offsetTop + elementHeight;
const sectionTop: number = this.activeSection.offset().top;
const sectionBottom: number = this.activeSection.offset().top + this.activeSection.outerHeight(true);
if (this.currentTheme === 'dark') {
if (this.direction === 'up') {
if (sectionBottom < elementBottom) {
// Dark element turning white
const maskPercentage: number = this.roundResults((100 * (sectionBottom - viewTop - offsetTop) / (elementHeight)));
topLeft = maskPercentage;
topRight = maskPercentage;
bottomLeft = 100;
bottomRight = 100;
} else {
// White element turning dark
const maskPercentage: number = this.roundResults((100 * (sectionTop - viewTop - offsetTop) / (elementHeight)));
topLeft = 0;
topRight = 0;
bottomLeft = maskPercentage;
bottomRight = maskPercentage;
}
} else {
if (sectionBottom > elementBottom) {
// Dark element turning white
const maskPercentage: number = this.roundResults((100 * (sectionTop - viewTop - offsetTop) / (elementHeight)));
topLeft = 0;
topRight = 0;
bottomLeft = maskPercentage;
bottomRight = maskPercentage;
} else {
// White element turning dark
const maskPercentage: number = this.roundResults((100 * (sectionBottom - viewTop - offsetTop) / (elementHeight)));
topLeft = maskPercentage;
topRight = maskPercentage;
bottomLeft = 100;
bottomRight = 100;
}
}
const polygon: string = '0% ' + topLeft + '%, 100% ' + topRight + '%, 100% ' + bottomRight + '%, 0% ' + bottomLeft + '%';
element.css({ 'clip-path': 'polygon(' + polygon + ')' });
} else {
element.css({ 'clip-path': '' });
}
}
roundResults(percentage: number): number {
return Math.min(100, Math.max(0, percentage));
}
cycleSections(): JQuery {
let currentSection: JQuery;
this.sections.each((index: number, element: HTMLElement) => {
if (this.isSectionScreen($(element))) {
currentSection = $(element);
}
});
return currentSection;
}
getSectionTheme(section: JQuery): string {
return section.data('theme');
}
isSectionScreen(target: JQuery): boolean {
const win: JQuery<Window> = $(window);
const viewTop: number = win.scrollTop();
const top: number = target.offset().top + parseInt(target.css('margin-top'));
const compareTop: number = top;
const compareBottom: number = top + target.outerHeight(true);
const offsetTop: number = parseInt(this.element.css('padding-top'));
const logoHeight: number = offsetTop + $('.header__logo').outerHeight(true);
return (compareBottom >= (viewTop + offsetTop)) && (compareTop <= (viewTop + logoHeight));
}
}