diff --git a/resources/views/templates/neler-yapariz.blade.php b/resources/views/templates/neler-yapariz.blade.php index 1f1a13b..ee867a2 100644 --- a/resources/views/templates/neler-yapariz.blade.php +++ b/resources/views/templates/neler-yapariz.blade.php @@ -3,5712 +3,82 @@ @section('title', t('Neler Yapıyoruz?') ?: 'Neler Yapıyoruz?') @push('styles') - +@include('templates.neler-yapariz.external-links') + + @endpush - - - - - -
- - @section('content') - -

SCROLL INTERACTIONS
SCROLL INTERACTIONS
SCROLL INTERACTIONS
TEXT EFFECTS
TEXT EFFECTS
SLIDERS
SLIDERS
SLIDERS
SLIDERS
Inertia Inertia
Inertia Inertia
MARQUEES
MARQUEES
MARQUEES
MARQUEES
  • 01

    Hover States

  • 02

    ResizinG Elements

  • 03

    Timeline Control

  • 04

    Shuffling positions

  • 05

    Sequenced Motion

  • 06

    FLEXIBLE LAYOUTS

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.

Copy this on Desktop

Start animations when elements enter the viewport, scrub through timelines, pin elements in place, or snap to key points as users scroll.

Copy this on Desktop
  • Precise

    ACTIONS

    GSAP turns clicks into vivid stories with precise motion, making every interaction feel intentional and alive.
  • Focus

    ATTENTION

    GSAP sharpens focus with smooth animations, drawing attention to your message for a lasting, memorable impact.
  • Expressive

    Motion

    GSAP infuses elements with expressive motion, transforming static pages into emotional, engaging journeys.
  • Powerful

    IMPACT

    GSAP delivers animations with powerful impact, ensuring your story resonates clearly and leaves a mark.
  • Seamless

    FLOW

    GSAP crafts seamless flow in motion, syncing with users to create natural, captivating interactions.

Ideal for smooth marquees, auto playing sliders, and loops that just keep rolling.

Copy this on Desktop

Continue movement from a given speed, slow naturally to a stop. Perfect for adding physicality and flow to your interface.

Copy this on Desktop
  • Character Split Reveal
  • Word Split Reveal
  • niiyhgir
    Scramble Text Reveal
  • Alpha Reveal
  • SIide Char Reveal
  • Up and down Reveal

Animate each one independently. It’s all motion, no compromise: screen readers and search engines still see the original text.

Copy this on Desktop
SCROLLTRIGGER
MARQUEE
MARQUEE
SCROLLTRIGGER

Loop endlessly. Stack images, text, or both. Marquees give rhythm to your page without needing a single click.

Copy this on Desktop
X
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.

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.

