Ümit Tunç
5715 lines
256 KiB
PHP
5715 lines
256 KiB
PHP
@extends('layouts.gsap', ['header' => 'partials.header', 'footer' => 'partials.footer'])
|
||
|
||
@section('title', t('Neler Yapıyoruz?') ?: 'Neler Yapıyoruz?')
|
||
|
||
@push('styles')
|
||
|
||
@endpush
|
||
<link href="https://cdn.prod.website-files.com/67fea42b19018db93e3fe132/css/gsap-webflow-offbrand.webflow.shared.1d2cc8aa4.min.css" rel="stylesheet" type="text/css"/><script type="text/javascript">!function(o,c){var n=c.documentElement,t=" w-mod-";n.className+=t+"js",("ontouchstart"in o||o.DocumentTouch&&c instanceof DocumentTouch)&&(n.className+=t+"touch")}(window,document);</script><link href="https://cdn.prod.website-files.com/67fea42b19018db93e3fe132/681222b3ec7ebf1b78b5aac3_favicon.jpg" rel="shortcut icon" type="image/x-icon"/><link href="https://cdn.prod.website-files.com/67fea42b19018db93e3fe132/68122359a3aa462b4e80111c_webclip.jpg" rel="apple-touch-icon"/><script>
|
||
history.scrollRestoration = "manual";
|
||
</script>
|
||
|
||
<link rel="stylesheet" href="https://unpkg.com/lenis@1.3.1/dist/lenis.css">
|
||
|
||
<style>
|
||
html {
|
||
-webkit-text-size-adjust: 100%;
|
||
-ms-text-size-adjust: 100%;
|
||
font-family: sans-serif
|
||
}
|
||
|
||
body {
|
||
margin: 0
|
||
}
|
||
|
||
article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary {
|
||
display: block
|
||
}
|
||
|
||
audio,canvas,progress,video {
|
||
vertical-align: baseline;
|
||
display: inline-block
|
||
}
|
||
|
||
audio:not([controls]) {
|
||
height: 0;
|
||
display: none
|
||
}
|
||
|
||
[hidden],template {
|
||
display: none
|
||
}
|
||
|
||
a {
|
||
background-color: #0000
|
||
}
|
||
|
||
a:active,a:hover {
|
||
outline: 0
|
||
}
|
||
|
||
abbr[title] {
|
||
border-bottom: 1px dotted
|
||
}
|
||
|
||
b,strong {
|
||
font-weight: 700
|
||
}
|
||
|
||
dfn {
|
||
font-style: italic
|
||
}
|
||
|
||
h1 {
|
||
margin: .67em 0;
|
||
font-size: 2em
|
||
}
|
||
|
||
mark {
|
||
color: #000;
|
||
background: #ff0
|
||
}
|
||
|
||
small {
|
||
font-size: 80%
|
||
}
|
||
|
||
sub,sup {
|
||
vertical-align: baseline;
|
||
font-size: 75%;
|
||
line-height: 0;
|
||
position: relative
|
||
}
|
||
|
||
sup {
|
||
top: -.5em
|
||
}
|
||
|
||
sub {
|
||
bottom: -.25em
|
||
}
|
||
|
||
img {
|
||
border: 0
|
||
}
|
||
|
||
svg:not(:root) {
|
||
overflow: hidden
|
||
}
|
||
|
||
hr {
|
||
box-sizing: content-box;
|
||
height: 0
|
||
}
|
||
|
||
pre {
|
||
overflow: auto
|
||
}
|
||
|
||
code,kbd,pre,samp {
|
||
font-family: monospace;
|
||
font-size: 1em
|
||
}
|
||
|
||
button,input,optgroup,select,textarea {
|
||
color: inherit;
|
||
font: inherit;
|
||
margin: 0
|
||
}
|
||
|
||
button {
|
||
overflow: visible
|
||
}
|
||
|
||
button,select {
|
||
text-transform: none
|
||
}
|
||
|
||
button,html input[type=button],input[type=reset] {
|
||
-webkit-appearance: button;
|
||
cursor: pointer
|
||
}
|
||
|
||
button[disabled],html input[disabled] {
|
||
cursor: default
|
||
}
|
||
|
||
button::-moz-focus-inner,input::-moz-focus-inner {
|
||
border: 0;
|
||
padding: 0
|
||
}
|
||
|
||
input {
|
||
line-height: normal
|
||
}
|
||
|
||
input[type=checkbox],input[type=radio] {
|
||
box-sizing: border-box;
|
||
padding: 0
|
||
}
|
||
|
||
input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button {
|
||
height: auto
|
||
}
|
||
|
||
input[type=search] {
|
||
-webkit-appearance: none
|
||
}
|
||
|
||
input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration {
|
||
-webkit-appearance: none
|
||
}
|
||
|
||
legend {
|
||
border: 0;
|
||
padding: 0
|
||
}
|
||
|
||
textarea {
|
||
overflow: auto
|
||
}
|
||
|
||
optgroup {
|
||
font-weight: 700
|
||
}
|
||
|
||
table {
|
||
border-collapse: collapse;
|
||
border-spacing: 0
|
||
}
|
||
|
||
td,th {
|
||
padding: 0
|
||
}
|
||
|
||
@font-face {
|
||
font-family: webflow-icons;
|
||
src: url(data:application/x-font-ttf;charset=utf-8;base64,AAEAAAALAIAAAwAwT1MvMg8SBiUAAAC8AAAAYGNtYXDpP+a4AAABHAAAAFxnYXNwAAAAEAAAAXgAAAAIZ2x5ZmhS2XEAAAGAAAADHGhlYWQTFw3HAAAEnAAAADZoaGVhCXYFgQAABNQAAAAkaG10eCe4A1oAAAT4AAAAMGxvY2EDtALGAAAFKAAAABptYXhwABAAPgAABUQAAAAgbmFtZSoCsMsAAAVkAAABznBvc3QAAwAAAAAHNAAAACAAAwP4AZAABQAAApkCzAAAAI8CmQLMAAAB6wAzAQkAAAAAAAAAAAAAAAAAAAABEAAAAAAAAAAAAAAAAAAAAABAAADpAwPA/8AAQAPAAEAAAAABAAAAAAAAAAAAAAAgAAAAAAADAAAAAwAAABwAAQADAAAAHAADAAEAAAAcAAQAQAAAAAwACAACAAQAAQAg5gPpA//9//8AAAAAACDmAOkA//3//wAB/+MaBBcIAAMAAQAAAAAAAAAAAAAAAAABAAH//wAPAAEAAAAAAAAAAAACAAA3OQEAAAAAAQAAAAAAAAAAAAIAADc5AQAAAAABAAAAAAAAAAAAAgAANzkBAAAAAAEBIAAAAyADgAAFAAAJAQcJARcDIP5AQAGA/oBAAcABwED+gP6AQAABAOAAAALgA4AABQAAEwEXCQEH4AHAQP6AAYBAAcABwED+gP6AQAAAAwDAAOADQALAAA8AHwAvAAABISIGHQEUFjMhMjY9ATQmByEiBh0BFBYzITI2PQE0JgchIgYdARQWMyEyNj0BNCYDIP3ADRMTDQJADRMTDf3ADRMTDQJADRMTDf3ADRMTDQJADRMTAsATDSANExMNIA0TwBMNIA0TEw0gDRPAEw0gDRMTDSANEwAAAAABAJ0AtAOBApUABQAACQIHCQEDJP7r/upcAXEBcgKU/usBFVz+fAGEAAAAAAL//f+9BAMDwwAEAAkAABcBJwEXAwE3AQdpA5ps/GZsbAOabPxmbEMDmmz8ZmwDmvxmbAOabAAAAgAA/8AEAAPAAB0AOwAABSInLgEnJjU0Nz4BNzYzMTIXHgEXFhUUBw4BBwYjNTI3PgE3NjU0Jy4BJyYjMSIHDgEHBhUUFx4BFxYzAgBqXV6LKCgoKIteXWpqXV6LKCgoKIteXWpVSktvICEhIG9LSlVVSktvICEhIG9LSlVAKCiLXl1qal1eiygoKCiLXl1qal1eiygoZiEgb0tKVVVKS28gISEgb0tKVVVKS28gIQABAAABwAIAA8AAEgAAEzQ3PgE3NjMxFSIHDgEHBhUxIwAoKIteXWpVSktvICFmAcBqXV6LKChmISBvS0pVAAAAAgAA/8AFtgPAADIAOgAAARYXHgEXFhUUBw4BBwYHIxUhIicuAScmNTQ3PgE3NjMxOAExNDc+ATc2MzIXHgEXFhcVATMJATMVMzUEjD83NlAXFxYXTjU1PQL8kz01Nk8XFxcXTzY1PSIjd1BQWlJJSXInJw3+mdv+2/7c25MCUQYcHFg5OUA/ODlXHBwIAhcXTzY1PTw1Nk8XF1tQUHcjIhwcYUNDTgL+3QFt/pOTkwABAAAAAQAAmM7nP18PPPUACwQAAAAAANciZKUAAAAA1yJkpf/9/70FtgPDAAAACAACAAAAAAAAAAEAAAPA/8AAAAW3//3//QW2AAEAAAAAAAAAAAAAAAAAAAAMBAAAAAAAAAAAAAAAAgAAAAQAASAEAADgBAAAwAQAAJ0EAP/9BAAAAAQAAAAFtwAAAAAAAAAKABQAHgAyAEYAjACiAL4BFgE2AY4AAAABAAAADAA8AAMAAAAAAAIAAAAAAAAAAAAAAAAAAAAAAAAADgCuAAEAAAAAAAEADQAAAAEAAAAAAAIABwCWAAEAAAAAAAMADQBIAAEAAAAAAAQADQCrAAEAAAAAAAUACwAnAAEAAAAAAAYADQBvAAEAAAAAAAoAGgDSAAMAAQQJAAEAGgANAAMAAQQJAAIADgCdAAMAAQQJAAMAGgBVAAMAAQQJAAQAGgC4AAMAAQQJAAUAFgAyAAMAAQQJAAYAGgB8AAMAAQQJAAoANADsd2ViZmxvdy1pY29ucwB3AGUAYgBmAGwAbwB3AC0AaQBjAG8AbgBzVmVyc2lvbiAxLjAAVgBlAHIAcwBpAG8AbgAgADEALgAwd2ViZmxvdy1pY29ucwB3AGUAYgBmAGwAbwB3AC0AaQBjAG8AbgBzd2ViZmxvdy1pY29ucwB3AGUAYgBmAGwAbwB3AC0AaQBjAG8AbgBzUmVndWxhcgBSAGUAZwB1AGwAYQByd2ViZmxvdy1pY29ucwB3AGUAYgBmAGwAbwB3AC0AaQBjAG8AbgBzRm9udCBnZW5lcmF0ZWQgYnkgSWNvTW9vbi4ARgBvAG4AdAAgAGcAZQBuAGUAcgBhAHQAZQBkACAAYgB5ACAASQBjAG8ATQBvAG8AbgAuAAAAAwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA==)format("truetype");
|
||
font-weight: 400;
|
||
font-style: normal
|
||
}
|
||
|
||
[class^=w-icon-],[class*=\ w-icon-] {
|
||
speak: none;
|
||
font-variant: normal;
|
||
text-transform: none;
|
||
-webkit-font-smoothing: antialiased;
|
||
-moz-osx-font-smoothing: grayscale;
|
||
font-style: normal;
|
||
font-weight: 400;
|
||
line-height: 1;
|
||
font-family: webflow-icons!important
|
||
}
|
||
|
||
.w-icon-slider-right:before {
|
||
content: ""
|
||
}
|
||
|
||
.w-icon-slider-left:before {
|
||
content: ""
|
||
}
|
||
|
||
.w-icon-nav-menu:before {
|
||
content: ""
|
||
}
|
||
|
||
.w-icon-arrow-down:before,.w-icon-dropdown-toggle:before {
|
||
content: ""
|
||
}
|
||
|
||
.w-icon-file-upload-remove:before {
|
||
content: ""
|
||
}
|
||
|
||
.w-icon-file-upload-icon:before {
|
||
content: ""
|
||
}
|
||
|
||
* {
|
||
box-sizing: border-box
|
||
}
|
||
|
||
html {
|
||
height: 100%
|
||
}
|
||
|
||
body {
|
||
color: #333;
|
||
background-color: #fff;
|
||
min-height: 100%;
|
||
margin: 0;
|
||
font-family: Arial,sans-serif;
|
||
font-size: 14px;
|
||
line-height: 20px
|
||
}
|
||
|
||
img {
|
||
vertical-align: middle;
|
||
max-width: 100%;
|
||
display: inline-block
|
||
}
|
||
|
||
html.w-mod-touch * {
|
||
background-attachment: scroll!important
|
||
}
|
||
|
||
.w-block {
|
||
display: block
|
||
}
|
||
|
||
.w-inline-block {
|
||
max-width: 100%;
|
||
display: inline-block
|
||
}
|
||
|
||
.w-clearfix:before,.w-clearfix:after {
|
||
content: " ";
|
||
grid-area: 1/1/2/2;
|
||
display: table
|
||
}
|
||
|
||
.w-clearfix:after {
|
||
clear: both
|
||
}
|
||
|
||
.w-hidden {
|
||
display: none
|
||
}
|
||
|
||
.w-button {
|
||
color: #fff;
|
||
line-height: inherit;
|
||
cursor: pointer;
|
||
background-color: #3898ec;
|
||
border: 0;
|
||
border-radius: 0;
|
||
padding: 9px 15px;
|
||
text-decoration: none;
|
||
display: inline-block
|
||
}
|
||
|
||
input.w-button {
|
||
-webkit-appearance: button
|
||
}
|
||
|
||
html[data-w-dynpage] [data-w-cloak] {
|
||
color: #0000!important
|
||
}
|
||
|
||
.w-code-block {
|
||
margin: unset
|
||
}
|
||
|
||
pre.w-code-block code {
|
||
all: inherit
|
||
}
|
||
|
||
.w-optimization {
|
||
display: contents
|
||
}
|
||
|
||
.w-webflow-badge,.w-webflow-badge>img {
|
||
box-sizing: unset;
|
||
width: unset;
|
||
height: unset;
|
||
max-height: unset;
|
||
max-width: unset;
|
||
min-height: unset;
|
||
min-width: unset;
|
||
margin: unset;
|
||
padding: unset;
|
||
float: unset;
|
||
clear: unset;
|
||
border: unset;
|
||
border-radius: unset;
|
||
background: unset;
|
||
background-image: unset;
|
||
background-position: unset;
|
||
background-size: unset;
|
||
background-repeat: unset;
|
||
background-origin: unset;
|
||
background-clip: unset;
|
||
background-attachment: unset;
|
||
background-color: unset;
|
||
box-shadow: unset;
|
||
transform: unset;
|
||
direction: unset;
|
||
font-family: unset;
|
||
font-weight: unset;
|
||
color: unset;
|
||
font-size: unset;
|
||
line-height: unset;
|
||
font-style: unset;
|
||
font-variant: unset;
|
||
text-align: unset;
|
||
letter-spacing: unset;
|
||
-webkit-text-decoration: unset;
|
||
text-decoration: unset;
|
||
text-indent: unset;
|
||
text-transform: unset;
|
||
list-style-type: unset;
|
||
text-shadow: unset;
|
||
vertical-align: unset;
|
||
cursor: unset;
|
||
white-space: unset;
|
||
word-break: unset;
|
||
word-spacing: unset;
|
||
word-wrap: unset;
|
||
transition: unset
|
||
}
|
||
|
||
.w-webflow-badge {
|
||
white-space: nowrap;
|
||
cursor: pointer;
|
||
box-shadow: 0 0 0 1px #0000001a,0 1px 3px #0000001a;
|
||
visibility: visible!important;
|
||
opacity: 1!important;
|
||
z-index: 2147483647!important;
|
||
color: #aaadb0!important;
|
||
overflow: unset!important;
|
||
background-color: #fff!important;
|
||
border-radius: 3px!important;
|
||
width: auto!important;
|
||
height: auto!important;
|
||
margin: 0!important;
|
||
padding: 6px!important;
|
||
font-size: 12px!important;
|
||
line-height: 14px!important;
|
||
text-decoration: none!important;
|
||
display: inline-block!important;
|
||
position: fixed!important;
|
||
inset: auto 12px 12px auto!important;
|
||
transform: none!important
|
||
}
|
||
|
||
.w-webflow-badge>img {
|
||
position: unset;
|
||
visibility: unset!important;
|
||
opacity: 1!important;
|
||
vertical-align: middle!important;
|
||
display: inline-block!important
|
||
}
|
||
|
||
h1,h2,h3,h4,h5,h6 {
|
||
margin-bottom: 10px;
|
||
font-weight: 700
|
||
}
|
||
|
||
h1 {
|
||
margin-top: 20px;
|
||
font-size: 38px;
|
||
line-height: 44px
|
||
}
|
||
|
||
h2 {
|
||
margin-top: 20px;
|
||
font-size: 32px;
|
||
line-height: 36px
|
||
}
|
||
|
||
h3 {
|
||
margin-top: 20px;
|
||
font-size: 24px;
|
||
line-height: 30px
|
||
}
|
||
|
||
h4 {
|
||
margin-top: 10px;
|
||
font-size: 18px;
|
||
line-height: 24px
|
||
}
|
||
|
||
h5 {
|
||
margin-top: 10px;
|
||
font-size: 14px;
|
||
line-height: 20px
|
||
}
|
||
|
||
h6 {
|
||
margin-top: 10px;
|
||
font-size: 12px;
|
||
line-height: 18px
|
||
}
|
||
|
||
p {
|
||
margin-top: 0;
|
||
margin-bottom: 10px
|
||
}
|
||
|
||
blockquote {
|
||
border-left: 5px solid #e2e2e2;
|
||
margin: 0 0 10px;
|
||
padding: 10px 20px;
|
||
font-size: 18px;
|
||
line-height: 22px
|
||
}
|
||
|
||
figure {
|
||
margin: 0 0 10px
|
||
}
|
||
|
||
figcaption {
|
||
text-align: center;
|
||
margin-top: 5px
|
||
}
|
||
|
||
ul,ol {
|
||
margin-top: 0;
|
||
margin-bottom: 10px;
|
||
padding-left: 40px
|
||
}
|
||
|
||
.w-list-unstyled {
|
||
padding-left: 0;
|
||
list-style: none
|
||
}
|
||
|
||
.w-embed:before,.w-embed:after {
|
||
content: " ";
|
||
grid-area: 1/1/2/2;
|
||
display: table
|
||
}
|
||
|
||
.w-embed:after {
|
||
clear: both
|
||
}
|
||
|
||
.w-video {
|
||
width: 100%;
|
||
padding: 0;
|
||
position: relative
|
||
}
|
||
|
||
.w-video iframe,.w-video object,.w-video embed {
|
||
border: none;
|
||
width: 100%;
|
||
height: 100%;
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0
|
||
}
|
||
|
||
fieldset {
|
||
border: 0;
|
||
margin: 0;
|
||
padding: 0
|
||
}
|
||
|
||
button,[type=button],[type=reset] {
|
||
cursor: pointer;
|
||
-webkit-appearance: button;
|
||
border: 0
|
||
}
|
||
|
||
.w-form {
|
||
margin: 0 0 15px
|
||
}
|
||
|
||
.w-form-done {
|
||
text-align: center;
|
||
background-color: #ddd;
|
||
padding: 20px;
|
||
display: none
|
||
}
|
||
|
||
.w-form-fail {
|
||
background-color: #ffdede;
|
||
margin-top: 10px;
|
||
padding: 10px;
|
||
display: none
|
||
}
|
||
|
||
label {
|
||
margin-bottom: 5px;
|
||
font-weight: 700;
|
||
display: block
|
||
}
|
||
|
||
.w-input,.w-select {
|
||
color: #333;
|
||
vertical-align: middle;
|
||
background-color: #fff;
|
||
border: 1px solid #ccc;
|
||
width: 100%;
|
||
height: 38px;
|
||
margin-bottom: 10px;
|
||
padding: 8px 12px;
|
||
font-size: 14px;
|
||
line-height: 1.42857;
|
||
display: block
|
||
}
|
||
|
||
.w-input::placeholder,.w-select::placeholder {
|
||
color: #999
|
||
}
|
||
|
||
.w-input:focus,.w-select:focus {
|
||
border-color: #3898ec;
|
||
outline: 0
|
||
}
|
||
|
||
.w-input[disabled],.w-select[disabled],.w-input[readonly],.w-select[readonly],fieldset[disabled] .w-input,fieldset[disabled] .w-select {
|
||
cursor: not-allowed
|
||
}
|
||
|
||
.w-input[disabled]:not(.w-input-disabled),.w-select[disabled]:not(.w-input-disabled),.w-input[readonly],.w-select[readonly],fieldset[disabled]:not(.w-input-disabled) .w-input,fieldset[disabled]:not(.w-input-disabled) .w-select {
|
||
background-color: #eee
|
||
}
|
||
|
||
textarea.w-input,textarea.w-select {
|
||
height: auto
|
||
}
|
||
|
||
.w-select {
|
||
background-color: #f3f3f3
|
||
}
|
||
|
||
.w-select[multiple] {
|
||
height: auto
|
||
}
|
||
|
||
.w-form-label {
|
||
cursor: pointer;
|
||
margin-bottom: 0;
|
||
font-weight: 400;
|
||
display: inline-block
|
||
}
|
||
|
||
.w-radio {
|
||
margin-bottom: 5px;
|
||
padding-left: 20px;
|
||
display: block
|
||
}
|
||
|
||
.w-radio:before,.w-radio:after {
|
||
content: " ";
|
||
grid-area: 1/1/2/2;
|
||
display: table
|
||
}
|
||
|
||
.w-radio:after {
|
||
clear: both
|
||
}
|
||
|
||
.w-radio-input {
|
||
float: left;
|
||
margin: 3px 0 0 -20px;
|
||
line-height: normal
|
||
}
|
||
|
||
.w-file-upload {
|
||
margin-bottom: 10px;
|
||
display: block
|
||
}
|
||
|
||
.w-file-upload-input {
|
||
opacity: 0;
|
||
z-index: -100;
|
||
width: .1px;
|
||
height: .1px;
|
||
position: absolute;
|
||
overflow: hidden
|
||
}
|
||
|
||
.w-file-upload-default,.w-file-upload-uploading,.w-file-upload-success {
|
||
color: #333;
|
||
display: inline-block
|
||
}
|
||
|
||
.w-file-upload-error {
|
||
margin-top: 10px;
|
||
display: block
|
||
}
|
||
|
||
.w-file-upload-default.w-hidden,.w-file-upload-uploading.w-hidden,.w-file-upload-error.w-hidden,.w-file-upload-success.w-hidden {
|
||
display: none
|
||
}
|
||
|
||
.w-file-upload-uploading-btn {
|
||
cursor: pointer;
|
||
background-color: #fafafa;
|
||
border: 1px solid #ccc;
|
||
margin: 0;
|
||
padding: 8px 12px;
|
||
font-size: 14px;
|
||
font-weight: 400;
|
||
display: flex
|
||
}
|
||
|
||
.w-file-upload-file {
|
||
background-color: #fafafa;
|
||
border: 1px solid #ccc;
|
||
flex-grow: 1;
|
||
justify-content: space-between;
|
||
margin: 0;
|
||
padding: 8px 9px 8px 11px;
|
||
display: flex
|
||
}
|
||
|
||
.w-file-upload-file-name {
|
||
font-size: 14px;
|
||
font-weight: 400;
|
||
display: block
|
||
}
|
||
|
||
.w-file-remove-link {
|
||
cursor: pointer;
|
||
width: auto;
|
||
height: auto;
|
||
margin-top: 3px;
|
||
margin-left: 10px;
|
||
padding: 3px;
|
||
display: block
|
||
}
|
||
|
||
.w-icon-file-upload-remove {
|
||
margin: auto;
|
||
font-size: 10px
|
||
}
|
||
|
||
.w-file-upload-error-msg {
|
||
color: #ea384c;
|
||
padding: 2px 0;
|
||
display: inline-block
|
||
}
|
||
|
||
.w-file-upload-info {
|
||
padding: 0 12px;
|
||
line-height: 38px;
|
||
display: inline-block
|
||
}
|
||
|
||
.w-file-upload-label {
|
||
cursor: pointer;
|
||
background-color: #fafafa;
|
||
border: 1px solid #ccc;
|
||
margin: 0;
|
||
padding: 8px 12px;
|
||
font-size: 14px;
|
||
font-weight: 400;
|
||
display: inline-block
|
||
}
|
||
|
||
.w-icon-file-upload-icon,.w-icon-file-upload-uploading {
|
||
width: 20px;
|
||
margin-right: 8px;
|
||
display: inline-block
|
||
}
|
||
|
||
.w-icon-file-upload-uploading {
|
||
height: 20px
|
||
}
|
||
|
||
.w-container {
|
||
max-width: 940px;
|
||
margin-left: auto;
|
||
margin-right: auto
|
||
}
|
||
|
||
.w-container:before,.w-container:after {
|
||
content: " ";
|
||
grid-area: 1/1/2/2;
|
||
display: table
|
||
}
|
||
|
||
.w-container:after {
|
||
clear: both
|
||
}
|
||
|
||
.w-container .w-row {
|
||
margin-left: -10px;
|
||
margin-right: -10px
|
||
}
|
||
|
||
.w-row:before,.w-row:after {
|
||
content: " ";
|
||
grid-area: 1/1/2/2;
|
||
display: table
|
||
}
|
||
|
||
.w-row:after {
|
||
clear: both
|
||
}
|
||
|
||
.w-row .w-row {
|
||
margin-left: 0;
|
||
margin-right: 0
|
||
}
|
||
|
||
.w-col {
|
||
float: left;
|
||
width: 100%;
|
||
min-height: 1px;
|
||
padding-left: 10px;
|
||
padding-right: 10px;
|
||
position: relative
|
||
}
|
||
|
||
.w-col .w-col {
|
||
padding-left: 0;
|
||
padding-right: 0
|
||
}
|
||
|
||
.w-col-1 {
|
||
width: 8.33333%
|
||
}
|
||
|
||
.w-col-2 {
|
||
width: 16.6667%
|
||
}
|
||
|
||
.w-col-3 {
|
||
width: 25%
|
||
}
|
||
|
||
.w-col-4 {
|
||
width: 33.3333%
|
||
}
|
||
|
||
.w-col-5 {
|
||
width: 41.6667%
|
||
}
|
||
|
||
.w-col-6 {
|
||
width: 50%
|
||
}
|
||
|
||
.w-col-7 {
|
||
width: 58.3333%
|
||
}
|
||
|
||
.w-col-8 {
|
||
width: 66.6667%
|
||
}
|
||
|
||
.w-col-9 {
|
||
width: 75%
|
||
}
|
||
|
||
.w-col-10 {
|
||
width: 83.3333%
|
||
}
|
||
|
||
.w-col-11 {
|
||
width: 91.6667%
|
||
}
|
||
|
||
.w-col-12 {
|
||
width: 100%
|
||
}
|
||
|
||
.w-hidden-main {
|
||
display: none!important
|
||
}
|
||
|
||
@media screen and (max-width: 991px) {
|
||
.w-container {
|
||
max-width:728px
|
||
}
|
||
|
||
.w-hidden-main {
|
||
display: inherit!important
|
||
}
|
||
|
||
.w-hidden-medium {
|
||
display: none!important
|
||
}
|
||
|
||
.w-col-medium-1 {
|
||
width: 8.33333%
|
||
}
|
||
|
||
.w-col-medium-2 {
|
||
width: 16.6667%
|
||
}
|
||
|
||
.w-col-medium-3 {
|
||
width: 25%
|
||
}
|
||
|
||
.w-col-medium-4 {
|
||
width: 33.3333%
|
||
}
|
||
|
||
.w-col-medium-5 {
|
||
width: 41.6667%
|
||
}
|
||
|
||
.w-col-medium-6 {
|
||
width: 50%
|
||
}
|
||
|
||
.w-col-medium-7 {
|
||
width: 58.3333%
|
||
}
|
||
|
||
.w-col-medium-8 {
|
||
width: 66.6667%
|
||
}
|
||
|
||
.w-col-medium-9 {
|
||
width: 75%
|
||
}
|
||
|
||
.w-col-medium-10 {
|
||
width: 83.3333%
|
||
}
|
||
|
||
.w-col-medium-11 {
|
||
width: 91.6667%
|
||
}
|
||
|
||
.w-col-medium-12 {
|
||
width: 100%
|
||
}
|
||
|
||
.w-col-stack {
|
||
width: 100%;
|
||
left: auto;
|
||
right: auto
|
||
}
|
||
}
|
||
|
||
@media screen and (max-width: 767px) {
|
||
.w-hidden-main,.w-hidden-medium {
|
||
display:inherit!important
|
||
}
|
||
|
||
.w-hidden-small {
|
||
display: none!important
|
||
}
|
||
|
||
.w-row,.w-container .w-row {
|
||
margin-left: 0;
|
||
margin-right: 0
|
||
}
|
||
|
||
.w-col {
|
||
width: 100%;
|
||
left: auto;
|
||
right: auto
|
||
}
|
||
|
||
.w-col-small-1 {
|
||
width: 8.33333%
|
||
}
|
||
|
||
.w-col-small-2 {
|
||
width: 16.6667%
|
||
}
|
||
|
||
.w-col-small-3 {
|
||
width: 25%
|
||
}
|
||
|
||
.w-col-small-4 {
|
||
width: 33.3333%
|
||
}
|
||
|
||
.w-col-small-5 {
|
||
width: 41.6667%
|
||
}
|
||
|
||
.w-col-small-6 {
|
||
width: 50%
|
||
}
|
||
|
||
.w-col-small-7 {
|
||
width: 58.3333%
|
||
}
|
||
|
||
.w-col-small-8 {
|
||
width: 66.6667%
|
||
}
|
||
|
||
.w-col-small-9 {
|
||
width: 75%
|
||
}
|
||
|
||
.w-col-small-10 {
|
||
width: 83.3333%
|
||
}
|
||
|
||
.w-col-small-11 {
|
||
width: 91.6667%
|
||
}
|
||
|
||
.w-col-small-12 {
|
||
width: 100%
|
||
}
|
||
}
|
||
|
||
@media screen and (max-width: 479px) {
|
||
.w-container {
|
||
max-width:none
|
||
}
|
||
|
||
.w-hidden-main,.w-hidden-medium,.w-hidden-small {
|
||
display: inherit!important
|
||
}
|
||
|
||
.w-hidden-tiny {
|
||
display: none!important
|
||
}
|
||
|
||
.w-col {
|
||
width: 100%
|
||
}
|
||
|
||
.w-col-tiny-1 {
|
||
width: 8.33333%
|
||
}
|
||
|
||
.w-col-tiny-2 {
|
||
width: 16.6667%
|
||
}
|
||
|
||
.w-col-tiny-3 {
|
||
width: 25%
|
||
}
|
||
|
||
.w-col-tiny-4 {
|
||
width: 33.3333%
|
||
}
|
||
|
||
.w-col-tiny-5 {
|
||
width: 41.6667%
|
||
}
|
||
|
||
.w-col-tiny-6 {
|
||
width: 50%
|
||
}
|
||
|
||
.w-col-tiny-7 {
|
||
width: 58.3333%
|
||
}
|
||
|
||
.w-col-tiny-8 {
|
||
width: 66.6667%
|
||
}
|
||
|
||
.w-col-tiny-9 {
|
||
width: 75%
|
||
}
|
||
|
||
.w-col-tiny-10 {
|
||
width: 83.3333%
|
||
}
|
||
|
||
.w-col-tiny-11 {
|
||
width: 91.6667%
|
||
}
|
||
|
||
.w-col-tiny-12 {
|
||
width: 100%
|
||
}
|
||
}
|
||
|
||
.w-widget {
|
||
position: relative
|
||
}
|
||
|
||
.w-widget-map {
|
||
width: 100%;
|
||
height: 400px
|
||
}
|
||
|
||
.w-widget-map label {
|
||
width: auto;
|
||
display: inline
|
||
}
|
||
|
||
.w-widget-map img {
|
||
max-width: inherit
|
||
}
|
||
|
||
.w-widget-map .gm-style-iw {
|
||
text-align: center
|
||
}
|
||
|
||
.w-widget-map .gm-style-iw>button {
|
||
display: none!important
|
||
}
|
||
|
||
.w-widget-twitter {
|
||
overflow: hidden
|
||
}
|
||
|
||
.w-widget-twitter-count-shim {
|
||
vertical-align: top;
|
||
text-align: center;
|
||
background: #fff;
|
||
border: 1px solid #758696;
|
||
border-radius: 3px;
|
||
width: 28px;
|
||
height: 20px;
|
||
display: inline-block;
|
||
position: relative
|
||
}
|
||
|
||
.w-widget-twitter-count-shim * {
|
||
pointer-events: none;
|
||
-webkit-user-select: none;
|
||
user-select: none
|
||
}
|
||
|
||
.w-widget-twitter-count-shim .w-widget-twitter-count-inner {
|
||
text-align: center;
|
||
color: #999;
|
||
font-family: serif;
|
||
font-size: 15px;
|
||
line-height: 12px;
|
||
position: relative
|
||
}
|
||
|
||
.w-widget-twitter-count-shim .w-widget-twitter-count-clear {
|
||
display: block;
|
||
position: relative
|
||
}
|
||
|
||
.w-widget-twitter-count-shim.w--large {
|
||
width: 36px;
|
||
height: 28px
|
||
}
|
||
|
||
.w-widget-twitter-count-shim.w--large .w-widget-twitter-count-inner {
|
||
font-size: 18px;
|
||
line-height: 18px
|
||
}
|
||
|
||
.w-widget-twitter-count-shim:not(.w--vertical) {
|
||
margin-left: 5px;
|
||
margin-right: 8px
|
||
}
|
||
|
||
.w-widget-twitter-count-shim:not(.w--vertical).w--large {
|
||
margin-left: 6px
|
||
}
|
||
|
||
.w-widget-twitter-count-shim:not(.w--vertical):before,.w-widget-twitter-count-shim:not(.w--vertical):after {
|
||
content: " ";
|
||
pointer-events: none;
|
||
border: solid #0000;
|
||
width: 0;
|
||
height: 0;
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 0
|
||
}
|
||
|
||
.w-widget-twitter-count-shim:not(.w--vertical):before {
|
||
border-width: 4px;
|
||
border-color: #75869600 #5d6c7b #75869600 #75869600;
|
||
margin-top: -4px;
|
||
margin-left: -9px
|
||
}
|
||
|
||
.w-widget-twitter-count-shim:not(.w--vertical).w--large:before {
|
||
border-width: 5px;
|
||
margin-top: -5px;
|
||
margin-left: -10px
|
||
}
|
||
|
||
.w-widget-twitter-count-shim:not(.w--vertical):after {
|
||
border-width: 4px;
|
||
border-color: #fff0 #fff #fff0 #fff0;
|
||
margin-top: -4px;
|
||
margin-left: -8px
|
||
}
|
||
|
||
.w-widget-twitter-count-shim:not(.w--vertical).w--large:after {
|
||
border-width: 5px;
|
||
margin-top: -5px;
|
||
margin-left: -9px
|
||
}
|
||
|
||
.w-widget-twitter-count-shim.w--vertical {
|
||
width: 61px;
|
||
height: 33px;
|
||
margin-bottom: 8px
|
||
}
|
||
|
||
.w-widget-twitter-count-shim.w--vertical:before,.w-widget-twitter-count-shim.w--vertical:after {
|
||
content: " ";
|
||
pointer-events: none;
|
||
border: solid #0000;
|
||
width: 0;
|
||
height: 0;
|
||
position: absolute;
|
||
top: 100%;
|
||
left: 50%
|
||
}
|
||
|
||
.w-widget-twitter-count-shim.w--vertical:before {
|
||
border-width: 5px;
|
||
border-color: #5d6c7b #75869600 #75869600;
|
||
margin-left: -5px
|
||
}
|
||
|
||
.w-widget-twitter-count-shim.w--vertical:after {
|
||
border-width: 4px;
|
||
border-color: #fff #fff0 #fff0;
|
||
margin-left: -4px
|
||
}
|
||
|
||
.w-widget-twitter-count-shim.w--vertical .w-widget-twitter-count-inner {
|
||
font-size: 18px;
|
||
line-height: 22px
|
||
}
|
||
|
||
.w-widget-twitter-count-shim.w--vertical.w--large {
|
||
width: 76px
|
||
}
|
||
|
||
.w-background-video {
|
||
color: #fff;
|
||
height: 500px;
|
||
position: relative;
|
||
overflow: hidden
|
||
}
|
||
|
||
.w-background-video>video {
|
||
object-fit: cover;
|
||
z-index: -100;
|
||
background-position: 50%;
|
||
background-size: cover;
|
||
width: 100%;
|
||
height: 100%;
|
||
margin: auto;
|
||
position: absolute;
|
||
inset: -100%
|
||
}
|
||
|
||
.w-background-video>video::-webkit-media-controls-start-playback-button {
|
||
-webkit-appearance: none;
|
||
display: none!important
|
||
}
|
||
|
||
.w-background-video--control {
|
||
background-color: #0000;
|
||
padding: 0;
|
||
position: absolute;
|
||
bottom: 1em;
|
||
right: 1em
|
||
}
|
||
|
||
.w-background-video--control>[hidden] {
|
||
display: none!important
|
||
}
|
||
|
||
.w-slider {
|
||
text-align: center;
|
||
clear: both;
|
||
-webkit-tap-highlight-color: #0000;
|
||
tap-highlight-color: #0000;
|
||
background: #ddd;
|
||
height: 300px;
|
||
position: relative
|
||
}
|
||
|
||
.w-slider-mask {
|
||
z-index: 1;
|
||
white-space: nowrap;
|
||
height: 100%;
|
||
display: block;
|
||
position: relative;
|
||
left: 0;
|
||
right: 0;
|
||
overflow: hidden
|
||
}
|
||
|
||
.w-slide {
|
||
vertical-align: top;
|
||
white-space: normal;
|
||
text-align: left;
|
||
width: 100%;
|
||
height: 100%;
|
||
display: inline-block;
|
||
position: relative
|
||
}
|
||
|
||
.w-slider-nav {
|
||
z-index: 2;
|
||
text-align: center;
|
||
-webkit-tap-highlight-color: #0000;
|
||
tap-highlight-color: #0000;
|
||
height: 40px;
|
||
margin: auto;
|
||
padding-top: 10px;
|
||
position: absolute;
|
||
inset: auto 0 0
|
||
}
|
||
|
||
.w-slider-nav.w-round>div {
|
||
border-radius: 100%
|
||
}
|
||
|
||
.w-slider-nav.w-num>div {
|
||
font-size: inherit;
|
||
line-height: inherit;
|
||
width: auto;
|
||
height: auto;
|
||
padding: .2em .5em
|
||
}
|
||
|
||
.w-slider-nav.w-shadow>div {
|
||
box-shadow: 0 0 3px #3336
|
||
}
|
||
|
||
.w-slider-nav-invert {
|
||
color: #fff
|
||
}
|
||
|
||
.w-slider-nav-invert>div {
|
||
background-color: #2226
|
||
}
|
||
|
||
.w-slider-nav-invert>div.w-active {
|
||
background-color: #222
|
||
}
|
||
|
||
.w-slider-dot {
|
||
cursor: pointer;
|
||
background-color: #fff6;
|
||
width: 1em;
|
||
height: 1em;
|
||
margin: 0 3px .5em;
|
||
transition: background-color .1s,color .1s;
|
||
display: inline-block;
|
||
position: relative
|
||
}
|
||
|
||
.w-slider-dot.w-active {
|
||
background-color: #fff
|
||
}
|
||
|
||
.w-slider-dot:focus {
|
||
outline: none;
|
||
box-shadow: 0 0 0 2px #fff
|
||
}
|
||
|
||
.w-slider-dot:focus.w-active {
|
||
box-shadow: none
|
||
}
|
||
|
||
.w-slider-arrow-left,.w-slider-arrow-right {
|
||
cursor: pointer;
|
||
color: #fff;
|
||
-webkit-tap-highlight-color: #0000;
|
||
tap-highlight-color: #0000;
|
||
-webkit-user-select: none;
|
||
user-select: none;
|
||
width: 80px;
|
||
margin: auto;
|
||
font-size: 40px;
|
||
position: absolute;
|
||
inset: 0;
|
||
overflow: hidden
|
||
}
|
||
|
||
.w-slider-arrow-left [class^=w-icon-],.w-slider-arrow-right [class^=w-icon-],.w-slider-arrow-left [class*=\ w-icon-],.w-slider-arrow-right [class*=\ w-icon-] {
|
||
position: absolute
|
||
}
|
||
|
||
.w-slider-arrow-left:focus,.w-slider-arrow-right:focus {
|
||
outline: 0
|
||
}
|
||
|
||
.w-slider-arrow-left {
|
||
z-index: 3;
|
||
right: auto
|
||
}
|
||
|
||
.w-slider-arrow-right {
|
||
z-index: 4;
|
||
left: auto
|
||
}
|
||
|
||
.w-icon-slider-left,.w-icon-slider-right {
|
||
width: 1em;
|
||
height: 1em;
|
||
margin: auto;
|
||
inset: 0
|
||
}
|
||
|
||
.w-slider-aria-label {
|
||
clip: rect(0 0 0 0);
|
||
border: 0;
|
||
width: 1px;
|
||
height: 1px;
|
||
margin: -1px;
|
||
padding: 0;
|
||
position: absolute;
|
||
overflow: hidden
|
||
}
|
||
|
||
.w-slider-force-show {
|
||
display: block!important
|
||
}
|
||
|
||
.w-dropdown {
|
||
text-align: left;
|
||
z-index: 900;
|
||
margin-left: auto;
|
||
margin-right: auto;
|
||
display: inline-block;
|
||
position: relative
|
||
}
|
||
|
||
.w-dropdown-btn,.w-dropdown-toggle,.w-dropdown-link {
|
||
vertical-align: top;
|
||
color: #222;
|
||
text-align: left;
|
||
white-space: nowrap;
|
||
margin-left: auto;
|
||
margin-right: auto;
|
||
padding: 20px;
|
||
text-decoration: none;
|
||
position: relative
|
||
}
|
||
|
||
.w-dropdown-toggle {
|
||
-webkit-user-select: none;
|
||
user-select: none;
|
||
cursor: pointer;
|
||
padding-right: 40px;
|
||
display: inline-block
|
||
}
|
||
|
||
.w-dropdown-toggle:focus {
|
||
outline: 0
|
||
}
|
||
|
||
.w-icon-dropdown-toggle {
|
||
width: 1em;
|
||
height: 1em;
|
||
margin: auto 20px auto auto;
|
||
position: absolute;
|
||
top: 0;
|
||
bottom: 0;
|
||
right: 0
|
||
}
|
||
|
||
.w-dropdown-list {
|
||
background: #ddd;
|
||
min-width: 100%;
|
||
display: none;
|
||
position: absolute
|
||
}
|
||
|
||
.w-dropdown-list.w--open {
|
||
display: block
|
||
}
|
||
|
||
.w-dropdown-link {
|
||
color: #222;
|
||
padding: 10px 20px;
|
||
display: block
|
||
}
|
||
|
||
.w-dropdown-link.w--current {
|
||
color: #0082f3
|
||
}
|
||
|
||
.w-dropdown-link:focus {
|
||
outline: 0
|
||
}
|
||
|
||
@media screen and (max-width: 767px) {
|
||
.w-nav-brand {
|
||
padding-left:10px
|
||
}
|
||
}
|
||
|
||
.w-lightbox-backdrop {
|
||
cursor: auto;
|
||
letter-spacing: normal;
|
||
text-indent: 0;
|
||
text-shadow: none;
|
||
text-transform: none;
|
||
visibility: visible;
|
||
white-space: normal;
|
||
word-break: normal;
|
||
word-spacing: normal;
|
||
word-wrap: normal;
|
||
color: #fff;
|
||
text-align: center;
|
||
z-index: 2000;
|
||
opacity: 0;
|
||
-webkit-user-select: none;
|
||
-moz-user-select: none;
|
||
-webkit-tap-highlight-color: transparent;
|
||
background: #000000e6;
|
||
outline: 0;
|
||
font-family: Helvetica Neue,Helvetica,Ubuntu,Segoe UI,Verdana,sans-serif;
|
||
font-size: 17px;
|
||
font-style: normal;
|
||
font-weight: 300;
|
||
line-height: 1.2;
|
||
list-style: disc;
|
||
position: fixed;
|
||
inset: 0;
|
||
-webkit-transform: translate(0)
|
||
}
|
||
|
||
.w-lightbox-backdrop,.w-lightbox-container {
|
||
-webkit-overflow-scrolling: touch;
|
||
height: 100%;
|
||
overflow: auto
|
||
}
|
||
|
||
.w-lightbox-content {
|
||
height: 100vh;
|
||
position: relative;
|
||
overflow: hidden
|
||
}
|
||
|
||
.w-lightbox-view {
|
||
opacity: 0;
|
||
width: 100vw;
|
||
height: 100vh;
|
||
position: absolute
|
||
}
|
||
|
||
.w-lightbox-view:before {
|
||
content: "";
|
||
height: 100vh
|
||
}
|
||
|
||
.w-lightbox-group,.w-lightbox-group .w-lightbox-view,.w-lightbox-group .w-lightbox-view:before {
|
||
height: 86vh
|
||
}
|
||
|
||
.w-lightbox-frame,.w-lightbox-view:before {
|
||
vertical-align: middle;
|
||
display: inline-block
|
||
}
|
||
|
||
.w-lightbox-figure {
|
||
margin: 0;
|
||
position: relative
|
||
}
|
||
|
||
.w-lightbox-group .w-lightbox-figure {
|
||
cursor: pointer
|
||
}
|
||
|
||
.w-lightbox-img {
|
||
width: auto;
|
||
max-width: none;
|
||
height: auto
|
||
}
|
||
|
||
.w-lightbox-image {
|
||
float: none;
|
||
max-width: 100vw;
|
||
max-height: 100vh;
|
||
display: block
|
||
}
|
||
|
||
.w-lightbox-group .w-lightbox-image {
|
||
max-height: 86vh
|
||
}
|
||
|
||
.w-lightbox-caption {
|
||
text-align: left;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
background: #0006;
|
||
padding: .5em 1em;
|
||
position: absolute;
|
||
bottom: 0;
|
||
left: 0;
|
||
right: 0;
|
||
overflow: hidden
|
||
}
|
||
|
||
.w-lightbox-embed {
|
||
width: 100%;
|
||
height: 100%;
|
||
position: absolute;
|
||
inset: 0
|
||
}
|
||
|
||
.w-lightbox-control {
|
||
cursor: pointer;
|
||
background-position: 50%;
|
||
background-repeat: no-repeat;
|
||
background-size: 24px;
|
||
width: 4em;
|
||
transition: all .3s;
|
||
position: absolute;
|
||
top: 0
|
||
}
|
||
|
||
.w-lightbox-left {
|
||
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9Ii0yMCAwIDI0IDQwIiB3aWR0aD0iMjQiIGhlaWdodD0iNDAiPjxnIHRyYW5zZm9ybT0icm90YXRlKDQ1KSI+PHBhdGggZD0ibTAgMGg1djIzaDIzdjVoLTI4eiIgb3BhY2l0eT0iLjQiLz48cGF0aCBkPSJtMSAxaDN2MjNoMjN2M2gtMjZ6IiBmaWxsPSIjZmZmIi8+PC9nPjwvc3ZnPg==);
|
||
display: none;
|
||
bottom: 0;
|
||
left: 0
|
||
}
|
||
|
||
.w-lightbox-right {
|
||
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9Ii00IDAgMjQgNDAiIHdpZHRoPSIyNCIgaGVpZ2h0PSI0MCI+PGcgdHJhbnNmb3JtPSJyb3RhdGUoNDUpIj48cGF0aCBkPSJtMC0waDI4djI4aC01di0yM2gtMjN6IiBvcGFjaXR5PSIuNCIvPjxwYXRoIGQ9Im0xIDFoMjZ2MjZoLTN2LTIzaC0yM3oiIGZpbGw9IiNmZmYiLz48L2c+PC9zdmc+);
|
||
display: none;
|
||
bottom: 0;
|
||
right: 0
|
||
}
|
||
|
||
.w-lightbox-close {
|
||
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9Ii00IDAgMTggMTciIHdpZHRoPSIxOCIgaGVpZ2h0PSIxNyI+PGcgdHJhbnNmb3JtPSJyb3RhdGUoNDUpIj48cGF0aCBkPSJtMCAwaDd2LTdoNXY3aDd2NWgtN3Y3aC01di03aC03eiIgb3BhY2l0eT0iLjQiLz48cGF0aCBkPSJtMSAxaDd2LTdoM3Y3aDd2M2gtN3Y3aC0zdi03aC03eiIgZmlsbD0iI2ZmZiIvPjwvZz48L3N2Zz4=);
|
||
background-size: 18px;
|
||
height: 2.6em;
|
||
right: 0
|
||
}
|
||
|
||
.w-lightbox-strip {
|
||
white-space: nowrap;
|
||
padding: 0 1vh;
|
||
line-height: 0;
|
||
position: absolute;
|
||
bottom: 0;
|
||
left: 0;
|
||
right: 0;
|
||
overflow: auto hidden
|
||
}
|
||
|
||
.w-lightbox-item {
|
||
box-sizing: content-box;
|
||
cursor: pointer;
|
||
width: 10vh;
|
||
padding: 2vh 1vh;
|
||
display: inline-block;
|
||
-webkit-transform: translate(0,0)
|
||
}
|
||
|
||
.w-lightbox-active {
|
||
opacity: .3
|
||
}
|
||
|
||
.w-lightbox-thumbnail {
|
||
background: #222;
|
||
height: 10vh;
|
||
position: relative;
|
||
overflow: hidden
|
||
}
|
||
|
||
.w-lightbox-thumbnail-image {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0
|
||
}
|
||
|
||
.w-lightbox-thumbnail .w-lightbox-tall {
|
||
width: 100%;
|
||
top: 50%;
|
||
transform: translateY(-50%)
|
||
}
|
||
|
||
.w-lightbox-thumbnail .w-lightbox-wide {
|
||
height: 100%;
|
||
left: 50%;
|
||
transform: translate(-50%)
|
||
}
|
||
|
||
.w-lightbox-spinner {
|
||
box-sizing: border-box;
|
||
border: 5px solid #0006;
|
||
border-radius: 50%;
|
||
width: 40px;
|
||
height: 40px;
|
||
margin-top: -20px;
|
||
margin-left: -20px;
|
||
animation: .8s linear infinite spin;
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 50%
|
||
}
|
||
|
||
.w-lightbox-spinner:after {
|
||
content: "";
|
||
border: 3px solid #0000;
|
||
border-bottom-color: #fff;
|
||
border-radius: 50%;
|
||
position: absolute;
|
||
inset: -4px
|
||
}
|
||
|
||
.w-lightbox-hide {
|
||
display: none
|
||
}
|
||
|
||
.w-lightbox-noscroll {
|
||
overflow: hidden
|
||
}
|
||
|
||
@media (min-width: 768px) {
|
||
.w-lightbox-content {
|
||
height:96vh;
|
||
margin-top: 2vh
|
||
}
|
||
|
||
.w-lightbox-view,.w-lightbox-view:before {
|
||
height: 96vh
|
||
}
|
||
|
||
.w-lightbox-group,.w-lightbox-group .w-lightbox-view,.w-lightbox-group .w-lightbox-view:before {
|
||
height: 84vh
|
||
}
|
||
|
||
.w-lightbox-image {
|
||
max-width: 96vw;
|
||
max-height: 96vh
|
||
}
|
||
|
||
.w-lightbox-group .w-lightbox-image {
|
||
max-width: 82.3vw;
|
||
max-height: 84vh
|
||
}
|
||
|
||
.w-lightbox-left,.w-lightbox-right {
|
||
opacity: .5;
|
||
display: block
|
||
}
|
||
|
||
.w-lightbox-close {
|
||
opacity: .8
|
||
}
|
||
|
||
.w-lightbox-control:hover {
|
||
opacity: 1
|
||
}
|
||
}
|
||
|
||
.w-lightbox-inactive,.w-lightbox-inactive:hover {
|
||
opacity: 0
|
||
}
|
||
|
||
.w-richtext:before,.w-richtext:after {
|
||
content: " ";
|
||
grid-area: 1/1/2/2;
|
||
display: table
|
||
}
|
||
|
||
.w-richtext:after {
|
||
clear: both
|
||
}
|
||
|
||
.w-richtext[contenteditable=true]:before,.w-richtext[contenteditable=true]:after {
|
||
white-space: initial
|
||
}
|
||
|
||
.w-richtext ol,.w-richtext ul {
|
||
overflow: hidden
|
||
}
|
||
|
||
.w-richtext .w-richtext-figure-selected.w-richtext-figure-type-video div:after,.w-richtext .w-richtext-figure-selected[data-rt-type=video] div:after,.w-richtext .w-richtext-figure-selected.w-richtext-figure-type-image div,.w-richtext .w-richtext-figure-selected[data-rt-type=image] div {
|
||
outline: 2px solid #2895f7
|
||
}
|
||
|
||
.w-richtext figure.w-richtext-figure-type-video>div:after,.w-richtext figure[data-rt-type=video]>div:after {
|
||
content: "";
|
||
display: none;
|
||
position: absolute;
|
||
inset: 0
|
||
}
|
||
|
||
.w-richtext figure {
|
||
max-width: 60%;
|
||
position: relative
|
||
}
|
||
|
||
.w-richtext figure>div:before {
|
||
cursor: default!important
|
||
}
|
||
|
||
.w-richtext figure img {
|
||
width: 100%
|
||
}
|
||
|
||
.w-richtext figure figcaption.w-richtext-figcaption-placeholder {
|
||
opacity: .6
|
||
}
|
||
|
||
.w-richtext figure div {
|
||
color: #0000;
|
||
font-size: 0
|
||
}
|
||
|
||
.w-richtext figure.w-richtext-figure-type-image,.w-richtext figure[data-rt-type=image] {
|
||
display: table
|
||
}
|
||
|
||
.w-richtext figure.w-richtext-figure-type-image>div,.w-richtext figure[data-rt-type=image]>div {
|
||
display: inline-block
|
||
}
|
||
|
||
.w-richtext figure.w-richtext-figure-type-image>figcaption,.w-richtext figure[data-rt-type=image]>figcaption {
|
||
caption-side: bottom;
|
||
display: table-caption
|
||
}
|
||
|
||
.w-richtext figure.w-richtext-figure-type-video,.w-richtext figure[data-rt-type=video] {
|
||
width: 60%;
|
||
height: 0
|
||
}
|
||
|
||
.w-richtext figure.w-richtext-figure-type-video iframe,.w-richtext figure[data-rt-type=video] iframe {
|
||
width: 100%;
|
||
height: 100%;
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0
|
||
}
|
||
|
||
.w-richtext figure.w-richtext-figure-type-video>div,.w-richtext figure[data-rt-type=video]>div {
|
||
width: 100%
|
||
}
|
||
|
||
.w-richtext figure.w-richtext-align-center {
|
||
clear: both;
|
||
margin-left: auto;
|
||
margin-right: auto
|
||
}
|
||
|
||
.w-richtext figure.w-richtext-align-center.w-richtext-figure-type-image>div,.w-richtext figure.w-richtext-align-center[data-rt-type=image]>div {
|
||
max-width: 100%
|
||
}
|
||
|
||
.w-richtext figure.w-richtext-align-normal {
|
||
clear: both
|
||
}
|
||
|
||
.w-richtext figure.w-richtext-align-fullwidth {
|
||
text-align: center;
|
||
clear: both;
|
||
width: 100%;
|
||
max-width: 100%;
|
||
margin-left: auto;
|
||
margin-right: auto;
|
||
display: block
|
||
}
|
||
|
||
.w-richtext figure.w-richtext-align-fullwidth>div {
|
||
padding-bottom: inherit;
|
||
display: inline-block
|
||
}
|
||
|
||
.w-richtext figure.w-richtext-align-fullwidth>figcaption {
|
||
display: block
|
||
}
|
||
|
||
.w-richtext figure.w-richtext-align-floatleft {
|
||
float: left;
|
||
clear: none;
|
||
margin-right: 15px
|
||
}
|
||
|
||
.w-richtext figure.w-richtext-align-floatright {
|
||
float: right;
|
||
clear: none;
|
||
margin-left: 15px
|
||
}
|
||
|
||
.w-nav {
|
||
z-index: 1000;
|
||
background: #ddd;
|
||
position: relative
|
||
}
|
||
|
||
.w-nav:before,.w-nav:after {
|
||
content: " ";
|
||
grid-area: 1/1/2/2;
|
||
display: table
|
||
}
|
||
|
||
.w-nav:after {
|
||
clear: both
|
||
}
|
||
|
||
.w-nav-brand {
|
||
float: left;
|
||
color: #333;
|
||
text-decoration: none;
|
||
position: relative
|
||
}
|
||
|
||
.w-nav-link {
|
||
vertical-align: top;
|
||
color: #222;
|
||
text-align: left;
|
||
margin-left: auto;
|
||
margin-right: auto;
|
||
padding: 20px;
|
||
text-decoration: none;
|
||
display: inline-block;
|
||
position: relative
|
||
}
|
||
|
||
.w-nav-link.w--current {
|
||
color: #0082f3
|
||
}
|
||
|
||
.w-nav-menu {
|
||
float: right;
|
||
position: relative
|
||
}
|
||
|
||
[data-nav-menu-open] {
|
||
text-align: center;
|
||
background: #c8c8c8;
|
||
min-width: 200px;
|
||
position: absolute;
|
||
top: 100%;
|
||
left: 0;
|
||
right: 0;
|
||
overflow: visible;
|
||
display: block!important
|
||
}
|
||
|
||
.w--nav-link-open {
|
||
display: block;
|
||
position: relative
|
||
}
|
||
|
||
.w-nav-overlay {
|
||
width: 100%;
|
||
display: none;
|
||
position: absolute;
|
||
top: 100%;
|
||
left: 0;
|
||
right: 0;
|
||
overflow: hidden
|
||
}
|
||
|
||
.w-nav-overlay [data-nav-menu-open] {
|
||
top: 0
|
||
}
|
||
|
||
.w-nav[data-animation=over-left] .w-nav-overlay {
|
||
width: auto
|
||
}
|
||
|
||
.w-nav[data-animation=over-left] .w-nav-overlay,.w-nav[data-animation=over-left] [data-nav-menu-open] {
|
||
z-index: 1;
|
||
top: 0;
|
||
right: auto
|
||
}
|
||
|
||
.w-nav[data-animation=over-right] .w-nav-overlay {
|
||
width: auto
|
||
}
|
||
|
||
.w-nav[data-animation=over-right] .w-nav-overlay,.w-nav[data-animation=over-right] [data-nav-menu-open] {
|
||
z-index: 1;
|
||
top: 0;
|
||
left: auto
|
||
}
|
||
|
||
.w-nav-button {
|
||
float: right;
|
||
cursor: pointer;
|
||
-webkit-tap-highlight-color: #0000;
|
||
tap-highlight-color: #0000;
|
||
-webkit-user-select: none;
|
||
user-select: none;
|
||
padding: 18px;
|
||
font-size: 24px;
|
||
display: none;
|
||
position: relative
|
||
}
|
||
|
||
.w-nav-button:focus {
|
||
outline: 0
|
||
}
|
||
|
||
.w-nav-button.w--open {
|
||
color: #fff;
|
||
background-color: #c8c8c8
|
||
}
|
||
|
||
.w-nav[data-collapse=all] .w-nav-menu {
|
||
display: none
|
||
}
|
||
|
||
.w-nav[data-collapse=all] .w-nav-button,.w--nav-dropdown-open,.w--nav-dropdown-toggle-open {
|
||
display: block
|
||
}
|
||
|
||
.w--nav-dropdown-list-open {
|
||
position: static
|
||
}
|
||
|
||
@media screen and (max-width: 991px) {
|
||
.w-nav[data-collapse=medium] .w-nav-menu {
|
||
display:none
|
||
}
|
||
|
||
.w-nav[data-collapse=medium] .w-nav-button {
|
||
display: block
|
||
}
|
||
}
|
||
|
||
@media screen and (max-width: 767px) {
|
||
.w-nav[data-collapse=small] .w-nav-menu {
|
||
display:none
|
||
}
|
||
|
||
.w-nav[data-collapse=small] .w-nav-button {
|
||
display: block
|
||
}
|
||
|
||
.w-nav-brand {
|
||
padding-left: 10px
|
||
}
|
||
}
|
||
|
||
@media screen and (max-width: 479px) {
|
||
.w-nav[data-collapse=tiny] .w-nav-menu {
|
||
display:none
|
||
}
|
||
|
||
.w-nav[data-collapse=tiny] .w-nav-button {
|
||
display: block
|
||
}
|
||
}
|
||
|
||
.w-tabs {
|
||
position: relative
|
||
}
|
||
|
||
.w-tabs:before,.w-tabs:after {
|
||
content: " ";
|
||
grid-area: 1/1/2/2;
|
||
display: table
|
||
}
|
||
|
||
.w-tabs:after {
|
||
clear: both
|
||
}
|
||
|
||
.w-tab-menu {
|
||
position: relative
|
||
}
|
||
|
||
.w-tab-link {
|
||
vertical-align: top;
|
||
text-align: left;
|
||
cursor: pointer;
|
||
color: #222;
|
||
background-color: #ddd;
|
||
padding: 9px 30px;
|
||
text-decoration: none;
|
||
display: inline-block;
|
||
position: relative
|
||
}
|
||
|
||
.w-tab-link.w--current {
|
||
background-color: #c8c8c8
|
||
}
|
||
|
||
.w-tab-link:focus {
|
||
outline: 0
|
||
}
|
||
|
||
.w-tab-content {
|
||
display: block;
|
||
position: relative;
|
||
overflow: hidden
|
||
}
|
||
|
||
.w-tab-pane {
|
||
display: none;
|
||
position: relative
|
||
}
|
||
|
||
.w--tab-active {
|
||
display: block
|
||
}
|
||
|
||
@media screen and (max-width: 479px) {
|
||
.w-tab-link {
|
||
display:block
|
||
}
|
||
}
|
||
|
||
.w-ix-emptyfix:after {
|
||
content: ""
|
||
}
|
||
|
||
@keyframes spin {
|
||
0% {
|
||
transform: rotate(0)
|
||
}
|
||
|
||
to {
|
||
transform: rotate(360deg)
|
||
}
|
||
}
|
||
|
||
.w-dyn-empty {
|
||
background-color: #ddd;
|
||
padding: 10px
|
||
}
|
||
|
||
.w-dyn-hide,.w-dyn-bind-empty,.w-condition-invisible {
|
||
display: none!important
|
||
}
|
||
|
||
.wf-layout-layout {
|
||
display: grid
|
||
}
|
||
|
||
@font-face {
|
||
font-family: Worksans;
|
||
src: url(https://cdn.prod.website-files.com/67fea42b19018db93e3fe132/6813a2147d83bc07155e2b60_WorkSans-Medium.woff2)format("woff2");
|
||
font-weight: 500;
|
||
font-style: normal;
|
||
font-display: block
|
||
}
|
||
|
||
@font-face {
|
||
font-family: Worksans;
|
||
src: url(https://cdn.prod.website-files.com/67fea42b19018db93e3fe132/6813a2142dbb0103e289fe9e_WorkSans-SemiBold.woff2)format("woff2");
|
||
font-weight: 600;
|
||
font-style: normal;
|
||
font-display: block
|
||
}
|
||
|
||
@font-face {
|
||
font-family: Worksans;
|
||
src: url(https://cdn.prod.website-files.com/67fea42b19018db93e3fe132/6813a2157720bd97a132290f_WorkSans-Regular.woff2)format("woff2");
|
||
font-weight: 400;
|
||
font-style: normal;
|
||
font-display: block
|
||
}
|
||
|
||
@font-face {
|
||
font-family: Anton;
|
||
src: url(https://cdn.prod.website-files.com/67fea42b19018db93e3fe132/6813a515c433b264204b6485_Anton-Regular.woff2)format("woff2");
|
||
font-weight: 400;
|
||
font-style: normal;
|
||
font-display: block
|
||
}
|
||
|
||
:root {
|
||
--secondary: #ffe9cf;
|
||
--primary: #270f03;
|
||
--y-base: 6rem;
|
||
--max-w: 1620px;
|
||
--nav-height: 3rem;
|
||
--rounded-1: .375rem;
|
||
--white: #fef8f1;
|
||
--green: #69e05f;
|
||
--rounded-xs: .2rem;
|
||
--light: #d9d9d9
|
||
}
|
||
|
||
body {
|
||
background-color: var(--secondary);
|
||
color: var(--primary);
|
||
letter-spacing: -.02em;
|
||
font-family: Worksans,Arial,sans-serif;
|
||
font-size: 14px;
|
||
line-height: 1.2em
|
||
}
|
||
|
||
.main {
|
||
min-height: 100svh
|
||
}
|
||
|
||
.sec {
|
||
padding-top: var(--y-base);
|
||
padding-bottom: var(--y-base);
|
||
flex-flow: column;
|
||
justify-content: center;
|
||
align-items: center;
|
||
min-height: 40svh;
|
||
display: flex;
|
||
position: relative
|
||
}
|
||
|
||
.sec.hero {
|
||
flex-flow: column;
|
||
justify-content: center;
|
||
align-items: center;
|
||
width: 100%;
|
||
height: 100svh;
|
||
min-height: 100svh;
|
||
padding-top: 6rem;
|
||
padding-bottom: 3rem;
|
||
display: flex;
|
||
overflow: clip
|
||
}
|
||
|
||
.sec.scrolltrigger-sec {
|
||
flex-flow: column;
|
||
justify-content: flex-start;
|
||
align-items: center;
|
||
height: 400svh;
|
||
padding-top: 0;
|
||
padding-bottom: 0
|
||
}
|
||
|
||
.sec.utlis {
|
||
grid-column-gap: 3rem;
|
||
grid-row-gap: 3rem
|
||
}
|
||
|
||
.sec.reorganise {
|
||
justify-content: flex-start;
|
||
align-items: center
|
||
}
|
||
|
||
.sec.footer {
|
||
background-color: var(--primary);
|
||
padding-top: 7.25rem;
|
||
padding-bottom: 0
|
||
}
|
||
|
||
.sec.inertia {
|
||
overflow: clip
|
||
}
|
||
|
||
.comp {
|
||
max-width: var(--max-w);
|
||
grid-column-gap: 1.5rem;
|
||
grid-row-gap: 1.5rem;
|
||
flex-flow: column;
|
||
flex: none;
|
||
justify-content: center;
|
||
align-items: center;
|
||
width: 94%;
|
||
min-width: 20vw;
|
||
display: flex;
|
||
position: relative
|
||
}
|
||
|
||
.comp.text-exp {
|
||
grid-column-gap: 1.5rem;
|
||
grid-row-gap: 1.5rem;
|
||
flex-flow: wrap;
|
||
grid-template-rows: auto auto;
|
||
grid-template-columns: 1fr 1fr 1fr;
|
||
grid-auto-columns: 1fr;
|
||
width: 80%;
|
||
margin-bottom: 0;
|
||
padding-left: 0;
|
||
display: grid
|
||
}
|
||
|
||
.comp.slider-w {
|
||
width: 100%;
|
||
max-width: 100%;
|
||
overflow: clip
|
||
}
|
||
|
||
.comp.inertia {
|
||
flex-flow: row;
|
||
height: 60svh
|
||
}
|
||
|
||
.comp.footer {
|
||
grid-column-gap: 0rem;
|
||
grid-row-gap: 0rem;
|
||
color: var(--secondary);
|
||
width: 80%
|
||
}
|
||
|
||
.comp.toggle-w {
|
||
z-index: 3;
|
||
top: -10svh
|
||
}
|
||
|
||
.comp.scroller {
|
||
grid-column-gap: 0rem;
|
||
grid-row-gap: 0rem;
|
||
flex-flow: column;
|
||
justify-content: center;
|
||
align-items: center;
|
||
width: 100%;
|
||
max-width: 100%;
|
||
font-family: Anton,Arial,sans-serif;
|
||
font-size: 20vw;
|
||
line-height: 1em;
|
||
overflow: clip
|
||
}
|
||
|
||
.comp.footer-logo {
|
||
color: var(--secondary);
|
||
width: 99%;
|
||
min-height: 20svh;
|
||
margin-top: 2rem
|
||
}
|
||
|
||
.comp.video {
|
||
max-width: 100%
|
||
}
|
||
|
||
.scroll-wrapper {
|
||
overflow: clip
|
||
}
|
||
|
||
.nav-w {
|
||
z-index: 20;
|
||
grid-column-gap: 1rem;
|
||
grid-row-gap: 1rem;
|
||
pointer-events: none;
|
||
flex-flow: column;
|
||
justify-content: center;
|
||
align-items: center;
|
||
display: flex;
|
||
position: fixed;
|
||
inset: 0% 0% auto
|
||
}
|
||
|
||
.nav {
|
||
grid-column-gap: 1.5rem;
|
||
grid-row-gap: 1.5rem;
|
||
pointer-events: auto;
|
||
justify-content: center;
|
||
align-items: center;
|
||
height: 100%;
|
||
padding-top: 1.25rem;
|
||
display: flex
|
||
}
|
||
|
||
.svg.gsap-logo {
|
||
aspect-ratio: 44/16;
|
||
width: 2.75em;
|
||
height: 1em
|
||
}
|
||
|
||
.svg._wf-logo {
|
||
aspect-ratio: 100/16;
|
||
width: 6.25em;
|
||
height: 1em
|
||
}
|
||
|
||
.svg.arrow-r {
|
||
width: 2em;
|
||
height: 1em
|
||
}
|
||
|
||
.svg.copy-icon {
|
||
width: 1rem;
|
||
height: 1rem
|
||
}
|
||
|
||
.svg.arrow:where(.w-variant-352da3df-a236-ccac-dbb8-8845a582a471) {
|
||
transform: rotate(180deg)
|
||
}
|
||
|
||
.svg.arrow.flip-2 {
|
||
transform: rotate(180deg)
|
||
}
|
||
|
||
.svg.arrow {
|
||
width: 2em
|
||
}
|
||
|
||
.svg.arrow.flip-4 {
|
||
transform: rotate(180deg)
|
||
}
|
||
|
||
.logo-banner-w {
|
||
grid-column-gap: .4rem;
|
||
grid-row-gap: .4rem;
|
||
font-size: 16px;
|
||
display: flex
|
||
}
|
||
|
||
.logo-banner-w.white {
|
||
color: var(--secondary);
|
||
font-size: 20px
|
||
}
|
||
|
||
.sub-nav-w {
|
||
grid-column-gap: 0rem;
|
||
grid-row-gap: 0rem;
|
||
pointer-events: auto;
|
||
margin-top: 0;
|
||
margin-bottom: 0;
|
||
padding-left: 0;
|
||
font-size: 12px;
|
||
display: flex
|
||
}
|
||
|
||
.link-li-w {
|
||
opacity: .7;
|
||
pointer-events: auto;
|
||
text-transform: none;
|
||
cursor: pointer;
|
||
padding: .2rem .6rem;
|
||
transition: opacity .2s;
|
||
position: relative
|
||
}
|
||
|
||
.link-li-w:hover,.link-li-w.current {
|
||
opacity: 1
|
||
}
|
||
|
||
.link-li-w.footer {
|
||
color: var(--secondary);
|
||
text-decoration: none
|
||
}
|
||
|
||
.x-adjust-right {
|
||
padding-right: .2rem
|
||
}
|
||
|
||
.layer {
|
||
z-index: 0;
|
||
pointer-events: none;
|
||
justify-content: center;
|
||
align-items: center;
|
||
display: flex;
|
||
position: absolute;
|
||
inset: 0%
|
||
}
|
||
|
||
.layer.flex-b {
|
||
justify-content: center;
|
||
align-items: flex-end
|
||
}
|
||
|
||
.layer.flex-b.z-3 {
|
||
z-index: 3
|
||
}
|
||
|
||
.layer.hero-alt {
|
||
padding-top: var(--nav-height);
|
||
grid-column-gap: 1rem;
|
||
grid-row-gap: 1rem;
|
||
pointer-events: none;
|
||
visibility: hidden;
|
||
flex-flow: column;
|
||
flex: none;
|
||
grid-template-rows: auto auto;
|
||
grid-template-columns: 1fr 1fr 1fr;
|
||
grid-auto-columns: 1fr;
|
||
justify-content: center;
|
||
place-items: center stretch;
|
||
height: 100%;
|
||
padding-bottom: 3rem;
|
||
overflow: clip
|
||
}
|
||
|
||
.layer.hero-alt.show {
|
||
visibility: visible;
|
||
padding-left: 0;
|
||
padding-right: 0;
|
||
display: flex
|
||
}
|
||
|
||
.layer.hero-alt.show.old {
|
||
grid-column-gap: 1rem;
|
||
grid-row-gap: 1rem;
|
||
grid-template-rows: auto auto;
|
||
grid-template-columns: 1fr 1fr 1fr;
|
||
grid-auto-columns: 1fr;
|
||
display: grid
|
||
}
|
||
|
||
.text-g-item {
|
||
border-radius: var(--rounded-1);
|
||
background-color: #0000001a;
|
||
flex-flow: column;
|
||
padding-top: .5rem;
|
||
padding-left: .5rem;
|
||
padding-right: .5rem;
|
||
display: flex
|
||
}
|
||
|
||
.text-example-container {
|
||
aspect-ratio: 334/195;
|
||
border-radius: var(--rounded-1);
|
||
background-color: var(--primary);
|
||
color: var(--white);
|
||
justify-content: center;
|
||
align-items: center;
|
||
width: 100%;
|
||
display: flex
|
||
}
|
||
|
||
.text-example-tx-w {
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding-top: .6rem;
|
||
padding-bottom: .6rem;
|
||
display: flex
|
||
}
|
||
|
||
.text-effect-tx {
|
||
font-family: Impact,Haettenschweiler,Franklin Gothic Bold,Charcoal,sans-serif;
|
||
font-size: 2rem;
|
||
font-weight: 600;
|
||
line-height: .9em
|
||
}
|
||
|
||
.text-effect-w {
|
||
padding-top: .2em;
|
||
padding-bottom: .2em
|
||
}
|
||
|
||
.font-c {
|
||
letter-spacing: -.025em;
|
||
text-transform: uppercase;
|
||
margin-top: 0;
|
||
margin-bottom: 0;
|
||
font-family: Anton,Arial,sans-serif;
|
||
font-weight: 400
|
||
}
|
||
|
||
.font-c.hero-text {
|
||
text-align: center;
|
||
letter-spacing: -.01em;
|
||
font-size: min(14vw,10rem);
|
||
font-weight: 400;
|
||
line-height: .95em
|
||
}
|
||
|
||
.font-c.size-screen {
|
||
font-size: 17vw;
|
||
line-height: 1em
|
||
}
|
||
|
||
.font-c.size-md {
|
||
font-size: 3.125rem;
|
||
line-height: 1em
|
||
}
|
||
|
||
.font-c.size-md._w-ch {
|
||
max-width: 8ch
|
||
}
|
||
|
||
.main-he-span {
|
||
display: inline-block;
|
||
overflow: clip
|
||
}
|
||
|
||
.btn-link {
|
||
border-radius: var(--rounded-1);
|
||
background-color: var(--primary);
|
||
color: var(--secondary);
|
||
cursor: pointer;
|
||
padding: .625rem 1rem;
|
||
font-size: 13px;
|
||
text-decoration: none;
|
||
transition: color .2s,border-color .2s,background-color .2s
|
||
}
|
||
|
||
.btn-link:hover {
|
||
background-color: var(--green);
|
||
outline-color: var(--green);
|
||
color: var(--primary)
|
||
}
|
||
|
||
.par-base {
|
||
text-align: center;
|
||
font-size: 1rem;
|
||
line-height: 1.375em
|
||
}
|
||
|
||
.par-base._w-ch {
|
||
max-width: 50ch
|
||
}
|
||
|
||
.sticky-w {
|
||
padding-top: var(--y-base);
|
||
padding-bottom: var(--y-base);
|
||
justify-content: center;
|
||
align-items: center;
|
||
width: 100%;
|
||
height: 100svh;
|
||
display: flex;
|
||
position: sticky;
|
||
top: 0
|
||
}
|
||
|
||
.sky-scroller {
|
||
max-width: var(--max-w);
|
||
border-radius: var(--rounded-1);
|
||
pointer-events: auto;
|
||
width: 70%;
|
||
height: 29rem;
|
||
overflow: clip
|
||
}
|
||
|
||
.img-sky {
|
||
object-fit: cover;
|
||
width: 100%;
|
||
height: 100%
|
||
}
|
||
|
||
.flip-item {
|
||
grid-column-gap: .6rem;
|
||
grid-row-gap: .6rem;
|
||
aspect-ratio: 389/193;
|
||
border-radius: var(--rounded-1);
|
||
outline-offset: 0px;
|
||
background-color: #00c5c5;
|
||
outline: 1px solid #0000000d;
|
||
flex-flow: column;
|
||
justify-content: space-between;
|
||
align-items: flex-start;
|
||
padding: 1.5rem;
|
||
display: flex;
|
||
position: relative;
|
||
overflow: clip
|
||
}
|
||
|
||
.flip-item.is-2 {
|
||
background-color: #ff812d
|
||
}
|
||
|
||
.flip-item.is-3 {
|
||
background-color: #f5c939
|
||
}
|
||
|
||
.flip-item.is-4 {
|
||
background-color: #ca9dfe
|
||
}
|
||
|
||
.flip-item.is-5 {
|
||
background-color: #7ae66a
|
||
}
|
||
|
||
.flip-item.is-6 {
|
||
background-color: #f897b4
|
||
}
|
||
|
||
.flip-list-w {
|
||
grid-column-gap: 1rem;
|
||
grid-row-gap: 1rem;
|
||
grid-template-rows: auto auto;
|
||
grid-template-columns: 1fr 1fr 1fr;
|
||
grid-auto-columns: 1fr;
|
||
width: 100%;
|
||
margin-bottom: 0;
|
||
padding-left: 0;
|
||
display: grid
|
||
}
|
||
|
||
.flip-list-w.list {
|
||
flex-flow: column;
|
||
grid-template-columns: 1fr 1fr 1fr;
|
||
justify-content: flex-start;
|
||
align-items: stretch;
|
||
width: 40%;
|
||
max-width: 30rem;
|
||
display: flex
|
||
}
|
||
|
||
.item-num {
|
||
border-radius: var(--rounded-xs);
|
||
background-color: #24281f1a;
|
||
padding: .2rem;
|
||
font-size: .625rem;
|
||
line-height: 1em
|
||
}
|
||
|
||
.abs-img {
|
||
justify-content: center;
|
||
align-items: center;
|
||
height: 88%;
|
||
display: flex;
|
||
position: absolute;
|
||
inset: auto 0% auto auto
|
||
}
|
||
|
||
.abs-img.smaller {
|
||
height: 80%
|
||
}
|
||
|
||
.abs-img.smaller.is--tomato {
|
||
padding-right: 1rem
|
||
}
|
||
|
||
.slide {
|
||
aspect-ratio: 708/490;
|
||
border-radius: var(--rounded-1);
|
||
background-color: #89dde4;
|
||
flex: none;
|
||
width: 52rem;
|
||
padding: 2.5rem;
|
||
display: flex;
|
||
overflow: clip
|
||
}
|
||
|
||
.slides {
|
||
cursor: grab;
|
||
flex-flow: row;
|
||
justify-content: center;
|
||
align-items: center;
|
||
display: flex
|
||
}
|
||
|
||
.slide-col {
|
||
flex: 1
|
||
}
|
||
|
||
.slide-col.flex-ve {
|
||
flex-flow: column;
|
||
justify-content: space-between;
|
||
display: flex
|
||
}
|
||
|
||
.slide-img {
|
||
object-fit: contain;
|
||
justify-content: center;
|
||
align-items: center;
|
||
width: 100%;
|
||
height: 100%;
|
||
display: flex
|
||
}
|
||
|
||
.slide-text-block {
|
||
grid-column-gap: 1rem;
|
||
grid-row-gap: 1rem;
|
||
flex-flow: column;
|
||
display: flex
|
||
}
|
||
|
||
.slide-outer {
|
||
flex: none;
|
||
padding-left: .75rem;
|
||
padding-right: .75rem;
|
||
position: relative
|
||
}
|
||
|
||
.explainer-w {
|
||
z-index: 5;
|
||
pointer-events: auto;
|
||
justify-content: flex-end;
|
||
align-items: center;
|
||
width: 94%;
|
||
height: 10rem;
|
||
margin-top: 3rem;
|
||
margin-bottom: 3rem;
|
||
display: flex;
|
||
position: relative
|
||
}
|
||
|
||
.explainer-comp {
|
||
border-radius: var(--rounded-1);
|
||
background-color: var(--white);
|
||
flex-flow: column;
|
||
flex: none;
|
||
justify-content: flex-start;
|
||
padding-bottom: .75rem;
|
||
padding-left: .75rem;
|
||
padding-right: .75rem;
|
||
display: flex;
|
||
position: absolute;
|
||
inset: 0% 0% auto auto
|
||
}
|
||
|
||
.explainer-he {
|
||
font-size: .875rem;
|
||
font-weight: 600
|
||
}
|
||
|
||
.btn {
|
||
background-color: #efefef00;
|
||
justify-content: center;
|
||
align-items: center;
|
||
width: 1.6rem;
|
||
height: 1.6rem;
|
||
padding: 0;
|
||
display: flex
|
||
}
|
||
|
||
.btn.copy {
|
||
border-radius: var(--rounded-1);
|
||
outline-offset: 0px;
|
||
cursor: pointer;
|
||
outline: 1px solid #141b1333;
|
||
justify-content: center;
|
||
align-items: center;
|
||
width: 100%;
|
||
padding: .375rem .625rem;
|
||
transition: background-color .2s;
|
||
display: flex
|
||
}
|
||
|
||
.btn.flip-switch-btn {
|
||
width: auto;
|
||
height: auto;
|
||
padding: .4rem;
|
||
transition: color .2s,background-color .2s
|
||
}
|
||
|
||
.btn.flip-switch-btn.current {
|
||
border-radius: var(--rounded-1);
|
||
background-color: var(--primary);
|
||
pointer-events: none;
|
||
color: #ffe9cf;
|
||
pointer-events: none;
|
||
pointer-events: none;
|
||
background-color: #270f03;
|
||
border-radius: .375rem
|
||
}
|
||
|
||
.btn.slider-dot {
|
||
background-color: #270f031a;
|
||
border-radius: 100%;
|
||
width: 1rem;
|
||
height: 1rem;
|
||
transition: background-color .2s
|
||
}
|
||
|
||
.btn.slider-dot.current {
|
||
background-color: var(--primary);
|
||
background-color: #270f03
|
||
}
|
||
|
||
.btn.arrow {
|
||
border-radius: var(--rounded-1);
|
||
border: 1px solid #0003;
|
||
width: auto;
|
||
height: auto
|
||
}
|
||
|
||
.btn.copy {
|
||
outline-offset: 0px;
|
||
cursor: pointer;
|
||
border-radius: .375rem;
|
||
outline: 1px solid #141b1333;
|
||
justify-content: center;
|
||
align-items: center;
|
||
width: 100%;
|
||
padding: .375rem .625rem;
|
||
transition: background-color .2s;
|
||
display: flex
|
||
}
|
||
|
||
.btn.copy:hover {
|
||
background-color: #69e05f
|
||
}
|
||
|
||
.btn.arrow {
|
||
border: 1px solid #0003;
|
||
border-radius: .375rem;
|
||
width: auto;
|
||
height: auto
|
||
}
|
||
|
||
.plus-icon-w {
|
||
aspect-ratio: 1;
|
||
outline-offset: 0px;
|
||
border-radius: 100%;
|
||
outline: 1px solid #270f03;
|
||
justify-content: center;
|
||
align-items: center;
|
||
width: 1em;
|
||
display: flex;
|
||
position: relative
|
||
}
|
||
|
||
.text-block {
|
||
font-weight: 400;
|
||
line-height: 1em
|
||
}
|
||
|
||
.btn-cent-w {
|
||
grid-column-gap: .8rem;
|
||
grid-row-gap: .8rem;
|
||
display: flex
|
||
}
|
||
|
||
.plus-line {
|
||
background-color: var(--primary);
|
||
width: 1px;
|
||
height: 50%;
|
||
position: absolute
|
||
}
|
||
|
||
.plus-line.rotate {
|
||
width: 50%;
|
||
height: 1px
|
||
}
|
||
|
||
.inertia-slide {
|
||
aspect-ratio: 517/439;
|
||
border-radius: var(--rounded-1);
|
||
background-color: #ff812df2;
|
||
flex: none;
|
||
justify-content: center;
|
||
align-items: center;
|
||
width: 50vw;
|
||
display: flex;
|
||
position: absolute
|
||
}
|
||
|
||
.img-full {
|
||
height: 100%
|
||
}
|
||
|
||
.toggle-w {
|
||
width: 18rem;
|
||
height: 10rem;
|
||
margin-bottom: 0;
|
||
position: relative
|
||
}
|
||
|
||
.toggle-html-input {
|
||
opacity: 0
|
||
}
|
||
|
||
.toggle-slider {
|
||
cursor: pointer;
|
||
background-color: #ffe9cf;
|
||
border: .55rem solid #ffe9cf;
|
||
border-radius: 10rem;
|
||
padding: .5rem;
|
||
display: flex;
|
||
position: absolute;
|
||
inset: 0%
|
||
}
|
||
|
||
.toggle-ball {
|
||
aspect-ratio: 1;
|
||
pointer-events: none;
|
||
background-color: #3875f9;
|
||
border: .4rem solid #3875f9;
|
||
border-radius: 100%;
|
||
width: 8rem;
|
||
transition: background-color .2s,border-color .2s
|
||
}
|
||
|
||
.explainer-expandable-w {
|
||
grid-column-gap: 16px;
|
||
grid-row-gap: 16px;
|
||
flex-flow: column;
|
||
grid-template-rows: auto auto;
|
||
grid-template-columns: 1fr 1fr;
|
||
grid-auto-columns: 1fr;
|
||
justify-content: flex-end;
|
||
display: flex
|
||
}
|
||
|
||
.explainer-overflow {
|
||
width: 100%;
|
||
overflow: hidden
|
||
}
|
||
|
||
.explainer-par {
|
||
max-width: 25ch;
|
||
margin-bottom: 0;
|
||
padding-top: .4rem;
|
||
padding-bottom: .4rem
|
||
}
|
||
|
||
.div {
|
||
cursor: pointer;
|
||
margin-bottom: 0;
|
||
padding-top: .4rem;
|
||
padding-bottom: .75rem;
|
||
position: relative
|
||
}
|
||
|
||
.input {
|
||
opacity: 0;
|
||
position: absolute
|
||
}
|
||
|
||
.span {
|
||
z-index: 2;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
display: flex;
|
||
position: relative
|
||
}
|
||
|
||
.footer-line {
|
||
justify-content: space-between;
|
||
width: 100%;
|
||
margin-top: 2rem;
|
||
display: flex
|
||
}
|
||
|
||
.footer-line.separator {
|
||
border-bottom: 1px solid #ffe9cf4d;
|
||
padding-bottom: 2rem
|
||
}
|
||
|
||
.col-half {
|
||
flex: none;
|
||
width: 50%;
|
||
display: flex
|
||
}
|
||
|
||
.col-half.items-r {
|
||
justify-content: flex-end;
|
||
align-items: flex-end
|
||
}
|
||
|
||
.op-70 {
|
||
grid-column-gap: 1rem;
|
||
grid-row-gap: 1rem;
|
||
opacity: .7;
|
||
display: flex
|
||
}
|
||
|
||
.op-7 {
|
||
opacity: .7;
|
||
color: #ffe9cf80
|
||
}
|
||
|
||
._w-ch {
|
||
max-width: 41ch
|
||
}
|
||
|
||
.sub-nav-bg {
|
||
background-color: var(--secondary);
|
||
color: var(--primary);
|
||
border-radius: .7rem;
|
||
padding: .4rem .3rem;
|
||
overflow: clip;
|
||
transform: translateY(-200%)
|
||
}
|
||
|
||
.sub-nav-bg.show {
|
||
transform: translate(0)
|
||
}
|
||
|
||
.current-highlight {
|
||
border: 1px solid var(--primary);
|
||
border-radius: var(--rounded-1);
|
||
position: absolute;
|
||
inset: 0%
|
||
}
|
||
|
||
.flip-btn-w {
|
||
grid-column-gap: .2rem;
|
||
grid-row-gap: .2rem;
|
||
margin-bottom: 2rem;
|
||
font-weight: 500;
|
||
display: flex
|
||
}
|
||
|
||
.ext-link {
|
||
color: var(--secondary);
|
||
cursor: pointer;
|
||
text-decoration: none
|
||
}
|
||
|
||
.slider-ctrls-w {
|
||
grid-column-gap: 2rem;
|
||
grid-row-gap: 2rem;
|
||
align-items: center;
|
||
display: flex
|
||
}
|
||
|
||
.dots-w {
|
||
grid-column-gap: 1rem;
|
||
grid-row-gap: 1rem;
|
||
margin-bottom: 0;
|
||
padding-left: 0;
|
||
display: flex
|
||
}
|
||
|
||
.arrow-btn {
|
||
justify-content: center;
|
||
align-items: center;
|
||
padding: .6875rem;
|
||
display: flex
|
||
}
|
||
|
||
.slider-progress-w {
|
||
background-color: #270f031a;
|
||
border-radius: 9rem;
|
||
min-width: 10rem;
|
||
height: 1em;
|
||
position: relative;
|
||
overflow: clip
|
||
}
|
||
|
||
.progress-bar {
|
||
background-color: var(--primary);
|
||
border-radius: 3rem;
|
||
width: 50%;
|
||
height: 100%
|
||
}
|
||
|
||
.toggle-slider-shadow {
|
||
background-color: var(--primary);
|
||
opacity: .4;
|
||
filter: blur(2px);
|
||
border-radius: 5rem;
|
||
position: absolute;
|
||
inset: 0%;
|
||
transform: translateY(15%)
|
||
}
|
||
|
||
.hero-running-w {
|
||
justify-content: center;
|
||
align-items: center;
|
||
height: 100%;
|
||
display: flex;
|
||
position: relative;
|
||
transform: scale(1.3)
|
||
}
|
||
|
||
.alpha-video.layered {
|
||
aspect-ratio: 1;
|
||
width: 140%;
|
||
position: absolute;
|
||
transform: scaleX(-1)
|
||
}
|
||
|
||
.hero-overlay-item {
|
||
pointer-events: auto;
|
||
justify-content: center;
|
||
align-items: center;
|
||
height: 70%;
|
||
display: flex
|
||
}
|
||
|
||
.hero-overlay-item.sky {
|
||
justify-content: center;
|
||
align-items: center;
|
||
display: flex;
|
||
position: relative
|
||
}
|
||
|
||
.hero-overlay-item.filler {
|
||
pointer-events: none
|
||
}
|
||
|
||
.sky-hero-w {
|
||
justify-content: center;
|
||
align-items: center;
|
||
width: 100%;
|
||
height: 100%;
|
||
display: flex;
|
||
position: absolute
|
||
}
|
||
|
||
.img {
|
||
object-fit: cover;
|
||
width: 100%;
|
||
height: 100%
|
||
}
|
||
|
||
.img.layer-up {
|
||
z-index: 23;
|
||
position: relative
|
||
}
|
||
|
||
.img.scale-up {
|
||
transform: scale3d(1none,1none,1none);
|
||
transform-style: preserve-3d
|
||
}
|
||
|
||
.img.abs-top {
|
||
position: absolute;
|
||
inset: 0%
|
||
}
|
||
|
||
.img.abs-top.z-3 {
|
||
z-index: 3
|
||
}
|
||
|
||
.img.multiply {
|
||
opacity: .23;
|
||
mix-blend-mode: multiply
|
||
}
|
||
|
||
.hero-sky-w {
|
||
aspect-ratio: 303/259;
|
||
justify-content: center;
|
||
align-items: center;
|
||
width: 100%;
|
||
display: flex;
|
||
position: relative
|
||
}
|
||
|
||
.hero-img-wrap {
|
||
justify-content: center;
|
||
align-items: center;
|
||
width: 100%;
|
||
height: 100%;
|
||
display: flex;
|
||
position: relative
|
||
}
|
||
|
||
.swap-img {
|
||
width: 100%;
|
||
height: 100%
|
||
}
|
||
|
||
.swap-img.top {
|
||
object-fit: cover;
|
||
height: 80%;
|
||
position: absolute
|
||
}
|
||
|
||
.hero-slider-w {
|
||
justify-content: center;
|
||
align-items: center;
|
||
height: 100%;
|
||
display: flex
|
||
}
|
||
|
||
.hero-card {
|
||
border-radius: var(--rounded-1);
|
||
background-color: #89dde4;
|
||
justify-content: center;
|
||
align-items: center;
|
||
display: flex;
|
||
position: relative
|
||
}
|
||
|
||
.hero-card.layer-1 {
|
||
position: absolute
|
||
}
|
||
|
||
.hero-card-img {
|
||
width: 100%;
|
||
max-width: 10rem
|
||
}
|
||
|
||
.overflow-w {
|
||
padding: 1rem 3rem 3rem;
|
||
position: relative;
|
||
top: -1rem;
|
||
overflow: clip
|
||
}
|
||
|
||
.scribbles-svg {
|
||
z-index: 2;
|
||
pointer-events: none;
|
||
color: var(--white);
|
||
width: 310%;
|
||
position: absolute;
|
||
top: -205%
|
||
}
|
||
|
||
.overflow {
|
||
height: 1.4em;
|
||
overflow: clip
|
||
}
|
||
|
||
.scroller-text {
|
||
text-transform: uppercase;
|
||
white-space: nowrap
|
||
}
|
||
|
||
.scroller-line {
|
||
background-color: var(--primary);
|
||
color: var(--secondary);
|
||
align-items: center;
|
||
display: flex
|
||
}
|
||
|
||
.scroller-line.first {
|
||
transform: translateY(20%)rotate(-4deg)
|
||
}
|
||
|
||
.scroller-line.second {
|
||
transform: translateY(-30%)rotate(6deg)
|
||
}
|
||
|
||
.hero-img-tx-w {
|
||
width: 100%;
|
||
height: 100%;
|
||
display: flex;
|
||
position: relative;
|
||
transform: scale(2)
|
||
}
|
||
|
||
.code-block {
|
||
display: none
|
||
}
|
||
|
||
.explainer-comp-2 {
|
||
background-color: #fef8f1;
|
||
border-radius: .375rem;
|
||
flex-flow: column;
|
||
flex: none;
|
||
justify-content: flex-start;
|
||
padding-bottom: .75rem;
|
||
padding-left: .75rem;
|
||
padding-right: .75rem;
|
||
display: flex;
|
||
position: absolute;
|
||
inset: 0% 0% auto auto
|
||
}
|
||
|
||
.plus-line-2 {
|
||
background-color: #270f03;
|
||
width: 1px;
|
||
height: 50%;
|
||
position: absolute
|
||
}
|
||
|
||
.plus-line-2.rotate {
|
||
width: 50%;
|
||
height: 1px
|
||
}
|
||
|
||
.item-num-2 {
|
||
background-color: #24281f1a;
|
||
border-radius: .2rem;
|
||
padding: .2rem;
|
||
font-size: .625rem;
|
||
line-height: 1em
|
||
}
|
||
|
||
.sec-2 {
|
||
flex-flow: column;
|
||
justify-content: center;
|
||
align-items: center;
|
||
min-height: 40svh;
|
||
padding-top: 6rem;
|
||
padding-bottom: 6rem;
|
||
display: flex;
|
||
position: relative
|
||
}
|
||
|
||
.sec-2.reorganise {
|
||
justify-content: flex-start;
|
||
align-items: center
|
||
}
|
||
|
||
.sec-2.scrolltrigger-sec {
|
||
flex-flow: column;
|
||
justify-content: flex-start;
|
||
align-items: center;
|
||
height: 400svh;
|
||
padding-top: 0;
|
||
padding-bottom: 0
|
||
}
|
||
|
||
.sec-2.inertia {
|
||
overflow: clip
|
||
}
|
||
|
||
.flip-item-2 {
|
||
grid-column-gap: .6rem;
|
||
grid-row-gap: .6rem;
|
||
aspect-ratio: 389/193;
|
||
outline-offset: 0px;
|
||
background-color: #00c5c5;
|
||
border-radius: .375rem;
|
||
outline: 1px solid #0000000d;
|
||
flex-flow: column;
|
||
justify-content: space-between;
|
||
align-items: flex-start;
|
||
padding: 1.5rem;
|
||
display: flex;
|
||
position: relative;
|
||
overflow: clip
|
||
}
|
||
|
||
.flip-item-2.is-4 {
|
||
background-color: #ca9dfe
|
||
}
|
||
|
||
.flip-item-2.is-6 {
|
||
background-color: #f897b4
|
||
}
|
||
|
||
.flip-item-2.is-2 {
|
||
background-color: #ff812d
|
||
}
|
||
|
||
.flip-item-2.is-3 {
|
||
background-color: #f5c939
|
||
}
|
||
|
||
.flip-item-2.is-5 {
|
||
background-color: #7ae66a
|
||
}
|
||
|
||
.comp-2 {
|
||
grid-column-gap: 1.5rem;
|
||
grid-row-gap: 1.5rem;
|
||
flex-flow: column;
|
||
flex: none;
|
||
justify-content: center;
|
||
align-items: center;
|
||
width: 94%;
|
||
min-width: 20vw;
|
||
max-width: 1620px;
|
||
display: flex;
|
||
position: relative
|
||
}
|
||
|
||
.sticky-w-2 {
|
||
justify-content: center;
|
||
align-items: center;
|
||
width: 100%;
|
||
height: 100svh;
|
||
padding-top: 6rem;
|
||
padding-bottom: 6rem;
|
||
display: flex;
|
||
position: sticky;
|
||
top: 0
|
||
}
|
||
|
||
.plus-line-3 {
|
||
background-color: #270f03;
|
||
width: 1px;
|
||
height: 50%;
|
||
position: absolute
|
||
}
|
||
|
||
.plus-line-3.rotate {
|
||
width: 50%;
|
||
height: 1px
|
||
}
|
||
|
||
.sky-scroller-2 {
|
||
pointer-events: auto;
|
||
border-radius: .375rem;
|
||
width: 70%;
|
||
max-width: 1620px;
|
||
height: 29rem;
|
||
overflow: clip
|
||
}
|
||
|
||
.comp-3 {
|
||
grid-column-gap: 1.5rem;
|
||
grid-row-gap: 1.5rem;
|
||
flex-flow: column;
|
||
flex: none;
|
||
justify-content: center;
|
||
align-items: center;
|
||
width: 94%;
|
||
min-width: 20vw;
|
||
max-width: 1620px;
|
||
display: flex;
|
||
position: relative
|
||
}
|
||
|
||
.comp-3.video {
|
||
max-width: 100%
|
||
}
|
||
|
||
.plus-line-4 {
|
||
background-color: #270f03;
|
||
width: 1px;
|
||
height: 50%;
|
||
position: absolute
|
||
}
|
||
|
||
.plus-line-4.rotate {
|
||
width: 50%;
|
||
height: 1px
|
||
}
|
||
|
||
.slide-2 {
|
||
aspect-ratio: 708/490;
|
||
background-color: #89dde4;
|
||
border-radius: .375rem;
|
||
flex: none;
|
||
width: 55vw;
|
||
padding: 2.5rem;
|
||
display: flex;
|
||
overflow: clip
|
||
}
|
||
|
||
.progress-bar-2 {
|
||
background-color: #270f03;
|
||
border-radius: 3rem;
|
||
width: 50%;
|
||
height: 100%
|
||
}
|
||
|
||
.comp-4 {
|
||
grid-column-gap: 1.5rem;
|
||
grid-row-gap: 1.5rem;
|
||
flex-flow: column;
|
||
flex: none;
|
||
justify-content: center;
|
||
align-items: center;
|
||
width: 94%;
|
||
min-width: 20vw;
|
||
max-width: 1620px;
|
||
display: flex;
|
||
position: relative
|
||
}
|
||
|
||
.comp-4.slider-w {
|
||
width: 100%;
|
||
max-width: 100%;
|
||
overflow: clip
|
||
}
|
||
|
||
.comp-4.inertia {
|
||
flex-flow: row;
|
||
height: 60svh
|
||
}
|
||
|
||
.comp-4.text-exp {
|
||
grid-column-gap: 1.5rem;
|
||
grid-row-gap: 1.5rem;
|
||
flex-flow: wrap;
|
||
grid-template-rows: auto auto;
|
||
grid-template-columns: 1fr 1fr 1fr;
|
||
grid-auto-columns: 1fr;
|
||
width: 80%;
|
||
margin-bottom: 0;
|
||
padding-left: 0;
|
||
display: grid
|
||
}
|
||
|
||
.comp-4.video {
|
||
max-width: 100%
|
||
}
|
||
|
||
.inertia-slide-2 {
|
||
aspect-ratio: 517/439;
|
||
background-color: #ff812df2;
|
||
border-radius: .375rem;
|
||
flex: none;
|
||
justify-content: center;
|
||
align-items: center;
|
||
width: 50vw;
|
||
display: flex;
|
||
position: absolute
|
||
}
|
||
|
||
.plus-line-5 {
|
||
background-color: #270f03;
|
||
width: 1px;
|
||
height: 50%;
|
||
position: absolute
|
||
}
|
||
|
||
.plus-line-5.rotate {
|
||
width: 50%;
|
||
height: 1px
|
||
}
|
||
|
||
.text-example-container-2 {
|
||
aspect-ratio: 334/195;
|
||
color: #fef8f1;
|
||
background-color: #270f03;
|
||
border-radius: .375rem;
|
||
justify-content: center;
|
||
align-items: center;
|
||
width: 100%;
|
||
display: flex
|
||
}
|
||
|
||
.plus-line-6 {
|
||
background-color: #270f03;
|
||
width: 1px;
|
||
height: 50%;
|
||
position: absolute
|
||
}
|
||
|
||
.plus-line-6.rotate {
|
||
width: 50%;
|
||
height: 1px
|
||
}
|
||
|
||
.text-g-item-2 {
|
||
background-color: #0000001a;
|
||
border-radius: .375rem;
|
||
flex-flow: column;
|
||
padding-top: .5rem;
|
||
padding-left: .5rem;
|
||
padding-right: .5rem;
|
||
display: flex
|
||
}
|
||
|
||
.text-g-item-2:hover {
|
||
background-color: #fef8f1
|
||
}
|
||
|
||
.hero-btn-w {
|
||
z-index: 3;
|
||
position: relative
|
||
}
|
||
|
||
.hero-stripe-w {
|
||
color: var(--secondary);
|
||
justify-content: center;
|
||
align-items: center;
|
||
font-family: Anton,Arial,sans-serif;
|
||
font-size: 15vw;
|
||
line-height: 1.1em;
|
||
display: flex;
|
||
position: fixed
|
||
}
|
||
|
||
.hero-stripe-w.is-1 {
|
||
position: absolute;
|
||
transform: translate(0)
|
||
}
|
||
|
||
.hero-stripe-w.higher {
|
||
z-index: 2
|
||
}
|
||
|
||
.hero-stripe {
|
||
grid-column-gap: 2rem;
|
||
grid-row-gap: 2rem;
|
||
background-color: var(--primary);
|
||
flex: none;
|
||
justify-content: flex-start;
|
||
align-items: center;
|
||
padding: .4rem;
|
||
display: flex
|
||
}
|
||
|
||
.hero-stripe-text {
|
||
text-transform: uppercase;
|
||
white-space: nowrap;
|
||
line-height: 1.1em;
|
||
position: relative
|
||
}
|
||
|
||
.hero-inner-img {
|
||
aspect-ratio: 1;
|
||
flex: none;
|
||
width: 10vw;
|
||
position: relative
|
||
}
|
||
|
||
.text-g-item-3 {
|
||
background-color: #0000001a;
|
||
border-radius: .375rem;
|
||
flex-flow: column;
|
||
padding-top: .5rem;
|
||
padding-left: .5rem;
|
||
padding-right: .5rem;
|
||
display: flex
|
||
}
|
||
|
||
.dual-img {
|
||
justify-content: center;
|
||
align-items: center;
|
||
display: flex;
|
||
position: relative
|
||
}
|
||
|
||
.dual-img-img {
|
||
z-index: 1;
|
||
width: 100%;
|
||
height: 100%;
|
||
position: relative
|
||
}
|
||
|
||
.dual-img-shadow {
|
||
mix-blend-mode: multiply;
|
||
position: absolute
|
||
}
|
||
|
||
.marquee-img {
|
||
aspect-ratio: 1;
|
||
width: 13rem;
|
||
height: 100%
|
||
}
|
||
|
||
.mobile-explainer-prompt {
|
||
display: none
|
||
}
|
||
|
||
@media screen and (max-width: 991px) {
|
||
body {
|
||
font-size:12px
|
||
}
|
||
|
||
.comp {
|
||
width: 90%
|
||
}
|
||
|
||
.comp.text-exp {
|
||
grid-template-columns: 1fr 1fr
|
||
}
|
||
|
||
.comp.video {
|
||
width: 100%
|
||
}
|
||
|
||
.sub-nav-w {
|
||
flex-flow: row
|
||
}
|
||
|
||
.font-c.size-screen.overflow-cut {
|
||
font-size: 17vw
|
||
}
|
||
|
||
.abs-img {
|
||
width: 50%
|
||
}
|
||
|
||
.slide {
|
||
width: 70vw
|
||
}
|
||
|
||
.inertia-slide {
|
||
width: 60vw
|
||
}
|
||
|
||
.comp-2,.comp-3 {
|
||
width: 90%
|
||
}
|
||
|
||
.comp-3.video {
|
||
width: 100%
|
||
}
|
||
|
||
.slide-2 {
|
||
width: 70vw
|
||
}
|
||
|
||
.comp-4 {
|
||
width: 90%
|
||
}
|
||
|
||
.comp-4.text-exp {
|
||
grid-template-columns: 1fr 1fr
|
||
}
|
||
|
||
.comp-4.video {
|
||
width: 100%
|
||
}
|
||
|
||
.inertia-slide-2 {
|
||
width: 60vw
|
||
}
|
||
|
||
.hero-stripe-w {
|
||
font-size: 20vw
|
||
}
|
||
}
|
||
|
||
@media screen and (max-width: 767px) {
|
||
body {
|
||
--secondary:#ffe9cf;
|
||
--primary: #270f03;
|
||
--y-base: 3rem;
|
||
--nav-height: 3rem;
|
||
--rounded-1: .375rem;
|
||
--white: #fef8f1;
|
||
--rounded-xs: .2rem
|
||
}
|
||
|
||
.sec.hero {
|
||
justify-content: center;
|
||
padding-bottom: 2rem
|
||
}
|
||
|
||
.sec.reorganise {
|
||
overflow: clip
|
||
}
|
||
|
||
.comp {
|
||
width: 95%
|
||
}
|
||
|
||
.comp.text-exp {
|
||
grid-column-gap: .5rem;
|
||
grid-row-gap: .5rem
|
||
}
|
||
|
||
.comp.toggle-w {
|
||
top: -3rem
|
||
}
|
||
|
||
.font-c.hero-text {
|
||
font-size: 14vw
|
||
}
|
||
|
||
.font-c.size-md {
|
||
font-size: 2rem
|
||
}
|
||
|
||
.font-c.size-md._w-ch {
|
||
font-size: 2.15rem
|
||
}
|
||
|
||
.sticky-w {
|
||
height: 80svh
|
||
}
|
||
|
||
.sky-scroller {
|
||
height: 15rem
|
||
}
|
||
|
||
.flip-item {
|
||
padding: .75rem
|
||
}
|
||
|
||
.flip-list-w {
|
||
grid-column-gap: .2rem;
|
||
grid-row-gap: .2rem;
|
||
grid-template-columns: 1fr 1fr
|
||
}
|
||
|
||
.flip-list-w.list {
|
||
width: 50%
|
||
}
|
||
|
||
.abs-img {
|
||
justify-content: center;
|
||
align-items: center
|
||
}
|
||
|
||
.slide {
|
||
padding: 1.6rem
|
||
}
|
||
|
||
.slide-outer {
|
||
padding-left: .3rem;
|
||
padding-right: .3rem
|
||
}
|
||
|
||
.explainer-w {
|
||
filter: drop-shadow(0 2px 5px #0000001a);
|
||
width: 80%;
|
||
height: auto
|
||
}
|
||
|
||
.explainer-comp {
|
||
flex-flow: column;
|
||
align-items: flex-start;
|
||
width: 100%;
|
||
padding-bottom: 0;
|
||
position: static
|
||
}
|
||
|
||
.plus-icon-w,.explainer-copy-btn-w {
|
||
display: none
|
||
}
|
||
|
||
.toggle-w {
|
||
width: 10rem;
|
||
height: 5rem
|
||
}
|
||
|
||
.toggle-slider {
|
||
border-width: .2rem;
|
||
align-items: center
|
||
}
|
||
|
||
.toggle-ball {
|
||
border-width: .2rem;
|
||
width: 4rem;
|
||
height: 4rem
|
||
}
|
||
|
||
.explainer-par {
|
||
max-width: 100%
|
||
}
|
||
|
||
.input {
|
||
opacity: 0
|
||
}
|
||
|
||
.span {
|
||
padding-top: .2rem
|
||
}
|
||
|
||
.hero-running-w {
|
||
transform: scale(1)
|
||
}
|
||
|
||
.img,.swap-img,.swap-img.top {
|
||
object-fit: contain
|
||
}
|
||
|
||
.overflow-w,.scribbles-svg {
|
||
display: none
|
||
}
|
||
|
||
.scroller-line.first {
|
||
z-index: 2;
|
||
position: relative
|
||
}
|
||
|
||
.hero-img-tx-w {
|
||
transform: scale(2)
|
||
}
|
||
|
||
.code-block {
|
||
display: none
|
||
}
|
||
|
||
.explainer-comp-2 {
|
||
width: 100%;
|
||
padding-bottom: 0;
|
||
position: static
|
||
}
|
||
|
||
.sec-2.reorganise {
|
||
overflow: clip
|
||
}
|
||
|
||
.flip-item-2 {
|
||
padding: .75rem
|
||
}
|
||
|
||
.comp-2 {
|
||
width: 95%
|
||
}
|
||
|
||
.sticky-w-2 {
|
||
height: 80svh
|
||
}
|
||
|
||
.sky-scroller-2 {
|
||
height: 15rem
|
||
}
|
||
|
||
.comp-3 {
|
||
width: 95%
|
||
}
|
||
|
||
.slide-2 {
|
||
padding: 1.6rem
|
||
}
|
||
|
||
.comp-4 {
|
||
width: 95%
|
||
}
|
||
|
||
.comp-4.text-exp {
|
||
grid-column-gap: .5rem;
|
||
grid-row-gap: .5rem
|
||
}
|
||
|
||
.hero-stripe-w {
|
||
font-size: 30vw
|
||
}
|
||
|
||
.hero-inner-img {
|
||
width: 26vw
|
||
}
|
||
|
||
.mobile-explainer-prompt {
|
||
border: 1px solid #0000004d;
|
||
border-radius: 3px;
|
||
margin-bottom: .4rem;
|
||
padding: .3rem .6rem;
|
||
display: block
|
||
}
|
||
}
|
||
|
||
@media screen and (max-width: 479px) {
|
||
.comp {
|
||
min-width:80vw
|
||
}
|
||
|
||
.comp.text-exp {
|
||
grid-template-columns: 1fr;
|
||
width: 95%
|
||
}
|
||
|
||
.comp.toggle-w {
|
||
top: -1.5rem
|
||
}
|
||
|
||
.layer.hero-alt.show {
|
||
padding-bottom: 0;
|
||
padding-left: 0;
|
||
padding-right: 0
|
||
}
|
||
|
||
.font-c.size-md {
|
||
margin-top: .2rem;
|
||
font-size: 1.5rem
|
||
}
|
||
|
||
.font-c.size-md._w-ch {
|
||
font-size: 1.5rem
|
||
}
|
||
|
||
.flip-item,.flip-list-w {
|
||
grid-column-gap: .2rem;
|
||
grid-row-gap: .2rem
|
||
}
|
||
|
||
.flip-list-w.list {
|
||
width: 100%
|
||
}
|
||
|
||
.abs-img {
|
||
justify-content: flex-end;
|
||
align-items: center
|
||
}
|
||
|
||
.slide {
|
||
width: 80vw;
|
||
min-height: 16rem;
|
||
padding-left: .8rem;
|
||
padding-right: .4rem
|
||
}
|
||
|
||
.slide-col.flex-ve {
|
||
flex: 1;
|
||
justify-content: space-between
|
||
}
|
||
|
||
.slide-outer {
|
||
padding-right: .3rem
|
||
}
|
||
|
||
.explainer-w {
|
||
justify-content: center;
|
||
align-items: flex-end
|
||
}
|
||
|
||
.toggle-w {
|
||
width: 9rem
|
||
}
|
||
|
||
.explainer-par {
|
||
max-width: 100%
|
||
}
|
||
|
||
.footer-line {
|
||
grid-column-gap: 3rem;
|
||
grid-row-gap: 3rem;
|
||
flex-flow: column
|
||
}
|
||
|
||
.footer-line.separator {
|
||
grid-column-gap: 1rem;
|
||
grid-row-gap: 1rem;
|
||
flex-flow: column
|
||
}
|
||
|
||
.col-half {
|
||
width: 100%
|
||
}
|
||
|
||
.col-half.items-r {
|
||
justify-content: flex-start;
|
||
align-items: flex-end
|
||
}
|
||
|
||
.hero-overlay-item {
|
||
transform: scale(2)
|
||
}
|
||
|
||
.hero-overlay-item.sky {
|
||
pointer-events: none;
|
||
transform: translate(-40%,-50%)scale(3)
|
||
}
|
||
|
||
.hero-overlay-item.slider {
|
||
transform: translate(50%,10%)scale(2)
|
||
}
|
||
|
||
.hero-overlay-item.run {
|
||
pointer-events: none
|
||
}
|
||
|
||
.hero-overlay-item.imgs {
|
||
pointer-events: none;
|
||
transform: translate(50%,-30%)scale(2)
|
||
}
|
||
|
||
.hero-overlay-item.text {
|
||
pointer-events: none;
|
||
transform: translateY(-40%)scale(2)
|
||
}
|
||
|
||
.img,.swap-img,.swap-img.top {
|
||
object-fit: contain
|
||
}
|
||
|
||
.hero-slider-w {
|
||
pointer-events: none
|
||
}
|
||
|
||
.scroller-text {
|
||
font-size: 50vw
|
||
}
|
||
|
||
.flip-item-2 {
|
||
grid-column-gap: .2rem;
|
||
grid-row-gap: .2rem
|
||
}
|
||
|
||
.comp-2,.comp-3 {
|
||
min-width: 80vw
|
||
}
|
||
|
||
.slide-2 {
|
||
width: 80vw
|
||
}
|
||
|
||
.comp-4 {
|
||
min-width: 80vw
|
||
}
|
||
|
||
.comp-4.text-exp {
|
||
grid-template-columns: 1fr;
|
||
width: 95%
|
||
}
|
||
|
||
.hero-btn-w {
|
||
z-index: 20;
|
||
position: relative
|
||
}
|
||
|
||
.hero-stripe-w {
|
||
font-size: 25vw
|
||
}
|
||
}
|
||
|
||
</style>
|
||
|
||
<!--<script defer src="http://localhost:6545/app.js"></script>--></head><body><div class="w-embed"><!-- global custom component wrapper -->
|
||
|
||
<style>
|
||
/** Text Highlight */
|
||
::selection {
|
||
background: var(--primary);
|
||
color: var(--secondary);
|
||
text-shadow: none;
|
||
}
|
||
|
||
::-moz-selection {
|
||
background: var(--primary);
|
||
color: var(--secondary);
|
||
text-shadow: none;
|
||
}
|
||
|
||
[data-select="inverse"] ::selection {
|
||
background: var(--secondary);
|
||
color: var(--primary);
|
||
text-shadow: none;
|
||
}
|
||
|
||
[data-select="inverse"] ::-moz-selection {
|
||
background: var(--secondary);
|
||
color: var(--primary);
|
||
text-shadow: none;
|
||
}
|
||
|
||
/** Font Smoothing */
|
||
body {
|
||
-webkit-font-smoothing: antialiased;
|
||
-moz-osx-font-smoothing: grayscale;
|
||
}
|
||
|
||
/** Toggle States */
|
||
[data-css="toggle"] {
|
||
.toggle-ball {
|
||
transform: translateX(0%);
|
||
transition: transform .3s ease-out;
|
||
}
|
||
}
|
||
|
||
[data-css="toggle"]:has(input:checked) {
|
||
.toggle-ball {
|
||
transform: translateX(100%);
|
||
background-color: #10CD00;
|
||
border-color: #10CD00;
|
||
}
|
||
}
|
||
|
||
img {
|
||
user-drag: none;
|
||
-webkit-user-drag: none;
|
||
user-select: none;
|
||
-moz-user-select: none;
|
||
-webkit-user-select: none;
|
||
-ms-user-select: none;
|
||
}
|
||
|
||
/* -- explainer css */
|
||
/* -- explainer css */
|
||
[data-css="explainer"] {
|
||
.explainer-expandable-w {
|
||
display: grid;
|
||
grid-template-columns: 1fr;
|
||
grid-template-rows: 0fr;
|
||
transition: grid-template-rows 0.5s;
|
||
}
|
||
|
||
.plus-icon-w {
|
||
transform: rotate(0deg);
|
||
transition: transform 0.4s ease-in-out;
|
||
}
|
||
|
||
.plus-icon-w > div:nth-child(1) {
|
||
transform: scaleX(1);
|
||
transition: transform 0.4s ease-in-out;
|
||
}
|
||
}
|
||
|
||
[data-css="explainer"]:has(input:checked) {
|
||
.explainer-expandable-w {
|
||
display: grid;
|
||
grid-template-rows: 1fr;
|
||
}
|
||
|
||
.plus-icon-w {
|
||
transform: rotate(90deg);
|
||
}
|
||
|
||
.plus-icon-w > div:nth-child(1) {
|
||
transform: scaleX(0);
|
||
}
|
||
}
|
||
|
||
@media (max-width: 599px)
|
||
{
|
||
[data-css="explainer"] {
|
||
.explainer-expandable-w {
|
||
display: grid;
|
||
grid-template-columns: 1fr;
|
||
grid-template-rows: 1fr;
|
||
transition: grid-template-rows 0.5s;
|
||
}
|
||
}
|
||
}
|
||
|
||
/** -- toggle styles */
|
||
[data-css="toggle"] {
|
||
position: relative;
|
||
|
||
.toggle-slider {
|
||
box-shadow: inset 2px 2px 4px rgba(0, 0, 0, 0.25);
|
||
}
|
||
|
||
.toggle-ball {
|
||
box-shadow: inset 0px 2px 4px rgba(0, 0, 0, 0.15);
|
||
}
|
||
}
|
||
|
||
/* -- sky hero mask */
|
||
.sky-hero-w {
|
||
clip-path: polygon(20% 13%, 65% 14%, 63% 90%, 20% 84%);
|
||
}
|
||
|
||
/* -- slider current style */
|
||
[data-animate="slider"] {
|
||
.current > div {
|
||
background-color: var(--green);
|
||
transition: background-color 0.3s ease-in-out 0.2s;
|
||
}
|
||
}
|
||
|
||
</style>
|
||
@section('content')
|
||
<nav data-module="nav" class="nav-w"><div class="nav"><div class="logo-banner-w"><svg xmlns="http://www.w3.org/2000/svg" width="100%" viewBox="0 0 101 17" fill="none" class="svg _wf-logo"><path d="M73.479 14.2931H75.7679V1.15454H73.479V14.2931Z" fill="currentColor"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M61.0531 14.1589C61.5506 14.3658 62.0564 14.4692 62.5707 14.4692C63.4203 14.4692 64.1805 14.2624 64.8513 13.8487C65.522 13.4351 66.0419 12.8649 66.4108 12.1383C66.7797 11.406 66.9642 10.576 66.9642 9.64807C66.9642 8.72018 66.7741 7.89011 66.394 7.15787C66.0139 6.42562 65.4857 5.85826 64.8094 5.45581C64.133 5.04776 63.3644 4.84653 62.5036 4.85212C61.9558 4.85212 61.4304 4.95832 60.9273 5.17073C60.4242 5.38314 60.005 5.68498 59.6696 6.07626C59.6437 6.10605 59.6186 6.13614 59.5942 6.16653V1.16293H57.2968V14.2931H59.5774L59.5728 13.0665C59.6318 13.1388 59.6949 13.2095 59.7619 13.2786C60.1252 13.6531 60.5556 13.9465 61.0531 14.1589ZM63.4008 12.0377C63.0263 12.2668 62.5986 12.3814 62.1179 12.3814C61.6428 12.3814 61.2068 12.264 60.8099 12.0293C60.4131 11.7889 60.0973 11.4619 59.8625 11.0483C59.6333 10.6347 59.5187 10.1651 59.5187 9.63969C59.5131 9.11426 59.6249 8.64472 59.8541 8.23109C60.0889 7.81186 60.4047 7.48766 60.8016 7.25848C61.1984 7.02371 61.6372 6.90912 62.1179 6.91471C62.5986 6.90912 63.0263 7.02092 63.4008 7.2501C63.7809 7.47368 64.0715 7.79509 64.2727 8.21432C64.4796 8.62795 64.583 9.10308 64.583 9.63969C64.583 10.1763 64.4796 10.6514 64.2727 11.0651C64.0715 11.4787 63.7809 11.8029 63.4008 12.0377Z" fill="currentColor"></path><path d="M30.7368 1.95107H33.3528L35.6929 10.4972L38.1823 1.95107H40.3623L43.0621 10.3257L45.3091 1.95107H47.7071L44.1688 14.2931H41.9134L39.168 6.11181L36.6479 14.2931H34.3673L30.7368 1.95107Z" fill="currentColor"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M51.5702 14.5111C50.6591 14.5167 49.8374 14.3155 49.1051 13.9074C48.3785 13.4938 47.8055 12.9208 47.3863 12.1886C46.9727 11.4563 46.7658 10.6207 46.7658 9.68161C46.7658 8.77049 46.9783 7.94601 47.4031 7.20817C47.8279 6.47033 48.4036 5.8946 49.1303 5.48096C49.8569 5.06732 50.6674 4.8605 51.5618 4.8605C52.5679 4.8605 53.4483 5.08409 54.2029 5.53127C54.9631 5.97844 55.5305 6.61287 55.905 7.43455C56.2851 8.25065 56.422 9.18692 56.3158 10.2434H49.1338C49.1539 10.6643 49.259 11.0472 49.4489 11.3921C49.6613 11.7722 49.9576 12.0684 50.3377 12.2808C50.7178 12.4932 51.1426 12.5994 51.6121 12.5994C51.9698 12.5938 52.3024 12.5324 52.6099 12.415C52.9173 12.292 53.1772 12.1271 53.3896 11.9203C53.6076 11.7135 53.7613 11.4787 53.8508 11.216H56.2488C56.1034 11.8588 55.8128 12.4317 55.3768 12.9348C54.9408 13.4323 54.393 13.8208 53.7334 14.1003C53.0738 14.3797 52.3527 14.5167 51.5702 14.5111ZM49.4573 7.93763C49.3233 8.17122 49.2305 8.42275 49.1789 8.69223H53.9396C53.9051 8.35179 53.8 8.04156 53.6244 7.76155C53.4232 7.43176 53.1493 7.17743 52.8027 6.99856C52.4561 6.8141 52.0649 6.72187 51.6289 6.72187C51.1649 6.72187 50.7429 6.82807 50.3628 7.04048C49.9827 7.25289 49.6809 7.55194 49.4573 7.93763Z" fill="currentColor"></path><path d="M68.6495 5.05335C68.6495 4.30433 68.82 3.63916 69.1609 3.05783C69.5019 2.47091 69.9798 2.01535 70.5947 1.69115C71.2151 1.36136 71.939 1.19087 72.7663 1.17969V3.21714C72.3806 3.22273 72.0508 3.30378 71.7769 3.46029C71.5086 3.61121 71.3018 3.832 71.1565 4.12267C71.0227 4.39026 70.9504 4.70048 70.9398 5.05335H72.716V6.99017H70.9385V14.2931H68.6495V6.99017H67.1738V5.05335H68.6495Z" fill="currentColor"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M81.5868 14.4943C80.6533 14.4943 79.8177 14.2903 79.0798 13.8823C78.3476 13.4686 77.7718 12.8985 77.3526 12.1718C76.939 11.4396 76.7322 10.6095 76.7322 9.68161C76.7322 8.74813 76.939 7.91527 77.3526 7.18302C77.7718 6.44518 78.3476 5.87224 79.0798 5.46419C79.8177 5.05614 80.6533 4.85212 81.5868 4.85212C82.5259 4.85212 83.3643 5.05614 84.1022 5.46419C84.8456 5.87224 85.4241 6.44239 85.8378 7.17463C86.2514 7.90688 86.461 8.74254 86.4666 9.68161C86.461 10.6095 86.2514 11.4396 85.8378 12.1718C85.4297 12.8985 84.854 13.4686 84.1106 13.8823C83.3671 14.2903 82.5259 14.4943 81.5868 14.4943ZM81.5868 12.3898C82.0787 12.3898 82.5147 12.278 82.8948 12.0544C83.2749 11.8253 83.5684 11.5066 83.7752 11.0986C83.982 10.685 84.0854 10.2126 84.0854 9.68161C84.0854 9.145 83.982 8.66988 83.7752 8.25624C83.5684 7.8426 83.2749 7.52399 82.8948 7.3004C82.5147 7.07123 82.0787 6.95664 81.5868 6.95664C81.1005 6.95664 80.6673 7.07123 80.2872 7.3004C79.9127 7.52399 79.622 7.8426 79.4152 8.25624C79.2084 8.66988 79.1078 9.145 79.1134 9.68161C79.1134 10.2126 79.2168 10.685 79.4236 11.0986C79.636 11.5066 79.9267 11.8253 80.2956 12.0544C80.6701 12.278 81.1005 12.3898 81.5868 12.3898Z" fill="currentColor"></path><path d="M88.94 5.05335H86.3911L89.1497 14.2931H91.3799L93.1939 8.39168L95.153 14.2931H97.3497L100.117 5.05335H97.8109L96.2419 10.8045L94.5074 5.05335H92.2771L90.5511 10.9312L88.94 5.05335Z" fill="currentColor"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M26.7493 0.0665716C26.7649 0.0361506 26.7428 0 26.7087 0H19.0047C18.9876 0 18.972 0.00950944 18.9641 0.0246603L15.9961 5.74456C15.9883 5.75965 15.9728 5.76915 15.9558 5.76922L15.9206 5.76937C15.8943 5.76948 15.8733 5.7473 15.8748 5.72097L16.2087 0.0489462C16.2102 0.0226875 16.1893 0.00054444 16.163 0.00054444H10.5197C10.5014 0.00054444 10.4859 0.00900587 10.4786 0.0258239C10.3392 0.35023 8.88016 3.72188 7.61781 5.78228C7.60954 5.79577 7.59507 5.80369 7.57926 5.80376L7.56193 5.80383C7.53635 5.80393 7.51566 5.78302 7.51603 5.75744L7.60002 0.0463877C7.60039 0.0208796 7.57982 0 7.55431 0H0.485657C0.460409 0 0.439941 0.0204672 0.439941 0.0457152V7.01126C0.439941 7.03651 0.460409 7.05698 0.485657 7.05698H6.56435C6.60453 7.05698 6.62478 7.10517 6.59661 7.13382C4.4084 9.35927 0.906551 9.69812 0.482434 9.73148C0.458321 9.73338 0.439941 9.75343 0.439941 9.77761V16.4119C0.439941 16.4388 0.463417 16.4598 0.49019 16.4573C6.63303 15.8853 10.9496 13.4282 13.8046 9.65913C13.8133 9.64771 13.8268 9.64097 13.8411 9.64097H13.8991C13.9334 9.64097 13.9555 9.67731 13.9397 9.70774L10.5906 16.1622C10.5748 16.1927 10.5968 16.229 10.6311 16.229H18.4353C18.4525 16.229 18.4682 16.2194 18.476 16.2042L26.7493 0.0665716Z" fill="currentColor"></path></svg><div class="x-adjust-right">X</div><svg xmlns="http://www.w3.org/2000/svg" width="100%" viewBox="0 0 45 16" fill="none" class="svg gsap-logo"><path d="M23.1708 4.61358C23.1683 4.68942 23.1364 4.76131 23.0818 4.81406C23.0273 4.86681 22.9544 4.89629 22.8785 4.89624H19.8673C19.67 4.89624 19.5051 4.73624 19.5051 4.54158C19.5051 3.66318 19.2011 3.23544 18.5793 3.23544C17.9574 3.23544 17.5563 3.61731 17.5446 4.28451C17.5313 5.02851 17.9521 5.70478 19.1499 6.86638C20.727 8.34584 21.359 9.65625 21.3286 11.3885C21.279 14.1896 19.3745 16.0002 16.4763 16.0002C14.9963 16.0002 13.8657 15.6045 13.1137 14.8237C12.3505 14.0306 12.0006 12.8669 12.0737 11.365C12.0762 11.2891 12.1081 11.2171 12.1628 11.1644C12.2175 11.1116 12.2905 11.0822 12.3665 11.0824H15.4811C15.5245 11.0831 15.5672 11.0934 15.6061 11.1126C15.6451 11.1317 15.6792 11.1593 15.7062 11.1933C15.7298 11.2214 15.747 11.2542 15.7567 11.2896C15.7665 11.3249 15.7685 11.3619 15.7627 11.3981C15.7281 11.94 15.8225 12.3448 16.0358 12.5688C16.1723 12.7138 16.3627 12.7874 16.6001 12.7874C17.1755 12.7874 17.5126 12.381 17.5254 11.6728C17.5361 11.0605 17.3425 10.524 16.2875 9.43864C14.9249 8.10744 13.703 6.73198 13.7409 4.56931C13.7633 3.31491 14.2614 2.16771 15.1441 1.33891C16.0774 0.463178 17.3537 0.000244141 18.8353 0.000244141C20.3195 0.0109108 21.4444 0.434377 22.1788 1.25891C22.8742 2.04024 23.2086 3.16878 23.1718 4.61358H23.1708Z" fill="currentColor"></path><path d="M32.504 15.4734L32.5237 0.575779C32.5243 0.538471 32.5174 0.501426 32.5034 0.466819C32.4895 0.432213 32.4688 0.400744 32.4425 0.374261C32.4162 0.347778 32.3849 0.326816 32.3504 0.312605C32.3159 0.298395 32.2789 0.291224 32.2416 0.291512H27.5813C27.4245 0.291512 27.3557 0.426446 27.3109 0.515512L20.5632 15.3822V15.3848L20.5605 15.3886C20.4858 15.5715 20.6277 15.7672 20.8256 15.7672H24.0832C24.2592 15.7672 24.376 15.7139 24.433 15.603L25.08 14.0483C25.1594 13.8408 25.1744 13.8216 25.4005 13.8216H28.513C28.7296 13.8216 28.7338 13.8259 28.7306 14.0376L28.6608 15.483C28.6602 15.5202 28.6671 15.5572 28.681 15.5918C28.6949 15.6264 28.7156 15.6578 28.7418 15.6843C28.768 15.7108 28.7993 15.7318 28.8337 15.746C28.8682 15.7602 28.9051 15.7675 28.9424 15.7672H32.2336C32.2743 15.7677 32.3147 15.7593 32.3518 15.7425C32.3889 15.7258 32.4219 15.7011 32.4485 15.6702C32.4714 15.6433 32.4882 15.6118 32.4978 15.5779C32.5074 15.5439 32.5095 15.5082 32.504 15.4734ZM26.7386 10.4995C26.7141 10.4996 26.6895 10.4987 26.665 10.4968C26.6536 10.4959 26.6426 10.4925 26.6326 10.4868C26.6227 10.4811 26.6141 10.4733 26.6075 10.464C26.6009 10.4546 26.5964 10.4439 26.5944 10.4326C26.5923 10.4214 26.5928 10.4098 26.5957 10.3987C26.6021 10.3774 26.6112 10.348 26.6245 10.3123L28.9584 4.53738C28.9794 4.4804 29.0036 4.42466 29.0309 4.37045C29.0688 4.29258 29.1146 4.28725 29.129 4.34485C29.1413 4.39285 28.8613 10.2744 28.8613 10.2744C28.8394 10.4947 28.8293 10.5038 28.6122 10.5219L26.7408 10.5006H26.7365L26.7386 10.4995Z" fill="currentColor"></path><path d="M39.1427 0.291395H36.6685C36.5379 0.291395 36.3912 0.360728 36.3571 0.516462L32.9139 15.4658C32.9063 15.4995 32.9067 15.5345 32.9148 15.5681C32.9229 15.6016 32.9387 15.6329 32.9608 15.6594C32.9895 15.6932 33.0252 15.7203 33.0655 15.7389C33.1057 15.7575 33.1495 15.7672 33.1939 15.7671H36.2861C36.4525 15.7671 36.5661 15.6855 36.5971 15.5442L36.9725 13.8498C36.9992 13.7175 36.9533 13.6151 36.8349 13.5533C36.7794 13.5246 36.7239 13.4958 36.6685 13.4669L36.1325 13.1879L35.5992 12.9095L35.3928 12.8023C35.376 12.794 35.3619 12.781 35.3522 12.7649C35.3425 12.7489 35.3375 12.7304 35.3379 12.7117C35.3386 12.6839 35.3501 12.6575 35.3701 12.6381C35.39 12.6188 35.4167 12.608 35.4445 12.6082L37.1389 12.6157C37.6456 12.6183 38.1528 12.5826 38.6515 12.4909C42.1608 11.8429 44.4915 9.0322 44.5587 5.20766C44.6163 1.94366 42.7944 0.289795 39.1453 0.289795L39.1427 0.291395ZM38.3005 9.1874H38.2344C38.0856 9.1874 38.0595 9.1714 38.0552 9.16606C38.0525 9.16233 39.0323 4.86046 39.0328 4.8546C39.0579 4.73033 39.0568 4.65886 38.98 4.61673C38.8819 4.56233 37.4515 3.8082 37.4515 3.8082C37.4348 3.79945 37.421 3.78622 37.4114 3.77001C37.4019 3.7538 37.3971 3.73525 37.3976 3.71646C37.3983 3.68906 37.4097 3.66302 37.4293 3.64389C37.4489 3.62476 37.4752 3.61405 37.5027 3.61406H39.7645C40.4685 3.63539 40.8611 4.26526 40.8424 5.341C40.8099 7.20286 39.9245 9.1218 38.3005 9.1874Z" fill="currentColor"></path><path d="M13.152 7.47318V7.48011L12.5786 9.96864C12.5477 10.1094 12.4069 10.2124 12.2448 10.2124H11.552C11.527 10.2125 11.5027 10.2206 11.4828 10.2356C11.4628 10.2506 11.4481 10.2716 11.441 10.2956C10.8021 12.463 9.93704 13.9526 8.79464 14.847C7.82291 15.6086 6.62504 15.9638 5.02451 15.9638C3.58664 15.9638 2.61705 15.5014 1.79465 14.5884C0.707712 13.382 0.258645 11.4065 0.530645 9.02678C1.02131 4.55904 3.33864 0.050777 7.80051 0.050777C9.15784 0.0390437 10.2234 0.45771 10.9648 1.29344C11.7488 2.17771 12.1466 3.50891 12.1488 5.25184C12.1468 5.32825 12.1151 5.40087 12.0605 5.45427C12.0058 5.50766 11.9324 5.5376 11.856 5.53771H8.58664C8.52936 5.53595 8.47492 5.5123 8.43454 5.47162C8.39417 5.43095 8.37092 5.37634 8.36958 5.31904C8.34291 4.11371 7.98558 3.52704 7.27518 3.52704C6.02184 3.52704 5.28264 5.22838 4.89064 6.17131C4.34291 7.48864 4.06398 8.91958 4.11891 10.3446C4.14505 11.0081 4.25171 11.9409 4.88158 12.3276C5.43998 12.67 6.23678 12.4428 6.71944 12.0636C7.20158 11.6838 7.58984 11.0273 7.75304 10.4284C7.77598 10.3452 7.77758 10.2806 7.75571 10.2518C7.73278 10.222 7.66931 10.215 7.62078 10.215H6.78131C6.73688 10.2152 6.69295 10.2056 6.6526 10.187C6.61225 10.1684 6.57645 10.1412 6.54771 10.1073C6.52566 10.0809 6.51 10.0497 6.50195 10.0162C6.4939 9.98271 6.49368 9.94783 6.50131 9.91424L7.07518 7.42144C7.10344 7.29398 7.21918 7.19744 7.36158 7.18038V7.17398H12.8709C12.8837 7.17398 12.897 7.17398 12.9093 7.17664C13.0522 7.19531 13.153 7.32811 13.1504 7.47318H13.152Z" fill="currentColor"></path></svg></div><div class="code-block w-embed w-script"><script>
|
||
{
|
||
const params = {
|
||
duration: 0.8,
|
||
ease: "expo.out",
|
||
};
|
||
|
||
const handleSecondaryVisibility = (secondary) => {
|
||
const observer = new IntersectionObserver(
|
||
(entries) => {
|
||
entries.forEach((entry) => {
|
||
if (entry.isIntersecting) {
|
||
gsap.to(secondary, {
|
||
yPercent: 200,
|
||
...params,
|
||
});
|
||
} else {
|
||
gsap.to(secondary, {
|
||
yPercent: 0,
|
||
...params,
|
||
});
|
||
}
|
||
});
|
||
},
|
||
{
|
||
threshold: 0.02,
|
||
rootMargin: "-10% 0px",
|
||
}
|
||
);
|
||
|
||
const contentElement = document.getElementById("content");
|
||
if (contentElement) {
|
||
observer.observe(contentElement);
|
||
}
|
||
};
|
||
|
||
addEventListener("GSAPReady", (event) => {
|
||
const wrapper = document.querySelector("[data-module='nav']");
|
||
if (!wrapper) return;
|
||
const main = wrapper.children[0];
|
||
const secondary = wrapper.children[1].children[0];
|
||
|
||
handleSecondaryVisibility(secondary);
|
||
});
|
||
}
|
||
|
||
</script>
|
||
|
||
<script>
|
||
{
|
||
/** Section Selector */
|
||
const createObserver = (section, cb) => {
|
||
const observer = new IntersectionObserver((entries) => {
|
||
entries.forEach((entry) => {
|
||
if (entry.isIntersecting && entry.intersectionRatio >= 0.1) {
|
||
cb(entry.target);
|
||
}
|
||
});
|
||
}, {
|
||
threshold: 0.2 // This means the callback will fire when at least 10% is visible
|
||
});
|
||
observer.observe(section);
|
||
};
|
||
|
||
addEventListener("GSAPReady", (event) => {
|
||
const { lenis } = event.detail;
|
||
|
||
const wrapper = document.querySelector("[data-animate='sectionselector']");
|
||
const items = [...wrapper.children];
|
||
const highlight = wrapper.querySelector("[data-selector='highlight']");
|
||
let currentIndex = 0;
|
||
|
||
const sections = [...document.querySelectorAll("section")];
|
||
|
||
sections.forEach((section, index) => {
|
||
createObserver(section, () => {
|
||
items[currentIndex].classList.remove("current");
|
||
currentIndex = index;
|
||
items[currentIndex].classList.add("current");
|
||
moveHighlightTo(index);
|
||
});
|
||
});
|
||
|
||
let flipAnimation = null
|
||
const moveHighlightTo = (index) => {
|
||
const state = Flip.getState(highlight);
|
||
items[index].appendChild(highlight);
|
||
|
||
if (flipAnimation) flipAnimation.kill()
|
||
flipAnimation = Flip.from(state, {
|
||
duration: 0.5,
|
||
ease: "expo.out",
|
||
});
|
||
};
|
||
|
||
items.forEach((item, index) => {
|
||
item.addEventListener("click", () => {
|
||
lenis.scrollTo("#" + items[index].dataset.to);
|
||
});
|
||
|
||
item.addEventListener("mouseenter", () => {
|
||
moveHighlightTo(index);
|
||
});
|
||
|
||
item.addEventListener("mouseleave", () => {
|
||
moveHighlightTo(currentIndex);
|
||
});
|
||
});
|
||
});
|
||
}
|
||
|
||
</script></div></div><div class="overflow-w"><div class="sub-nav-bg" style="translate: none; rotate: none; scale: none; transform: translate(0%, 200%) translate(0px, -71.9062px);"><ul data-animate="sectionselector" role="list" class="sub-nav-w w-list-unstyled"><li data-to="flip" class="link-li-w"><div>Flip</div></li><li data-to="scrolltrigger" class="link-li-w"><div>Scroll Trigger</div></li><li data-to="slider" class="link-li-w current"><div>Slider</div><div data-selector="highlight" class="current-highlight" data-flip-id="auto-1" style=""></div></li><li data-to="inertia" class="link-li-w"><div>Inertia</div></li><li data-to="text" class="link-li-w"><div>Text Effects</div></li><li data-to="marquee" class="link-li-w"><div>Marquee</div></li></ul></div></div></nav>
|
||
<div id="smooth-wrapper" data-start="hidden" class="scroll-wrapper" style="opacity: 1; visibility: inherit;"><main id="smooth-content" class="main"><header id="hero" data-module="hero" class="sec hero"><div class="comp"><h1 data-hero="title" aria-label="make it mean more with gsap" class="font-c hero-text"><span class="main-he-span" aria-label="MAKE IT MEAN"><div aria-hidden="true" style="position: relative; display: inline-block; translate: none; rotate: none; scale: none; transform: translate(0px, 0px);">M</div><div aria-hidden="true" style="position: relative; display: inline-block; translate: none; rotate: none; scale: none; transform: translate(0px, 0px);">A</div><div aria-hidden="true" style="position: relative; display: inline-block; translate: none; rotate: none; scale: none; transform: translate(0px, 0px);">K</div><div aria-hidden="true" style="position: relative; display: inline-block; translate: none; rotate: none; scale: none; transform: translate(0px, 0px);">E</div> <div aria-hidden="true" style="position: relative; display: inline-block; translate: none; rotate: none; scale: none; transform: translate(0px, 0px);">I</div><div aria-hidden="true" style="position: relative; display: inline-block; translate: none; rotate: none; scale: none; transform: translate(0px, 0px);">T</div> <div aria-hidden="true" style="position: relative; display: inline-block; translate: none; rotate: none; scale: none; transform: translate(0px, 0px);">M</div><div aria-hidden="true" style="position: relative; display: inline-block; translate: none; rotate: none; scale: none; transform: translate(0px, 0px);">E</div><div aria-hidden="true" style="position: relative; display: inline-block; translate: none; rotate: none; scale: none; transform: translate(0px, 0px);">A</div><div aria-hidden="true" style="position: relative; display: inline-block; translate: none; rotate: none; scale: none; transform: translate(0px, 0px);">N</div></span><span class="main-he-span" aria-label="MORE WITH GSAP"><div aria-hidden="true" style="position: relative; display: inline-block; translate: none; rotate: none; scale: none; transform: translate(0px, 0px);">M</div><div aria-hidden="true" style="position: relative; display: inline-block; translate: none; rotate: none; scale: none; transform: translate(0px, 0px);">O</div><div aria-hidden="true" style="position: relative; display: inline-block; translate: none; rotate: none; scale: none; transform: translate(0px, 0px);">R</div><div aria-hidden="true" style="position: relative; display: inline-block; translate: none; rotate: none; scale: none; transform: translate(0px, 0px);">E</div> <div aria-hidden="true" style="position: relative; display: inline-block; translate: none; rotate: none; scale: none; transform: translate(0px, 0px);">W</div><div aria-hidden="true" style="position: relative; display: inline-block; translate: none; rotate: none; scale: none; transform: translate(0px, 0px);">I</div><div aria-hidden="true" style="position: relative; display: inline-block; translate: none; rotate: none; scale: none; transform: translate(0px, 0px);">T</div><div aria-hidden="true" style="position: relative; display: inline-block; translate: none; rotate: none; scale: none; transform: translate(0px, 0px);">H</div> <div aria-hidden="true" style="position: relative; display: inline-block; translate: none; rotate: none; scale: none; transform: translate(0px, 0px);">G</div><div aria-hidden="true" style="position: relative; display: inline-block; translate: none; rotate: none; scale: none; transform: translate(0px, 0px);">S</div><div aria-hidden="true" style="position: relative; display: inline-block; translate: none; rotate: none; scale: none; transform: translate(0px, 0px);">A</div><div aria-hidden="true" style="position: relative; display: inline-block; translate: none; rotate: none; scale: none; transform: translate(0px, 0px);">P</div></span></h1></div><div class="comp toggle-w"><svg xmlns="http://www.w3.org/2000/svg" width="100%" fill="none" viewBox="0 0 1384 1012" data-hero="scribble" class="scribbles-svg"><g class="scribbles-svg" clip-path="url(#a)"><path fill="currentColor" d="M219.464 334.793c-1.777-.164-3.165-.327-4.554-1.001-4.514-2.144-9.762-2.43-14.112-4.595-4.861-2.41-10.58-1.593-15.052-5.004-1.593-1.205-4.023-1.123-6.045-1.674-8.782-2.39-17.053-6.515-26.162-7.945-2.859-.449-5.024-2.941-7.883-3.758-5.494-1.552-11.131-2.757-16.318-4.983-2.839-1.225-6.433-1.123-8.537-4.105-.776-1.123-2.349-.919-3.656-.98-3.819-.204-7.25-1.266-9.946-4.187-.408-.449-1.225-1.082-1.593-.939-3.39 1.307-5.493-.286-7.209-2.962-4.922-.408-9.088-3.451-13.99-3.962-2.838-.286-5.963.348-8.067-2.43-5.677-.245-9.925-4.534-15.317-5.412-2.165-.347-3.022-2.206-4.942-2.859-5.943-2.002-11.968-4.044-17.462-7.005-4.044-2.186-8.557-3.145-12.417-5.923-2.737-1.961-6.556-2.287-9.292-4.799-3.676-3.37-8.108-5.617-12.887-7.046-2.124-.633-2.492-2.471-3.207-4.024-2.001-4.35 0-9.966 4.105-11.988 1.062-.531 1.859 0 2.758.347 2.164.838 3.941 2.288 5.902 3.452 7.78 4.636 15.154 9.925 23.22 14.092 1.001.51 1.961 1.266 3.064 1.429 7.148 1.062 13.336 4.514 19.688 7.638 2.593 1.287 5.432 2.492 8.271 2.798 3.268.368 5.84 1.798 8.435 3.452a13.564 13.564 0 0 0 4.452 1.858c6.882 1.552 13.724 3.248 19.994 6.679 5.616-.593 8.618 4.942 13.867 5.738 5.106.777 9.701 3.615 14.316 6.046.286.143.572.408.879.429 8.822.673 16.624 4.942 24.936 7.352 5.821 1.695 11.641 3.737 17.38 5.902 4.268 1.593 8.475 3.656 13.132 4.125.49.041 1.062-.04 1.429.164 6.086 3.492 12.826 4.758 19.566 6.351 6.555 1.552 12.866 4.207 19.197 6.658 3.615 1.389 7.373 1.001 11.029 1.552 1.143.184 2.062-.735 3.063-1.307 6.249-3.615 12.438-7.454 19.177-9.966 6.474-2.43 12.887-4.963 19.198-7.781 5.698-2.533 11.212-5.555 17.645-5.862.327 0 .694-.04.96-.204 6.739-4.37 15.072-3.696 22.118-7.087.143-.061.306-.163.449-.143 7.577 1.124 14.643-2.287 22.098-2.43 6.331-.122 12.621-1.021 18.932-1.511 5.085-.409 10.211.531 15.317.898 5.106.368 9.395 2.798 13.397 5.004 8.986 4.922 10.906 14.214 4.044 22.363-3.206 3.819-5.494 8.394-9.354 11.743-.612.531-1.164 1.328-1.858 1.512-5.065 1.225-9.047 4.983-13.99 6.229-3.492.878-6.555 2.798-10.109 3.369-.797.123-1.675.205-2.369.552-5.657 2.92-12.131 2.941-17.952 5.248-1.144.45-2.226.715-3.308.327-2.267-.837-4.126-.204-5.923 1.185-.654.51-1.654 1.103-2.247.633-2.675-2.124-5.677 1.348-8.332-.633-.245-.184-1.001.041-1.348.286-3.247 2.246-6.821 1.429-10.416 1.368-6.617-.102-13.213.184-19.83.347-2.635.061-5.167-.51-7.7-1.062-1.266-.286-2.614-1.103-3.778-.878-6.78 1.266-12.785-2.001-19.157-3.063-.796-.123-1.613-.307-2.43-.307-3.206-.041-6.331 0-9.252-1.96-1.776-1.185-4.023-1.042-6.065.081-4.309 2.349-8.231 5.208-10.11 9.865-1.531 3.798-5.167 4.676-7.964 6.739-.674.49-1.593 0-2.247-.531-.633-.51-1.123-1.246-1.818-1.613-1.817-1.001-4.125-1.471-3.962-4.289.205-3.431.143-7.189 3.227-9.333 2.267-1.573 3.656-3.513 4.963-6.229l-.041-.041Zm40.662-6.576c6.699 2.307 13.173 3.247 19.81 3.349 1.287.02 2.574-.184 3.819.49 1.655.919 3.431.572 5.229.592 6.269.041 12.478-1.184 18.809-.592 4.187.409 8.782.572 12.683-.715 7.842-2.573 16.706-.857 23.833-6.024 4.493.367 8.455-1.941 12.744-2.472 1.838-.224 3.411-.776 4.943-1.858 2.062-1.45 4.125-3.411 6.453-3.86 4.616-.919 7.843-3.717 10.947-6.74 2.328-2.266 1.552-5.024-1.368-6.474-1.634-.796-3.289-1.245-5.127-1.307-2.675-.081-5.534.123-7.985-.408-6.106-1.368-11.784.735-17.645 1.082-5.31.307-10.416 2.288-15.889 1.614-3.901-.49-7.782.143-11.192 2.389-.735.47-1.43.49-2.288.388-6.126-.694-11.743.776-16.787 4.35-.552.388-1.103.94-1.695.695-2.716-1.103-4.575 1.082-6.821 1.715-3.574 1.021-6.618 3.615-10.58 3.615-1.102 0-2.185.511-3.104 1.307-1.899 1.634-4.37 2.042-6.576 3.023-3.942 1.736-8.088 3.022-12.193 5.82l-.02.021Z" class="6" style="opacity: 0; visibility: hidden; translate: none; rotate: none; scale: none; transform-origin: 0px 0px;" data-svg-origin="0.032978951930999756 236.98707580566406" transform="matrix(0.99257,-0.12171,0.12171,0.99257,-28.84345,1.76483)"></path><path fill="currentColor" d="M917.5 1011.61c-1.858-5.52-4.309-10.7-8.169-15.115-.429-.49-1.082-.898-1.246-1.47-1.45-4.759-5.371-7.495-8.72-10.641-1.287-1.204-1.716-2.226-1.246-3.798.245-.776.408-1.573.653-2.349 1.838-5.698 7.23-7.454 12.05-3.86 1.429 1.062 2.9 2.247 3.839 3.717 3.962 6.209 9.824 11.171 12.377 18.258 1.981 5.518 5.922 9.908 8.108 15.258H917.5ZM379.704 304.894c-3.105-1.348-6.209-1.389-9.15-1.92-8.108-1.45-16.032 1.042-24.038.204-2.307-.245-4.37.225-6.555 1.226-2.083.939-4.922.674-6.924 1.307-4.881 1.531-9.966.919-14.745 2.389-.776.245-1.593.715-2.349.613-5.391-.735-10.415 1.47-15.174 3.022-3.982 1.287-7.924 1.757-11.886 2.655-1.695.388-3.513.777-4.963 1.941-.633.51-1.266 1.082-2.144 1.021-6.74-.409-12.438 3.227-18.667 4.82-5.269 1.368-10.252 3.655-14.52 7.188-.368.307-.838.634-1.287.674-5.575.47-9.149 4.738-13.234 7.639-3.063 2.185-5.29 5.8-7.618 8.945-1.409 1.899-.061 4.738-.163 7.148-.123 3.022 2.716 3.145 4.697 4.064.572.265 1.328.47 1.634.96 2.226 3.431 5.923 3.86 9.333 5.289 3.247 1.348 6.924 1.736 9.722 3.391 4.125 2.43 8.577 2.961 12.886 4.002 4.514 1.103 8.946 2.819 13.745 2.778 6.127-.041 12.111 3.227 18.34.735 4.186 1.961 8.618-1.123 12.846.654.694.306 1.674.306 2.41.081 6.024-1.654 12.233-.469 18.319-1.204 2.798-.327 5.412 1.082 8.19 1.184 1.593.061 2.103 1.185 2.409 2.614.491 2.328-.02 4.534-.49 6.76-.183.919-.817 1.328-1.654 1.573-3.431.96-6.964 1.45-10.15 3.329-1.348.796-3.227.204-4.799-.164-3.554-.796-6.965-.612-10.559.021-3.084.551-6.372-.021-9.558.041-5.841.122-11.723.183-17.502-.082-5.045-.225-10.212-.715-15.277-1.389-5.494-.715-10.661-3.308-16.338-3.288-.837 0-1.511-.511-2.145-1.042-.612-.51-1.266-1.266-1.981-1.348-3.635-.449-6.637-2.675-9.946-3.574-4.411-1.184-8.271-3.716-12.784-4.554-1.43-.265-2.676-1.756-3.881-2.839-1.919-1.715-3.594-3.737-6.331-4.309-.776-.163-1.572-.715-1.756-1.572-.531-2.574-2.022-4.35-4.166-5.76-.715-.469-.899-1.388-.756-2.205.572-3.411-.204-6.842.102-10.253.511-5.8 3.697-10.293 7.475-14.337 1.94-2.083 4.166-3.962 6.556-5.698 2.471-1.797 4.145-4.738 6.596-6.841 3.064-2.614 6.576-5.188 10.069-6.188 3.574-1.021 6.862-2.778 10.456-3.636 1.593-.367 2.982-1.225 4.432-1.919 5.31-2.533 10.681-4.984 16.747-5.147.633 0 1.348-.082 1.899-.368 6.25-3.288 12.928-4.84 19.933-5.33 2.43-.163 4.82-1.246 6.882-2.226 2.37-1.123 4.453-1.47 6.944-1.307 2.635.184 5.106-.94 7.618-1.613 6.699-1.757 13.663-1.961 20.423-3.86 3.962-1.103 8.659-.388 13.03-.654 7.556-.47 15.133-.572 22.69-.735 7.454-.164 14.377 2.287 21.239 4.799 4.003 1.471 6.924 7.455 5.657 12.601-1.613 6.556-5.779 10.028-11.62 12.785-4.963 2.348-9.967 4.391-15.195 6.004-1.062.327-1.981 1.103-2.92 1.716-.817.531-1.634 1.634-2.39 1.593-4.329-.286-7.332 3.186-11.334 3.778-1.777.265-3.452.837-5.065 1.695-1.859.98-3.758 1.552-5.984 1.675-3.921.204-7.189 2.839-10.988 3.88-3.513.96-6.596 3.268-10.497 3.145-1.246-.041-2.39.878-3.533 1.532-1.981 1.123-4.187 1.879-6.515 1.225-3.676-1.041-4.779-2.491-5.045-6.147-.286-3.942.899-6.76 4.391-7.679 4.698-1.246 8.803-4.105 13.684-4.779.633-.082 1.388-.286 1.797-.694 2.818-2.798 6.739-3.452 10.17-4.187 3.554-.756 6.658-3.104 10.437-2.839.306 0 .694-.061.939-.245 5.249-3.962 12.09-3.921 17.666-7.189 3.839-2.246 7.965-4.125 12.254-5.616l-.041.041ZM1064.3 501.342c6.66 1.266 13.5.694 20.3 1.858 3.84.654 7.99-.143 11.76 1.695.15.062.35.082.47.021 5.54-2.124 10.99.674 16.59.49 5.45-.184 11.25 1.307 16.85 1.94 7.06.797 14.13 1.695 21.24 2.267 5.22.429 10.11 2.287 15.31 2.696 3.07.245 6.07.592 9.17.49 5.21-.143 10.19 1.879 15.38 2.165 4.33.224 8.48 1.92 12.89 1.634 1.51-.102 2.84.531 4.25.939 1.98.572 3.98 1.511 6.16.429 1.07-.531 2.23-.143 3.35.204 3.74 1.164 7.58 1.123 11.44.817.47-.041 1.02-.225 1.43-.061 6.43 2.614 13.34 2.226 20.01 3.329 4.11.674 8.5-.286 12.34 2.063 7.6-1.491 14.64 2.124 21.99 2.43 5.99.245 11.91.817 17.77 1.92 5.84 1.102 11.83 1.266 17.51 3.471 2.51.981 5.41 1.348 8.14 1.41 4.25.081 6.21 3.267 8.62 5.759 1.37 1.409-.2 5.963-2.14 7.393-4.11 3.063-8.07 3.063-12.5 0-3.1-2.165-6.8-1.838-10.21-1.858-2.29 0-4.41.102-6.66-.511-2.9-.776-5.9-1.92-9.01-.633-.41.163-.98.143-1.41 0-9.45-2.982-19.25-3.635-29.06-4.554-7.98-.756-15.97-1.634-23.81-3.391-1.82-.408-3.17.695-4.72.531-2.86-.306-5.61-1.123-8.41-1.736-4.31-.959-8.76-1.205-13.09-2.552-3.62-1.124-7.68-1.042-11.56-1.083-4.48-.041-8.87-1.021-13.24-1.062-6.57-.082-12.84-2.512-19.44-1.981-1.16.102-2.25-.286-3.29-.796-.88-.409-2.04-1.246-2.67-.96-3.68 1.613-7.11-.736-10.77-.368-4 .409-7.86-1.654-11.84-2.308-.63-.102-1.35-.714-1.82-.531-5.15 2.124-9.82-1.184-14.68-1.123-5.93.061-11.62-2.798-17.61-1.144-1.88.531-3.24-1.123-5.06-1.388-3.21-.45-6.39 0-9.58-.143-2.78-.123-5.19-1.369-8.01-1.409-3.71-.082-7.49-.777-11.15.04-2.47.552-3.63-2.512-5.84-1.633-2.04.816-3.84.347-5.64-.511-2.32-1.103-4.63-2.063-6.55-4.044-2.7-2.818-3.02-2.675-.92-5.943 1.76-2.716 3.55-5.657 7.74-4.268h-.02ZM140.388 991.757c-.756-5.024 1.43-9.231 3.921-13.275 1.062-1.736 2.145-3.186 1.348-5.371-.245-.674-.143-1.777.266-2.328 2.696-3.738 4.513-7.965 6.964-11.825.633-1.001.96-1.94 1.327-3.023 1.103-3.308 1.41-7.005 4.616-9.394 1.103-.817 1.981-2.267 2.43-3.595 3.207-9.66 9.905-17.441 14.194-26.509 1.695-3.614 4.248-6.821 6.433-10.191.348-.551.96-1.082 1.001-1.633.225-3.677 3.309-5.658 5.045-8.374 1.797-2.798 3.941-5.575 5.657-8.312 2.9-4.656 6.944-8.271 9.884-12.887a147.194 147.194 0 0 1 16.747-21.607c4.759-5.065 10.62-9.272 13.949-15.644.49-.919 1.491-1.226 2.206-1.879 2.879-2.614 6.025-4.983 8.108-8.374a18.182 18.182 0 0 1 6.964-6.555c1.777-.96 3.349-2.288 4.33-3.778 3.451-5.29 8.148-9.089 13.315-12.499 2.022-1.348 2.962-3.779 4.493-5.555 5.147-5.882 11.805-10.191 17.217-15.91 1.756-1.858 4.166-3.431 6.27-5.167 1.96-1.634 4.574-2.675 6.78-1.266 2.206 1.409 4.432 3.37 4.105 6.658-.143 1.286-.041 2.614-.102 3.921-.02.633 0 1.532-.674 1.716-4.207 1.102-5.392 6.167-9.987 7.209-1.899.429-3.88 3.247-4.758 5.759-.613 1.797-1.838 3.125-3.35 4.064-3.921 2.41-7.413 5.351-10.906 8.333-2.757 2.328-4.574 5.432-7.005 8.006-1.286 1.368-2.573 2.634-4.105 3.655-4.248 2.839-7.25 6.964-10.64 10.641-2.083 2.246-4.35 4.329-6.392 6.617-1.695 1.919-3.922 3.369-4.922 5.943-.327.837-1.124 1.674-1.92 2.124-6.597 3.737-10.109 10.354-15.011 15.684-2.961 3.227-5.677 6.618-8.271 10.089-6.821 9.068-13.357 18.361-19.933 27.612-4.309 6.066-7.761 12.683-11.723 18.932-2.287 3.615-3.696 7.884-6.923 10.926-.633.613-.756 1.43-.633 2.267.143 1.001.102 2.063-.572 2.798-5.678 6.127-8.782 13.847-12.764 20.975-2.859 5.146-5.29 10.722-6.393 16.604-.449 2.43-2.43 3.717-3.308 5.861-1.45 3.594-1.92 7.311-2.573 11.008-.491 2.839-3.023 4.125-4.248 6.372-.409.76-1.716.9-2.717.55-.919-.33-1.797-.8-2.716-1.1-3.022-1.009-4.629-3.106-4.82-6.292-.041-.653-.163-1.287-.265-1.94l.061-.041Zm1207.562-88.758c-3.88.572-7.29-.51-10.74-2.206-2.43-1.184-5.29-1.47-7.9-2.267-5.07-1.572-9.87-4.043-15.4-4.023-1.7 0-3.31-1.246-4.94-1.92-2.19-.898-4.54-1.511-6.89-2.083-8.1-1.899-16.13-4.146-24.12-6.535-3.67-1.103-7.27-2.532-10.84-3.942-2.41-.96-4.8-.347-7.13-1.164-4.84-1.715-9.74-3.308-14.31-5.657-2.01-1.021-4.13-.817-6.21-1.144-5.6-.878-10.77-3.676-16.5-3.839-2.39-.061-3.48-2.267-5.54-2.798-4.8-1.266-9.29-3.737-14.48-3.349-2.94-2.635-7.51-1.246-10.35-4.228-.53-.572-1.33-1.246-2.03-1.266-4.45-.164-8.43-2.39-12.82-2.818-2.57-.246-5.13-.838-7.7-1.124-3.33-.347-5.6-1.634-6.58-5.187-.65-2.431.06-7.495 2.35-8.557 3.35-1.573 6.95-2.717 10.66-.879 2.51 1.246 5.15 2.043 7.97 2.043 3.47 0 5.9 2.879 9.23 3.349.92.143 1.78 1.103 2.65 1.123 4.82.062 8.93 2.492 13.32 3.901.47.143 1.02.47 1.39.327 3.61-1.348 6.33 1.266 9.47 2.001 4.25 1.001 8.34 2.226 11.99 4.657.78.531 1.6 0 2.35.081 2.84.348 5.52.593 8.11 2.553 2.72 2.063 6.07 3.676 9.95 2.757 1.51-.367 3.24-.388 4.79.348 7.17 3.349 15.02 4.595 22.37 7.454 3.88 1.511 7.86 3.002 12.15 3.186.63.02 1.31.225 1.86.51 7.58 4.106 15.95 5.678 24.2 7.639 5.55 1.307 11.37 1.94 16.62 4.043 4.78 1.92 9.87 3.023 14.42 5.494.72.388 1.37 1.001 2.23.838 1.94-.389 3.35-.266 4.35 1.919 1.1 2.431 2.59 5.106 1.33 7.373-1.27 2.308-4.05 3.615-6.95 3.737-.79.021-1.61-.204-2.37-.326l.04-.021ZM777.664 164.405c-.51-5.617 2.39-10.559 3.064-15.93.49-3.983 1.92-7.843 1.389-11.968-.205-1.552-.184-3.411.51-4.718 1.818-3.39 1.859-7.229 3.166-10.701.47-1.267.878-2.329.51-3.717-.347-1.267-.204-2.717.429-3.819 2.614-4.575 3.615-9.497 3.799-14.684.02-.9.551-1.9 1.123-2.655.96-1.287 1.348-2.676.96-4.126-.368-1.41.041-2.553.633-3.737 2.328-4.514 2.9-9.558 4.064-14.378 1.471-6.106 1.92-12.478 3.493-18.544.674-2.553 2.062-5.024 2.614-7.72.122-.633.327-1.266.367-1.9.368-5.289 1.185-6.392 6.005-7.964 1.307-.43 7.393 1.225 8.169 2.246.633.858.51 1.838.368 2.819-.715 4.636-1.798 9.292-2.104 13.867-.429 6.392-3.084 12.07-4.371 18.156-1.327 6.372-1.123 13.213-4.391 19.177-.53.98-.694 2.124-.245 3.308.654 1.798.286 4.044-.714 5.086-2.472 2.593-.981 6.474-3.472 8.863 1.062 3.002-.899 5.555-1.205 8.333-.531 5.126-2.676 9.823-3.595 14.827-1.041 5.657-3.41 11.069-3.206 16.951.02.633.143 1.47-.204 1.899-2.859 3.758-1.43 8.496-2.921 12.581-.51 1.429.511 3.615-1.368 4.35-2.349.919-4.289 2.879-7.25 2.41-3.86-.613-5.739-2.431-5.739-6.372 0-.654.061-1.307.102-1.94h.02ZM1317.48 368.47c-2.37.347-5.37.348-8.02 1.328-3.25 1.205-6.52 1.674-9.91 2.083-3.88.49-7.17 2.839-10.78 4.227-5.17 1.982-9.99 4.902-15.65 5.617-2.88.367-5.47-.123-6.61-2.757-1.02-2.369-1.29-4.677.28-7.679 2.37-4.534 6.72-4.718 10.19-6.577 6.7-3.594 14.08-5.698 21.31-8.005 4.26-1.369 8.84-1.92 13.31-2.533 5.41-.735 10.58-2.532 16.09-2.879 6.72-.409 9.34 3.472 8.11 8.72-.32 1.369-.73 2.451-2.18 2.921-2.47.817-4.56 2.43-7.21 2.92-1.7.307-3.62.552-4.88 2.022-1.02 1.185-2.27 1.042-4.09.633l.04-.041Zm-999.658 87.758c5.984-1.961 11.846.531 17.789.49 5.555-.041 11.151 2.226 15.644 6.024 1.838 1.553 3.88 3.309 2.879 6.189-1.062 3.043-3.717 4.799-6.515 5.207-2.042.286-4.962 1.124-6.596-1.674-.674-1.144-2.043-.981-3.125-.94-4.942.225-9.783-.694-14.868.45-3.88.857-8.271-.47-12.417-1.022-1.45-.183-2.818-.49-4.309-.469-3.513.041-6.679-2.614-7.005-5.555-.388-3.37 1.429-5.882 5.085-7.107 4.371-1.471 8.966-1.144 13.438-1.593Z" class="5" style="opacity: 0; visibility: hidden; translate: none; rotate: none; scale: none; transform-origin: 0px 0px;" data-svg-origin="140.2361602783203 37.7741584777832" transform="matrix(0.99565,0.09322,-0.09322,0.99565,4.13133,-12.9085)"></path><path fill="currentColor" d="M932.201 1011.61c-2.614-8.36-7.781-15.483-11.293-23.366-3.043-6.862-7.149-13.03-11.09-19.279-2.185-3.472-3.084-8.006-7.066-10.273-.715-3.696-4.126-5.841-5.474-8.945-1.572-3.656-4.105-6.556-6.065-9.844-.695-1.164-1.083-2.737-2.921-3.002-.98-.143-1.532-1.246-1.899-2.124-2.185-5.147-5.331-9.619-9.476-13.397-1.573-1.45-2.043-3.636-3.309-5.331-1.45-1.94-2.716-3.819-4.656-5.432-1.941-1.614-2.676-4.473-4.35-6.576-3.146-3.942-6.536-7.618-10.314-10.947-2.001-1.777-4.085-3.656-5.473-5.902-1.798-2.9-5.698-4.065-6.25-7.884-4.023-2.716-6.821-6.882-10.987-9.455-1.348-.838-2.492-2.022-3.452-3.391-2.451-3.451-1.205-6.678.327-9.925.551-1.185 1.532-1.716 2.798-1.328 1.695.511 3.513.531 5.085 1.614 1.185.817 2.614 1.736 3.962 1.756 2.512.041 3.86 1.123 4.881 3.247.633 1.307 1.9 2.165 3.166 2.982 2.206 1.409 4.085 3.227 5.412 5.494.674 1.184 1.287 2.185 2.798 2.41 1.43.204 2.328 1.327 2.818 2.512 1.226 2.961 3.431 5.065 5.719 7.168 2.736 2.471 4.431 5.862 7.291 8.292 1.062.899 1.368 2.492 3.002 3.002.796.245 1.593 1.246 1.96 2.083 3.554 8.394 11.58 13.684 15.277 21.975.408.919 1.041 1.675 2.063 1.961 1.388.388 2.307 1.45 2.757 2.614 2.205 5.8 5.371 10.845 10.415 14.623.572.429.817 1.368 1.103 2.103 1.818 4.555 4.881 8.313 7.924 12.05 1.491 1.838 1.736 4.187 3.064 6.066 2.348 3.308 4.166 6.923 6.8 10.068 1.614 1.92 3.207 4.125 3.309 6.923 0 .47.123 1.124.429 1.369 3.921 2.981 4.738 7.883 7.087 11.804 4.554 7.679 8.904 15.565 11.314 24.305h-16.665l-.021-.02Zm438.689-104.731c-5.09-1.552-11.05-1.491-16.87-3.206-3.76-1.103-7.81-2.165-11.75-2.553-4.63-.449-8.76-2.451-13.03-3.737-3.84-1.144-7.86-1.083-11.68-2.512-1.69-.633-3.57-1.41-5.23-2.124-2.82-1.246-5.8-1.552-8.64-2.431-4.55-1.429-9.33-1.838-13.78-3.635-2.82-1.123-5.5-2.859-8.8-2.43-1.94.245-3.09-1.634-4.82-2.145-4.66-1.388-9.23-3.022-14.12-3.655-2.69-.348-5.49-.572-7.59-2.778-.66-.674-1.72-.899-2.76-.592-2.76.796-5.17-.368-7.52-1.45-4.41-2.022-8.66-4.432-13.84-3.247-1.74.388-3.47-1.022-4.8-1.655-9.11-4.452-19.08-5.922-28.55-8.986-8.36-2.716-16.93-4.411-25.29-6.984-7.06-2.186-14.07-4.596-21.09-6.924-1.39-.47-2.78-.919-4.31-.674-.62.102-1.45.164-1.88-.143-6.46-4.779-14.4-4.227-21.65-6.127-2.04-.531-4.23-.898-6-1.94-6.15-3.594-13.26-3.778-19.67-6.065-4.17-1.491-8.54-1.307-12.56-3.003-1.49-.633-2.96-1.184-4.33-2.103-1.06-.715-2.21-1.756-3.55-1.45-3.33.735-6.13-.797-8.89-2.022-5.86-2.573-12.17-3.145-18.28-4.595-1.3-.306-2.47-.776-3.65-1.307-1.35-.572-2.66-1.369-4.07-1.614-7.8-1.307-15.27-3.676-22.44-6.984-1.82-.838-3.78-1.246-5.66-1.409-6.35-.593-12.01-3.574-18.155-4.861-2.9-.613-4.411-3.717-7.005-5.065-.225-.123-.347-.551-.429-.858-.592-2.798 4.575-8.537 7.393-8.21.47.062 1.123.593 1.348.45 3.658-2.512 6.438.245 9.248 1.695 2.03 1.041 4.13.796 6.17 1.266 7.41 1.715 14.58 4.207 21.83 6.474 8.19 2.553 16.53 4.656 24.59 7.577 6.68 2.43 13.69 3.288 20.43 5.269 3.08.899 6.27 1.572 9.23 2.859 1.83.797 3.55 1.552 5.59 1.021.82-.204 1.66-.061 2.33.45 2.94 2.226 6.37 3.104 9.95 3.594 3.98.572 7.47 2.859 11.49 3.411 7.3 1 14.32 3.308 21.29 5.391 5.14 1.532 10.35 3.574 15.52 4.984 4.57 1.245 8.94 3.288 13.78 3.86 3.31.388 6.56 1.735 9.7 2.981 3.52 1.389 7.11 2.104 10.81 2.696 2.3.368 4.59 1.103 6.72 2.532 2.61 1.757 5.53 2.921 9.06 2.819 2.58-.082 5.21 1.634 7.81 2.553 2.28.817 4.49 1.858 7.06 1.634.92-.082 2.04.142 2.8.633 4.45 2.859 9.68 2.838 14.58 4.023.31.082.68.041.96.184 9.15 4.534 19.32 5.861 28.92 9.088 6.84 2.308 14.03 3.819 21.04 5.718 5.04 1.369 10.23 2.308 15.17 4.616 5.88 2.757 12.7 3.37 18.95 5.473 3.86 1.287 7.89 1.144 11.7 2.308 1.54.47 3.23.368 4.38 1.838.36.49 1.1.96 1.73.633 3.19-1.654 5.56.735 8.21 1.634 4.88 1.654 9.76 3.349 15.03 3.084 1.35-.061 2.7-.02 3.72.837 1.37 1.164 2.9 1.348 4.57 1.267 1.58-.082 2.8.796 3.99 1.654 4.94 3.655 4.9 8.516-.04 12.192-1.19.878-2.48.654-4.42.797l.05-.021ZM258.838 366.142c3.451-.143 6.535 1.532 9.639 2.553 5.208 1.695 10.539 1.001 15.746 1.858 6.127 1.021 12.438.572 18.483 2.492 1.797.572 3.819.674 5.698-.245.715-.368 1.614-1.042 2.226-.858 4.412 1.307 8.986.061 13.357 1.062 3.002.694 6.025-.184 9.047.551 4.983 1.185 10.089-.081 15.215.348 4.044.347 8.353 1.225 12.254.694 7.842-1.062 15.807.551 23.548-1.45.919-.245 2.083-.429 2.879-.061 2.308 1.062 4.493.531 6.617-.245 3.636-1.328 7.475-.797 11.192-1.369 2.9-.449 5.698-.796 8.23-2.553 2.88-2.001 9.926-.878 12.172 1.696 2.798 3.165 1.103 10.17-2.92 11.641-1.818.653-3.778.98-5.698 1.327-1.409.266-2.982-.02-3.982 1.409-.164.245-.593.572-.797.511-3.554-1.164-6.678 1.123-9.946 1.225-5.351.164-10.661.143-15.909 1.328-2.86.633-5.678.224-8.496.286-4.963.102-9.844.469-14.746-.695-1-.245-2.205.49-3.329.593-2.961.265-5.698 1.511-8.945-.082-2.062-1.021-5.065.143-7.638.286-6.188.327-12.274-.429-18.381-.899-4.738-.367-9.435.511-14.132-.061-5.657-.695-11.417.939-17.053-.919-1.185-.388-2.635-.347-3.901-.143-5.821.96-11.212-.96-16.726-2.288-3.003-.714-5.944-1.592-9.089-1.45-3.472.164-6.637-1.368-9.946-2.185-1.96-.49-3.553-2.41-5.902-1.389-.306.143-1.001-.204-1.307-.531-1.593-1.756-3.308-3.104-5.882-2.45-2.675-2.88-6.719-4.044-9.088-7.25-1.082-1.471-2.328-2.594-3.88-3.595-3.493-2.267-5.494-5.882-7.843-9.211-3.063-4.329-3.267-9.272-3.778-14.214-.204-2.022.98-3.492 1.879-4.881 3.635-5.555 7.271-11.151 13.54-14.235.409-.204 1.001-.551 1.062-.898.695-3.329 3.84-3.717 6.127-5.045 1.266-.715 2.737-.96 3.309-2.573.633-1.838 2.267-2.349 3.941-2.308 1.92.041 3.677-.47 5.045-1.572 3.186-2.615 6.923-3.656 10.844-4.31 3.86-.653 7.475-2.307 11.029-3.717 6.719-2.675 14.071-2.307 20.709-5.065 2.512-1.041 6.903-.04 9.027 3.043.98 1.41.367 7.251-.879 8.884-.633.838-1.511 1.267-2.491 1.43-5.923.96-11.58 2.369-16.992 5.29-2.43 1.307-5.8 1.347-8.741 2.083-4.432 1.103-8.578 3.124-13.112 3.758-.326.04-.735.04-.939.224-4.554 4.228-11.396 4.902-15.603 9.231-3.697 3.799-8.639 6.393-11.151 11.335-1.756 3.452-1.287 4.656 1.327 7.72 3.819 4.452 7.986 8.414 12.867 11.702 3.043 2.043 6.76 2.369 9.742 4.452.735.511 1.572.082 2.389-.183l.082-.082Zm113.265 402.556c-.122 3.696-1.756 6.249-4.472 9.068-6.352 6.576-15.134 10.027-20.832 17.277-1.695 2.165-3.88 3.901-5.289 6.311-.245.409-.49.94-.879 1.123-6.821 3.268-10.742 9.701-16.031 14.644-4.657 4.35-8.823 9.292-13.357 13.724-4.677 4.554-8.026 10.293-13.643 14.132-4.268 2.921-7.434 7.516-10.946 11.478-4.248 4.799-8.251 9.864-12.581 14.582-1.838 1.981-2.471 5.228-6.065 5.657-1.124.143-.123 2.982-1.471 3.84-2.144 1.348-3.104 3.615-4.677 5.371-5.024 5.596-9.864 11.335-14.643 17.155-3.982 4.84-8.149 9.517-12.152 14.337-.694.837-1.062 2.001-1.388 3.084-.286.939-.347 1.899-1.205 2.573-4.493 3.472-7.046 8.374-9.538 13.275-1.286 2.492-2.981 4.636-5.126 6.331-1.246.981-2.267 3.227-4.493 2.063-2.471-1.287-4.82-2.778-5.82-5.616-.062-.143-.021-.327-.062-.49-.898-4.657.409-8.292 3.636-12.009 2.798-3.247 5.003-7.087 7.699-10.538 4.636-5.923 8.312-12.683 13.438-18.095 4.269-4.514 7.148-10.048 11.743-14.235 2.288-2.083 3.758-4.901 5.596-7.373 3.452-4.636 8.415-8.046 10.804-13.499 3.554-1.552 4.902-5.576 8.271-7.393 1.573-.858 3.227-1.94 3.452-3.901.347-3.063 2.655-4.759 4.595-6.515 2.492-2.267 5.044-4.718 6.985-7.209 2.736-3.472 6.78-5.167 9.333-8.741 2.43-3.411 5.31-6.638 8.292-9.578 5.371-5.331 10.987-10.437 16.256-15.89 1.021-1.062 2.226-1.919 2.614-3.431.082-.306.205-.776.429-.857 6.454-2.226 7.291-10.661 13.949-12.642 2.798-3.615 6.985-5.596 10.232-8.721 4.411-4.227 9.415-7.76 13.418-12.478 2.777-3.268 9.374-3.247 12.968-.797 1.552 1.042 1.062 2.553 1.001 4.024l-.041-.041Zm643.277-261.495c1.94-.817 4.54.184 6.64-1.47.25-.184.61-.368.9-.327 9.13 1 18.18-2.941 27.35-.511 5.47-1.164 10.84 1.144 16.23.511 3.15-.368 6.09.572 9.09.796 6.72.511 13.58.511 20.16 2.226 4.72 1.226 9.56.654 14.29 1.552 3.19.593 5.89 2.308 9.19 2.737 5.38.715 10.58 2.512 15.51 4.902 3.75 1.838 4.41 8.148 1 10.477-2.74 1.858-5.48 3.022-9.03 2.042-6.23-1.695-12.74-2.226-18.75-4.779-.31-.123-.63-.347-.92-.306-7.02 1.082-13.27-2.655-20.11-3.329-5.83-.572-11.54-.511-17.32-.776-2.47-.103-4.9-1.022-7.5-1.205-9.37-.695-18.69.286-28.02.163-9.45-.123-18.18 3.288-27.39 3.84-4.69 2.777-10.534 1.96-15.252 4.962-1.531.981-3.533 1.655-5.575 1.593-1.328-.041-2.533.327-3.574 1.287-2.512 2.267-5.617 1.613-8.333 1.001-2.226-.511-5.003-1.716-5.065-4.616-.061-2.675.286-5.412 3.023-7.25 2.675-1.797 5.596-2.778 8.578-3.88 5.555-2.063 11.518-3.105 16.603-6.352.388-.245.94-.47 1.389-.408 4.556.531 8.536-1.45 12.686-2.778 1.22-.388 2.55-.572 4.2-.082v-.02Zm88.78-70.643c1.49.49 3.13-.163 4.88-.633 3.45-.899 6.93-.654 10.5-.184 3.62.47 7.66 2.308 10.91-1.307.41-.47 1.04-.674 1.75-.633 4.13.306 8.48 4.575 9.01 8.864.55 4.533-.25 5.534-4.7 6.617-2.55.612-5 1.245-7.57 0-1.03-.491-2.35-.491-3.35.061-3.09 1.695-6.29 1.041-9.52.837-3.51-.224-7.11-.735-10.36 1.389-.49.327-1.36.531-1.81.306-2.03-1.062-3.43-.204-4.66 1.287-1.65 2.001-3.49 1.756-5.68.837-1.86-.796-3.31-2.062-4.8-3.288-1.65-1.348-1.26-7.046.53-8.945 1.11-1.164 2.39-2.696 3.78-2.941 3.62-.653 6.86-3.023 11.09-2.226v-.041Zm-677.854 64.496c-.981.081-1.961.245-2.86-.286-5.922-3.513-12.662-3.329-19.136-3.799-4.738-.347-8.782-1.858-12.683-4.227-1.715-1.042-2.062-4.473-.776-7.046 1.92-3.881 5.882-5.596 10.355-4.575 3.635.837 7.454.225 11.11 1.266 2.185.613 4.452.858 6.351 2.287 2.737 2.063 6.148 1.798 9.252 2.615 3.942 1.021 6.045 4.064 5.453 8.108-.572 3.921-2.716 5.636-7.066 5.636v.021Z" class="4" style="opacity: 0; visibility: hidden; translate: none; rotate: none; scale: none; transform-origin: 0px 0px;" data-svg-origin="207.15626525878906 296.8575744628906" transform="matrix(1,-0.00093,0.00093,1,-0.27608,0.19266)"></path><path fill="currentColor" d="M1383.96 896.954c-3.9-.164-7.62-1.021-11.42-1.92-5.08-1.225-10.49-2.042-15.64.306-1.06.491-1.86.103-2.74-.408-2.86-1.675-5.98-2.573-9.25-2.818-2.06-.164-3.68-1.307-5.45-2.022-4.99-2.022-10.5-1.859-15.5-3.86-2.64-1.062-5.44-1.797-8.13-2.41-5.48-1.266-10.74-3.207-16.2-4.514-8.6-2.062-17.25-3.9-25.81-6.208-4.94-1.348-10.07-2.39-14.89-3.962-4.27-1.389-9.25.715-12.87-2.941-4.88.919-8.33-3.37-12.8-3.595-4.41-.224-8.84-.735-12.97-1.94-9.33-2.736-19.16-2.9-28.41-6.004-5.98-2.022-12.29-2.961-18.56-3.676-3.31-.368-6.11-2.124-9.27-2.798-1.58-.347-3.05-1.205-4.72-.531-2.02.796-3.23-1.491-5.01-1.389-4.16.225-8.02-1.511-12.21-1.593-2.84-.061-6.04-.817-8.86-1.981-3.07-1.266-6.17-1.838-9.48-1.817-4.31 0-8.35-.858-12.58-2.124-6.43-1.92-12.95-3.881-19.83-4.248a54.038 54.038 0 0 1-15.17-3.003c-3.21-1.143-6.44-1.919-9.91-2.144-3.51-.225-7.17-.96-10.39-2.349-2.68-1.143-5.25-1.613-8.01-1.654-4.08-.061-7.82-1.266-11.62-2.757-3.08-1.205-6.66-1.736-9.84-1.716-3.09.021-5.89-.857-8.24-1.919-4.26-1.92-8.7-2.369-13.09-3.268-6.348-1.307-12.72-2.471-19.01-4.003-2.88-.694-6.188-.184-8.537-2.614-4.983 1.797-8.741-2.328-13.397-2.737-6.127-.551-12.07-3.165-18.197-3.798-5.739-.593-11.233-3.166-17.135-2.124-4.064-2.226-8.843-.429-13.091-2.655-2.859-1.491-6.372-2.308-9.803-2.369-4.82-.082-8.516-2.512-11.927-5.474-2.369-2.062-2.716-4.636-1.45-7.25 1.409-2.92 2.532-3.717 6.311-3.043 3.492.633 7.189.429 10.436 2.226.551.307 1.307.552 1.858.429 5.657-1.368 10.641 1.471 15.93 2.451 3.329.613 6.76 1.205 10.089 1.389 6.842.408 13.132 3.002 19.749 4.003 6.351.959 12.56 2.267 18.707 4.084 8.476 2.492 17.237 3.738 25.857 5.617 5.31 1.143 10.5 2.471 15.64 4.186 2.86.96 6.17.531 9.15 1.246 6.58 1.573 13.11 3.431 19.63 5.31 2.67.776 5.23 1.899 8.05.756.83-.348 1.57.102 2.32.367 1.37.49 2.74 1.532 4.01 1.675 5.57.674 10.98 2.246 16.46 3.043 2.9.429 5.78.96 8.39 1.96 4.09 1.553 8.01 2.492 12.5 2.553 3.72.062 7.66 1.185 11.29 2.288 2.84.857 5.54 1.45 8.48 1.674 3.33.266 6.7.613 9.88 1.941 5.33 2.205 11.22 1.286 16.77 2.675 1.8.449 3.74.592 5.6 1.205 7.37 2.471 15.03 3.472 22.71 4.391 7 .837 13.82 2.614 20.56 4.615 2.37.715 4.84.96 7.11 1.144 3.62.306 6.94 3.125 10.8 1.368.33-.142 1 .123 1.37.388 5.64 4.33 12.5 3.942 19 4.963.47.082 1.16-.204 1.4.021 4.35 4.207 10.91 1.225 15.51 4.819 1.79 1.41 3.96-.51 6.16-.102 4.8.879 9.03 3.411 13.85 4.187 1.39.225 2.86.429 4.25.776 7.31 1.736 14.8 2.573 21.87 5.535 3.15 1.327 6.72 2.103 10.13 2.593 1.96.266 3.72.94 5.58 1.308 2.59.51 4.84 3.083 7.82 1.511 2.06 1.634 4.45 2.389 6.98 3.002 4.54 1.103 8.95 3.043 13.54 3.594 6.62.797 12.75 4.493 19.3 4.024 5.97-.429 11.11 2.716 16.97 2.308 3.09-.205 6.29 1.388 9.44 2.164v13.725l-.04-.082ZM159.994 1011.61c.694-4.86 3.37-9.01 5.391-13.318 1.471-3.165 1.981-6.801 4.534-9.517 5.147-5.494 7.026-12.928 10.62-19.34 3.186-5.678 7.25-10.682 10.395-16.339.858-1.552 1.757-3.083 2.512-4.697 1.103-2.308 2.186-4.738 4.494-6.229 1.429-.919 2.471-2.246 3.104-3.717 2.573-5.841 7.618-10.089 10.15-15.95.368-.837 1.327-1.409 2.022-2.083 2.92-2.839 5.718-5.78 7.577-9.497.653-1.327 1.409-2.635 2.777-3.329 1.818-.939 3.145-2.41 4.044-4.146 1.899-3.615 4.677-6.637 7.189-9.701 1.899-2.307 3.819-4.86 6.29-6.903 3.227-2.675 6.842-5.452 8.047-9.905.265-1 .469-2.022 1.47-2.348 5.371-1.818 8.251-6.393 11.049-10.661 2.267-3.411 5.739-5.514 7.985-8.925 1.267-1.92 3.717-3.063 4.555-5.534.102-.286.367-.695.612-.736 4.269-.715 5.331-4.779 7.761-7.413.694-.756 1.348-1.471 2.287-1.736 1.348-.388 2.472-1.246 3.043-2.328 2.819-5.208 8.149-7.761 11.968-11.764 3.533-3.696 7.598-7.005 10.62-11.253 1.961-2.757 4.759-4.84 7.087-7.27 4.268-4.453 9.619-7.516 13.928-11.805 2.737-2.716 5.739-5.249 7.7-8.659.653-1.144 1.613-1.981 2.798-2.655 4.329-2.451 7.781-5.821 10.232-10.171.959-1.715 2.879-2.042 4.227-3.186 6.76-5.718 13.05-12.029 20.443-17.012 1.45-.98 1.573-3.084 2.962-3.799 3.717-1.879 5.616-6.249 10.048-7.127.694-.143 1.45-.879 1.838-1.532 3.125-5.29 9.742-7.169 12.437-12.846.368-.797 1.369-.756 2.084-1.083 2.328-1.041 4.697-2.103 5.738-4.758.164-.429.47-1.123.776-1.164 3.758-.552 6.148-3.37 9.068-5.31 4.779-3.186 9.497-6.413 13.929-10.069.245-.204.408-.51.653-.735 4.514-4.064 9.701-4.268 14.358-.572 1.756 1.389 1.981 6.74.04 8.415-2.961 2.552-4.901 6.167-9.598 6.964-2.921.49-5.412 3.431-8.435 4.697-.429.184-1.021.654-1.021.98-.061 4.473-4.432 4.82-6.862 6.74-3.656 2.9-7.271 5.82-10.824 8.823-3.043 2.573-6.72 4.431-9.783 7.127-1.123.98-2.247 1.675-2.655 3.186-.163.592-.572 1.287-1.082 1.573-8.353 4.595-14.215 12.376-22.363 17.257-1.675 1.001-2.962 2.941-4.248 4.452-4.228 5.024-9.64 8.66-14.46 12.928-4.922 4.33-9.149 9.456-14.806 12.989-1.165.715-2.39 1.716-2.901 3.227-.204.612-.428 1.409-.898 1.695-5.739 3.431-9.027 9.578-14.603 13.193-1.347.878-2.695 2.002-3.553 3.329-3.799 5.902-9.435 9.803-14.562 14.357-4.084 3.615-7.74 7.863-11.518 11.886-2.328 2.472-5.106 4.677-7.087 7.251-5.392 7.086-12.233 12.805-17.788 19.687-2.798 3.472-6.025 6.597-9.129 9.803a435.078 435.078 0 0 1-9.211 9.17c-.735.715-1.43 1.307-1.409 2.41.02 1.838-.838 3.063-2.553 3.758-2.655 1.082-2.921 4.227-5.004 5.841-5.044 3.962-7.413 10.027-11.6 14.684-.408.47-.47 1.327-.939 1.654-7.271 5.045-11.11 12.683-15.42 19.994-.96 1.654-2.267 3.166-3.635 4.493-1.532 1.491-2.369 3.595-3.656 4.922-2.981 3.084-4.431 6.862-6.555 10.355-2.431 4.002-5.555 7.576-7.291 12.029-.838 2.144-2.778 3.512-3.799 5.636-.899 1.859-2.43 3.37-2.165 5.678.082.674-.245 1.389-.837 1.654-3.166 1.471-3.247 4.35-3.983 7.271-.694 2.696-2.838 4.983-4.125 7.594-1.511 3.05-2.9 6.09-3.819 9.34h-16.665v.08Zm745.763 0c.286-2.66-1.226-4.86-2.717-6.52-2.43-2.69-4.207-5.715-6.045-8.738-.858-1.389-1.429-2.92-3.227-3.451-1-.307-1.552-1.144-1.776-2.165-.817-3.676-3.411-5.984-6.025-8.414-1.716-1.614-3.493-3.574-4.187-5.739-1.634-4.983-5.228-8.598-8.169-12.56-3.268-4.391-6.78-8.66-10.947-12.377-2.308-2.062-3.717-5.146-5.534-7.74-1.94-2.757-3.574-5.82-5.923-8.149-2.941-2.9-5.044-6.453-7.802-9.353-4.921-5.188-9.129-10.967-13.887-16.277-4.902-5.474-8.659-11.989-14.664-16.482-1.92-1.429-2.001-4.043-3.676-5.698-2.88-2.838-5.555-5.902-8.414-8.781-4.493-4.514-8.578-9.375-12.621-14.276-1.042-1.246-1.879-2.655-3.432-3.39-1.225-.572-1.94-1.593-2.654-2.737-1.512-2.492-3.452-4.493-6.005-6.188-2.594-1.716-4.554-4.534-6.351-7.169-.838-1.225-1.695-2.41-2.778-3.308-5.085-4.105-9.456-8.925-13.765-13.806-3.043-3.431-6.372-6.433-10.293-8.843-1.899-1.164-3.819-2.9-4.779-4.514-1.859-3.063-4.554-4.656-7.373-6.065-4.942-2.471-8.291-6.76-12.396-10.15-2.9-2.39-2.88-6.413-3.268-9.926-.143-1.368 1.185-2.267 2.246-3.022 3.084-2.145 6.617-2.206 9.763 0 4.717 3.308 9.251 6.862 13.315 11.007 1.328 1.348 3.309 2.39 4.35 3.575 3.309 3.778 7.455 6.392 11.09 9.659 1.348 1.205 2.022 3.227 4.125 3.738.817.204 1.369.817 1.879 1.491 4.085 5.616 9.252 10.232 14.153 15.072 3.391 3.349 7.067 6.413 10.008 10.191 4.636 5.963 10.803 10.579 14.929 16.971.613.94 1.613 1.062 2.267 1.736 1.838 1.92 4.595 2.941 5.248 6.066.389 1.818 2.839 2.246 3.758 3.635 2.308 3.431 4.963 6.433 8.047 9.211 4.718 4.248 8.19 9.578 11.682 14.868 1.205 1.817 3.022 3.267 4.534 4.82 2.185 2.205 3.798 4.758 5.739 7.066 3.41 4.044 6.862 8.067 10.272 12.09 4.187 4.902 7.495 10.375 11.6 15.277.838 1 1.491 2.062 2.901 2.45.755.205 1.797.654 2.001 1.246 1.287 3.513 4.452 5.596 6.229 8.843a80.257 80.257 0 0 0 9.619 13.806c1.859 2.145 4.759 3.676 6.352 6.331 3.962 6.576 7.903 13.316 12.682 19.137 4.248 5.167 7.271 11.069 11.662 16.112 2.839 3.29 4.084 7.84 6.821 11.38h-18.626l.062.06Zm-754.28-668.505c-.265-3.145.041-6.331 3.513-8.557 2.88-1.838 5.984-2.349 8.169 0 1.94 2.103 4.432 4.043 3.35 7.985-.838 3.023-.143 5.78 3.635 7.822 4.105 2.226 8.047 4.166 12.519 5.678 4.452 1.511 9.129 2.716 13.438 4.758 3.207 1.532 6.454 3.145 10.212 1.593.51-.204 1.307-.061 1.879.184 6.882 2.961 14.235 3.901 21.505 5.269 3.452.654 6.76 2.144 10.314 2.512 7.148.735 14.01 3.023 21.362 3.125 4.452.061 8.986.51 13.459.796 2.634.184 5.636.388 8.373 1.246 3.043.94 5.943 1.573 9.456.572 2.614-.735 5.923.653 9.047.613 7.455-.062 14.889.204 22.343.449 1.001.041 1.92.082 2.818-.409 1.838-1.041 3.452-.816 5.494.082 2.635 1.185 5.657.143 8.516-.02 1.92-.123 3.82-.593 5.78.102.98.347 2.104.449 3.309.061 3.186-1.041 6.474-.817 9.843-.858 5.78-.061 11.58.981 17.462-.245 4.309-.898 8.945-.367 13.438-.306.981 0 1.9.041 2.86-.266 1.082-.326 2.266-.817 3.308-.674 9.19 1.389 18.258-1.531 27.408-.653 3.574-2.471 7.434-.163 11.151-.674 3.716-.531 7.454-.715 11.191-.429.327.021.674.061.981 0 5.841-1.572 11.906.858 17.747-1.021.98-.306 2.247.204 3.37.388 1.777.265 3.513.613 5.208-.429.837-.531 1.879-.633 2.859-.408 4.534 1.041 8.863-.531 13.275-.94.796-.081 1.715-.184 2.348-.612 1.491-1.022 2.655-2.227 4.759-1.001 2.553 1.491 5.024 3.043 6.597 5.555.796 1.266-2.104 7.699-3.758 8.455-1.92.899-3.942 1.511-5.617 2.9-.428.368-1.286.551-1.817.408-6.188-1.674-12.417.593-18.605-.183-4.494 2.573-9.64-.45-14.194 1.613-8.619-1.021-17.176 1.716-25.795.327-.755-.123-1.654.041-2.369.347-1.715.715-3.329 1.368-5.003-.082-.327-.286-.919-.286-1.389-.347-2.675-.368-4.616 2.818-7.291 1.797-2.471-.96-4.718-.796-6.985.245-1.143.511-2.205.307-3.349.164-5.8-.797-11.559-1.45-17.359.306-1.961.592-4.248.633-6.291.347-6.943-1.041-13.826.715-20.729.225-1.491-.102-2.839.102-4.289.449-2.144.511-4.329 1.328-6.637.062-.878-.47-2.247-.266-3.35-.082-4.819.837-9.782-.082-14.602 1.062-.837.204-1.858-.409-2.798-.654-1.429-.388-3.186-.96-4.309-.245-3.309 2.104-6.454.347-9.66.184-3.533-.163-7.005-.837-10.62.082-3.451.898-7.066-.429-10.538-.919a39.244 39.244 0 0 0-5.759-.429c-2.88 0-5.739-.102-8.619-.368-8.578-.755-17.196-.98-25.753-2.348-4.432-.715-9.068-.225-13.296-2.288-.408-.204-1.041-.265-1.429-.082-3.145 1.369-5.923-.04-8.68-1.184-3.431-1.43-6.719-3.411-10.661-1.736-.469.204-1.286-.184-1.838-.47-4.554-2.389-9.598-2.9-14.52-3.206-3.064-.184-4.861-3.615-8.108-2.451-4.473-2.573-9.824-1.695-14.48-3.778-4.085-1.818-8.823-2.39-12.764-4.268-6.025-2.88-12.213-6.311-15.971-12.111-2.349-3.615-3.268-8.108-2.961-13.01l-.103-.02ZM832.826.02c-1.429 4.963-2.164 9.272-3.043 13.52-1.205 5.882-2.961 11.56-4.574 17.299-1.185 4.248-2.349 8.618-2.635 13.213-.245 4.105-1.797 8.21-3.288 12.132-1.184 3.083-2.042 6.126-2.512 9.394-.286 2.063-.551 4.146-1.532 6.127-1.429 2.839-.081 6.106-1.062 9.068-.245.755-.02 1.756-.429 2.348-2.491 3.758-2.226 8.272-3.512 12.315-1.593 5.045-1.94 10.457-4.657 15.154.878 4.003-3.104 7.046-2.553 10.579.47 3.104-.531 5.657-1.225 8.292-.511 1.94-1.144 4.146-2.104 5.759-2.205 3.738-2.042 8.067-3.9 11.907-1.573 3.247-.96 7.311-1.655 10.987-.817 4.289-2.328 8.353-3.655 12.438-1.695 5.248-3.799 10.477-4.371 15.868-.449 4.248-1.96 8.129-2.716 12.234-.756 4.043-2.451 8.046-3.697 12.049-2.716 8.782-4.186 17.952-6.678 26.816-1.654 5.881-2.103 12.008-4.105 17.747-3.635 10.477-4.697 21.526-6.923 32.289-1.144 5.473-3.084 10.987-3.105 16.522-.02 4.758-1.919 9.19-1.368 13.949.327 2.859-4.881 8.945-7.577 9.272-.592.061-1.266-.184-1.838-.429-4.656-2.022-6.535-5.902-5.146-10.906.735-2.675.653-5.412 1.021-8.108.633-4.595 1.266-9.149 1.695-13.765.592-6.556 3.063-12.764 3.533-19.381.163-2.227 1.246-4.371 1.879-6.556 1.491-5.188 1.858-10.579 2.798-15.869.306-1.756.592-3.635 1.47-5.105 1.369-2.349 2.267-4.534 1.471-7.312-.531-1.858.939-3.451 1.593-5.003 1.45-3.493 2.389-6.985 2.553-10.743.04-.796.04-1.715.429-2.369 1.266-2.124 1.531-4.309 1.899-6.74.388-2.532 1.307-5.228 1.981-7.862 1.572-6.107 3.839-12.091 4.942-18.279.735-4.084 2.594-7.618 3.758-11.478.715-2.348 1.45-4.656 1.491-7.127.02-1.981.163-3.901 1.389-5.596.347-.49.51-1.225.531-1.838.122-6.719 3.267-12.601 5.126-18.83.796-2.635 2.022-5.147 1.756-8.026-.061-.776 0-1.757.409-2.369 2.981-4.555 1.858-10.212 3.9-14.827 2.002-4.514 2.145-9.313 3.452-13.908 1.205-4.248 3.022-8.537 2.961-13.173-.041-2.287 1.614-4.146 2.063-6.433.449-2.349 1.45-4.636 1.327-7.087-.061-1.144.368-1.879 1.083-2.553.735-.694 1.593-1.573 1.327-2.492-1.082-3.635 1.9-6.8 1.042-10.415-.204-.858.163-1.981.592-2.819 2.696-5.228 2.961-11.15 4.922-16.624 1.062-3.002 2.083-6.106 2.9-9.251.572-2.186 1.409-4.33 1.225-6.7-.061-.796-.122-1.776.245-2.409 2.635-4.432 2.186-9.62 3.575-14.337.49-1.695.919-3.227.469-5.167-.653-2.757 1.757-5.35 4.636-5.432 4.024-.102 8.047-.02 12.458-.02l-.041.06Zm82.386 580.42c-6.637-.286-9.435-4.371-7.474-9.293 1.143-2.879 3.186-5.106 5.207-7.475 3.636-4.227 7.618-7.924 11.825-11.498 1.9-1.613 4.31-2.062 6.066-3.901 1.287-1.347 3.043-2.164 4.289-3.798 1.531-2.022 4.472-2.165 6.535-3.799 2.247-1.777 5.228-2.594 6.801-5.269.572-.96 1.654-.939 2.614-1.103 1.695-.286 3.023-1.246 4.187-2.389 3.063-3.023 6.903-4.473 10.946-5.514.797-.205 1.716-.164 2.227-.838 3.104-4.044 8.128-4.432 12.274-6.453 2.757-1.348 5.779-2.227 8.046-4.473.756-.756 1.675-.939 2.614-1.185a335.426 335.426 0 0 0 18.871-5.902c4.11-1.409 8.54-1.899 12.81-2.941 3.96-.96 8.31 2.124 9.35 5.882.86 3.104-1.12 6.515-4.21 7.577-4.7 1.613-9.54 2.839-14.15 4.697-1.98.797-4.31.735-6.43 1.144-2.82.551-5.13 1.777-7.622 2.88-5.433 2.389-11.192 4.207-16.298 7.168-4.002 2.328-8.679 3.125-12.253 6.617-2.655 2.614-7.291 2.451-10.416 4.963-5.596 4.554-12.826 6.821-17.564 12.58-3.717.756-5.596 4.207-8.618 5.882-4.493 2.492-7.291 6.862-11.437 9.66-.49.327-.919 1.042-1.021 1.634-.797 5.126-4.8 4.82-7.209 5.126l.04.021ZM441.176 685.005c.919 3.288-.531 5.065-4.186 5.82-1.961.409-4.024 1.226-5.372 3.146-1.307 1.899-3.88 1.204-5.677 2.512-5.065 3.696-10.783 6.453-15.685 10.415-1.858 1.491-4.146 2.512-6.311 3.554-5.698 2.777-10.967 6.311-16.481 9.394-4.656 2.594-9.027 6.005-13.316 9.334-4.146 3.226-9.108 4.799-14.52 3.86-1.042-.184-1.614-1.042-1.941-2.002-.49-1.368-1-2.737-1.388-4.146-.266-.939-.49-2.308.224-2.798 3.268-2.287 4.82-6.658 9.089-7.597 1.736-.388 2.695-1.736 4.105-2.532 9.864-5.535 19.34-11.744 28.714-17.973 6.107-4.064 12.56-7.577 18.728-11.457 4.35-2.737 9.088-5.412 14.153-7.148 6.086-2.083 10.191.756 9.864 7.577v.041Zm-17.155-160.034c0 4.84-3.554 7.842-8.557 7.25-2.573-.306-5.085-1.164-7.434-2.001-6.188-2.206-12.621-2.533-18.953-3.656-4.145-.756-7.883-2.982-12.131-3.349-2.92-.245-4.962-1.532-6.841-3.84-2.737-3.39-2.104-8.128 2.083-9.047 4.227-.94 8.761-3.248 13.009.204 4.595-.306 8.659 2.124 13.234 2.41 3.84.225 7.577 2.063 11.6 1.103 2.717 2.389 6.25 2.246 9.456 3.186 2.982.878 4.514 3.717 4.534 7.74Zm624.859-96.376c-6.39-.47-12.03 1.736-17.85 3.002-.47.103-1.04.654-1.33.531-4.14-2.001-7.8.695-11.66 1.185-1.45.184-2.96.388-4.39.163-2.96-.51-5.62-1.736-6.84-4.758-.8-1.981.86-5.739 3.19-7.72 2.53-2.145 5.35-3.104 8.72-3.615 6.14-.919 12.31-1.266 18.48-1.756 4.35-.348 8.72-.164 12.82-2.349 2.07-1.103 9.83 2.022 11.11 3.901 1.76 2.594-.2 8.067-3.53 9.517-2.84 1.246-5.76 2.287-8.7 1.94l-.02-.041Z" class="3" style="opacity: 0; visibility: hidden; translate: none; rotate: none; scale: none; transform-origin: 0px 0px;" data-svg-origin="151.40408325195312 -0.07117724418640137" transform="matrix(0.99917,-0.04074,0.04074,0.99917,0.12857,6.16814)"></path><path fill="currentColor" d="M899.342 744.17c-6.454-.633-12.907-1.185-19.34-1.92-15.154-1.715-30.328-3.39-45.462-5.31-21.934-2.777-43.991-4.268-65.966-6.556-9.558-1-19.156-1.164-28.674-2.226-12.56-1.409-25.201-1.838-37.762-3.124-7.597-.776-15.255-1.042-22.873-1.573-11.845-.817-23.691-1.675-35.516-2.512-10.374-.735-20.749-1.327-31.104-2.165-13.234-1.062-26.509-1.654-39.763-2.839-11.498-1.041-23.078-1.49-34.596-2.532-10.028-.919-20.056-2.001-30.063-3.063-9.395-.981-18.748-2.226-28.102-3.35-1.92-.224-2.798.164-2.634 2.206.081.98 0 1.961.04 2.941.021 1.756-1.143 3.002-2.552 3.145-1.716.163-2.941-1.123-3.207-3.002-.041-.327-.082-.654-.082-.98-.163-6.107-.592-5.413-6.372-6.25-6.412-.919-12.886-1.47-19.32-2.185-.49-.061-1.041.061-1.45-.164-1.45-.776-3.165-1.674-2.961-3.512.245-2.165 2.185-2.839 4.064-2.635 4.84.552 9.66 1.369 14.5 2.042 2.574.368 5.167.531 7.782.613 2.185.061 3.104-.735 2.757-2.798-1.021-6.086-.756-12.274-1.328-18.38-1.368-14.746-2.675-29.471-3.615-44.236-.531-8.435-1.613-16.829-2.267-25.243-.714-9.231-2.246-18.381-2.614-27.653-.224-5.657-1.082-11.314-1.593-16.971-.898-9.517-1.45-19.096-2.696-28.572-1.572-12.111-2.103-24.303-2.879-36.455-.47-7.27-.654-14.582-.49-21.852.102-4.473-.776-8.721-1.552-13.01-.981-5.371 1.388-8.087 6.739-7.781 16.42.919 32.84 1.716 49.281 2.533 15.215.776 30.409 1.552 45.624 2.307 18.34.94 36.68 1.879 55.02 2.798 13.622.674 27.285 1.144 40.886 2.063 13.459.899 26.938 1.307 40.376 2.185 7.598.491 15.215 1.083 22.813 1.614 15.256 1.041 30.532 1.94 45.768 3.084 14.908 1.123 29.756 2.716 44.664 3.655 9.109.572 18.177 1.45 27.285 2.063 12.765.858 25.529 2.001 38.293 2.921 12.193.857 24.385 1.388 36.619 1.164 1.572-.021 2.757-.776 4.125-1.185 2.737-.837 4.942.694 4.207 3.349-2.144 7.741-.408 15.501-.694 23.242-.49 13.295-.735 26.611-1.042 39.906-.265 11.212-.98 22.404-.919 33.637.062 11.028-.694 22.077-.633 33.105.102 15.419-.715 30.839-.061 46.278.408 9.538-.143 19.096-.082 28.633.061 8.415.715 16.849.49 25.264-.204 7.76.511 15.5.286 23.261-.061 2.594-.592 3.819-3.349 4.228-2.655.388-5.065 2.226-7.986 1.797h-.02ZM458.228 462.763c.612 5.126.735 10.129.939 15.133a2767.476 2767.476 0 0 0 1.94 38.906c.633 11.191 2.329 22.281 3.145 33.432.879 11.968 2.104 23.895 3.105 35.842.96 11.641 2.042 23.323 3.206 34.964 1.818 18.279 3.104 36.619 4.616 54.938.612 7.291 1.327 14.561 1.777 21.852.142 2.329 1.123 3.084 3.247 3.329 10.313 1.226 20.566 2.9 30.9 3.697 11.008.837 21.995 2.042 33.003 2.818 12.642.899 25.263 2.063 37.885 3.002 12.662.94 25.304 2.022 37.986 2.798 15.869.981 31.717 1.961 47.565 3.227 9.701.776 19.463 1.021 29.184 1.634 4.698.286 9.354.96 14.031 1.348 8.087.674 16.195 1.246 24.303 1.858 6.311.47 12.622.817 18.912 1.389 11.151 1.021 22.281 2.226 33.432 3.268 12.805 1.184 25.631 2.165 38.436 3.472 10.15 1.041 20.26 2.553 30.41 3.717 11.294 1.307 22.587 2.491 33.881 3.696 3.717.388 7.455.797 11.192.96 1.573.061 3.329-.122 3.288-2.573-.081-6.148 0-12.274-.102-18.422-.122-6.8-.47-13.601-.531-20.402-.102-9.252-.061-18.503-.061-27.755 0-18.523-.123-37.047 0-55.571.122-15.439.51-30.859.817-46.298.122-6.822.081-13.643.51-20.444.797-12.784 1.021-25.569 1.246-38.354.123-6.29-.306-12.58-.347-19.054-3.084-.266-6.27-.164-9.456-.246-11.518-.245-23.016-1.021-34.515-1.776-8.25-.552-16.46-1.43-24.691-2.083-15.583-1.226-31.206-2.227-46.768-3.595-13.908-1.246-27.837-2.369-41.745-3.308-21.587-1.471-43.174-3.043-64.802-4.065-10.579-.49-21.158-1-31.696-1.674-14.276-.899-28.572-1.43-42.847-2.451-6.495-.47-13.071-.02-19.545-.674-15.358-1.552-30.777-1.654-46.156-2.553-15.419-.898-30.9-1.062-46.278-2.226-12.499-.939-25.039-.613-37.497-2.103-.592-.062-1.245.224-1.919.367v-.02Z" class="2" style="opacity: 0; visibility: hidden; translate: none; rotate: none; scale: none; transform-origin: 0px 0px;" data-svg-origin="441.56634521484375 456.2446594238281" transform="matrix(0.99817,0.06052,-0.06052,0.99817,28.41999,-25.88867)"></path><path fill="currentColor" d="M945.456 729.711c-7.924 1.368-15.868 2.9-23.874 4.064-4.636.674-9.231 1.552-13.949 1.92-5.964.469-11.805 2.083-17.768 2.736-7.577.817-15.113 2.002-22.629 3.023-9.006 1.246-18.054 1.96-27.04 3.349-8.026 1.246-16.175 1.716-24.262 2.594-6.106.674-12.213 1.572-18.319 2.124-5.658.51-11.253 1.797-16.89 2.063-7.291.326-14.419 1.899-21.628 2.287-5.82.306-11.621.98-17.319 1.756-7.209 1.001-14.541.919-21.648 2.41-5.31 1.103-10.681.674-15.991 1.552-7.005 1.164-14.133 1.675-21.199 2.472-7.087.796-14.153 1.633-21.219 2.409-8.721.981-17.442 1.838-26.142 2.921-10.354 1.286-20.749 2.369-31.104 3.696-6.249.797-12.519 1.859-18.83 2.206-8.577.49-16.992 2.124-25.467 3.268-15.889 2.165-31.758 4.554-47.667 6.392-8.088.94-16.032 2.655-24.079 3.574-6.392.735-12.744 1.634-19.013 2.818-5.372 1.022-10.825 1.736-16.216 2.615-6.168 1-12.356 2.103-18.585 2.879-6.74.838-13.459 1.838-20.096 3.227-5.555 1.164-11.192 1.613-16.747 2.267a39.507 39.507 0 0 1-13.336-.674c-5.29-1.164-6.862-2.737-6.372-8.087.572-6.148-.409-12.377.47-18.585.571-4.126-.348-8.353-.45-12.52-.102-3.533.082-7.107-.02-10.66-.266-8.537.061-17.094.143-25.631a320.115 320.115 0 0 0-.409-19.81c-.326-6.576.184-13.173.205-19.77 0-4.86-.143-9.741-.307-14.602-.306-9.578-.286-19.157-.735-28.755-.368-7.802.102-15.726-.306-23.568-.348-6.801-.102-13.623-.797-20.423-.408-4.003-.306-8.088-.327-12.132-.061-12.662-.674-25.263-1.429-37.884-.204-3.492-.307-7.107-.409-10.661-.326-11.498-1.062-22.996-1.307-34.494-.204-9.354-1.143-18.708-.327-28.041.307-3.553-.367-7.087.082-10.701.286-2.206-1.164-4.616-1.634-6.965-.653-3.288 2.063-6.208 4.922-4.901 5.331 2.471 10.824 1.593 16.216 1.287 10.845-.634 21.689-1.532 32.513-2.635 5.943-.613 11.907-1.205 17.809-2.083 4.983-.735 9.987-1.042 14.97-1.654 13.99-1.695 28.02-3.207 41.99-5.086 6.923-.939 13.928-1.041 20.831-2.042 3.206-.47 6.392-1.103 9.619-1.491a8010.879 8010.879 0 0 1 43.93-5.208c15.48-1.776 30.981-3.553 46.482-5.187 10.314-1.083 20.628-1.961 30.962-2.839 5.146-.429 10.231-1.389 15.358-1.96 9.374-1.042 18.789-1.41 28.142-2.451 18.32-2.043 36.659-3.676 55.02-5.269 15.031-1.287 30.042-2.737 45.073-4.044 11.478-1.001 22.894-2.573 34.453-3.104 7.291-.348 14.746-.94 22.057-2.308 5.943-1.103 12.131-.797 18.197-1.409 10.967-1.124 21.955-1.879 32.901-3.064 8.66-.939 17.421-1.593 26.142-2.246 5.657-.429 11.334-.715 16.951-1.369 7.597-.878 15.276-.817 22.792-2.369 6.147-1.245 10.232 2.962 8.7 9.048-2.308 9.251-2.022 18.687-2.186 28.081-.163 9.068-.081 18.136-.571 27.224-.47 8.904-1.062 17.829-1.491 26.754-.347 7.25-1.328 14.48-1.981 21.73-.266 2.859-.429 5.739-.633 8.618-.838 10.824-1.798 21.649-2.472 32.493-.592 9.803-1.164 19.647-2.083 29.389-.714 7.536-1.184 15.133-2.103 22.69-.695 5.555-.878 11.232-1.226 16.849-.469 7.944-1.347 15.868-1.613 23.813-.265 7.597-1.389 15.113-1.675 22.71-.347 9.68-1.47 19.34-2.022 29.021-.388 6.923-.612 13.867-1.47 20.75-.143 1.123-.041 2.287.123 3.41.183 1.164.51 1.961 2.205 1.777 6.454-.654 12.826-1.654 19.157-3.104 3.615-.838 7.434-.899 11.09-1.777.612-.143 1.286-.061 1.94-.061 1.858-.021 3.227.98 3.798 2.573.634 1.715-.551 3.043-1.736 4.207-2.083 2.042-4.962 1.654-7.372 2.001-8.659 1.185-17.196 3.003-25.835 4.085-2.962.368-3.86 2.022-4.228 4.411-.265 1.777-.204 3.595-.408 5.372-.225 1.858-2.267 3.9-3.697 3.88-1.491-.021-3.594-2.104-3.921-3.84-.449-2.369.837-4.881-.653-7.372l-.021.041Zm22.71-326.073c-.98-.51-1.96-.653-2.92-.469-9.252 1.858-18.687 1.715-28.041 2.696-11.11 1.164-22.261 2.124-33.391 3.124-1.777.164-3.676-.347-5.331.143-5.228 1.532-10.701.592-15.929 1.716-5.76 1.225-11.621.939-17.421 1.777-5.902.837-11.927 1.368-17.87 1.47-5.514.082-10.967.837-16.441 1.103-10.66.51-21.26 2.206-31.9 3.227-13.051 1.245-26.121 2.287-39.171 3.451-10.171.899-20.321 1.838-30.492 2.757-7.924.715-15.807 1.716-23.772 2.185-7.107.409-14.153 1.818-21.26 2.145-9.885.449-19.627 2.063-29.471 2.818-7.903.593-15.827 1.634-23.731 2.696-9.803 1.328-19.688 2.002-29.532 3.043-9.966 1.062-19.912 2.287-29.878 3.349-10.784 1.144-21.587 2.206-32.33 3.615-13.683 1.798-27.448 3.064-41.111 4.963-7.066.98-14.153 1.879-21.281 2.43-5.636.429-11.11 1.716-16.706 2.247-3.86.368-7.781.572-11.6 1.246-11.825 2.103-23.854 2.634-35.74 3.962-8.986 1-18.197 1.899-27.387 1.654-1.879-.041-4.207-.47-5.678.776-1.409 1.164 1.205 2.818.409 4.452-.204.429-.184.96-.204 1.45-.184 4.718-.368 9.436-.103 14.174.368 6.76.286 13.54.47 20.3.204 8.414.347 16.808.735 25.222.348 7.741 1.124 15.461 1.45 23.201.266 6.311-.306 12.703.368 18.952 1.164 10.845.49 21.73 1.368 32.575.593 7.27-.081 14.623.531 21.893.552 6.474-.286 12.948.47 19.422.552 4.657.654 9.477.286 14.092-.735 9.395.735 18.708.368 28.061-.184 4.779.143 9.579-.225 14.378-.388 4.942.204 9.925.102 14.909-.102 4.636.511 9.333.266 14.03-.409 7.884-.674 15.848-.205 23.63.491 8.434-.96 16.787.143 25.201.511 3.962.45 8.067 0 12.111-.224 2.043.613 3.166 3.084 3.247 3.145.103 6.147-.612 9.17-1.082 7.516-1.144 15.113-1.45 22.608-2.982 11.355-2.308 22.813-4.493 34.311-5.779 14.337-1.593 28.428-4.779 42.806-6.086 11.662-1.062 23.119-3.574 34.76-4.881 9.803-1.103 19.585-2.696 29.388-3.86 2.41-.286 4.759-1.042 7.149-1.328 11.355-1.327 22.71-2.553 34.065-3.86 5.126-.592 10.273-1.511 15.378-1.92 10.682-.878 21.281-2.512 31.901-3.737 7.679-.899 15.44-1.184 23.098-2.573 8.762-1.573 17.727-1.45 26.57-2.676 12.499-1.756 25.08-2.879 37.64-4.227 7.066-.756 14.153-1.348 21.199-2.145 6.127-.714 12.254-1.429 18.421-1.94 8.067-.653 16.094-1.858 24.161-2.777 5.146-.593 10.334-1.083 15.48-1.695 9.17-1.103 18.34-2.288 27.51-3.391 7.699-.919 15.399-1.756 23.078-2.675 5.31-.633 10.599-1.368 15.889-2.083 7.393-1.001 14.766-2.206 22.159-3.166 5.616-.735 11.11-2.103 16.746-2.757 6.903-.796 13.684-2.471 20.628-3.227 3.369-.367 3.369-.857 3.676-4.472.49-5.841.633-11.703 1.164-17.503 1.082-11.6 1.634-23.241 2.512-34.862.837-11.13 1.532-22.281 2.226-33.432.572-9.251 1.103-18.523 2.165-27.734.388-3.37 0-6.719.408-10.11.654-5.636 1.389-11.293 1.593-16.991.184-5.024.327-10.069.981-15.032.959-7.209 1.245-14.459 1.878-21.689.838-9.803 1.369-19.626 2.165-29.429.715-8.659 1.777-17.278 2.39-25.937.715-10.293 1.266-20.587 1.593-30.9.224-6.781.612-13.561.531-20.382-.123-10.007-.143-20.076 1.634-30.063l.04-.041Z" class="1" style="opacity: 0; visibility: hidden; translate: none; rotate: none; scale: none; transform-origin: 0px 0px;" data-svg-origin="370.4118347167969 394.7192077636719" transform="matrix(0.99927,-0.03828,0.03828,0.99927,-14.83945,14.46751)"></path></g><defs><clipPath id="a" class="a"><path fill="currentColor" d="M0 0h1383.96v1011.61H0z"></path></clipPath></defs></svg><label data-css="toggle" aria-role="switch" aria-label="turn gsap on" data-hero="toggle" class="toggle-w" style="translate: none; rotate: none; scale: none; transform: translate(0px, 0px);"><div class="toggle-slider-shadow"></div><input type="checkbox" class="toggle-html-input"><span class="toggle-slider"><div class="toggle-ball"></div></span></label></div><div class="comp"><div data-hero="par" class="par-base _w-ch" aria-label="Well, not just because GSAP, let’s dive into why, how and when to incorporate motion design into your websites, with some cloneable templates along the way to get you started"><div aria-hidden="true" style="position: relative; display: block; text-align: center; translate: none; rotate: none; scale: none; transform: translate(0px, 0px); opacity: 1; visibility: inherit;">Well, not just because GSAP, let’s dive into why, how and when </div><div aria-hidden="true" style="position: relative; display: block; text-align: center; translate: none; rotate: none; scale: none; transform: translate(0px, 0px); opacity: 1; visibility: inherit;">to incorporate motion design into your websites, with some </div><div aria-hidden="true" style="position: relative; display: block; text-align: center; translate: none; rotate: none; scale: none; transform: translate(0px, 0px); opacity: 1; visibility: inherit;">cloneable templates along the way to get you started</div></div><div data-hero="alpha" class="hero-btn-w" style="translate: none; rotate: none; scale: none; transform: translate(0px, 0px); opacity: 1; visibility: inherit;"><a data-module="btn" href="#content" class="btn-link w-inline-block w--current"><div class="overflow"><div aria-label="Explore templates"><div aria-hidden="true" style="position: relative; display: inline-block; translate: none; rotate: none; scale: none; transform: translate(0px, 0px);">E</div><div aria-hidden="true" style="position: relative; display: inline-block; translate: none; rotate: none; scale: none; transform: translate(0px, 0px);">x</div><div aria-hidden="true" style="position: relative; display: inline-block; translate: none; rotate: none; scale: none; transform: translate(0px, 0px);">p</div><div aria-hidden="true" style="position: relative; display: inline-block; translate: none; rotate: none; scale: none; transform: translate(0px, 0px);">l</div><div aria-hidden="true" style="position: relative; display: inline-block; translate: none; rotate: none; scale: none; transform: translate(0px, 0px);">o</div><div aria-hidden="true" style="position: relative; display: inline-block; translate: none; rotate: none; scale: none; transform: translate(0px, 0px);">r</div><div aria-hidden="true" style="position: relative; display: inline-block; translate: none; rotate: none; scale: none; transform: translate(0px, 0px);">e</div> <div aria-hidden="true" style="position: relative; display: inline-block; translate: none; rotate: none; scale: none; transform: translate(0px, 0px);">t</div><div aria-hidden="true" style="position: relative; display: inline-block; translate: none; rotate: none; scale: none; transform: translate(0px, 0px);">e</div><div aria-hidden="true" style="position: relative; display: inline-block; translate: none; rotate: none; scale: none; transform: translate(0px, 0px);">m</div><div aria-hidden="true" style="position: relative; display: inline-block; translate: none; rotate: none; scale: none; transform: translate(0px, 0px);">p</div><div aria-hidden="true" style="position: relative; display: inline-block; translate: none; rotate: none; scale: none; transform: translate(0px, 0px);">l</div><div aria-hidden="true" style="position: relative; display: inline-block; translate: none; rotate: none; scale: none; transform: translate(0px, 0px);">a</div><div aria-hidden="true" style="position: relative; display: inline-block; translate: none; rotate: none; scale: none; transform: translate(0px, 0px);">t</div><div aria-hidden="true" style="position: relative; display: inline-block; translate: none; rotate: none; scale: none; transform: translate(0px, 0px);">e</div><div aria-hidden="true" style="position: relative; display: inline-block; translate: none; rotate: none; scale: none; transform: translate(0px, 0px);">s</div></div><div aria-label="Explore templates"><div aria-hidden="true" style="position: relative; display: inline-block; translate: none; rotate: none; scale: none; transform: translate(0px, 0px);">E</div><div aria-hidden="true" style="position: relative; display: inline-block; translate: none; rotate: none; scale: none; transform: translate(0px, 0px);">x</div><div aria-hidden="true" style="position: relative; display: inline-block; translate: none; rotate: none; scale: none; transform: translate(0px, 0px);">p</div><div aria-hidden="true" style="position: relative; display: inline-block; translate: none; rotate: none; scale: none; transform: translate(0px, 0px);">l</div><div aria-hidden="true" style="position: relative; display: inline-block; translate: none; rotate: none; scale: none; transform: translate(0px, 0px);">o</div><div aria-hidden="true" style="position: relative; display: inline-block; translate: none; rotate: none; scale: none; transform: translate(0px, 0px);">r</div><div aria-hidden="true" style="position: relative; display: inline-block; translate: none; rotate: none; scale: none; transform: translate(0px, 0px);">e</div> <div aria-hidden="true" style="position: relative; display: inline-block; translate: none; rotate: none; scale: none; transform: translate(0px, 0px);">t</div><div aria-hidden="true" style="position: relative; display: inline-block; translate: none; rotate: none; scale: none; transform: translate(0px, 0px);">e</div><div aria-hidden="true" style="position: relative; display: inline-block; translate: none; rotate: none; scale: none; transform: translate(0px, 0px);">m</div><div aria-hidden="true" style="position: relative; display: inline-block; translate: none; rotate: none; scale: none; transform: translate(0px, 0px);">p</div><div aria-hidden="true" style="position: relative; display: inline-block; translate: none; rotate: none; scale: none; transform: translate(0px, 0px);">l</div><div aria-hidden="true" style="position: relative; display: inline-block; translate: none; rotate: none; scale: none; transform: translate(0px, 0px);">a</div><div aria-hidden="true" style="position: relative; display: inline-block; translate: none; rotate: none; scale: none; transform: translate(0px, 0px);">t</div><div aria-hidden="true" style="position: relative; display: inline-block; translate: none; rotate: none; scale: none; transform: translate(0px, 0px);">e</div><div aria-hidden="true" style="position: relative; display: inline-block; translate: none; rotate: none; scale: none; transform: translate(0px, 0px);">s</div></div></div></a></div></div><div data-hero="layer" class="layer hero-alt" style="translate: none; rotate: none; scale: none; transform: translate(0%, 10%); opacity: 1; visibility: inherit;"><div class="hero-stripe-w" style="translate: none; rotate: none; scale: none; transform: rotate(24.6883deg);"><div class="hero-stripe" style="opacity: 1; visibility: inherit; translate: none; rotate: none; scale: none; transform: translate(0%, 200%) translate(-2613px, 0px);"><div class="hero-stripe-text">SCROLL INTERACTIONS</div><div class="hero-stripe-text">SCROLL INTERACTIONS</div><div class="hero-stripe-text">SCROLL INTERACTIONS</div></div></div><div class="hero-stripe-w" style="translate: none; rotate: none; scale: none; transform: rotate(24.236deg);"><div class="hero-stripe" style="opacity: 1; visibility: inherit; translate: none; rotate: none; scale: none; transform: translate(0%, 120%) translate(1222px, 0px);"><div class="hero-stripe-text">TEXT EFFECTS</div><div class="hero-inner-img"><div data-hero="text" class="hero-img-tx-w"><img src="https://cdn.prod.website-files.com/67fea42b19018db93e3fe132/6814c457b8240d06fc8ba4d2_letters-bundle-cutout.avif" loading="lazy" alt="" class="img abs-top z-3"><img src="https://cdn.prod.website-files.com/67fea42b19018db93e3fe132/6814c45765eac08b46bedfe2_letters-bundle-shadow.avif" loading="lazy" alt="" class="img multiply"></div></div><div class="hero-stripe-text">TEXT EFFECTS</div></div></div><div class="hero-stripe-w" style="translate: none; rotate: none; scale: none; transform: rotate(26.2224deg);"><div class="hero-stripe" style="opacity: 1; visibility: inherit; translate: none; rotate: none; scale: none; transform: translate(0%, 40%) translate(-1495px, 0px);"><div class="hero-stripe-text">SLIDERS</div><div class="hero-stripe-text">SLIDERS</div><div class="hero-inner-img"><div data-hero="cards" class="hero-slider-w"><div class="hero-card layer-1"><img src="https://cdn.prod.website-files.com/67fea42b19018db93e3fe132/6808d428439e773c3655b912_Frame%20224.avif" loading="lazy" alt="" class="hero-card-img"></div><div class="hero-card layer-1"><img src="https://cdn.prod.website-files.com/67fea42b19018db93e3fe132/6808d428cc6587c40140c0f8_Frame%20226.avif" loading="lazy" alt="" class="hero-card-img"></div><div class="hero-card"><img src="https://cdn.prod.website-files.com/67fea42b19018db93e3fe132/6808d42888ac3e86eeab2b27_Frame%20225.avif" loading="lazy" alt="" class="hero-card-img"></div></div></div><div class="hero-stripe-text">SLIDERS</div><div class="hero-stripe-text">SLIDERS</div></div></div><div class="hero-stripe-w higher" style="translate: none; rotate: none; scale: none; transform: rotate(4.31813deg);"><div class="hero-stripe" style="opacity: 1; visibility: inherit; translate: none; rotate: none; scale: none; transform: translate(0%, -40%) translate(1392px, 0px);"><div class="hero-stripe-text">Inertia Inertia</div><div class="hero-inner-img"><div data-hero="video" class="hero-running-w"><img src="https://cdn.prod.website-files.com/67fea42b19018db93e3fe132/6808a75f99cb2dd31d91566f_Frame%20223.avif" loading="lazy" alt=""><video loop="" playsinline="true" autoplay="" class="alpha-video layered"><source src="https://assets.itsoffbrand.io/gsap-template/assets/running.mp4" type="video/mp4; codecs=hvc1"><source src="https://assets.itsoffbrand.io/gsap-template/assets/running.webm" type="video/webm"></video></div></div><div class="hero-stripe-text">Inertia Inertia</div></div></div><div class="hero-stripe-w" style="translate: none; rotate: none; scale: none; transform: rotate(24.6182deg);"><div class="hero-stripe" style="opacity: 1; visibility: inherit; translate: none; rotate: none; scale: none; transform: translate(0%, -120%) translate(-1792px, 0px);"><div class="hero-stripe-text">MARQUEES</div><div class="hero-stripe-text">MARQUEES</div><div class="hero-stripe-text">MARQUEES</div><div class="hero-stripe-text">MARQUEES</div></div></div></div><div class="code-block w-embed w-script"><script>
|
||
{
|
||
const split = (text, type = "chars") => {
|
||
// Handle both single elements and arrays of elements
|
||
const elements = Array.isArray(text) ? text : [text];
|
||
|
||
// Set aria labels
|
||
elements.forEach((element) => {
|
||
if (element && typeof element.setAttribute === "function") {
|
||
element.setAttribute("aria-label", element.textContent);
|
||
}
|
||
});
|
||
|
||
// Split text and set aria-hidden
|
||
const splits = new SplitText(text, { type });
|
||
splits[type].forEach((char) => {
|
||
if (char && typeof char.setAttribute === "function") {
|
||
char.setAttribute("aria-hidden", "true");
|
||
}
|
||
});
|
||
|
||
return splits[type];
|
||
};
|
||
|
||
/** -- Setup and Utils */
|
||
|
||
let titleSplit,
|
||
parSplit,
|
||
layerItems,
|
||
isIn = false;
|
||
|
||
const animateIn = async (delay = 0) => {
|
||
isIn = true;
|
||
animateStripesOut();
|
||
|
||
gsap.to(parSplit, {
|
||
autoAlpha: 1,
|
||
yPercent: 0,
|
||
duration: 0.8,
|
||
delay: 0.65,
|
||
ease: "expo.out",
|
||
stagger: {
|
||
each: 0.08,
|
||
},
|
||
});
|
||
|
||
await gsap.to(titleSplit.flat(), {
|
||
yPercent: 0,
|
||
duration: 1.2,
|
||
delay: delay,
|
||
ease: "expo.out",
|
||
stagger: {
|
||
each: 0.01,
|
||
from: "end",
|
||
},
|
||
});
|
||
};
|
||
|
||
const animateOut = async () => {
|
||
isIn = false;
|
||
animateStripesIn();
|
||
|
||
gsap.to(parSplit, {
|
||
autoAlpha: 0,
|
||
yPercent: 100,
|
||
duration: 0.8,
|
||
ease: "expo.out",
|
||
stagger: {
|
||
each: 0.08,
|
||
},
|
||
});
|
||
|
||
await gsap.to(titleSplit.flat(), {
|
||
yPercent: 110,
|
||
duration: 0.8,
|
||
ease: "expo.out",
|
||
delay: 0.1,
|
||
stagger: {
|
||
each: 0.01,
|
||
from: "center",
|
||
},
|
||
});
|
||
};
|
||
|
||
/** -- Scribble Animaiton */
|
||
let isScribbling = false;
|
||
const SCRIBBLE_CONFIG = {
|
||
ROTATION_RANGE: 20,
|
||
TIME_BETWEEN_SCRIBBLES: 0.015,
|
||
VISIBILITY_DURATION: 0.01,
|
||
REVERSE_ORDER: true,
|
||
};
|
||
|
||
const animateScribble = (scribble) => {
|
||
if (isScribbling) return;
|
||
isScribbling = true;
|
||
|
||
gsap.set(scribble, { autoAlpha: 0, rotation: 0 });
|
||
|
||
const tl = gsap.timeline();
|
||
|
||
const scribblesToAnimate = [...scribble].reverse();
|
||
|
||
scribblesToAnimate.forEach((item, index) => {
|
||
const randomRotation =
|
||
Math.random() * SCRIBBLE_CONFIG.ROTATION_RANGE -
|
||
SCRIBBLE_CONFIG.ROTATION_RANGE / 2;
|
||
const baseDelay = index * SCRIBBLE_CONFIG.TIME_BETWEEN_SCRIBBLES;
|
||
|
||
tl.add(
|
||
gsap.set(item, {
|
||
autoAlpha: 1,
|
||
rotation: randomRotation,
|
||
delay: baseDelay,
|
||
})
|
||
);
|
||
|
||
tl.add(
|
||
gsap.set(item, {
|
||
autoAlpha: 0,
|
||
delay: baseDelay + SCRIBBLE_CONFIG.VISIBILITY_DURATION,
|
||
})
|
||
);
|
||
});
|
||
|
||
tl.call(() => {
|
||
isScribbling = false;
|
||
});
|
||
};
|
||
|
||
// hero stripes animation
|
||
let heroStripes,
|
||
stripes,
|
||
stripesAnimation = null;
|
||
|
||
const calcX = (i) => {
|
||
return i % 2 === 0
|
||
? -heroStripes[i].scrollWidth
|
||
: heroStripes[i].scrollWidth;
|
||
};
|
||
|
||
const animateStripesIn = () => {
|
||
if (stripesAnimation) {
|
||
stripesAnimation.kill();
|
||
}
|
||
|
||
// play video on the hero
|
||
document.querySelector("video").play()
|
||
|
||
gsap.set(heroStripes, {
|
||
autoAlpha: 1,
|
||
x: (i) => calcX(i),
|
||
yPercent: (i) => (heroStripes.length / 2 - i) * 80,
|
||
});
|
||
|
||
gsap.set(stripes, {
|
||
rotation: (i) => Math.random() * 30,
|
||
ease: "expo.out",
|
||
});
|
||
|
||
stripesAnimation = gsap.to(heroStripes, {
|
||
x: 0,
|
||
delay: 0.2,
|
||
duration: (i) => Math.random() + 1.2,
|
||
ease: "expo.out",
|
||
});
|
||
};
|
||
|
||
const animateStripesOut = () => {
|
||
if (stripesAnimation) {
|
||
stripesAnimation.kill();
|
||
}
|
||
|
||
stripesAnimation = gsap.to(heroStripes, {
|
||
x: (i) => calcX(i),
|
||
duration: 0.8,
|
||
ease: "expo.out",
|
||
});
|
||
};
|
||
|
||
addEventListener("GSAPReady", (event) => {
|
||
const wrapper = document.querySelector("[data-module='hero']");
|
||
if (!wrapper) return;
|
||
|
||
const layer = wrapper.querySelector("[data-hero='layer']");
|
||
layerItems = layer.children;
|
||
const title = wrapper.querySelector("[data-hero='title']");
|
||
const toggle = wrapper.querySelector("[data-hero='toggle']");
|
||
const alpha = document.querySelectorAll("[data-hero='alpha']");
|
||
const par = document.querySelectorAll("[data-hero='par']");
|
||
const scribble = [
|
||
...document.querySelector("[data-hero='scribble']").children[0].children,
|
||
];
|
||
|
||
stripes = [...layer.children];
|
||
heroStripes = stripes.map((item) => item.children[0]);
|
||
gsap.set(heroStripes, { autoAlpha: 0 });
|
||
|
||
gsap.to(layer, {
|
||
yPercent: 10,
|
||
scrollTrigger: {
|
||
trigger: layer,
|
||
start: "top top",
|
||
end: "+=100%",
|
||
scrub: true,
|
||
},
|
||
});
|
||
|
||
// split
|
||
titleSplit = split(title.children, "chars");
|
||
parSplit = split(par, "lines");
|
||
|
||
// initial state
|
||
gsap.set(titleSplit.flat(), { yPercent: -110 });
|
||
gsap.set(layer, { autoAlpha: 1 });
|
||
gsap.set(toggle, { scale: 3, rotation: 360 });
|
||
gsap.set(parSplit, { autoAlpha: 0, yPercent: 100 });
|
||
gsap.set(alpha, { autoAlpha: 0, scale: 0.7 });
|
||
gsap.set(scribble, { autoAlpha: 0 });
|
||
|
||
animateIn(0.6);
|
||
|
||
gsap.to(toggle, {
|
||
scale: 1,
|
||
rotation: 0,
|
||
delay: 0,
|
||
duration: 1.2,
|
||
ease: "expo.inOut",
|
||
});
|
||
|
||
gsap.to(parSplit, {
|
||
autoAlpha: 1,
|
||
yPercent: 0,
|
||
duration: 0.8,
|
||
delay: 0.65,
|
||
ease: "expo.out",
|
||
stagger: {
|
||
each: 0.08,
|
||
},
|
||
});
|
||
|
||
gsap.to(alpha, {
|
||
autoAlpha: 1,
|
||
scale: 1,
|
||
duration: 0.8,
|
||
delay: 0.9,
|
||
ease: "expo.out",
|
||
});
|
||
|
||
toggle.querySelector("input").addEventListener("change", (event) => {
|
||
if (event.target.checked) {
|
||
animateOut();
|
||
} else {
|
||
animateIn();
|
||
}
|
||
});
|
||
|
||
toggle.onmouseenter = () => {
|
||
if (!isIn) return;
|
||
// console.log("mouseenter");
|
||
animateScribble(scribble);
|
||
};
|
||
});
|
||
}
|
||
|
||
</script></div></header><div id="content" class=""><section id="flip" data-animate="flip" class="sec reorganise"><div data-flip="toggle" class="flip-btn-w"><button class="btn flip-switch-btn current"><div>List</div></button><button class="btn flip-switch-btn"><div>Grid</div></button></div><div class="layer"></div><div class="comp"><ul data-flip="item" role="list" class="flip-list-w list w-list-unstyled"><li><div class="flip-item"><div class="item-num">01</div><h3 class="font-c size-md _w-ch">Hover States</h3><div class="abs-img"><div class="dual-img"><img src="https://cdn.prod.website-files.com/67fea42b19018db93e3fe132/68120df9971b76e21f8f7c84_watch.avif" loading="eager" alt="" class="dual-img-img"><img src="https://cdn.prod.website-files.com/67fea42b19018db93e3fe132/68120ded8c04e7653f096b22_watch-shadow.avif" loading="eager" alt="" class="dual-img-shadow"></div></div></div></li><li><div class="flip-item is-2"><div class="item-num">02</div><h3 class="font-c size-md _w-ch">ResizinG Elements</h3><div class="abs-img"><div class="dual-img"><img src="https://cdn.prod.website-files.com/67fea42b19018db93e3fe132/68120ec1abd39b1b06a80e01_can.avif" loading="eager" alt="" class="dual-img-img"><img src="https://cdn.prod.website-files.com/67fea42b19018db93e3fe132/68120ec1d6f535075c963b92_can-shadow.avif" loading="eager" alt="" class="dual-img-shadow"></div></div></div></li><li><div class="flip-item is-3"><div class="item-num">03</div><h3 class="font-c size-md _w-ch">Timeline Control</h3><div class="abs-img"><div class="dual-img"><img src="https://cdn.prod.website-files.com/67fea42b19018db93e3fe132/68120f6ca7fe3207b1fc9b6c_chair.avif" loading="eager" alt="" class="dual-img-img"><img src="https://cdn.prod.website-files.com/67fea42b19018db93e3fe132/68120ec0e482fc7aaa80dfff_chair-shadow.avif" loading="eager" alt="" class="dual-img-shadow"></div></div></div></li><li><div class="flip-item is-4"><div class="item-num">04</div><h3 class="font-c size-md _w-ch">Shuffling positions</h3><div class="abs-img"><div class="dual-img"><img src="https://cdn.prod.website-files.com/67fea42b19018db93e3fe132/68120ec1f3c2a581cf55e3a7_socks.avif" loading="eager" alt="" class="dual-img-img"><img src="https://cdn.prod.website-files.com/67fea42b19018db93e3fe132/68120ec1e289d92b32665f96_socks-shadow.avif" loading="eager" alt="" class="dual-img-shadow"></div></div></div></li><li><div class="flip-item is-5"><div class="item-num">05</div><h3 class="font-c size-md _w-ch">Sequenced Motion</h3><div class="abs-img"><div class="dual-img"><img src="https://cdn.prod.website-files.com/67fea42b19018db93e3fe132/68120f682785240f2c98a343_headphones.avif" loading="eager" alt="" class="dual-img-img"><img src="https://cdn.prod.website-files.com/67fea42b19018db93e3fe132/68120ec0d96d6954095e252a_headphones-shadows.avif" loading="eager" alt="" class="dual-img-shadow"></div></div></div></li><li><div class="flip-item is-6"><div class="item-num">06</div><h3 class="font-c size-md _w-ch">FLEXIBLE LAYOUTS</h3><div class="abs-img"><div class="dual-img"><img src="https://cdn.prod.website-files.com/67fea42b19018db93e3fe132/68120fa8f48810a5b328c7a4_tomato.avif" loading="eager" alt="" class="dual-img-img"><img src="https://cdn.prod.website-files.com/67fea42b19018db93e3fe132/68120ec1fdd37f3577bdedb8_tomato-shadow.avif" loading="eager" alt="" class="dual-img-shadow"></div></div></div></li></ul></div><div class="explainer-w"><div data-module="explainer" data-css="explainer" class="explainer-comp"><label class="div"><input type="checkbox" class="input"><span class="span"><div class="explainer-he">Make Show and Tell Flexible</div><div class="plus-icon-w"><div class="plus-line rotate"></div><div class="plus-line"></div></div></span></label><div data-css="" class="explainer-expandable-w"><div class="explainer-overflow"><div class="explainer-content-w"><p class="explainer-par">Create seamless transitions between two visual states smoothly, not instantly. It removes the visual chaos when layouts shift, making things feel smooth, considered, and intentional.</p></div></div></div><div class="explainer-copy-btn-w"><button data-module="copybtn" data-copy="https://cdn.prod.website-files.com/67fea42b19018db93e3fe132/6811e2c8e5f450bdf4878517_flip-final.json.txt" class="btn copy"><div class="btn-cent-w"><div class="text-block">Copy this</div><svg xmlns="http://www.w3.org/2000/svg" width="100%" viewBox="0 0 9 11" fill="none" class="svg copy-icon"><path fill-rule="evenodd" clip-rule="evenodd" d="M5 1.5H1V6.5H5V1.5ZM0 0.5V7.5H6V0.5H0Z" fill="currentColor"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M3 8.757V10.5H9V3.5H7.42V4.5H8V9.5H4V8.757H3Z" fill="currentColor"></path></svg></div></button></div><div class="mobile-explainer-prompt">Copy this on Desktop</div></div></div><div class="code-block w-embed w-script"><script>
|
||
// https://codepen.io/GreenSock/pen/RwLepdQ?editors=1010
|
||
|
||
addEventListener("GSAPReady", (event) => {
|
||
const wrapper = document.querySelector("[data-animate='flip']");
|
||
const toggles = [...wrapper.querySelector("[data-flip='toggle']").children];
|
||
const items = wrapper.querySelector("[data-flip='item']");
|
||
|
||
// console.log("flip", wrapper, toggles, items);
|
||
|
||
const flipGridList = () => {
|
||
const state = Flip.getState(items.children);
|
||
items.classList.toggle("list");
|
||
|
||
Flip.from(state, {
|
||
duration: 0.8,
|
||
ease: "expo.out",
|
||
onComplete: () => {
|
||
ScrollTrigger.refresh();
|
||
}
|
||
});
|
||
};
|
||
|
||
toggles.forEach((toggle, index) => {
|
||
toggle.addEventListener("click", () => {
|
||
toggles[0].classList.toggle("current");
|
||
toggles[1].classList.toggle("current");
|
||
flipGridList();
|
||
});
|
||
});
|
||
});
|
||
|
||
</script></div></section><section id="scrolltrigger" data-animate="videogrow" class="sec scrolltrigger-sec"><div class="sticky-w"><div class="comp video"><div data-videogrow="title" class="font-c size-screen overflow-cut" aria-label="Scrolltrigger"><div aria-hidden="true" style="position: relative; display: inline-block; translate: none; rotate: none; scale: none; transform: translate(0px, 0px);">S</div><div aria-hidden="true" style="position: relative; display: inline-block; translate: none; rotate: none; scale: none; transform: translate(0px, 0px);">c</div><div aria-hidden="true" style="position: relative; display: inline-block; translate: none; rotate: none; scale: none; transform: translate(0px, 0px);">r</div><div aria-hidden="true" style="position: relative; display: inline-block; translate: none; rotate: none; scale: none; transform: translate(0px, 0px);">o</div><div aria-hidden="true" style="position: relative; display: inline-block; translate: none; rotate: none; scale: none; transform: translate(0px, 0px);">l</div><div aria-hidden="true" style="position: relative; display: inline-block; translate: none; rotate: none; scale: none; transform: translate(0px, 0px);">l</div><div aria-hidden="true" style="position: relative; display: inline-block; translate: none; rotate: none; scale: none; transform: translate(0px, 0px);">t</div><div aria-hidden="true" style="position: relative; display: inline-block; translate: none; rotate: none; scale: none; transform: translate(0px, 0px);">r</div><div aria-hidden="true" style="position: relative; display: inline-block; translate: none; rotate: none; scale: none; transform: translate(0px, 0px);">i</div><div aria-hidden="true" style="position: relative; display: inline-block; translate: none; rotate: none; scale: none; transform: translate(0px, 0px);">g</div><div aria-hidden="true" style="position: relative; display: inline-block; translate: none; rotate: none; scale: none; transform: translate(0px, 0px);">g</div><div aria-hidden="true" style="position: relative; display: inline-block; translate: none; rotate: none; scale: none; transform: translate(0px, 0px);">e</div><div aria-hidden="true" style="position: relative; display: inline-block; translate: none; rotate: none; scale: none; transform: translate(0px, 0px);">r</div></div></div><div class="layer"><div data-videogrow="video" class="sky-scroller" style="translate: none; rotate: none; scale: none; transform: scale(0.9, 0.9); clip-path: inset(0%);"><img src="https://cdn.prod.website-files.com/67fea42b19018db93e3fe132/68013ab170e0a7b7eb1a7ebe_sky.avif" loading="lazy" sizes="(max-width: 1198px) 100vw, 1198px" srcset="https://cdn.prod.website-files.com/67fea42b19018db93e3fe132/68013ab170e0a7b7eb1a7ebe_sky-p-500.avif 500w, https://cdn.prod.website-files.com/67fea42b19018db93e3fe132/68013ab170e0a7b7eb1a7ebe_sky.avif 1198w" alt="" class="img-sky" style="translate: none; rotate: none; scale: none; transform: translate(0px, 0px);"></div></div></div><div class="layer flex-b z-3"><div class="code-block w-embed w-script"><script>
|
||
const split = (text, type = "chars") => {
|
||
text.setAttribute("aria-label", text.textContent);
|
||
const splits = new SplitText(text, { type });
|
||
splits[type].forEach((char) => char.setAttribute("aria-hidden", "true"));
|
||
return splits[type];
|
||
};
|
||
|
||
addEventListener("GSAPReady", (event) => {
|
||
|
||
const section = document.querySelector("[data-animate='videogrow']");
|
||
const video = section.querySelector("[data-videogrow='video']");
|
||
const img = video.children[0];
|
||
|
||
const title = split(
|
||
section.querySelector("[data-videogrow='title']"),
|
||
"chars"
|
||
);
|
||
|
||
const tl = gsap.timeline({
|
||
scrollTrigger: {
|
||
trigger: section,
|
||
start: "top center",
|
||
end: "bottom bottom+=100%",
|
||
invalidateOnRefresh: true,
|
||
scrub: 1,
|
||
},
|
||
});
|
||
|
||
gsap.set(
|
||
title,
|
||
{
|
||
scale: 0,
|
||
rotation: (i) => Math.random() * 360 - 180,
|
||
})
|
||
|
||
tl.to(
|
||
title,
|
||
{
|
||
scale: 1,
|
||
duration: 0.2,
|
||
rotation: 0,
|
||
ease: "expo.out",
|
||
stagger: {
|
||
each: 0.05,
|
||
from: "random",
|
||
},
|
||
}
|
||
);
|
||
|
||
tl.fromTo(
|
||
video,
|
||
{
|
||
clipPath: "inset(10% 50% 10% 50%)",
|
||
yPercent: 100,
|
||
},
|
||
{
|
||
ease: "power3",
|
||
clipPath: "inset(0% 0% 0% 0%)",
|
||
duration: 1,
|
||
yPercent: 0,
|
||
},
|
||
".3"
|
||
);
|
||
|
||
tl.fromTo(
|
||
video,
|
||
{
|
||
scale: 0.5,
|
||
// rotation: 180,
|
||
},
|
||
{
|
||
ease: "back.inOut(.2)",
|
||
scale: 1,
|
||
duration: 0.8,
|
||
// rotation: 0,
|
||
},
|
||
"<"
|
||
);
|
||
|
||
tl.fromTo(
|
||
img,
|
||
{
|
||
scale: 2.8,
|
||
yPercent: 40,
|
||
},
|
||
{
|
||
scale: 1.2,
|
||
duration: 0.8,
|
||
delay: 0.2,
|
||
yPercent: 0,
|
||
},
|
||
"<"
|
||
);
|
||
|
||
tl.to(video, {
|
||
scale: 0.9,
|
||
ease: "linear",
|
||
});
|
||
|
||
tl.to(
|
||
img,
|
||
{
|
||
scale: 1,
|
||
ease: "linear",
|
||
},
|
||
"<"
|
||
);
|
||
});
|
||
|
||
</script></div><div class="explainer-w"><div data-module="explainer" data-css="explainer" class="explainer-comp"><label class="div"><input type="checkbox" class="input"><span class="span"><div class="explainer-he">Scroll with purpose</div><div class="plus-icon-w"><div class="plus-line rotate"></div><div class="plus-line"></div></div></span></label><div data-css="" class="explainer-expandable-w"><div class="explainer-overflow"><div class="explainer-content-w"><p class="explainer-par">Start animations when elements enter the viewport, scrub through timelines, pin elements in place, or snap to key points as users scroll.</p></div></div></div><div class="explainer-copy-btn-w"><button data-module="copybtn" data-copy="https://cdn.prod.website-files.com/67fea42b19018db93e3fe132/6811e2c83012fa3b59370ce3_scrolltrigger-final.json.txt" class="btn copy"><div class="btn-cent-w"><div class="text-block">Copy this</div><svg xmlns="http://www.w3.org/2000/svg" width="100%" viewBox="0 0 9 11" fill="none" class="svg copy-icon"><path fill-rule="evenodd" clip-rule="evenodd" d="M5 1.5H1V6.5H5V1.5ZM0 0.5V7.5H6V0.5H0Z" fill="currentColor"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M3 8.757V10.5H9V3.5H7.42V4.5H8V9.5H4V8.757H3Z" fill="currentColor"></path></svg></div></button></div><div class="mobile-explainer-prompt">Copy this on Desktop</div></div></div></div></section><section id="slider" class="sec"><div data-animate="slider" class="comp slider-w"><div class="slider-ctrls-w"><div data-slider="progress" class="slider-progress-w"><div class="progress-bar" style="width: 25%;"></div></div></div><ul data-slider="slides" role="list" class="slides w-list-unstyled" style="touch-action: pan-y; cursor: grab; user-select: none;"><li class="slide-outer" style="touch-action: pan-y; translate: none; rotate: none; scale: none; transform: translate(100.142%, 0%) translate3d(0px, 0px, 0px);"><div class="slide" style="touch-action: pan-y;"><div class="slide-col flex-ve" style="touch-action: pan-y;"><div style="touch-action: pan-y;">Precise</div><div class="slide-text-block" style="touch-action: pan-y;"><h3 class="font-c size-md" style="touch-action: pan-y;">ACTIONS</h3><div style="touch-action: pan-y;">GSAP turns clicks into vivid stories with precise motion, making every interaction feel intentional and alive.</div></div></div><div class="slide-col" style="touch-action: pan-y;"><div class="slide-img" style="touch-action: pan-y;"><div class="dual-img" style="touch-action: pan-y;"><img src="https://cdn.prod.website-files.com/67fea42b19018db93e3fe132/681210bec12b45a849356ced_face-3.avif" loading="eager" alt="" class="dual-img-img" style="touch-action: pan-y;"><img src="https://cdn.prod.website-files.com/67fea42b19018db93e3fe132/681210beae98361a89953455_face-5-shadow.avif" loading="eager" alt="" class="dual-img-shadow" style="touch-action: pan-y;"></div></div></div></div></li><li class="slide-outer current" style="touch-action: pan-y; translate: none; rotate: none; scale: none; transform: translate(100.142%, 0%) translate3d(0px, 0px, 0px);"><div class="slide" style="touch-action: pan-y;"><div class="slide-col flex-ve" style="touch-action: pan-y;"><div style="touch-action: pan-y;">Focus</div><div class="slide-text-block" style="touch-action: pan-y;"><h3 class="font-c size-md" style="touch-action: pan-y;">ATTENTION</h3><div style="touch-action: pan-y;">GSAP sharpens focus with smooth animations, drawing attention to your message for a lasting, memorable impact.</div></div></div><div class="slide-col" style="touch-action: pan-y;"><div class="slide-img" style="touch-action: pan-y;"><div class="dual-img" style="touch-action: pan-y;"><img src="https://cdn.prod.website-files.com/67fea42b19018db93e3fe132/681210befd586a86f7da095a_face-2.avif" loading="eager" alt="" class="dual-img-img" style="touch-action: pan-y;"><img src="https://cdn.prod.website-files.com/67fea42b19018db93e3fe132/681210beae98361a89953455_face-5-shadow.avif" loading="eager" alt="" class="dual-img-shadow" style="touch-action: pan-y;"></div></div></div></div></li><li class="slide-outer" style="touch-action: pan-y; translate: none; rotate: none; scale: none; transform: translate(100.142%, 0%) translate3d(0px, 0px, 0px);"><div class="slide" style="touch-action: pan-y;"><div class="slide-col flex-ve" style="touch-action: pan-y;"><div style="touch-action: pan-y;">Expressive</div><div class="slide-text-block" style="touch-action: pan-y;"><h3 class="font-c size-md" style="touch-action: pan-y;">Motion</h3><div style="touch-action: pan-y;">GSAP infuses elements with expressive motion, transforming static pages into emotional, engaging journeys.</div></div></div><div class="slide-col" style="touch-action: pan-y;"><div class="slide-img" style="touch-action: pan-y;"><div class="dual-img" style="touch-action: pan-y;"><img src="https://cdn.prod.website-files.com/67fea42b19018db93e3fe132/681210be0b24dede691834f1_face-1.avif" loading="eager" alt="" class="dual-img-img" style="touch-action: pan-y;"><img src="https://cdn.prod.website-files.com/67fea42b19018db93e3fe132/681210beae98361a89953455_face-5-shadow.avif" loading="eager" alt="" class="dual-img-shadow" style="touch-action: pan-y;"></div></div></div></div></li><li class="slide-outer" style="touch-action: pan-y; translate: none; rotate: none; scale: none; transform: translate(-399.858%, 0%) translate3d(0px, 0px, 0px);"><div class="slide" style="touch-action: pan-y;"><div class="slide-col flex-ve" style="touch-action: pan-y;"><div style="touch-action: pan-y;">Powerful</div><div class="slide-text-block" style="touch-action: pan-y;"><h3 class="font-c size-md" style="touch-action: pan-y;">IMPACT</h3><div style="touch-action: pan-y;">GSAP delivers animations with powerful impact, ensuring your story resonates clearly and leaves a mark.</div></div></div><div class="slide-col" style="touch-action: pan-y;"><div class="slide-img" style="touch-action: pan-y;"><div class="dual-img" style="touch-action: pan-y;"><img src="https://cdn.prod.website-files.com/67fea42b19018db93e3fe132/681210be710d60755f407cac_face-4.avif" loading="eager" alt="" class="dual-img-img" style="touch-action: pan-y;"><img src="https://cdn.prod.website-files.com/67fea42b19018db93e3fe132/681210beae98361a89953455_face-5-shadow.avif" loading="eager" alt="" class="dual-img-shadow" style="touch-action: pan-y;"></div></div></div></div></li><li class="slide-outer" style="touch-action: pan-y; translate: none; rotate: none; scale: none; transform: translate(-399.858%, 0%) translate3d(0px, 0px, 0px);"><div class="slide" style="touch-action: pan-y;"><div class="slide-col flex-ve" style="touch-action: pan-y;"><div style="touch-action: pan-y;">Seamless</div><div class="slide-text-block" style="touch-action: pan-y;"><h3 class="font-c size-md" style="touch-action: pan-y;">FLOW</h3><div style="touch-action: pan-y;">GSAP crafts seamless flow in motion, syncing with users to create natural, captivating interactions.</div></div></div><div class="slide-col" style="touch-action: pan-y;"><div class="slide-img" style="touch-action: pan-y;"><div class="dual-img" style="touch-action: pan-y;"><img src="https://cdn.prod.website-files.com/67fea42b19018db93e3fe132/681210be320f33da1bb17f66_face-5.avif" loading="eager" alt="" class="dual-img-img" style="touch-action: pan-y;"><img src="https://cdn.prod.website-files.com/67fea42b19018db93e3fe132/681210beae98361a89953455_face-5-shadow.avif" loading="eager" alt="" class="dual-img-shadow" style="touch-action: pan-y;"></div></div></div></div></li></ul><div class="slider-ctrls-w"><button data-slider="prev" class="btn arrow"><div data-wf--u-arrow-button--variant="flip" class="arrow-btn"><svg xmlns="http://www.w3.org/2000/svg" width="100%" viewBox="0 0 26 16" fill="none" class="svg arrow w-variant-352da3df-a236-ccac-dbb8-8845a582a471"><path fill-rule="evenodd" clip-rule="evenodd" d="M19.3431 0.929124L25.7071 7.29308C26.0976 7.68361 26.0976 8.31677 25.7071 8.7073L19.3431 15.0713C18.9526 15.4618 18.3195 15.4618 17.9289 15.0713C17.5384 14.6807 17.5384 14.0476 17.9289 13.657L22.5858 9.00019H1C0.447715 9.00019 0 8.55248 0 8.00019C0 7.44791 0.447715 7.00019 1 7.00019H22.5858L17.9289 2.34334C17.5384 1.95281 17.5384 1.31965 17.9289 0.929124C18.3195 0.538599 18.9526 0.538599 19.3431 0.929124Z" fill="currentColor"></path></svg></div></button><ul data-slider="dots" role="list" class="dots-w w-list-unstyled"><li><button class="btn slider-dot"></button></li><li><button class="btn slider-dot current"></button></li><li><button class="btn slider-dot"></button></li><li><button class="btn slider-dot"></button></li><li><button class="btn slider-dot"></button></li></ul><button data-slider="next" class="btn arrow"><div data-wf--u-arrow-button--variant="base" class="arrow-btn"><svg xmlns="http://www.w3.org/2000/svg" width="100%" viewBox="0 0 26 16" fill="none" class="svg arrow"><path fill-rule="evenodd" clip-rule="evenodd" d="M19.3431 0.929124L25.7071 7.29308C26.0976 7.68361 26.0976 8.31677 25.7071 8.7073L19.3431 15.0713C18.9526 15.4618 18.3195 15.4618 17.9289 15.0713C17.5384 14.6807 17.5384 14.0476 17.9289 13.657L22.5858 9.00019H1C0.447715 9.00019 0 8.55248 0 8.00019C0 7.44791 0.447715 7.00019 1 7.00019H22.5858L17.9289 2.34334C17.5384 1.95281 17.5384 1.31965 17.9289 0.929124C18.3195 0.538599 18.9526 0.538599 19.3431 0.929124Z" fill="currentColor"></path></svg></div></button></div></div><div class="explainer-w"><div data-module="explainer" data-css="explainer" class="explainer-comp"><label class="div"><input type="checkbox" class="input"><span class="span"><div class="explainer-he">Endless by design</div><div class="plus-icon-w"><div class="plus-line rotate"></div><div class="plus-line"></div></div></span></label><div data-css="" class="explainer-expandable-w"><div class="explainer-overflow"><div class="explainer-content-w"><p class="explainer-par">Ideal for smooth marquees, auto playing sliders, and loops that just keep rolling.</p></div></div></div><div class="explainer-copy-btn-w"><button data-module="copybtn" data-copy="https://cdn.prod.website-files.com/67fea42b19018db93e3fe132/6811e2c885ad5b6f59e2efe1_slider-final.json.txt" class="btn copy"><div class="btn-cent-w"><div class="text-block">Copy this</div><svg xmlns="http://www.w3.org/2000/svg" width="100%" viewBox="0 0 9 11" fill="none" class="svg copy-icon" style="translate: none; rotate: none; scale: none; transform: rotate(360deg);"><path fill-rule="evenodd" clip-rule="evenodd" d="M5 1.5H1V6.5H5V1.5ZM0 0.5V7.5H6V0.5H0Z" fill="currentColor"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M3 8.757V10.5H9V3.5H7.42V4.5H8V9.5H4V8.757H3Z" fill="currentColor"></path></svg></div></button></div><div class="mobile-explainer-prompt">Copy this on Desktop</div></div></div><div class="code-block w-embed w-script"><script>
|
||
// https://codepen.io/GreenSock/pen/gOvvJee?editors=1010
|
||
// https://gsap.com/docs/v3/HelperFunctions/helpers/seamlessLoop/
|
||
|
||
// https://codepen.io/GreenSock/pen/gOvvJee?editors=1010
|
||
// https://gsap.com/docs/v3/HelperFunctions/helpers/seamlessLoop/
|
||
|
||
function horizontalLoop(items, config) {
|
||
let timeline;
|
||
items = gsap.utils.toArray(items);
|
||
config = config || {};
|
||
gsap.context(() => {
|
||
// use a context so that if this is called from within another context or a gsap.matchMedia(), we can perform proper cleanup like the "resize" event handler on the window
|
||
let onChange = config.onChange,
|
||
lastIndex = 0,
|
||
tl = gsap.timeline({
|
||
repeat: config.repeat,
|
||
onUpdate:
|
||
onChange &&
|
||
function () {
|
||
let i = tl.closestIndex();
|
||
if (lastIndex !== i) {
|
||
lastIndex = i;
|
||
onChange(items[i], i);
|
||
}
|
||
},
|
||
paused: config.paused,
|
||
defaults: { ease: "none" },
|
||
onReverseComplete: () =>
|
||
tl.totalTime(tl.rawTime() + tl.duration() * 100),
|
||
}),
|
||
length = items.length,
|
||
startX = items[0].offsetLeft,
|
||
times = [],
|
||
widths = [],
|
||
spaceBefore = [],
|
||
xPercents = [],
|
||
curIndex = 0,
|
||
indexIsDirty = false,
|
||
center = config.center,
|
||
pixelsPerSecond = (config.speed || 1) * 100,
|
||
snap =
|
||
config.snap === false ? (v) => v : gsap.utils.snap(config.snap || 1), // some browsers shift by a pixel to accommodate flex layouts, so for example if width is 20% the first element's width might be 242px, and the next 243px, alternating back and forth. So we snap to 5 percentage points to make things look more natural
|
||
timeOffset = 0,
|
||
container =
|
||
center === true
|
||
? items[0].parentNode
|
||
: gsap.utils.toArray(center)[0] || items[0].parentNode,
|
||
totalWidth,
|
||
getTotalWidth = () =>
|
||
items[length - 1].offsetLeft +
|
||
(xPercents[length - 1] / 100) * widths[length - 1] -
|
||
startX +
|
||
spaceBefore[0] +
|
||
items[length - 1].offsetWidth *
|
||
gsap.getProperty(items[length - 1], "scaleX") +
|
||
(parseFloat(config.paddingRight) || 0),
|
||
populateWidths = () => {
|
||
let b1 = container.getBoundingClientRect(),
|
||
b2;
|
||
|
||
// Reset all items to their natural position first
|
||
gsap.set(items, {
|
||
x: 0,
|
||
xPercent: 0,
|
||
clearProps: "transform",
|
||
});
|
||
|
||
// Force a reflow
|
||
items[0].offsetWidth;
|
||
|
||
// Get the container's new position after reset
|
||
startX = items[0].offsetLeft;
|
||
|
||
items.forEach((el, i) => {
|
||
// Get the natural width without any transforms
|
||
widths[i] = el.offsetWidth;
|
||
|
||
// Calculate the space between items
|
||
b2 = el.getBoundingClientRect();
|
||
spaceBefore[i] = b2.left - (i ? b1.right : b1.left);
|
||
b1 = b2;
|
||
|
||
// Reset xPercent to 0 for accurate calculations
|
||
xPercents[i] = 0;
|
||
});
|
||
|
||
// Set all items to their calculated positions
|
||
gsap.set(items, {
|
||
xPercent: (i) => xPercents[i],
|
||
});
|
||
|
||
// Calculate total width after all items are positioned
|
||
totalWidth = getTotalWidth();
|
||
},
|
||
timeWrap,
|
||
populateOffsets = () => {
|
||
timeOffset = center
|
||
? (tl.duration() * (container.offsetWidth / 2)) / totalWidth
|
||
: 0;
|
||
center &&
|
||
times.forEach((t, i) => {
|
||
times[i] = timeWrap(
|
||
tl.labels["label" + i] +
|
||
(tl.duration() * widths[i]) / 2 / totalWidth -
|
||
timeOffset
|
||
);
|
||
});
|
||
},
|
||
getClosest = (values, value, wrap) => {
|
||
let i = values.length,
|
||
closest = 1e10,
|
||
index = 0,
|
||
d;
|
||
while (i--) {
|
||
d = Math.abs(values[i] - value);
|
||
if (d > wrap / 2) {
|
||
d = wrap - d;
|
||
}
|
||
if (d < closest) {
|
||
closest = d;
|
||
index = i;
|
||
}
|
||
}
|
||
return index;
|
||
},
|
||
populateTimeline = () => {
|
||
let i, item, curX, distanceToStart, distanceToLoop;
|
||
tl.clear();
|
||
for (i = 0; i < length; i++) {
|
||
item = items[i];
|
||
curX = (xPercents[i] / 100) * widths[i];
|
||
distanceToStart = item.offsetLeft + curX - startX + spaceBefore[0];
|
||
distanceToLoop =
|
||
distanceToStart + widths[i] * gsap.getProperty(item, "scaleX");
|
||
tl.to(
|
||
item,
|
||
{
|
||
xPercent: snap(((curX - distanceToLoop) / widths[i]) * 100),
|
||
duration: distanceToLoop / pixelsPerSecond,
|
||
},
|
||
0
|
||
)
|
||
.fromTo(
|
||
item,
|
||
{
|
||
xPercent: snap(
|
||
((curX - distanceToLoop + totalWidth) / widths[i]) * 100
|
||
),
|
||
},
|
||
{
|
||
xPercent: xPercents[i],
|
||
duration:
|
||
(curX - distanceToLoop + totalWidth - curX) / pixelsPerSecond,
|
||
immediateRender: false,
|
||
},
|
||
distanceToLoop / pixelsPerSecond
|
||
)
|
||
.add("label" + i, distanceToStart / pixelsPerSecond);
|
||
times[i] = distanceToStart / pixelsPerSecond;
|
||
}
|
||
timeWrap = gsap.utils.wrap(0, tl.duration());
|
||
},
|
||
refresh = (deep) => {
|
||
let progress = tl.progress();
|
||
tl.progress(0, true);
|
||
|
||
// Reset only the x transforms while preserving other properties
|
||
gsap.set(items, {
|
||
x: 0,
|
||
xPercent: 0,
|
||
});
|
||
|
||
// Force a reflow
|
||
items[0].offsetWidth;
|
||
|
||
populateWidths();
|
||
deep && populateTimeline();
|
||
populateOffsets();
|
||
|
||
if (deep && tl.draggable && tl.paused()) {
|
||
tl.time(times[curIndex], true);
|
||
} else {
|
||
tl.progress(progress, true);
|
||
}
|
||
},
|
||
onResize = () => {
|
||
if (window.resizeTimeout) clearTimeout(window.resizeTimeout);
|
||
window.resizeTimeout = setTimeout(() => {
|
||
refresh(true);
|
||
}, 100);
|
||
},
|
||
proxy;
|
||
gsap.set(items, { x: 0 });
|
||
populateWidths();
|
||
populateTimeline();
|
||
populateOffsets();
|
||
window.addEventListener("resize", onResize);
|
||
function toIndex(index, vars) {
|
||
vars = vars || {};
|
||
Math.abs(index - curIndex) > length / 2 &&
|
||
(index += index > curIndex ? -length : length); // always go in the shortest direction
|
||
let newIndex = gsap.utils.wrap(0, length, index),
|
||
time = times[newIndex];
|
||
if (time > tl.time() !== index > curIndex && index !== curIndex) {
|
||
// if we're wrapping the timeline's playhead, make the proper adjustments
|
||
time += tl.duration() * (index > curIndex ? 1 : -1);
|
||
}
|
||
if (time < 0 || time > tl.duration()) {
|
||
vars.modifiers = { time: timeWrap };
|
||
}
|
||
curIndex = newIndex;
|
||
vars.overwrite = true;
|
||
gsap.killTweensOf(proxy);
|
||
return vars.duration === 0
|
||
? tl.time(timeWrap(time))
|
||
: tl.tweenTo(time, vars);
|
||
}
|
||
tl.toIndex = (index, vars) => toIndex(index, vars);
|
||
tl.closestIndex = (setCurrent) => {
|
||
let index = getClosest(times, tl.time(), tl.duration());
|
||
if (setCurrent) {
|
||
curIndex = index;
|
||
indexIsDirty = false;
|
||
}
|
||
return index;
|
||
};
|
||
tl.current = () => (indexIsDirty ? tl.closestIndex(true) : curIndex);
|
||
tl.next = (vars) => toIndex(tl.current() + 1, vars);
|
||
tl.previous = (vars) => toIndex(tl.current() - 1, vars);
|
||
tl.times = times;
|
||
tl.progress(1, true).progress(0, true); // pre-render for performance
|
||
if (config.reversed) {
|
||
tl.vars.onReverseComplete();
|
||
tl.reverse();
|
||
}
|
||
if (config.draggable && typeof Draggable === "function") {
|
||
proxy = document.createElement("div");
|
||
let wrap = gsap.utils.wrap(0, 1),
|
||
ratio,
|
||
startProgress,
|
||
draggable,
|
||
dragSnap,
|
||
lastSnap,
|
||
initChangeX,
|
||
wasPlaying,
|
||
align = () =>
|
||
tl.progress(
|
||
wrap(startProgress + (draggable.startX - draggable.x) * ratio)
|
||
),
|
||
syncIndex = () => tl.closestIndex(true);
|
||
typeof InertiaPlugin === "undefined" &&
|
||
console.warn(
|
||
"InertiaPlugin required for momentum-based scrolling and snapping. https://greensock.com/club"
|
||
);
|
||
draggable = Draggable.create(proxy, {
|
||
trigger: items[0].parentNode,
|
||
type: "x",
|
||
onPressInit() {
|
||
let x = this.x;
|
||
gsap.killTweensOf(tl);
|
||
wasPlaying = !tl.paused();
|
||
tl.pause();
|
||
startProgress = tl.progress();
|
||
refresh();
|
||
ratio = 1 / totalWidth;
|
||
initChangeX = startProgress / -ratio - x;
|
||
gsap.set(proxy, { x: startProgress / -ratio });
|
||
},
|
||
onDrag: align,
|
||
onThrowUpdate: align,
|
||
overshootTolerance: 0,
|
||
inertia: true,
|
||
snap(value) {
|
||
//note: if the user presses and releases in the middle of a throw, due to the sudden correction of proxy.x in the onPressInit(), the velocity could be very large, throwing off the snap. So sense that condition and adjust for it. We also need to set overshootTolerance to 0 to prevent the inertia from causing it to shoot past and come back
|
||
if (Math.abs(startProgress / -ratio - this.x) < 10) {
|
||
return lastSnap + initChangeX;
|
||
}
|
||
let time = -(value * ratio) * tl.duration(),
|
||
wrappedTime = timeWrap(time),
|
||
snapTime = times[getClosest(times, wrappedTime, tl.duration())],
|
||
dif = snapTime - wrappedTime;
|
||
Math.abs(dif) > tl.duration() / 2 &&
|
||
(dif += dif < 0 ? tl.duration() : -tl.duration());
|
||
lastSnap = (time + dif) / tl.duration() / -ratio;
|
||
return lastSnap;
|
||
},
|
||
onRelease() {
|
||
syncIndex();
|
||
draggable.isThrowing && (indexIsDirty = true);
|
||
},
|
||
onThrowComplete: () => {
|
||
syncIndex();
|
||
wasPlaying && tl.play();
|
||
},
|
||
})[0];
|
||
tl.draggable = draggable;
|
||
}
|
||
tl.closestIndex(true);
|
||
lastIndex = curIndex;
|
||
onChange && onChange(items[curIndex], curIndex);
|
||
timeline = tl;
|
||
return () => window.removeEventListener("resize", onResize); // cleanup
|
||
});
|
||
return timeline;
|
||
}
|
||
|
||
/* -- Global Params */
|
||
const sliderParams = {
|
||
duration: 0.5,
|
||
ease: "power2.out",
|
||
};
|
||
|
||
addEventListener("GSAPReady", (event) => {
|
||
const wrapper = document.querySelector("[data-animate='slider']");
|
||
const slides = [...wrapper.querySelector("[data-slider='slides']").children];
|
||
|
||
/* -- Setup Slider UI */
|
||
const progress = wrapper.querySelector("[data-slider='progress']");
|
||
const next = wrapper.querySelector("[data-slider='next']");
|
||
const prev = wrapper.querySelector("[data-slider='prev']");
|
||
let currentIndex = 0;
|
||
|
||
const dots = [...wrapper.querySelector("[data-slider='dots']").children].map(
|
||
(item, index) => {
|
||
const btn = item.children[0];
|
||
btn.addEventListener("click", () => {
|
||
loop.toIndex(index, sliderParams);
|
||
});
|
||
|
||
return btn;
|
||
}
|
||
);
|
||
|
||
/* -- Helper Functions */
|
||
const updateCurrent = (index) => {
|
||
// handle dots
|
||
dots[currentIndex].classList.remove("current");
|
||
dots[index].classList.add("current");
|
||
slides[currentIndex].classList.remove("current");
|
||
slides[index].classList.add("current");
|
||
// handle slides
|
||
// ...
|
||
gsap.to(progress.children[0], {
|
||
width: `${(index / (slides.length - 1)) * 100}%`,
|
||
duration: 0.6,
|
||
ease: "expo.out",
|
||
});
|
||
|
||
// save the previous position
|
||
currentIndex = index;
|
||
};
|
||
|
||
/* -- Setup Slider */
|
||
let loop;
|
||
setTimeout(() => {
|
||
loop = horizontalLoop(slides, {
|
||
paused: true,
|
||
draggable: true,
|
||
// draggableOptions: {
|
||
// dragResistance: 10,
|
||
// resistance: 10,
|
||
// },
|
||
center: true,
|
||
onChange: (element, index) => {
|
||
updateCurrent(index);
|
||
},
|
||
});
|
||
}, 500);
|
||
// (*) THIS IS JUST TO CHECK PLEASE REMOVE
|
||
|
||
next.addEventListener("click", () => {
|
||
loop.next(sliderParams);
|
||
});
|
||
|
||
prev.addEventListener("click", () => {
|
||
loop.previous(sliderParams);
|
||
});
|
||
});
|
||
|
||
</script></div></section><section id="inertia" data-animate="inertia" class="sec inertia" style="transform-style: preserve-3d; perspective: 5000px; touch-action: pan-y; cursor: grab; user-select: none;"><div data-inertia="item" class="comp inertia" style="transform-style: preserve-3d; touch-action: pan-y;"><div class="inertia-slide" style="translate: none; rotate: none; scale: none; touch-action: pan-y; transform: translate3d(127.949px, 0px, -809.47px) rotateY(-218.664deg); transform-origin: 50% 50%;"><img src="https://cdn.prod.website-files.com/67fea42b19018db93e3fe132/68014be6408118620403e9a0_run1.avif" loading="lazy" alt="" class="img-full" style="touch-action: pan-y;"></div><div class="inertia-slide" style="translate: none; rotate: none; scale: none; touch-action: pan-y; transform: translate3d(-74.5137px, 0px, -840.321px) rotateY(-158.664deg); transform-origin: 50% 50%;"><img src="https://cdn.prod.website-files.com/67fea42b19018db93e3fe132/68014be61c6cd36ab183dfcb_run2.avif" loading="lazy" alt="" class="img-full" style="touch-action: pan-y;"></div><div class="inertia-slide" style="translate: none; rotate: none; scale: none; touch-action: pan-y; transform: translate3d(-202.463px, 0px, -680.408px) rotateY(-98.664deg); transform-origin: 50% 50%;"><img src="https://cdn.prod.website-files.com/67fea42b19018db93e3fe132/68014be69e11d4352fe75f35_run3.avif" loading="lazy" alt="" class="img-full" style="touch-action: pan-y;"></div><div class="inertia-slide" style="translate: none; rotate: none; scale: none; touch-action: pan-y; transform: translate3d(-127.949px, 0px, -489.645px) rotateY(-38.664deg); transform-origin: 50% 50%;"><img src="https://cdn.prod.website-files.com/67fea42b19018db93e3fe132/68014be611882842b65d0cde_run4.avif" loading="lazy" alt="" class="img-full" style="touch-action: pan-y;"></div><div class="inertia-slide" style="translate: none; rotate: none; scale: none; touch-action: pan-y; transform: translate3d(74.5137px, 0px, -458.794px) rotateY(21.336deg); transform-origin: 50% 50%;"><img src="https://cdn.prod.website-files.com/67fea42b19018db93e3fe132/68014be65c4395c2a01bca17_run5.avif" loading="lazy" alt="" class="img-full" style="touch-action: pan-y;"></div><div class="inertia-slide" style="translate: none; rotate: none; scale: none; touch-action: pan-y; transform: translate3d(202.463px, 0px, -618.706px) rotateY(81.336deg); transform-origin: 50% 50%;"><img src="https://cdn.prod.website-files.com/67fea42b19018db93e3fe132/68014be64f5f29ef20ed7ccc_run6.avif" loading="lazy" alt="" class="img-full" style="touch-action: pan-y;"></div><div style="position: absolute; width: 100%; height: 100%; top: 0px; left: 0px; z-index: 1; cursor: grab; translate: none; rotate: none; scale: none; touch-action: pan-y;"></div></div><div class="explainer-w" style="touch-action: pan-y;"><div data-module="explainer" data-css="explainer" class="explainer-comp" style="touch-action: pan-y;"><label class="div" style="touch-action: pan-y;"><input type="checkbox" class="input" style="touch-action: pan-y;"><span class="span" style="touch-action: pan-y;"><div class="explainer-he" style="touch-action: pan-y;">Feel the inertia</div><div class="plus-icon-w" style="touch-action: pan-y;"><div class="plus-line rotate" style="touch-action: pan-y;"></div><div class="plus-line" style="touch-action: pan-y;"></div></div></span></label><div data-css="" class="explainer-expandable-w" style="touch-action: pan-y;"><div class="explainer-overflow" style="touch-action: pan-y;"><div class="explainer-content-w" style="touch-action: pan-y;"><p class="explainer-par" style="touch-action: pan-y;">Continue movement from a given speed, slow naturally to a stop. Perfect for adding physicality and flow to your interface.</p></div></div></div><div class="explainer-copy-btn-w" style="touch-action: pan-y;"><button data-module="copybtn" data-copy="https://cdn.prod.website-files.com/67fea42b19018db93e3fe132/6811e2c7ef67f371639c0386_inertia-final.json.txt" class="btn copy" style="touch-action: pan-y;"><div class="btn-cent-w" style="touch-action: pan-y;"><div class="text-block" style="touch-action: pan-y;">Copy this</div><svg xmlns="http://www.w3.org/2000/svg" width="100%" viewBox="0 0 9 11" fill="none" class="svg copy-icon" style="touch-action: pan-y;"><path fill-rule="evenodd" clip-rule="evenodd" d="M5 1.5H1V6.5H5V1.5ZM0 0.5V7.5H6V0.5H0Z" fill="currentColor" style="touch-action: pan-y;"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M3 8.757V10.5H9V3.5H7.42V4.5H8V9.5H4V8.757H3Z" fill="currentColor" style="touch-action: pan-y;"></path></svg></div></button></div><div class="mobile-explainer-prompt" style="touch-action: pan-y;">Copy this on Desktop</div></div></div><div class="code-block w-embed w-script" style="touch-action: pan-y;"><script style="touch-action: pan-y;">
|
||
{
|
||
// CREDITS: https://codepen.io/GreenSock/pen/RwLepdQ?editors=1010
|
||
|
||
addEventListener("GSAPReady", (event) => {
|
||
// console.log("inertia");
|
||
const wrapper = document.querySelector("[data-animate='inertia']");
|
||
const items = [...wrapper.querySelector("[data-inertia='item']").children];
|
||
|
||
/** -- Params */
|
||
let dragDistancePerRotation = 3000;
|
||
let itemWidth = items[0].offsetWidth; // Get width of the first item
|
||
let itemCount = items.length;
|
||
let radius = (itemWidth / (2 * Math.sin(Math.PI / itemCount))) * 0.85; // Dynamic radius
|
||
const perspective = 5000; // Controls the strength of the perspective effect
|
||
const proxy = document.createElement("div");
|
||
const progressWrap = gsap.utils.wrap(0, 1);
|
||
let startProgress = 0; // Define startProgress variable
|
||
|
||
// Set up the perspective on the wrapper
|
||
gsap.set(wrapper, {
|
||
perspective: perspective,
|
||
transformStyle: "preserve-3d",
|
||
});
|
||
|
||
// Set up the container for the rotating items
|
||
const container = wrapper.querySelector("[data-inertia='item']");
|
||
gsap.set(container, {
|
||
transformStyle: "preserve-3d",
|
||
});
|
||
|
||
const spin = gsap.fromTo(
|
||
items,
|
||
{
|
||
rotationY: (i) => (i * 360) / items.length,
|
||
z: -radius, // Use dynamic radius
|
||
},
|
||
{
|
||
rotationY: "-=360",
|
||
duration: 20,
|
||
ease: "none",
|
||
repeat: -1,
|
||
transformOrigin: "50% 50% " + -radius + "px",
|
||
z: -radius, // Maintain the z position throughout the animation
|
||
}
|
||
);
|
||
|
||
// Set up the proxy element properly
|
||
proxy.style.position = "absolute";
|
||
proxy.style.width = "100%";
|
||
proxy.style.height = "100%";
|
||
proxy.style.top = "0";
|
||
proxy.style.left = "0";
|
||
proxy.style.zIndex = "1";
|
||
proxy.style.cursor = "grab";
|
||
wrapper.children[0].appendChild(proxy);
|
||
|
||
// Create Draggable with mobile-friendly settings
|
||
Draggable.create(proxy, {
|
||
trigger: wrapper,
|
||
type: "x",
|
||
inertia: true,
|
||
// allowNativeTouchScrolling: false, // Changed to false to prevent conflicts
|
||
onPress() {
|
||
gsap.killTweensOf(spin);
|
||
spin.timeScale(0);
|
||
startProgress = spin.progress();
|
||
},
|
||
onDrag: updateRotation,
|
||
onThrowUpdate: updateRotation,
|
||
onRelease() {
|
||
if (!this.tween || !this.tween.isActive()) {
|
||
gsap.to(spin, { timeScale: 1, duration: 1 });
|
||
}
|
||
},
|
||
onThrowComplete() {
|
||
gsap.to(spin, { timeScale: 1, duration: 1 });
|
||
},
|
||
});
|
||
|
||
function updateRotation() {
|
||
let p = startProgress + (this.startX - this.x) / dragDistancePerRotation;
|
||
spin.progress(progressWrap(p));
|
||
}
|
||
|
||
function recalculatePositions() {
|
||
itemWidth = items[0].offsetWidth;
|
||
itemCount = items.length;
|
||
radius = (itemWidth / (2 * Math.sin(Math.PI / itemCount))) * 0.8;
|
||
|
||
// Update each item's rotationY and z
|
||
items.forEach((item, i) => {
|
||
gsap.set(item, {
|
||
rotationY: (i * 360) / itemCount,
|
||
z: -radius,
|
||
});
|
||
});
|
||
|
||
// Update the spin tween's transformOrigin and z
|
||
spin.vars.transformOrigin = "50% 50% " + -radius + "px";
|
||
spin.vars.z = -radius;
|
||
spin.invalidate(); // Re-initialize the tween with new values
|
||
|
||
// Update the perspective if needed
|
||
gsap.set(wrapper, {
|
||
perspective: perspective,
|
||
});
|
||
}
|
||
|
||
// Call on resize
|
||
window.addEventListener("resize", recalculatePositions);
|
||
|
||
// Add touch event listeners for better mobile support
|
||
wrapper.addEventListener(
|
||
"touchstart",
|
||
(e) => {
|
||
// Prevent default only if we're actually dragging
|
||
if (e.target === wrapper || e.target === proxy) {
|
||
e.preventDefault();
|
||
}
|
||
},
|
||
{ passive: false }
|
||
);
|
||
});
|
||
|
||
}
|
||
</script></div></section><section id="text" class="sec"><ul role="list" class="comp text-exp w-list-unstyled"><li class="text-g-item"><div class="text-example-container"><div data-delay=".1" data-animate="text" data-type="chars" data-duration="1.2" class="text-effect-w" aria-label="Split Chars" style="overflow: hidden;"><div class="text-effect-tx"><div aria-hidden="true" style="position: relative; display: inline-block; translate: none; rotate: none; scale: none; transform: translate(0%, 120%);">S</div><div aria-hidden="true" style="position: relative; display: inline-block; translate: none; rotate: none; scale: none; transform: translate(0%, 120%);">p</div><div aria-hidden="true" style="position: relative; display: inline-block; translate: none; rotate: none; scale: none; transform: translate(0%, 120%);">l</div><div aria-hidden="true" style="position: relative; display: inline-block; translate: none; rotate: none; scale: none; transform: translate(0%, 120%);">i</div><div aria-hidden="true" style="position: relative; display: inline-block; translate: none; rotate: none; scale: none; transform: translate(0%, 120%);">t</div> <div aria-hidden="true" style="position: relative; display: inline-block; translate: none; rotate: none; scale: none; transform: translate(0%, 120%);">C</div><div aria-hidden="true" style="position: relative; display: inline-block; translate: none; rotate: none; scale: none; transform: translate(0%, 120%);">h</div><div aria-hidden="true" style="position: relative; display: inline-block; translate: none; rotate: none; scale: none; transform: translate(0%, 120%);">a</div><div aria-hidden="true" style="position: relative; display: inline-block; translate: none; rotate: none; scale: none; transform: translate(0%, 120%);">r</div><div aria-hidden="true" style="position: relative; display: inline-block; translate: none; rotate: none; scale: none; transform: translate(0%, 120%);">s</div></div></div></div><div class="text-example-tx-w"><div>Character Split Reveal</div></div></li><li class="text-g-item"><div class="text-example-container"><div data-delay=".2" data-animate="text" data-type="words" data-duration="1.2" class="text-effect-w" aria-label="Split By Words" style="overflow: hidden;"><div class="text-effect-tx"><div aria-hidden="true" style="position: relative; display: inline-block; translate: none; rotate: none; scale: none; transform: translate(0%, 120%);">Split</div> <div aria-hidden="true" style="position: relative; display: inline-block; translate: none; rotate: none; scale: none; transform: translate(0%, 120%);">By</div> <div aria-hidden="true" style="position: relative; display: inline-block; translate: none; rotate: none; scale: none; transform: translate(0%, 120%);">Words</div></div></div></div><div class="text-example-tx-w"><div>Word Split Reveal</div></div></li><li class="text-g-item"><div class="text-example-container"><div data-delay=".1" data-animate="text" data-type="scramble" data-duration="1.2" class="text-effect-w"><div class="text-effect-tx">niiyhgir</div></div></div><div class="text-example-tx-w"><div>Scramble Text Reveal</div></div></li><li class="text-g-item"><div class="text-example-container"><div data-delay=".1" data-animate="text" data-type="alpha" data-duration="1.2" class="text-effect-w" aria-label="Split Alpha"><div class="text-effect-tx"><div aria-hidden="true" style="position: relative; display: inline-block; opacity: 0; visibility: hidden;">S</div><div aria-hidden="true" style="position: relative; display: inline-block; opacity: 0; visibility: hidden;">p</div><div aria-hidden="true" style="position: relative; display: inline-block; opacity: 0; visibility: hidden;">l</div><div aria-hidden="true" style="position: relative; display: inline-block; opacity: 0; visibility: hidden;">i</div><div aria-hidden="true" style="position: relative; display: inline-block; opacity: 0; visibility: hidden;">t</div> <div aria-hidden="true" style="position: relative; display: inline-block; opacity: 0; visibility: hidden;">A</div><div aria-hidden="true" style="position: relative; display: inline-block; opacity: 0; visibility: hidden;">l</div><div aria-hidden="true" style="position: relative; display: inline-block; opacity: 0; visibility: hidden;">p</div><div aria-hidden="true" style="position: relative; display: inline-block; opacity: 0; visibility: hidden;">h</div><div aria-hidden="true" style="position: relative; display: inline-block; opacity: 0; visibility: hidden;">a</div></div></div></div><div class="text-example-tx-w"><div>Alpha Reveal</div></div></li><li class="text-g-item"><div class="text-example-container"><div data-delay=".1" data-animate="text" data-type="side" data-duration="1.2" class="text-effect-w" aria-label="From the Side"><div class="text-effect-tx" aria-label="From the Side"><div aria-hidden="true" style="position: relative; display: inline-block; overflow: hidden;"><div aria-hidden="true" style="position: relative; display: inline-block; translate: none; rotate: none; scale: none; transform: translate(100px, 0px);">F</div></div><div aria-hidden="true" style="position: relative; display: inline-block; overflow: hidden;"><div aria-hidden="true" style="position: relative; display: inline-block; translate: none; rotate: none; scale: none; transform: translate(100px, 0px);">r</div></div><div aria-hidden="true" style="position: relative; display: inline-block; overflow: hidden;"><div aria-hidden="true" style="position: relative; display: inline-block; translate: none; rotate: none; scale: none; transform: translate(100px, 0px);">o</div></div><div aria-hidden="true" style="position: relative; display: inline-block; overflow: hidden;"><div aria-hidden="true" style="position: relative; display: inline-block; translate: none; rotate: none; scale: none; transform: translate(100px, 0px);">m</div></div> <div aria-hidden="true" style="position: relative; display: inline-block; overflow: hidden;"><div aria-hidden="true" style="position: relative; display: inline-block; translate: none; rotate: none; scale: none; transform: translate(100px, 0px);">t</div></div><div aria-hidden="true" style="position: relative; display: inline-block; overflow: hidden;"><div aria-hidden="true" style="position: relative; display: inline-block; translate: none; rotate: none; scale: none; transform: translate(100px, 0px);">h</div></div><div aria-hidden="true" style="position: relative; display: inline-block; overflow: hidden;"><div aria-hidden="true" style="position: relative; display: inline-block; translate: none; rotate: none; scale: none; transform: translate(100px, 0px);">e</div></div> <div aria-hidden="true" style="position: relative; display: inline-block; overflow: hidden;"><div aria-hidden="true" style="position: relative; display: inline-block; translate: none; rotate: none; scale: none; transform: translate(100px, 0px);">S</div></div><div aria-hidden="true" style="position: relative; display: inline-block; overflow: hidden;"><div aria-hidden="true" style="position: relative; display: inline-block; translate: none; rotate: none; scale: none; transform: translate(100px, 0px);">i</div></div><div aria-hidden="true" style="position: relative; display: inline-block; overflow: hidden;"><div aria-hidden="true" style="position: relative; display: inline-block; translate: none; rotate: none; scale: none; transform: translate(100px, 0px);">d</div></div><div aria-hidden="true" style="position: relative; display: inline-block; overflow: hidden;"><div aria-hidden="true" style="position: relative; display: inline-block; translate: none; rotate: none; scale: none; transform: translate(100px, 0px);">e</div></div></div></div></div><div class="text-example-tx-w"><div>SIide Char Reveal</div></div></li><li class="text-g-item"><div class="text-example-container"><div data-delay=".1" data-animate="text" data-type="updown" data-duration="1.2" class="text-effect-w" aria-label="Up and Down"><div class="text-effect-tx" aria-label="Up and Down"><div aria-hidden="true" style="position: relative; display: inline-block; overflow: hidden;"><div aria-hidden="true" style="position: relative; display: inline-block; translate: none; rotate: none; scale: none; transform: translate(0%, 100%);">U</div></div><div aria-hidden="true" style="position: relative; display: inline-block; overflow: hidden;"><div aria-hidden="true" style="position: relative; display: inline-block; translate: none; rotate: none; scale: none; transform: translate(0%, -100%);">p</div></div> <div aria-hidden="true" style="position: relative; display: inline-block; overflow: hidden;"><div aria-hidden="true" style="position: relative; display: inline-block; translate: none; rotate: none; scale: none; transform: translate(0%, 100%);">a</div></div><div aria-hidden="true" style="position: relative; display: inline-block; overflow: hidden;"><div aria-hidden="true" style="position: relative; display: inline-block; translate: none; rotate: none; scale: none; transform: translate(0%, -100%);">n</div></div><div aria-hidden="true" style="position: relative; display: inline-block; overflow: hidden;"><div aria-hidden="true" style="position: relative; display: inline-block; translate: none; rotate: none; scale: none; transform: translate(0%, 100%);">d</div></div> <div aria-hidden="true" style="position: relative; display: inline-block; overflow: hidden;"><div aria-hidden="true" style="position: relative; display: inline-block; translate: none; rotate: none; scale: none; transform: translate(0%, -100%);">D</div></div><div aria-hidden="true" style="position: relative; display: inline-block; overflow: hidden;"><div aria-hidden="true" style="position: relative; display: inline-block; translate: none; rotate: none; scale: none; transform: translate(0%, 100%);">o</div></div><div aria-hidden="true" style="position: relative; display: inline-block; overflow: hidden;"><div aria-hidden="true" style="position: relative; display: inline-block; translate: none; rotate: none; scale: none; transform: translate(0%, -100%);">w</div></div><div aria-hidden="true" style="position: relative; display: inline-block; overflow: hidden;"><div aria-hidden="true" style="position: relative; display: inline-block; translate: none; rotate: none; scale: none; transform: translate(0%, 100%);">n</div></div></div></div></div><div class="text-example-tx-w"><div>Up and down Reveal</div></div></li></ul><div class="explainer-w"><div data-module="explainer" data-css="explainer" class="explainer-comp"><label class="div"><input type="checkbox" class="input"><span class="span"><div class="explainer-he">Split, animate, reveal</div><div class="plus-icon-w"><div class="plus-line rotate"></div><div class="plus-line"></div></div></span></label><div data-css="" class="explainer-expandable-w"><div class="explainer-overflow"><div class="explainer-content-w"><p class="explainer-par">Animate each one independently. It’s all motion, no compromise: screen readers and search engines still see the original text.</p></div></div></div><div class="explainer-copy-btn-w"><button data-module="copybtn" data-copy="https://cdn.prod.website-files.com/67fea42b19018db93e3fe132/6811e2c873ab161c8499accd_text-final.json.txt" class="btn copy"><div class="btn-cent-w"><div class="text-block">Copy this</div><svg xmlns="http://www.w3.org/2000/svg" width="100%" viewBox="0 0 9 11" fill="none" class="svg copy-icon"><path fill-rule="evenodd" clip-rule="evenodd" d="M5 1.5H1V6.5H5V1.5ZM0 0.5V7.5H6V0.5H0Z" fill="currentColor"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M3 8.757V10.5H9V3.5H7.42V4.5H8V9.5H4V8.757H3Z" fill="currentColor"></path></svg></div></button></div><div class="mobile-explainer-prompt">Copy this on Desktop</div></div></div><div class="code-block w-embed w-script"><script>
|
||
{
|
||
|
||
/** Utility Functions */
|
||
const split = (text, type = "chars") => {
|
||
text.setAttribute("aria-label", text.textContent);
|
||
const splits = new SplitText(text, { type });
|
||
splits[type].forEach((char) => char.setAttribute("aria-hidden", "true"));
|
||
return splits[type];
|
||
};
|
||
|
||
const getParams = (item) => {
|
||
const { duration, delay, stagger, ease, type } = item.dataset;
|
||
const params = {
|
||
duration: 1.2,
|
||
delay: 0,
|
||
type: "chars",
|
||
};
|
||
|
||
if (duration) params.duration = parseFloat(duration);
|
||
if (delay) params.delay = parseFloat(delay);
|
||
if (type && (type === "chars" || type === "words" || type === "lines"))
|
||
params.type = type;
|
||
|
||
return params;
|
||
};
|
||
|
||
const baseAnimation = (item) => {
|
||
const params = getParams(item);
|
||
return {
|
||
duration: params.duration,
|
||
delay: params.delay,
|
||
ease: "expo.out",
|
||
// stagger each item so the letters come in one after the other
|
||
stagger: {
|
||
each: 0.04,
|
||
from: "start",
|
||
},
|
||
scrollTrigger: {
|
||
trigger: item,
|
||
// use scrolltrigger to trigger on enter and reset on exit
|
||
toggleActions: "play reset play reset",
|
||
},
|
||
};
|
||
};
|
||
|
||
/** (1) Split Reveal Animation */
|
||
function createSplitRevealAnimation(item) {
|
||
const params = getParams(item); // 1. get params from attributes
|
||
const text = split(item, params.type); // 2. split the text
|
||
item.style.overflow = "hidden"; // 3. set container to overflow
|
||
|
||
// 4. create the animation
|
||
return gsap.fromTo(
|
||
text,
|
||
{ yPercent: 120 },
|
||
{
|
||
...baseAnimation(item),
|
||
yPercent: 0,
|
||
}
|
||
);
|
||
}
|
||
|
||
function createScrambledAnimation(item) {
|
||
const text = item.textContent;
|
||
const randomText = Array(text.length)
|
||
.fill()
|
||
.map(() => String.fromCharCode(Math.floor(Math.random() * (90 - 65) + 65)))
|
||
.join("")
|
||
.toLowerCase();
|
||
|
||
return gsap.fromTo(
|
||
item.children[0],
|
||
{
|
||
scrambleText: randomText,
|
||
},
|
||
{
|
||
...baseAnimation(item),
|
||
scrambleText: text,
|
||
chars: text,
|
||
}
|
||
);
|
||
}
|
||
|
||
function createAlphaAnimation(item) {
|
||
|
||
const params = getParams(item); // 1. get params from attributes
|
||
const text = split(item, "chars"); // 2. split the text
|
||
|
||
return gsap.fromTo(
|
||
text,
|
||
{ autoAlpha: 0 },
|
||
{
|
||
...baseAnimation(item),
|
||
autoAlpha: 1,
|
||
stagger: {
|
||
each: 0.02,
|
||
from: "random",
|
||
},
|
||
}
|
||
);
|
||
}
|
||
|
||
function createSideAnimation(item) {
|
||
const params = getParams(item);
|
||
const outer = split(item, "chars");
|
||
outer.forEach((char) => {
|
||
char.style.overflow = "hidden";
|
||
});
|
||
const inner = split(item.children[0], "chars");
|
||
|
||
return gsap.fromTo(
|
||
inner,
|
||
{ x: 100 },
|
||
{
|
||
...baseAnimation(item),
|
||
x: 0,
|
||
stagger: {
|
||
each: 0.02,
|
||
from: "end",
|
||
},
|
||
}
|
||
);
|
||
}
|
||
|
||
function createUpDownAnimation(item) {
|
||
const params = getParams(item);
|
||
const outer = split(item, "chars");
|
||
outer.forEach((char) => {
|
||
char.style.overflow = "hidden";
|
||
});
|
||
const inner = split(item.children[0], "chars");
|
||
|
||
return gsap.fromTo(
|
||
inner,
|
||
{
|
||
yPercent: (i) => {
|
||
return i % 2 === 0 ? 100 : -100;
|
||
},
|
||
},
|
||
{
|
||
...baseAnimation(item),
|
||
yPercent: 0,
|
||
stagger: {
|
||
each: 0.02,
|
||
from: "random",
|
||
},
|
||
}
|
||
);
|
||
}
|
||
|
||
/** Main Text Effect Wrapper */
|
||
addEventListener("GSAPReady", (event) => {
|
||
const texts = [...document.querySelectorAll('[data-animate="text"]')];
|
||
|
||
texts.forEach((item) => {
|
||
if (item.dataset.type === "chars") createSplitRevealAnimation(item);
|
||
else if (item.dataset.type === "words") createSplitRevealAnimation(item);
|
||
else if (item.dataset.type === "scramble") createScrambledAnimation(item);
|
||
else if (item.dataset.type === "alpha") createAlphaAnimation(item);
|
||
else if (item.dataset.type === "side") createSideAnimation(item);
|
||
else if (item.dataset.type === "updown") createUpDownAnimation(item);
|
||
});
|
||
});
|
||
|
||
}
|
||
</script></div></section><section id="marquee" data-animate="marquee" class="sec"><div class="comp scroller"><div data-marquee="line" class="scroller-line first" style="translate: none; rotate: none; scale: none; transform: translate(925.75px, 76.8px) rotate(-4.00022deg);"><div class="scroller-text">SCROLLTRIGGER</div><div class="marquee-img"><div class="dual-img"><img src="https://cdn.prod.website-files.com/67fea42b19018db93e3fe132/68121015d96d6954095ef777_socks.avif" loading="eager" alt="" class="dual-img-img"><img src="https://cdn.prod.website-files.com/67fea42b19018db93e3fe132/68120ec1e289d92b32665f96_socks-shadow.avif" loading="eager" alt="" class="dual-img-shadow"></div></div><div class="scroller-text"> MARQUEE</div></div><div data-marquee="line" class="scroller-line second" style="translate: none; rotate: none; scale: none; transform: translate(-925.75px, -115.2px) rotate(6.0001deg);"><div class="scroller-text"> MARQUEE</div><div class="marquee-img"><div class="dual-img"><img src="https://cdn.prod.website-files.com/67fea42b19018db93e3fe132/68120fa8f48810a5b328c7a4_tomato.avif" loading="eager" alt="" class="dual-img-img"><img src="https://cdn.prod.website-files.com/67fea42b19018db93e3fe132/68120ec1fdd37f3577bdedb8_tomato-shadow.avif" loading="eager" alt="" class="dual-img-shadow"></div></div><div class="scroller-text">SCROLLTRIGGER</div></div></div><div class="explainer-w"><div data-module="explainer" data-css="explainer" class="explainer-comp"><label class="div"><input type="checkbox" class="input"><span class="span"><div class="explainer-he">Marquees forever</div><div class="plus-icon-w"><div class="plus-line rotate"></div><div class="plus-line"></div></div></span></label><div data-css="" class="explainer-expandable-w"><div class="explainer-overflow"><div class="explainer-content-w"><p class="explainer-par">Loop endlessly. Stack images, text, or both. Marquees give rhythm to your page without needing a single click.</p></div></div></div><div class="explainer-copy-btn-w"><button data-module="copybtn" data-copy="https://cdn.prod.website-files.com/67fea42b19018db93e3fe132/6811e2c7bd787427ed9cbaa8_marquee-final.json.txt" class="btn copy"><div class="btn-cent-w"><div class="text-block">Copy this</div><svg xmlns="http://www.w3.org/2000/svg" width="100%" viewBox="0 0 9 11" fill="none" class="svg copy-icon"><path fill-rule="evenodd" clip-rule="evenodd" d="M5 1.5H1V6.5H5V1.5ZM0 0.5V7.5H6V0.5H0Z" fill="currentColor"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M3 8.757V10.5H9V3.5H7.42V4.5H8V9.5H4V8.757H3Z" fill="currentColor"></path></svg></div></button></div><div class="mobile-explainer-prompt">Copy this on Desktop</div></div></div><div class="code-block w-embed w-script"><script>
|
||
addEventListener("GSAPReady", (event) => {
|
||
// console.log("marquee");
|
||
const wrapper = document.querySelector("[data-animate='marquee']");
|
||
if (!wrapper) return;
|
||
|
||
const sections = [...wrapper.querySelectorAll("[data-marquee='line']")];
|
||
|
||
gsap.fromTo(
|
||
sections,
|
||
{
|
||
x: (i) =>
|
||
i % 2 === 0
|
||
? sections[i].offsetWidth / 4
|
||
: -sections[i].offsetWidth / 4,
|
||
},
|
||
{
|
||
x: (i) =>
|
||
i % 2 === 0
|
||
? -sections[i].offsetWidth / 4
|
||
: sections[i].offsetWidth / 4,
|
||
scrollTrigger: {
|
||
trigger: wrapper,
|
||
start: "top bottom",
|
||
end: "bottom top",
|
||
scrub: true,
|
||
// invalidateOnRefresh: true,
|
||
},
|
||
}
|
||
);
|
||
});
|
||
|
||
</script></div></section><footer data-select="inverse" class="sec footer"><div class="comp footer"><div class="footer-line separator"><div class="col-half"><div class="logo-banner-w white"><svg xmlns="http://www.w3.org/2000/svg" width="100%" viewBox="0 0 101 17" fill="none" class="svg _wf-logo"><path d="M73.479 14.2931H75.7679V1.15454H73.479V14.2931Z" fill="currentColor"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M61.0531 14.1589C61.5506 14.3658 62.0564 14.4692 62.5707 14.4692C63.4203 14.4692 64.1805 14.2624 64.8513 13.8487C65.522 13.4351 66.0419 12.8649 66.4108 12.1383C66.7797 11.406 66.9642 10.576 66.9642 9.64807C66.9642 8.72018 66.7741 7.89011 66.394 7.15787C66.0139 6.42562 65.4857 5.85826 64.8094 5.45581C64.133 5.04776 63.3644 4.84653 62.5036 4.85212C61.9558 4.85212 61.4304 4.95832 60.9273 5.17073C60.4242 5.38314 60.005 5.68498 59.6696 6.07626C59.6437 6.10605 59.6186 6.13614 59.5942 6.16653V1.16293H57.2968V14.2931H59.5774L59.5728 13.0665C59.6318 13.1388 59.6949 13.2095 59.7619 13.2786C60.1252 13.6531 60.5556 13.9465 61.0531 14.1589ZM63.4008 12.0377C63.0263 12.2668 62.5986 12.3814 62.1179 12.3814C61.6428 12.3814 61.2068 12.264 60.8099 12.0293C60.4131 11.7889 60.0973 11.4619 59.8625 11.0483C59.6333 10.6347 59.5187 10.1651 59.5187 9.63969C59.5131 9.11426 59.6249 8.64472 59.8541 8.23109C60.0889 7.81186 60.4047 7.48766 60.8016 7.25848C61.1984 7.02371 61.6372 6.90912 62.1179 6.91471C62.5986 6.90912 63.0263 7.02092 63.4008 7.2501C63.7809 7.47368 64.0715 7.79509 64.2727 8.21432C64.4796 8.62795 64.583 9.10308 64.583 9.63969C64.583 10.1763 64.4796 10.6514 64.2727 11.0651C64.0715 11.4787 63.7809 11.8029 63.4008 12.0377Z" fill="currentColor"></path><path d="M30.7368 1.95107H33.3528L35.6929 10.4972L38.1823 1.95107H40.3623L43.0621 10.3257L45.3091 1.95107H47.7071L44.1688 14.2931H41.9134L39.168 6.11181L36.6479 14.2931H34.3673L30.7368 1.95107Z" fill="currentColor"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M51.5702 14.5111C50.6591 14.5167 49.8374 14.3155 49.1051 13.9074C48.3785 13.4938 47.8055 12.9208 47.3863 12.1886C46.9727 11.4563 46.7658 10.6207 46.7658 9.68161C46.7658 8.77049 46.9783 7.94601 47.4031 7.20817C47.8279 6.47033 48.4036 5.8946 49.1303 5.48096C49.8569 5.06732 50.6674 4.8605 51.5618 4.8605C52.5679 4.8605 53.4483 5.08409 54.2029 5.53127C54.9631 5.97844 55.5305 6.61287 55.905 7.43455C56.2851 8.25065 56.422 9.18692 56.3158 10.2434H49.1338C49.1539 10.6643 49.259 11.0472 49.4489 11.3921C49.6613 11.7722 49.9576 12.0684 50.3377 12.2808C50.7178 12.4932 51.1426 12.5994 51.6121 12.5994C51.9698 12.5938 52.3024 12.5324 52.6099 12.415C52.9173 12.292 53.1772 12.1271 53.3896 11.9203C53.6076 11.7135 53.7613 11.4787 53.8508 11.216H56.2488C56.1034 11.8588 55.8128 12.4317 55.3768 12.9348C54.9408 13.4323 54.393 13.8208 53.7334 14.1003C53.0738 14.3797 52.3527 14.5167 51.5702 14.5111ZM49.4573 7.93763C49.3233 8.17122 49.2305 8.42275 49.1789 8.69223H53.9396C53.9051 8.35179 53.8 8.04156 53.6244 7.76155C53.4232 7.43176 53.1493 7.17743 52.8027 6.99856C52.4561 6.8141 52.0649 6.72187 51.6289 6.72187C51.1649 6.72187 50.7429 6.82807 50.3628 7.04048C49.9827 7.25289 49.6809 7.55194 49.4573 7.93763Z" fill="currentColor"></path><path d="M68.6495 5.05335C68.6495 4.30433 68.82 3.63916 69.1609 3.05783C69.5019 2.47091 69.9798 2.01535 70.5947 1.69115C71.2151 1.36136 71.939 1.19087 72.7663 1.17969V3.21714C72.3806 3.22273 72.0508 3.30378 71.7769 3.46029C71.5086 3.61121 71.3018 3.832 71.1565 4.12267C71.0227 4.39026 70.9504 4.70048 70.9398 5.05335H72.716V6.99017H70.9385V14.2931H68.6495V6.99017H67.1738V5.05335H68.6495Z" fill="currentColor"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M81.5868 14.4943C80.6533 14.4943 79.8177 14.2903 79.0798 13.8823C78.3476 13.4686 77.7718 12.8985 77.3526 12.1718C76.939 11.4396 76.7322 10.6095 76.7322 9.68161C76.7322 8.74813 76.939 7.91527 77.3526 7.18302C77.7718 6.44518 78.3476 5.87224 79.0798 5.46419C79.8177 5.05614 80.6533 4.85212 81.5868 4.85212C82.5259 4.85212 83.3643 5.05614 84.1022 5.46419C84.8456 5.87224 85.4241 6.44239 85.8378 7.17463C86.2514 7.90688 86.461 8.74254 86.4666 9.68161C86.461 10.6095 86.2514 11.4396 85.8378 12.1718C85.4297 12.8985 84.854 13.4686 84.1106 13.8823C83.3671 14.2903 82.5259 14.4943 81.5868 14.4943ZM81.5868 12.3898C82.0787 12.3898 82.5147 12.278 82.8948 12.0544C83.2749 11.8253 83.5684 11.5066 83.7752 11.0986C83.982 10.685 84.0854 10.2126 84.0854 9.68161C84.0854 9.145 83.982 8.66988 83.7752 8.25624C83.5684 7.8426 83.2749 7.52399 82.8948 7.3004C82.5147 7.07123 82.0787 6.95664 81.5868 6.95664C81.1005 6.95664 80.6673 7.07123 80.2872 7.3004C79.9127 7.52399 79.622 7.8426 79.4152 8.25624C79.2084 8.66988 79.1078 9.145 79.1134 9.68161C79.1134 10.2126 79.2168 10.685 79.4236 11.0986C79.636 11.5066 79.9267 11.8253 80.2956 12.0544C80.6701 12.278 81.1005 12.3898 81.5868 12.3898Z" fill="currentColor"></path><path d="M88.94 5.05335H86.3911L89.1497 14.2931H91.3799L93.1939 8.39168L95.153 14.2931H97.3497L100.117 5.05335H97.8109L96.2419 10.8045L94.5074 5.05335H92.2771L90.5511 10.9312L88.94 5.05335Z" fill="currentColor"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M26.7493 0.0665716C26.7649 0.0361506 26.7428 0 26.7087 0H19.0047C18.9876 0 18.972 0.00950944 18.9641 0.0246603L15.9961 5.74456C15.9883 5.75965 15.9728 5.76915 15.9558 5.76922L15.9206 5.76937C15.8943 5.76948 15.8733 5.7473 15.8748 5.72097L16.2087 0.0489462C16.2102 0.0226875 16.1893 0.00054444 16.163 0.00054444H10.5197C10.5014 0.00054444 10.4859 0.00900587 10.4786 0.0258239C10.3392 0.35023 8.88016 3.72188 7.61781 5.78228C7.60954 5.79577 7.59507 5.80369 7.57926 5.80376L7.56193 5.80383C7.53635 5.80393 7.51566 5.78302 7.51603 5.75744L7.60002 0.0463877C7.60039 0.0208796 7.57982 0 7.55431 0H0.485657C0.460409 0 0.439941 0.0204672 0.439941 0.0457152V7.01126C0.439941 7.03651 0.460409 7.05698 0.485657 7.05698H6.56435C6.60453 7.05698 6.62478 7.10517 6.59661 7.13382C4.4084 9.35927 0.906551 9.69812 0.482434 9.73148C0.458321 9.73338 0.439941 9.75343 0.439941 9.77761V16.4119C0.439941 16.4388 0.463417 16.4598 0.49019 16.4573C6.63303 15.8853 10.9496 13.4282 13.8046 9.65913C13.8133 9.64771 13.8268 9.64097 13.8411 9.64097H13.8991C13.9334 9.64097 13.9555 9.67731 13.9397 9.70774L10.5906 16.1622C10.5748 16.1927 10.5968 16.229 10.6311 16.229H18.4353C18.4525 16.229 18.4682 16.2194 18.476 16.2042L26.7493 0.0665716Z" fill="currentColor"></path></svg><div class="x-adjust-right">X</div><svg xmlns="http://www.w3.org/2000/svg" width="100%" viewBox="0 0 45 16" fill="none" class="svg gsap-logo"><path d="M23.1708 4.61358C23.1683 4.68942 23.1364 4.76131 23.0818 4.81406C23.0273 4.86681 22.9544 4.89629 22.8785 4.89624H19.8673C19.67 4.89624 19.5051 4.73624 19.5051 4.54158C19.5051 3.66318 19.2011 3.23544 18.5793 3.23544C17.9574 3.23544 17.5563 3.61731 17.5446 4.28451C17.5313 5.02851 17.9521 5.70478 19.1499 6.86638C20.727 8.34584 21.359 9.65625 21.3286 11.3885C21.279 14.1896 19.3745 16.0002 16.4763 16.0002C14.9963 16.0002 13.8657 15.6045 13.1137 14.8237C12.3505 14.0306 12.0006 12.8669 12.0737 11.365C12.0762 11.2891 12.1081 11.2171 12.1628 11.1644C12.2175 11.1116 12.2905 11.0822 12.3665 11.0824H15.4811C15.5245 11.0831 15.5672 11.0934 15.6061 11.1126C15.6451 11.1317 15.6792 11.1593 15.7062 11.1933C15.7298 11.2214 15.747 11.2542 15.7567 11.2896C15.7665 11.3249 15.7685 11.3619 15.7627 11.3981C15.7281 11.94 15.8225 12.3448 16.0358 12.5688C16.1723 12.7138 16.3627 12.7874 16.6001 12.7874C17.1755 12.7874 17.5126 12.381 17.5254 11.6728C17.5361 11.0605 17.3425 10.524 16.2875 9.43864C14.9249 8.10744 13.703 6.73198 13.7409 4.56931C13.7633 3.31491 14.2614 2.16771 15.1441 1.33891C16.0774 0.463178 17.3537 0.000244141 18.8353 0.000244141C20.3195 0.0109108 21.4444 0.434377 22.1788 1.25891C22.8742 2.04024 23.2086 3.16878 23.1718 4.61358H23.1708Z" fill="currentColor"></path><path d="M32.504 15.4734L32.5237 0.575779C32.5243 0.538471 32.5174 0.501426 32.5034 0.466819C32.4895 0.432213 32.4688 0.400744 32.4425 0.374261C32.4162 0.347778 32.3849 0.326816 32.3504 0.312605C32.3159 0.298395 32.2789 0.291224 32.2416 0.291512H27.5813C27.4245 0.291512 27.3557 0.426446 27.3109 0.515512L20.5632 15.3822V15.3848L20.5605 15.3886C20.4858 15.5715 20.6277 15.7672 20.8256 15.7672H24.0832C24.2592 15.7672 24.376 15.7139 24.433 15.603L25.08 14.0483C25.1594 13.8408 25.1744 13.8216 25.4005 13.8216H28.513C28.7296 13.8216 28.7338 13.8259 28.7306 14.0376L28.6608 15.483C28.6602 15.5202 28.6671 15.5572 28.681 15.5918C28.6949 15.6264 28.7156 15.6578 28.7418 15.6843C28.768 15.7108 28.7993 15.7318 28.8337 15.746C28.8682 15.7602 28.9051 15.7675 28.9424 15.7672H32.2336C32.2743 15.7677 32.3147 15.7593 32.3518 15.7425C32.3889 15.7258 32.4219 15.7011 32.4485 15.6702C32.4714 15.6433 32.4882 15.6118 32.4978 15.5779C32.5074 15.5439 32.5095 15.5082 32.504 15.4734ZM26.7386 10.4995C26.7141 10.4996 26.6895 10.4987 26.665 10.4968C26.6536 10.4959 26.6426 10.4925 26.6326 10.4868C26.6227 10.4811 26.6141 10.4733 26.6075 10.464C26.6009 10.4546 26.5964 10.4439 26.5944 10.4326C26.5923 10.4214 26.5928 10.4098 26.5957 10.3987C26.6021 10.3774 26.6112 10.348 26.6245 10.3123L28.9584 4.53738C28.9794 4.4804 29.0036 4.42466 29.0309 4.37045C29.0688 4.29258 29.1146 4.28725 29.129 4.34485C29.1413 4.39285 28.8613 10.2744 28.8613 10.2744C28.8394 10.4947 28.8293 10.5038 28.6122 10.5219L26.7408 10.5006H26.7365L26.7386 10.4995Z" fill="currentColor"></path><path d="M39.1427 0.291395H36.6685C36.5379 0.291395 36.3912 0.360728 36.3571 0.516462L32.9139 15.4658C32.9063 15.4995 32.9067 15.5345 32.9148 15.5681C32.9229 15.6016 32.9387 15.6329 32.9608 15.6594C32.9895 15.6932 33.0252 15.7203 33.0655 15.7389C33.1057 15.7575 33.1495 15.7672 33.1939 15.7671H36.2861C36.4525 15.7671 36.5661 15.6855 36.5971 15.5442L36.9725 13.8498C36.9992 13.7175 36.9533 13.6151 36.8349 13.5533C36.7794 13.5246 36.7239 13.4958 36.6685 13.4669L36.1325 13.1879L35.5992 12.9095L35.3928 12.8023C35.376 12.794 35.3619 12.781 35.3522 12.7649C35.3425 12.7489 35.3375 12.7304 35.3379 12.7117C35.3386 12.6839 35.3501 12.6575 35.3701 12.6381C35.39 12.6188 35.4167 12.608 35.4445 12.6082L37.1389 12.6157C37.6456 12.6183 38.1528 12.5826 38.6515 12.4909C42.1608 11.8429 44.4915 9.0322 44.5587 5.20766C44.6163 1.94366 42.7944 0.289795 39.1453 0.289795L39.1427 0.291395ZM38.3005 9.1874H38.2344C38.0856 9.1874 38.0595 9.1714 38.0552 9.16606C38.0525 9.16233 39.0323 4.86046 39.0328 4.8546C39.0579 4.73033 39.0568 4.65886 38.98 4.61673C38.8819 4.56233 37.4515 3.8082 37.4515 3.8082C37.4348 3.79945 37.421 3.78622 37.4114 3.77001C37.4019 3.7538 37.3971 3.73525 37.3976 3.71646C37.3983 3.68906 37.4097 3.66302 37.4293 3.64389C37.4489 3.62476 37.4752 3.61405 37.5027 3.61406H39.7645C40.4685 3.63539 40.8611 4.26526 40.8424 5.341C40.8099 7.20286 39.9245 9.1218 38.3005 9.1874Z" fill="currentColor"></path><path d="M13.152 7.47318V7.48011L12.5786 9.96864C12.5477 10.1094 12.4069 10.2124 12.2448 10.2124H11.552C11.527 10.2125 11.5027 10.2206 11.4828 10.2356C11.4628 10.2506 11.4481 10.2716 11.441 10.2956C10.8021 12.463 9.93704 13.9526 8.79464 14.847C7.82291 15.6086 6.62504 15.9638 5.02451 15.9638C3.58664 15.9638 2.61705 15.5014 1.79465 14.5884C0.707712 13.382 0.258645 11.4065 0.530645 9.02678C1.02131 4.55904 3.33864 0.050777 7.80051 0.050777C9.15784 0.0390437 10.2234 0.45771 10.9648 1.29344C11.7488 2.17771 12.1466 3.50891 12.1488 5.25184C12.1468 5.32825 12.1151 5.40087 12.0605 5.45427C12.0058 5.50766 11.9324 5.5376 11.856 5.53771H8.58664C8.52936 5.53595 8.47492 5.5123 8.43454 5.47162C8.39417 5.43095 8.37092 5.37634 8.36958 5.31904C8.34291 4.11371 7.98558 3.52704 7.27518 3.52704C6.02184 3.52704 5.28264 5.22838 4.89064 6.17131C4.34291 7.48864 4.06398 8.91958 4.11891 10.3446C4.14505 11.0081 4.25171 11.9409 4.88158 12.3276C5.43998 12.67 6.23678 12.4428 6.71944 12.0636C7.20158 11.6838 7.58984 11.0273 7.75304 10.4284C7.77598 10.3452 7.77758 10.2806 7.75571 10.2518C7.73278 10.222 7.66931 10.215 7.62078 10.215H6.78131C6.73688 10.2152 6.69295 10.2056 6.6526 10.187C6.61225 10.1684 6.57645 10.1412 6.54771 10.1073C6.52566 10.0809 6.51 10.0497 6.50195 10.0162C6.4939 9.98271 6.49368 9.94783 6.50131 9.91424L7.07518 7.42144C7.10344 7.29398 7.21918 7.19744 7.36158 7.18038V7.17398H12.8709C12.8837 7.17398 12.897 7.17398 12.9093 7.17664C13.0522 7.19531 13.153 7.32811 13.1504 7.47318H13.152Z" fill="currentColor"></path></svg></div></div><div class="col-half items-r"><div class="_w-ch">Bring your site to life with the power of GSAP, now even more seamlessly in Webflow. This template is your starting point to help you harness the magic of GSAP. <br><br>No gatekeeping, just a resource at your disposal to start you strong with motion design. Complete with cloneable elements and best-practice tips on when, why and how to use them. <br><br>Copy what you need, tweak what you like and get motion into your next build: faster, smoother and better.</div></div></div><div class="footer-line"><div class="col-half"><ul role="list" class="sub-nav-w w-list-unstyled"><li><a href="#flip" class="link-li-w footer w-inline-block"><div>Flip</div></a></li><li><a href="#inertia" class="link-li-w footer w-inline-block"><div>Inertia</div></a></li><li><a href="#scrolltrigger" class="link-li-w footer w-inline-block"><div>Scroll Trigger</div></a></li><li><a href="#slider" class="link-li-w footer w-inline-block w--current"><div>Slider</div></a></li><li><a href="#text" class="link-li-w footer w-inline-block"><div>Split Text</div></a></li></ul></div><div class="col-half items-r"><div class="op-70"><div class="op-7">©2025</div><a href="https://itsoffbrand.com/" target="_blank" class="ext-link w-inline-block"><div>Site by OFF+BRAND.</div></a><link rel="prefetch" href="https://itsoffbrand.com/"></div></div></div></div><div data-animate="footerlogo" class="comp footer-logo"><svg xmlns="http://www.w3.org/2000/svg" width="100%" fill="none" viewBox="0 0 1426 332"><g class="animation footer"><path fill="currentColor" d="M269.779 111.176c-8.811-5.2-18.881-7.805-30.233-7.805-11.353 0-21.608 2.605-30.408 7.805-8.811 5.21-15.602 12.581-20.394 22.111-4.793 9.529-7.183 20.499-7.183 32.897s2.39 22.934 7.183 32.281c4.792 9.359 11.56 16.615 20.302 21.757 8.754 5.153 18.916 7.724 30.5 7.724 11.583 0 21.422-2.571 30.233-7.724 8.8-5.142 15.637-12.398 20.488-21.757 4.85-9.358 7.275-20.123 7.275-32.281 0-12.158-2.425-23.368-7.275-32.897-4.851-9.53-11.676-16.901-20.488-22.111Zm7.091 80.799c-3.487 7.37-8.453 13.072-14.897 17.106-6.444 4.033-13.916 6.056-22.439 6.056s-16.168-2.023-22.612-6.056c-6.444-4.034-11.375-9.736-14.805-17.106-3.43-7.371-5.139-15.964-5.139-25.791s1.709-18.865 5.139-26.407c3.43-7.542 8.361-13.358 14.805-17.46 6.444-4.091 13.974-6.136 22.612-6.136 8.638 0 15.983 2.045 22.439 6.136 6.444 4.091 11.41 9.918 14.897 17.46 3.488 7.542 5.232 16.352 5.232 26.407 0 10.056-1.744 18.42-5.232 25.791Zm116.779-87.735h-74.835a1.2 1.2 0 0 0-.889.354c-.242.24-.358.583-.358 1.051v120.027c0 .355.116.675.358.96.243.297.531.434.889.434h12.415c.474 0 .82-.148 1.062-.434.231-.285.358-.617.358-.96v-52.814h57.454c.474 0 .82-.149 1.063-.435.231-.285.358-.617.358-.959v-10.182c0-.468-.116-.811-.358-1.051-.243-.229-.589-.354-1.063-.354h-57.454V117.06h61c.473 0 .82-.114 1.062-.354.231-.228.358-.525.358-.88v-10.181c0-.468-.115-.811-.358-1.051-.242-.229-.589-.354-1.062-.354Zm96.649 0h-74.834c-.358 0-.647.114-.889.354-.243.24-.358.583-.358 1.051v120.027c0 .355.115.675.358.96.23.297.531.434.889.434h12.414c.474 0 .82-.148 1.063-.434.231-.285.358-.617.358-.96v-52.814h57.454c.473 0 .82-.149 1.062-.435.231-.285.358-.617.358-.959v-10.182c0-.468-.115-.811-.358-1.051-.242-.229-.589-.354-1.062-.354h-57.454V117.06h61.01c.474 0 .82-.114 1.063-.354.231-.228.358-.525.358-.88v-10.181c0-.468-.115-.811-.358-1.051-.243-.229-.589-.354-1.063-.354h-.011Zm237.899 60.013v-.697c6.502-2.342 11.352-5.793 14.54-10.353 3.187-4.559 4.792-10.352 4.792-17.368 0-10.182-3.372-17.986-10.105-23.425-6.733-5.439-16.491-8.159-29.264-8.159h-45.755c-.358 0-.647.114-.889.354-.243.24-.358.583-.358 1.051v120.028c0 .354.115.674.358.96.231.297.531.434.889.434h47.522c14.309 0 24.853-2.663 31.655-7.987 6.79-5.325 10.197-13.598 10.197-24.831 0-7.725-2.067-14.215-6.202-19.471-4.146-5.268-9.931-8.776-17.38-10.524v-.012Zm-51.957-47.204h31.389c8.153 0 14.274 1.725 18.351 5.176 4.076 3.451 6.12 8.628 6.12 15.529 0 6.902-2.044 11.93-6.12 15.438-4.077 3.508-10.198 5.268-18.351 5.268H676.24v-41.411Zm53.909 92.032c-4.135 3.451-10.706 5.176-19.679 5.176h-34.23v-42.988h34.23c8.985 0 15.544 1.726 19.679 5.177 4.134 3.451 6.201 8.855 6.201 16.226 0 7.37-2.067 12.958-6.201 16.409Zm123.43-48.953c2.956-5.199 4.435-11.61 4.435-19.208 0-12.044-3.546-21.174-10.637-27.379-7.09-6.205-17.438-9.301-31.03-9.301h-43.088c-.358 0-.647.114-.889.354-.243.24-.358.583-.358 1.051v120.027c0 .355.115.675.358.96.231.297.531.434.889.434h12.415c.947 0 1.42-.468 1.42-1.405v-45.799h55.687v45.799c0 .354.15.674.439.96.289.297.624.434.97.434h12.415c.473 0 .831-.149 1.062-.434.243-.286.358-.617.358-.96v-42.108c0-3.976-.947-6.867-2.841-8.684-1.894-1.817-4.966-2.72-9.227-2.72h-5.139v-.525c5.555-2.457 9.816-6.285 12.772-11.496h-.011Zm-17.554.789c-4.377 4.09-11.052 6.136-20.036 6.136h-28.906v-50.004h28.906c8.984 0 15.659 2.045 20.036 6.148 4.377 4.09 6.56 10.352 6.56 18.774 0 8.421-2.194 14.855-6.56 18.946Zm99.664-55.626a1.359 1.359 0 0 0-.624-.789 1.934 1.934 0 0 0-.97-.262h-15.787c-.831 0-1.363.354-1.593 1.051l-45.04 120.37c-.242.354-.265.674-.092.96.173.297.554.434 1.155.434h12.415c.819 0 1.362-.354 1.593-1.051l10.463-29.127h57.731l10.371 28.955c.358.823.947 1.223 1.778 1.223h12.588c.589 0 .97-.149 1.155-.434.173-.286.15-.674-.093-1.143L935.7 105.279l-.011.012Zm-33.814 78.605 23.882-66.504h.716l23.813 66.504h-48.411Zm188.635-79.668h-11.89c-.35 0-.68.114-.97.354-.3.24-.43.583-.43 1.052v98.613h-.71l-62.78-98.968c-.35-.697-.89-1.051-1.59-1.051h-15.429c-.358 0-.647.114-.889.354-.243.24-.358.583-.358 1.052v120.027c0 .354.115.674.358.96.231.297.531.434.889.434h12.059c.36 0 .64-.149.89-.434.23-.286.35-.617.35-.96v-98.614h.71l62.78 98.968c.35.697.94 1.051 1.78 1.051h15.25c.47 0 .82-.148 1.06-.434.23-.285.36-.617.36-.96V105.645c0-.468-.11-.811-.36-1.051-.24-.229-.59-.354-1.06-.354l-.02-.012Zm102.32 7.462c-8.87-4.971-19.28-7.462-31.22-7.462h-43.1c-.36 0-.64.114-.89.354-.24.24-.35.583-.35 1.052v120.027c0 .354.11.674.35.96.23.297.53.434.89.434h43.1c12.17 0 22.64-2.422 31.39-7.279 8.74-4.856 15.45-11.872 20.13-21.059 4.67-9.188 7.01-20.032 7.01-32.555 0-12.524-2.33-23.78-7.01-33.081-4.68-9.302-11.44-16.432-20.3-21.403v.012Zm6.65 80.456c-3.49 7.256-8.55 12.752-15.16 16.489-6.62 3.748-14.54 5.611-23.77 5.611h-28.2v-97.208h28.2c9.1 0 16.99 1.965 23.67 5.873 6.68 3.919 11.77 9.564 15.26 16.935 3.49 7.37 5.23 16.146 5.23 26.316 0 10.169-1.74 18.717-5.23 25.973v.011Zm36.24 17.677c-4.86 0-8.71 3.646-8.71 8.616 0 4.971 3.86 8.616 8.71 8.616 4.85 0 8.71-3.645 8.71-8.616 0-4.97-3.86-8.616-8.71-8.616Zm-654.875-25.975c0-7.792 6.48-14.204 14.355-14.204h33.96c.82 0 1.476-.649 1.476-1.461v-7.548c0-.811-.656-1.461-1.476-1.461H595.2c-7.875 0-14.355-6.412-14.355-14.204v-33.683c0-.811-.656-1.461-1.477-1.461h-7.628c-.82 0-1.477.65-1.477 1.461v33.602c0 7.792-6.48 14.204-14.355 14.204h-34.041c-.821 0-1.477.649-1.477 1.461v7.548c0 .812.656 1.461 1.477 1.461h33.959c7.875 0 14.355 6.412 14.355 14.204v33.602c0 .811.657 1.461 1.477 1.461h7.628c.821 0 1.477-.65 1.477-1.461v-33.602l.082.081Z" class="6" style="opacity: 0; visibility: hidden;"></path><path fill="currentColor" d="M266.218 173.395c1.415 0 2.3.095 3.155-.015 4.4-.565 7.4 1.335 9.355 5.16.595 1.165 2.1 1.025 2.865 2.25 2.415 3.895 3.165 8.065 2.79 12.52-.2 2.375-.675 4.705-1.35 6.99-2.295 7.75-11.485 11.09-18.315 6.81-1.625-1.02-3.375-2.11-5.475-2.09-.31 0-.685-.035-.915-.205-5.455-3.955-11.315-7.595-12.025-15.275-.775-8.375 3.415-13.18 11.94-15.35 2.73-.695 5.665-.58 7.98-.79l-.005-.005Zm364.24-69.755c6.03-.805 9.43 3.26 12.575 7.225 1.44 1.815 1.085 4.61.475 6.935-.65 2.48-1.14 4.92-.59 7.47.035.155.08.33.04.47-1.38 4.8-2.765 9.6-6.5 13.255-2.885 2.825-6.455 3.965-10.39 4.04-5.58.11-9.21-3.265-11.965-7.47-2.885-4.405-3.72-9.735-5.575-14.62-.43-1.135.395-2.145.865-3.125 1.76-3.645 3.105-7.58 6.605-10.09 3.815-2.74 8.21-3.66 12.79-3.985.555-.04 1.11-.075 1.665-.11l.005.005Zm90.875 122.105c-.245 2.58-.65 4.795-.615 7 .07 4.33-2.155 6.855-5.98 8.285-1.115.415-1.065 1.76-2.195 2.31-2.72 1.33-5.525 1.965-8.515 1.85-4.115-.16-8.01-1.28-11.64-3.155-6.08-3.14-7.715-12.245-3.39-17.5 1.17-1.42 2.455-2.915 2.71-4.91.04-.31.165-.615.3-.9 2.7-5.855 11.8-10.57 18.155-9.615 6.88 1.03 10.12 6.005 11.14 12.97.195 1.32.03 2.69.03 3.665Zm440.347-86.595c.23 3.035-.99 6.165-2.96 9.045-1.92 2.81-3.89 5.585-5.83 8.385a3.339 3.339 0 0 1-1.63 1.285c-2.83 1.105-5.87 1.015-8.78 1.345-3.93.44-7.38-1.45-10.44-3.895-2.3-1.845-4.29-4-5.97-6.42-4-5.79-1.13-14.55 5.42-17.055 1.8-.69 3.73-1.39 4.96-3.095.14-.185.34-.33.54-.465 5.51-3.76 15.54-3.175 20.6 1.205 3.14 2.715 4.17 5.005 4.09 9.665ZM239.278 50.595c-.425 4.105-3 7.59-6.89 10.09-3.68 2.37-7.915 3.645-11.9 5.41-1.44.635-2.615-.255-3.87-.645-9.24-2.855-14.7-10.83-14.105-20.555.395-6.48 7.105-11.605 13.375-10.345 1.75.35 3.595.69 5.4.04.22-.08.48-.185.695-.145 4.61.915 9.17 2.06 12.78 5.285 2.99 2.67 4.265 6.215 4.515 10.865ZM1235.15 253.24c-2.98 2.86-7.19 3.855-11.78 3.255-4.34-.57-8.39-2.325-12.58-3.555-1.51-.445-1.83-1.885-2.53-2.99-5.21-8.145-4.24-17.76 2.5-24.805 4.49-4.69 12.92-4.27 16.9.74 1.11 1.4 2.3 2.845 4.09 3.52.22.08.49.165.62.335 2.93 3.675 5.68 7.495 6.35 12.285.56 3.97-.76 7.5-3.57 11.21v.005Z" class="5" style="opacity: 0; visibility: hidden;"></path><path fill="currentColor" d="M1188.19 124.4c.1 3.17-.85 6.03-2.56 8.63-1.98 3.03-4.26 6.08-7.13 8.04-3.24 2.21-7.37 2.915-11.49 1.96-3.49-.815-7-1.61-10.59-.465-.86.275-1.77.35-2.61.06-6.32-2.19-13.09-3.365-18.38-7.92-6.58-5.675-9.63-13-7.98-21.425 1.22-6.19 5.43-11.08 10.89-14.375 6.46-3.905 13.68-6.24 20.64-9.105.97-.4 1.86-.22 2.8.095 1.89.64 3.81 1.22 5.7 1.88.51.175 1.1.43 1.4.84 1.08 1.49 2.09 2.86 4.3 1.895.29-.13.93.495 1.4.8 8.43 5.515 11.52 13.995 12.97 23.37.29 1.895.44 3.815.65 5.72h-.01Zm-461.606 89.53c3.775-.17 7.13.97 10.005 3.39 2.205 1.855 4.785 3.515 6.35 5.835 2.315 3.425 2.945 7.48 1.975 11.67-.77 3.335-1.505 6.7-.475 10.13.235.785.37 1.605.095 2.37-2.23 6.225-3.415 12.935-7.98 18.105-5.375 6.085-12.325 8.965-20.235 7.625-6.585-1.115-11.51-5.575-14.87-11.285-3.585-6.09-5.74-12.86-8.375-19.395-.42-1.04-.405-1.995-.035-3.025.645-1.805 1.245-3.63 1.825-5.46.225-.72.58-1.325 1.195-1.75 1.245-.86 2.31-1.735 1.64-3.535-.28-.755.46-1.3.855-1.89 4.28-6.375 10.56-9.62 17.8-11.36 3.36-.81 6.77-1.295 10.23-1.42v-.005Zm-65.95-70.825c-.08 4.09-.6 8.13-1.57 12.11-.875 3.585-2.905 6.4-5.945 8.445-2.39 1.61-4.695 3.63-7.355 4.49-3.935 1.27-8.02.785-11.775-1.33-2.98-1.675-5.98-3.34-9.565-3.31-.895.005-1.8-.14-2.52-.67-5.13-3.775-11-6.675-14.665-12.2-4.725-7.125-5.64-14.925-1.69-22.325 3.255-6.1 9.23-9.665 16.195-10.99 6.545-1.24 13.205-1.565 19.815-2.26 1.14-.12 1.98.425 2.84 1.06 1.35.995 2.72 1.97 4.13 2.875.7.45 1.335.9 1.59 1.71.475 1.525 1.01 2.895 3.075 2.64.74-.09.95.76 1.35 1.23 4.54 5.345 6.195 11.64 6.095 18.52l-.005.005ZM218.684 36.19c.02 3.14-.64 5.7-2.045 8.29-1.285 2.365-2.51 5-2.245 7.955.07.755-.08 1.69-.485 2.305-3.29 4.98-5.89 10.5-10.84 14.225-6.275 4.72-13.34 5.805-20.45 3-5.75-2.27-9.3-7.35-11.165-13.145-2.165-6.725-2.415-13.85-3.44-20.81-.125-.84.155-1.63.705-2.23 2.05-2.23 2.535-5.85 6.035-6.8.195-.055.43-.305.48-.51 1.41-5.32 6.15-6.625 10.4-8.025 6.87-2.26 13.935-1.645 20.885.04 2.73.66 4.98 2.215 6.635 4.495 1.695 2.33 3.26 4.75 4.935 7.095 1 1.395.475 2.94.59 4.125l.005-.01ZM1275.56 199.73c.51 8.215-4.08 14.095-9.01 19.82-1.05 1.215-2.28 2.32-3.09 3.675-2.47 4.095-6.4 5.165-10.74 5.54-.77.065-1.41-.145-2.07-.485-.56-.295-1.24-.755-1.81-.38-3.21 2.11-6.18.33-9.05-.69-3.92-1.39-7.02-4.115-9.81-7.165-2.29-2.495-4.22-5.25-5.93-8.155-2.6-4.425-1.49-8.92-.41-13.52 1.3-5.525 5.01-8.105 10.12-9.57 2.64-.755 5.42-1.44 7.44-3.625.41-.45 1.03-.88 1.62-.98 6.29-1.1 12.6-2.935 19-1.01 6.28 1.89 10.62 6.1 13.19 12.105.6 1.405.82 2.93.55 4.445v-.005ZM259.559 158.205c.72 0 1.445.015 2.165 0 9.085-.225 16.085 3.415 20.335 11.505 1.615 3.075 1.2 6.53-.525 9.625-1.445 2.59-2.84 5.16-2.595 8.27.03.38-.02.855-.22 1.16-3.32 4.985-6.29 10.29-11.7 13.445-4.245 2.475-8.875 3.075-13.7 2.665-8.12-.69-12.905-5.855-15.815-12.69-2.385-5.6-2.615-11.85-3.65-17.84-.165-.96.145-1.79.79-2.415 1.84-1.785 2.44-4.695 5.415-5.51 1.265-.345.73-2.27 2.035-3.235 5.245-3.885 11.155-5.05 17.465-4.975v-.005Z" class="4" style="opacity: 0; visibility: hidden;"></path><path fill="currentColor" d="M1284.94 127.79c-.43 8.42-3.67 15.84-8.37 22.68-1.68 2.445-4.21 3.96-7.04 4.79-3.08.9-6.22 2.23-9.32 2.19-4-.05-7.74-1.815-10.6-4.85-2.51-2.67-4.93-5.405-8.6-6.59-.73-.235-1.54-.7-1.98-1.295-3.93-5.31-8.71-10.1-10.54-16.735-2.24-8.115-.76-15.67 4.88-21.725 4.67-5.02 11.29-6.69 18.07-6.285 7.46.445 14.64 2.67 21.91 4.285 1.12.25 1.78.995 2.41 1.845 1.15 1.54 2.29 3.085 3.48 4.585.54.67.77 1.385.75 2.215-.03 1.445.13 2.75 1.93 3.065.52.09.74.58.91 1.04 1.28 3.48 2.27 7.015 2.11 10.78v.005ZM694.22 228.185c.36 3.52.44 6.985-.545 10.47-2.255 8-7.59 12.955-15.13 15.84-1.82.695-3.74.735-5.69.51-7.52-.875-13.66-4.28-18.7-9.86-3.22-3.565-6.54-7.04-9.85-10.525-.77-.81-1.155-1.7-1.13-2.8.04-1.92.05-3.84-.29-5.745-.13-.735-.02-1.455.425-2.065.965-1.325 1.515-2.605.215-4.095-.45-.515.025-1.225.165-1.84 1.915-8.5 7.545-14.075 14.64-18.485 1.02-.635 2.1-1.175 3.12-1.805 5.685-3.535 11.38-3.555 17.69-1.26 5.05 1.84 8.375 4.86 10.125 9.65 1 2.74.865 5.82 1.965 8.595.175.44.14.975.36 1.385 1.01 1.875 2.7 3.415 2.645 5.795-.05 2.08-.01 4.16-.01 6.24l-.005-.005ZM774.07 115.5c-.495 5.415-1.005 10.825-1.465 16.245-.115 1.355-.545 2.465-1.65 3.31-1.405 1.075-2.69 2.28-3.775 3.675-.475.61-1.085.98-1.81 1.07-1.595.2-3.01.495-3.195 2.53-.065.71-.945.785-1.475 1.09-6.425 3.675-13.28 3.805-20.28 2.29-3.525-.76-6.925-1.985-10.225-3.435-3.44-1.505-6.02-3.945-7.51-7.405-1.14-2.64-2.605-5.27-3.07-8.045-.705-4.225.71-8.14 3.465-11.51 2.16-2.64 4.4-5.235 5.055-8.76.14-.755.47-1.62 1.005-2.135 4.47-4.31 8.39-9.285 14.23-11.975 7.795-3.595 15.545-3.075 22.365 1.775 5.36 3.815 7.515 9.985 8.24 16.48.175 1.58.025 3.195.025 4.79.025 0 .05.005.075.01h-.005Zm420.57 98.26c-4.24-.015-6.94-1.55-9.74-3-5.83-3.015-8.04-7.65-7.6-14.1.17-2.505.27-5.295-1.27-7.685-.32-.5-.47-1.25-.39-1.845.84-6.24.82-12.845 4.73-18.14 8.23-11.15 20.78-12.305 30.82-1.165 4.19 4.65 6.97 10.35 10.34 15.61.36.56.67 1.21.46 1.81-.93 2.805.16 6.205-2.48 8.515-.22.19-.43.61-.36.855 1.03 4.37-1.97 7.04-4.45 9.63-5.69 5.92-13.12 8.345-20.06 9.515Zm-984.38-68.22c-.76 5.66-3.76 10.975-9.195 14.68-4.78 3.26-10.29 5.18-15.51 7.625-.69.325-1.445.51-2.085.13-2.34-1.4-5.635-1.06-7.165-3.93-.1-.185-.375-.395-.575-.4-4.76-.11-6.775-3.875-8.825-7.11-3.995-6.315-5.315-13.495-5.41-20.885-.055-4.09 2.34-7.16 4.6-10.325 3.33-4.665 7.535-5.795 12.96-4.335 2.295.615 4.855 1.12 7.31.085.42-.175.99-.265 1.405-.125 5.93 1.94 12.085 3.525 16.525 8.325 3.98 4.305 5.63 9.595 5.97 16.27l-.005-.005Zm51.555-107.045c1.445.065 2.92.355 4.32.15 4.245-.625 7.11 1.585 9.795 4.355.475.49.715 1.025.9 1.65.155.525.27 1.28.65 1.49 4.755 2.675 5.115 7.42 5.455 11.97.395 5.36-1.01 10.495-3.15 15.39-1.805 4.125-5.79 5.48-9.47 7.295-3.695 1.82-7.12.81-10.28-.925-1.775-.975-3.45-2.27-5.245-3.31-.345-.2-.66-.505-1.035-.595-6.955-1.725-10.98-6.98-14.275-12.615-3.32-5.685-2.865-11.925.655-17.375 2.85-4.405 7.61-6.585 12.795-7.245 2.915-.37 5.92-.065 8.885-.065v-.17Z" class="3" style="opacity: 0; visibility: hidden;"></path><path fill="currentColor" d="M1240.13 244.75c.01 3.79-1.42 7.78-4.32 11.225-2.48 2.94-4.82 6.015-7.51 8.75-1.97 2.01-4.81 1.64-7.4 1.575-.54-.015-1.2-.58-1.57-.405-3.56 1.75-6.56-.065-9.41-1.66-4.83-2.705-8.23-6.925-10.57-11.84-3.09-6.505 1.28-15.295 8.1-17.15 2.02-.55 4.21-1.08 5.73-2.8.21-.235.49-.415.77-.57 5.98-3.315 16.83-1.99 21.75 2.73 2.67 2.555 4.75 5.455 4.43 10.14v.005ZM758.105 133.69c.075 1.44.245 2.84-.81 4.105-.87 1.045.55 2.04.14 3.37-1.43 4.62-4.32 7.98-8.175 10.645-2.245 1.555-4.68 2.785-7.225 3.785-2.25.88-4.54.93-6.83.18-3.845-1.25-7.53-2.63-9.18-6.915-.685-1.78-.27-3.66-1.01-5.39-1.77-4.135-2.595-8.395-2.21-12.955.35-4.125 1.33-7.885 4.28-10.915 6.145-6.315 12.97-6.48 20.42-.79 3.955 3.02 6.77 7.245 10.055 10.96 1.06 1.2.375 2.615.55 3.92h-.005Zm-488.55 82.815c-3.29.11-6.18-.69-8.785-2.455-1.99-1.35-3.885-2.86-5.975-4.02-3.6-1.995-4.33-4.995-3.425-8.655.29-1.18-.845-1.88-.595-3.165.555-2.81 1.49-5.39 3.14-7.705 2.405-3.365 5.45-6.085 8.905-8.315 4.205-2.715 11.26-2.005 14.415 1.32.84.885 1.38 1.885 1.695 3.105.5 1.92 1.185 3.805 2.755 5.195.29.255.51.62.675.975 3.01 6.61 1.435 15.1-3.67 20.035-2.6 2.515-5.595 3.98-9.14 3.68l.005.005Zm1003.975-64.38c.24 7.14-6.51 12.675-12.65 11.405-1.67-.345-3.41-.525-5.2-.19-8.16 1.525-18.09-7.7-16.89-15.85.57-3.89 3.04-6.865 6.35-8.915 3.61-2.24 7.68-3.555 11.62-5.11.42-.165.98-.27 1.38-.14 6.96 2.225 12.97 5.485 14.51 13.51.39 2.04.68 4.095.88 5.29ZM338.05 41.98c5.58.25 10.01 3.675 10.765 8.335.22 1.355.09 2.625-.44 3.96-.635 1.59-1.01 3.275-.975 5.07.135 7.21-8.21 14.445-15.31 13.23-4.18-.715-6.795-3.635-8.275-7.285-1.365-3.37-2.03-7.025-3.005-10.555-.16-.575.01-1.085.21-1.62 2.805-7.48 8.94-11.495 17.03-11.13v-.005Zm363.445 209.125c-3.68.485-7.046-.245-9.841-2.765-4.985-4.5-5.399-9.165-1.384-15.16 2.04-3.045 5.14-5.24 7.81-7.765 1.025-.97 2.27-.58 3.43-.675 8.015-.65 15.87 5.095 17.425 12.99.75 3.825-1.636 10.83-7.586 11.09a8.616 8.616 0 0 0-4.484 1.515c-1.636 1.115-3.576.55-5.375.765l.005.005Z" class="2" style="opacity: 0; visibility: hidden;"></path><path fill="currentColor" d="M694.292 218.134c.35-6.38 2.81-11.21 6.695-15.18 4.195-4.28 12.25-3.36 15.845 1.365 1.045 1.37 2.26 2.625 3.84 3.535 7.265 4.2 8.66 18.12 2.215 23.435-3.325 2.74-7.465 3.185-11.635 2.345-3.855-.775-7.495-2.29-11.205-3.565-.435-.15-.99-.355-1.205-.705-2.22-3.685-4.11-7.51-4.555-11.23h.005Zm-499.795-107.5c-.155-6.405 5.42-11.15 11.05-10.045 1.165.23 2.425.43 3.575.235 4.205-.715 7.775 1.03 10.985 3.16 6.94 4.615 6.675 13.94-.345 18.365-3.195 2.015-6.81 3.185-10.26 4.68-.545.235-1.09.195-1.645.035-7.02-2.005-12-5.935-12.955-13.665-.135-1.11-.32-2.21-.4-2.76l-.005-.005Zm1056.933 82.48c.29 4.7-3.07 7.745-5.17 11.34-1.39 2.375-3.15 4.13-6.24 4.595-5.95.895-10.53-.9-14.69-5.255-3.16-3.32-4.43-6.6-3.15-11.02.74-2.545 2.37-4.055 4.6-5.07 1.53-.695 3-1.365 4.28-2.54 5.29-4.9 16.53-2.715 19.7 3.745.67 1.365.47 2.815.67 4.215v-.01Zm-375.718-94.62c-.315-2.715.17-5.305 1.5-7.665 3.44-6.1 10.975-7.28 16.475-2.585 2.63 2.245 4.77 4.97 7.05 7.55.3.34.54.81.625 1.25 1.475 8.11-5.085 17.15-13.28 18.33-4.875.705-9.52-2.8-10.35-7.69-.25-1.47-.525-2.975-1.415-4.28-1.03-1.51-.51-3.265-.605-4.915v.005Zm-502.625-11.84c-3.33.265-5.245-1.205-6.705-3.34-.99-1.45-1.975-2.815-3.4-3.94-5.385-4.26-5.48-14.58-.155-18.89 2.68-2.165 5.94-2.335 9.145-1.585 3.525.825 6.68 2.665 9.965 4.13.4.18.8.58.995.975 2.83 5.695 3.8 11.3-.33 16.95-2.55 3.485-5.29 6.27-9.52 5.7h.005Z" class="1" style="opacity: 0; visibility: hidden;"></path></g></svg></div><div class="code-block w-embed w-script"><script>
|
||
{
|
||
addEventListener("GSAPReady", (event) => {
|
||
const wrapper = document.querySelector("[data-animate='footerlogo']");
|
||
if (!wrapper) return;
|
||
|
||
const paths = [...wrapper.querySelectorAll("path")].reverse();
|
||
const lastPath = paths[paths.length - 1];
|
||
|
||
// Configuration for the footer logo animation
|
||
const FOOTER_ANIMATION_CONFIG = {
|
||
STAGGER: 0.05,
|
||
VISIBILITY_DURATION: 0.1,
|
||
};
|
||
|
||
// Set initial state
|
||
gsap.set(paths, {
|
||
autoAlpha: 0,
|
||
});
|
||
|
||
const animateFooterLogo = () => {
|
||
// Reset the last path visibility before starting the animation
|
||
gsap.set(lastPath, { autoAlpha: 0 });
|
||
|
||
const tl = gsap.timeline();
|
||
|
||
paths.forEach((path, index) => {
|
||
const baseDelay = index * FOOTER_ANIMATION_CONFIG.STAGGER;
|
||
const isLastPath = index === paths.length - 1;
|
||
|
||
// Flash animation
|
||
tl.to(
|
||
path,
|
||
{
|
||
autoAlpha: 1,
|
||
duration: 0.1,
|
||
ease: "none",
|
||
},
|
||
baseDelay
|
||
);
|
||
|
||
// Only fade out if it's not the last path
|
||
if (!isLastPath) {
|
||
tl.to(
|
||
path,
|
||
{
|
||
autoAlpha: 0,
|
||
duration: 0.1,
|
||
ease: "none",
|
||
},
|
||
baseDelay + FOOTER_ANIMATION_CONFIG.VISIBILITY_DURATION
|
||
);
|
||
}
|
||
});
|
||
|
||
return tl;
|
||
};
|
||
|
||
// Create the scroll trigger
|
||
ScrollTrigger.create({
|
||
trigger: wrapper,
|
||
start: "top bottom",
|
||
end: "bottom top",
|
||
onEnter: () => animateFooterLogo(),
|
||
onEnterBack: () => animateFooterLogo(),
|
||
});
|
||
|
||
// console.log(event.detail);
|
||
});
|
||
}
|
||
|
||
</script></div><div class="code-block w-embed w-script"><script>
|
||
{
|
||
/** -- Copy Button */
|
||
const copybtn = () => {
|
||
const copybtn = [...document.querySelectorAll("[data-module='copybtn']")];
|
||
|
||
// Create a map to store data for each button
|
||
const buttonDataMap = new Map();
|
||
|
||
// Single event listener that checks which button's data to use
|
||
document.addEventListener("copy", (event) => {
|
||
const activeButtonData = buttonDataMap.get("active");
|
||
if (activeButtonData) {
|
||
event.preventDefault();
|
||
event.clipboardData.setData(
|
||
"application/json",
|
||
JSON.stringify(activeButtonData)
|
||
);
|
||
event.clipboardData.setData(
|
||
"text/plain",
|
||
JSON.stringify(activeButtonData)
|
||
);
|
||
buttonDataMap.delete("active"); // Clear after copying
|
||
}
|
||
});
|
||
|
||
copybtn.forEach((btn) => {
|
||
const url = btn.getAttribute("data-copy");
|
||
const text = btn.children[0].children[0];
|
||
const icon = btn.querySelector("svg");
|
||
let isAnimating = false;
|
||
|
||
btn.onmouseenter = async () => {
|
||
if (isAnimating) return;
|
||
isAnimating = true;
|
||
|
||
await gsap.to(icon, {
|
||
rotate: "+=360",
|
||
duration: 0.3,
|
||
ease: "expo.out",
|
||
});
|
||
|
||
isAnimating = false;
|
||
};
|
||
|
||
btn.onclick = async (evt) => {
|
||
try {
|
||
const res = await fetch(url);
|
||
let data = await res.text();
|
||
|
||
// Try to parse as JSON in case it's JSON data
|
||
try {
|
||
const jsonData = JSON.parse(data);
|
||
buttonDataMap.set("active", jsonData);
|
||
} catch {
|
||
buttonDataMap.set("active", data);
|
||
}
|
||
|
||
// Trigger the copy command
|
||
document.execCommand("copy");
|
||
|
||
text.textContent = "Copied!";
|
||
console.log("copied successfully");
|
||
|
||
setTimeout(() => {
|
||
text.textContent = "Copy this";
|
||
}, 1000);
|
||
} catch (error) {
|
||
console.error("Failed to copy:", error);
|
||
text.textContent = "Failed to copy";
|
||
|
||
setTimeout(() => {
|
||
text.textContent = "Copy this";
|
||
}, 1000);
|
||
}
|
||
};
|
||
});
|
||
};
|
||
|
||
/** -- Split Text Button */
|
||
const split = (text, type = "chars") => {
|
||
text.setAttribute("aria-label", text.textContent);
|
||
const splits = new SplitText(text, { type });
|
||
splits[type].forEach((char) => char.setAttribute("aria-hidden", "true"));
|
||
return splits[type];
|
||
};
|
||
|
||
const buttons = () => {
|
||
const buttons = [...document.querySelectorAll("[data-module='btn']")];
|
||
|
||
buttons.forEach((btn) => {
|
||
const overflow = btn.children[0];
|
||
const text = overflow.children[0];
|
||
|
||
overflow.appendChild(text.cloneNode(true));
|
||
const splitText1 = split(overflow.children[0], "chars");
|
||
const splitText2 = split(overflow.children[1], "chars");
|
||
|
||
const animation = {
|
||
yPercent: "-=100",
|
||
duration: 0.8,
|
||
ease: "expo.out",
|
||
stagger: 0.02,
|
||
};
|
||
|
||
btn.onmouseenter = () => {
|
||
gsap.to(splitText1, { ...animation, yPercent: -100 });
|
||
gsap.to(splitText2, { ...animation, yPercent: -100 });
|
||
};
|
||
|
||
btn.onmouseleave = () => {
|
||
gsap.to(splitText1, { ...animation, yPercent: 0 });
|
||
gsap.to(splitText2, { ...animation, yPercent: 0 });
|
||
};
|
||
});
|
||
};
|
||
|
||
/** -- Controller */
|
||
addEventListener("GSAPReady", (event) => {
|
||
copybtn();
|
||
|
||
// desktop only animations
|
||
if (window.matchMedia("(min-width: 1024px)").matches) {
|
||
buttons();
|
||
}
|
||
});
|
||
}
|
||
|
||
</script></div></footer></div></main></div>
|
||
@endsection
|
||
|
||
@push('scripts')
|
||
<!-- GSAP Core -->
|
||
<script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/gsap.min.js"></script>
|
||
<!-- GSAP ScrollTrigger Plugin -->
|
||
<script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/ScrollTrigger.min.js"></script>
|
||
<!-- GSAP ScrollToPlugin -->
|
||
<script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/ScrollToPlugin.min.js"></script>
|
||
<!-- SplitType for text splitting -->
|
||
<script src="https://cdn.jsdelivr.net/npm/split-type@0.3.4/dist/index.umd.min.js"></script>
|
||
<script src="https://cdn.prod.website-files.com/gsap/3.13.0/SplitText.min.js" type="text/javascript"></script>
|
||
<script src="https://d3e54v103j8qbb.cloudfront.net/js/jquery-3.5.1.min.dc5e7f18c8.js?site=67fea42b19018db93e3fe132" type="text/javascript" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script><script src="https://cdn.prod.website-files.com/67fea42b19018db93e3fe132/js/webflow.751e0867.7204fca6be7878de.js" type="text/javascript"></script><script src="https://cdn.prod.website-files.com/gsap/3.13.0/gsap.min.js" type="text/javascript"></script><script src="https://cdn.prod.website-files.com/gsap/3.13.0/SplitText.min.js" type="text/javascript"></script><script src="https://cdn.prod.website-files.com/gsap/3.13.0/ScrollTrigger.min.js" type="text/javascript"></script><script src="https://cdn.prod.website-files.com/gsap/3.13.0/ScrollSmoother.min.js" type="text/javascript"></script><script src="https://cdn.prod.website-files.com/gsap/3.13.0/Flip.min.js" type="text/javascript"></script><script src="https://cdn.prod.website-files.com/gsap/3.13.0/ScrollToPlugin.min.js" type="text/javascript"></script><script src="https://cdn.prod.website-files.com/gsap/3.13.0/InertiaPlugin.min.js" type="text/javascript"></script><script src="https://cdn.prod.website-files.com/gsap/3.13.0/ScrambleTextPlugin.min.js" type="text/javascript"></script><script src="https://cdn.prod.website-files.com/gsap/3.13.0/Observer.min.js" type="text/javascript"></script><script src="https://cdn.prod.website-files.com/gsap/3.13.0/Draggable.min.js" type="text/javascript"></script><script src="https://cdn.prod.website-files.com/gsap/3.13.0/MotionPathPlugin.min.js" type="text/javascript"></script><script src="https://cdn.prod.website-files.com/gsap/3.13.0/MotionPathHelper.min.js" type="text/javascript"></script><script type="text/javascript">gsap.registerPlugin(SplitText,ScrollTrigger,ScrollSmoother,Flip,ScrollToPlugin,InertiaPlugin,ScrambleTextPlugin,Observer,Draggable,MotionPathPlugin,MotionPathHelper);</script><script src="https://unpkg.com/lenis@1.3.1/dist/lenis.min.js"></script>
|
||
<script>
|
||
{
|
||
let lenis;
|
||
|
||
const initScroll = () => {
|
||
lenis = new Lenis({});
|
||
lenis.on("scroll", ScrollTrigger.update);
|
||
gsap.ticker.add((time) => lenis.raf(time * 1000));
|
||
gsap.ticker.lagSmoothing(0);
|
||
};
|
||
|
||
function initGsapGlobal() {
|
||
/** Do everything that needs to happen
|
||
* before triggering all
|
||
* the gsap animations */
|
||
|
||
initScroll();
|
||
|
||
// match reduced motion media
|
||
// const media = gsap.matchMedia();
|
||
|
||
/** Send a custom
|
||
* event to all your
|
||
* gsap animations
|
||
* to start them */
|
||
|
||
const sendGsapEvent = () => {
|
||
window.dispatchEvent(
|
||
new CustomEvent("GSAPReady", {
|
||
detail: {
|
||
lenis,
|
||
},
|
||
})
|
||
);
|
||
};
|
||
|
||
// Check if fonts are already loaded
|
||
if (document.fonts.status === "loaded") {
|
||
sendGsapEvent();
|
||
} else {
|
||
document.fonts.ready.then(() => {
|
||
sendGsapEvent();
|
||
});
|
||
}
|
||
|
||
/** We need specific handling because the
|
||
* grid/list changes the scroll height of the whole container
|
||
*/
|
||
|
||
let resizeTimeout;
|
||
const onResize = () => {
|
||
clearTimeout(resizeTimeout);
|
||
resizeTimeout = setTimeout(() => {
|
||
ScrollTrigger.refresh();
|
||
}, 50);
|
||
};
|
||
|
||
window.addEventListener("resize", () => onResize());
|
||
const resizeObserver = new ResizeObserver((entries) => onResize());
|
||
resizeObserver.observe(document.body);
|
||
|
||
queueMicrotask(() => {
|
||
gsap.to("[data-start='hidden']", {
|
||
autoAlpha: 1,
|
||
duration: 0.1,
|
||
delay: 0.2,
|
||
});
|
||
});
|
||
}
|
||
|
||
// this only for dev
|
||
const documentReady =
|
||
document.readyState === "complete" || document.readyState === "interactive";
|
||
|
||
if (documentReady) {
|
||
initGsapGlobal();
|
||
} else {
|
||
addEventListener("DOMContentLoaded", (event) => initGsapGlobal());
|
||
}
|
||
}
|
||
</script>
|
||
@endpush
|