Copy what you need, tweak what you like and get motion into your next build: faster, smoother and better.
©2025
Site by OFF+BRAND.
+@include('templates.neler-yapariz.navigation') + +
+
+ @include('templates.neler-yapariz.sections.hero') + +
+ @include('templates.neler-yapariz.sections.flip') + @include('templates.neler-yapariz.sections.scrolltrigger') + @include('templates.neler-yapariz.sections.slider') + @include('templates.neler-yapariz.sections.inertia') + @include('templates.neler-yapariz.sections.text') + @include('templates.neler-yapariz.sections.marquee') +
+ + @include('templates.neler-yapariz.sections.footer') +
+
@endsection @push('scripts') - - - - - - - - - - +@include('templates.neler-yapariz.external-scripts') + +{{-- Navigation Scripts --}} + - const initScroll = () => { - lenis = new Lenis({}); - lenis.on("scroll", ScrollTrigger.update); - gsap.ticker.add((time) => lenis.raf(time * 1000)); - gsap.ticker.lagSmoothing(0); - }; +{{-- Hero Script --}} + - function initGsapGlobal() { - /** Do everything that needs to happen - * before triggering all - * the gsap animations */ +{{-- Section Scripts --}} + + + + + + - initScroll(); +{{-- Footer Scripts --}} + + - // 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()); - } -} +{{-- Global Scripts --}} + @endpush diff --git a/resources/views/templates/neler-yapariz/css/additional.css b/resources/views/templates/neler-yapariz/css/additional.css new file mode 100644 index 0000000..5744b93 --- /dev/null +++ b/resources/views/templates/neler-yapariz/css/additional.css @@ -0,0 +1,132 @@ + +/** 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; + } +} + + diff --git a/resources/views/templates/neler-yapariz/css/main.css b/resources/views/templates/neler-yapariz/css/main.css new file mode 100644 index 0000000..998b6dd --- /dev/null +++ b/resources/views/templates/neler-yapariz/css/main.css @@ -0,0 +1,4047 @@ + +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 + } +} + + diff --git a/resources/views/templates/neler-yapariz/external-links.blade.php b/resources/views/templates/neler-yapariz/external-links.blade.php new file mode 100644 index 0000000..3e622ce --- /dev/null +++ b/resources/views/templates/neler-yapariz/external-links.blade.php @@ -0,0 +1,6 @@ + + + + diff --git a/resources/views/templates/neler-yapariz/external-scripts.blade.php b/resources/views/templates/neler-yapariz/external-scripts.blade.php new file mode 100644 index 0000000..4c8f58f --- /dev/null +++ b/resources/views/templates/neler-yapariz/external-scripts.blade.php @@ -0,0 +1,10 @@ + + + + + + + + + + \ No newline at end of file diff --git a/resources/views/templates/neler-yapariz/js/copybtn-buttons.js b/resources/views/templates/neler-yapariz/js/copybtn-buttons.js new file mode 100644 index 0000000..931be13 --- /dev/null +++ b/resources/views/templates/neler-yapariz/js/copybtn-buttons.js @@ -0,0 +1,126 @@ +{ + /** -- 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(); + } + }); +} \ No newline at end of file diff --git a/resources/views/templates/neler-yapariz/js/flip.js b/resources/views/templates/neler-yapariz/js/flip.js new file mode 100644 index 0000000..dfb29ed --- /dev/null +++ b/resources/views/templates/neler-yapariz/js/flip.js @@ -0,0 +1,30 @@ +// 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(); + }); + }); +}); \ No newline at end of file diff --git a/resources/views/templates/neler-yapariz/js/footer.js b/resources/views/templates/neler-yapariz/js/footer.js new file mode 100644 index 0000000..e8fac6a --- /dev/null +++ b/resources/views/templates/neler-yapariz/js/footer.js @@ -0,0 +1,120 @@ +// 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(); + } + }); +} + +
\ No newline at end of file diff --git a/resources/views/templates/neler-yapariz/js/footerlogo.js b/resources/views/templates/neler-yapariz/js/footerlogo.js new file mode 100644 index 0000000..3b79bbc --- /dev/null +++ b/resources/views/templates/neler-yapariz/js/footerlogo.js @@ -0,0 +1,69 @@ +{ + 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); + }); +} \ No newline at end of file diff --git a/resources/views/templates/neler-yapariz/js/global.js b/resources/views/templates/neler-yapariz/js/global.js new file mode 100644 index 0000000..1d4f01c --- /dev/null +++ b/resources/views/templates/neler-yapariz/js/global.js @@ -0,0 +1,79 @@ +{ + 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()); + } +} \ No newline at end of file diff --git a/resources/views/templates/neler-yapariz/js/hero.js b/resources/views/templates/neler-yapariz/js/hero.js new file mode 100644 index 0000000..0ddcfaf --- /dev/null +++ b/resources/views/templates/neler-yapariz/js/hero.js @@ -0,0 +1,263 @@ +{ + 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); + }; + }); +} \ No newline at end of file diff --git a/resources/views/templates/neler-yapariz/js/inertia.js b/resources/views/templates/neler-yapariz/js/inertia.js new file mode 100644 index 0000000..fd829bf --- /dev/null +++ b/resources/views/templates/neler-yapariz/js/inertia.js @@ -0,0 +1,165 @@ +{ + +/** 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); + }); +}); + +} \ No newline at end of file diff --git a/resources/views/templates/neler-yapariz/js/marquee.js b/resources/views/templates/neler-yapariz/js/marquee.js new file mode 100644 index 0000000..1343382 --- /dev/null +++ b/resources/views/templates/neler-yapariz/js/marquee.js @@ -0,0 +1,30 @@ +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, + }, + } + ); +}); \ No newline at end of file diff --git a/resources/views/templates/neler-yapariz/js/nav.js b/resources/views/templates/neler-yapariz/js/nav.js new file mode 100644 index 0000000..cb635cb --- /dev/null +++ b/resources/views/templates/neler-yapariz/js/nav.js @@ -0,0 +1,44 @@ +{ + 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); + }); +} \ No newline at end of file diff --git a/resources/views/templates/neler-yapariz/js/scrolltrigger.js b/resources/views/templates/neler-yapariz/js/scrolltrigger.js new file mode 100644 index 0000000..7b02be9 --- /dev/null +++ b/resources/views/templates/neler-yapariz/js/scrolltrigger.js @@ -0,0 +1,108 @@ +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", + }, + "<" + ); +}); \ No newline at end of file diff --git a/resources/views/templates/neler-yapariz/js/section-selector.js b/resources/views/templates/neler-yapariz/js/section-selector.js new file mode 100644 index 0000000..065f24b --- /dev/null +++ b/resources/views/templates/neler-yapariz/js/section-selector.js @@ -0,0 +1,61 @@ +{ + /** 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); + }); + }); + }); +} \ No newline at end of file diff --git a/resources/views/templates/neler-yapariz/js/slider.js b/resources/views/templates/neler-yapariz/js/slider.js new file mode 100644 index 0000000..83fe177 --- /dev/null +++ b/resources/views/templates/neler-yapariz/js/slider.js @@ -0,0 +1,378 @@ +// 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); + }); +}); \ No newline at end of file diff --git a/resources/views/templates/neler-yapariz/js/text.js b/resources/views/templates/neler-yapariz/js/text.js new file mode 100644 index 0000000..fd829bf --- /dev/null +++ b/resources/views/templates/neler-yapariz/js/text.js @@ -0,0 +1,165 @@ +{ + +/** 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); + }); +}); + +} \ No newline at end of file diff --git a/resources/views/templates/neler-yapariz/navigation.blade.php b/resources/views/templates/neler-yapariz/navigation.blade.php new file mode 100644 index 0000000..9f1d278 --- /dev/null +++ b/resources/views/templates/neler-yapariz/navigation.blade.php @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/resources/views/templates/neler-yapariz/sections/flip.blade.php b/resources/views/templates/neler-yapariz/sections/flip.blade.php new file mode 100644 index 0000000..3636cdd --- /dev/null +++ b/resources/views/templates/neler-yapariz/sections/flip.blade.php @@ -0,0 +1 @@ +
  • 01

    Hover States

  • 02

    ResizinG Elements

  • 03

    Timeline Control

  • 04

    Shuffling positions

  • 05

    Sequenced Motion

  • 06

    FLEXIBLE LAYOUTS

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.

Copy this on Desktop

Continue movement from a given speed, slow naturally to a stop. Perfect for adding physicality and flow to your interface.

Copy this on Desktop

Animate each one independently. It’s all motion, no compromise: screen readers and search engines still see the original text.

Copy this on Desktop
SCROLLTRIGGER
MARQUEE
MARQUEE
SCROLLTRIGGER

Loop endlessly. Stack images, text, or both. Marquees give rhythm to your page without needing a single click.

Copy this on Desktop

Ideal for smooth marquees, auto playing sliders, and loops that just keep rolling.

Copy this on Desktop

Continue movement from a given speed, slow naturally to a stop. Perfect for adding physicality and flow to your interface.

Copy this on Desktop

Animate each one independently. It’s all motion, no compromise: screen readers and search engines still see the original text.

Copy this on Desktop
SCROLLTRIGGER
MARQUEE
MARQUEE
SCROLLTRIGGER

Loop endlessly. Stack images, text, or both. Marquees give rhythm to your page without needing a single click.

Copy this on Desktop