1<!DOCTYPE html><!-- Last Published: Tue Nov 22 2022 13:10:36 GMT+0000 (Coordinated Universal Time) --> 2<html data-wf-domain="refokus-cs.webflow.io" data-wf-page="636bad25728b6897cd8a8e47" data-wf-site="6368c10664bdf4fb19499ec9" lang="en"> 3 4<head> 5 <meta charset="utf-8" /> 6 <title>Weglot like Magic Case Study - Refokus</title> 7 <meta content="We teamed up with our friends from Weglot to create an immersive gaming-experience for the Webflow Conf 2022, unveiling the power of the translation tool." name="description" /> 8 <meta content="Weglot like Magic Case Study - Refokus" property="og:title" /> 9 <meta content="We teamed up with our friends from Weglot to create an immersive gaming-experience for the Webflow Conf 2022, unveiling the power of the translation tool." property="og:description" /> 10 <meta content="https://assets.website-files.com/6368c10664bdf4fb19499ec9/637bae4d6b4d591d1839f17c_Opengraph%20(1).png" property="og:image" /> 11 <meta content="Weglot like Magic Case Study - Refokus" property="twitter:title" /> 12 <meta content="We teamed up with our friends from Weglot to create an immersive gaming-experience for the Webflow Conf 2022, unveiling the power of the translation tool." property="twitter:description" /> 13 <meta content="https://assets.website-files.com/6368c10664bdf4fb19499ec9/637bae4d6b4d591d1839f17c_Opengraph%20(1).png" property="twitter:image" /> 14 <meta property="og:type" content="website" /> 15 <meta content="summary_large_image" name="twitter:card" /> 16 <meta content="width=device-width, initial-scale=1" name="viewport" /> 17 <link href="https://assets.website-files.com/6368c10664bdf4fb19499ec9/css/refokus-cs.2d4313109.css" rel="stylesheet" type="text/css" /> 18 <style> 19 @media (min-width:992px) { 20 html.w-mod-js:not(.w-mod-ix) [data-w-id="d271dce6-4771-2c2a-ef3f-62c317128988"] { 21 -webkit-transform: translate3d(0%, 0, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0); 22 -moz-transform: translate3d(0%, 0, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0); 23 -ms-transform: translate3d(0%, 0, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0); 24 transform: translate3d(0%, 0, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0); 25 } 26 27 html.w-mod-js:not(.w-mod-ix) [data-w-id="ebf5e384-e7c1-4de4-0c63-86c3df0c4daf"] { 28 -webkit-transform: translate3d(0, 110%, 0) scale3d(1, 1, 1) rotateX(60deg) rotateY(0) rotateZ(0deg) skew(20deg, 0); 29 -moz-transform: translate3d(0, 110%, 0) scale3d(1, 1, 1) rotateX(60deg) rotateY(0) rotateZ(0deg) skew(20deg, 0); 30 -ms-transform: translate3d(0, 110%, 0) scale3d(1, 1, 1) rotateX(60deg) rotateY(0) rotateZ(0deg) skew(20deg, 0); 31 transform: translate3d(0, 110%, 0) scale3d(1, 1, 1) rotateX(60deg) rotateY(0) rotateZ(0deg) skew(20deg, 0); 32 transform-style: preserve-3d; 33 } 34 35 html.w-mod-js:not(.w-mod-ix) [data-w-id="7703a07c-a964-6eab-996d-9fe8773c1bf8"] { 36 opacity: 0; 37 -webkit-transform: translate3d(0, 30%, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0); 38 -moz-transform: translate3d(0, 30%, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0); 39 -ms-transform: translate3d(0, 30%, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0); 40 transform: translate3d(0, 30%, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0); 41 } 42 43 html.w-mod-js:not(.w-mod-ix) [data-w-id="adfe13c9-9b19-9b88-b4e0-4f99621e3b13"] { 44 -webkit-transform: translate3d(0, 0, 0) scale3d(0, 0, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0); 45 -moz-transform: translate3d(0, 0, 0) scale3d(0, 0, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0); 46 -ms-transform: translate3d(0, 0, 0) scale3d(0, 0, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0); 47 transform: translate3d(0, 0, 0) scale3d(0, 0, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0); 48 } 49 50 html.w-mod-js:not(.w-mod-ix) [data-w-id="adfe15cf-6940-bb11-79e0-8dc311f27949"] { 51 -webkit-transform: translate3d(0, 28vh, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0); 52 -moz-transform: translate3d(0, 28vh, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0); 53 -ms-transform: translate3d(0, 28vh, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0); 54 transform: translate3d(0, 28vh, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0); 55 } 56 57 html.w-mod-js:not(.w-mod-ix) [data-w-id="10137f63-95aa-c98e-1782-8326555af32a"] { 58 -webkit-transform: translate3d(0, 0, 0) scale3d(1, 0, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0); 59 -moz-transform: translate3d(0, 0, 0) scale3d(1, 0, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0); 60 -ms-transform: translate3d(0, 0, 0) scale3d(1, 0, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0); 61 transform: translate3d(0, 0, 0) scale3d(1, 0, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0); 62 } 63 64 html.w-mod-js:not(.w-mod-ix) [data-w-id="753c7dad-22fb-3405-ecc1-3d086c5cbb6f"] { 65 -webkit-transform: translate3d(-120%, 0, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0); 66 -moz-transform: translate3d(-120%, 0, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0); 67 -ms-transform: translate3d(-120%, 0, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0); 68 transform: translate3d(-120%, 0, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0); 69 } 70 71 html.w-mod-js:not(.w-mod-ix) [data-w-id="994efa14-9825-7a60-ff4e-7d0398971e50"] { 72 -webkit-transform: translate3d(120%, 0, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0); 73 -moz-transform: translate3d(120%, 0, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0); 74 -ms-transform: translate3d(120%, 0, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0); 75 transform: translate3d(120%, 0, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0); 76 } 77 78 html.w-mod-js:not(.w-mod-ix) [data-w-id="80e84307-a453-fe64-66cb-beb207adf818"] { 79 -webkit-transform: translate3d(0, 15%, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0); 80 -moz-transform: translate3d(0, 15%, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0); 81 -ms-transform: translate3d(0, 15%, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0); 82 transform: translate3d(0, 15%, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0); 83 } 84 85 html.w-mod-js:not(.w-mod-ix) [data-w-id="e2cc578a-b167-6998-ba3e-e537f3637000"] { 86 -webkit-transform: translate3d(150%, 0, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0); 87 -moz-transform: translate3d(150%, 0, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0); 88 -ms-transform: translate3d(150%, 0, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0); 89 transform: translate3d(150%, 0, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0); 90 } 91 92 html.w-mod-js:not(.w-mod-ix) [data-w-id="5c290d54-82e2-6202-e269-b1cd575e0f84"] { 93 -webkit-transform: translate3d(-150%, 0, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0); 94 -moz-transform: translate3d(-150%, 0, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0); 95 -ms-transform: translate3d(-150%, 0, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0); 96 transform: translate3d(-150%, 0, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0); 97 } 98 99 html.w-mod-js:not(.w-mod-ix) [data-w-id="ffdf8442-e3ea-e8e5-0ddd-8629120d88c7"] { 100 -webkit-transform: translate3d(0%, 0, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0); 101 -moz-transform: translate3d(0%, 0, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0); 102 -ms-transform: translate3d(0%, 0, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0); 103 transform: translate3d(0%, 0, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0); 104 } 105 106 html.w-mod-js:not(.w-mod-ix) [data-w-id="46b3bf0d-b66d-f62c-1f53-b350604ba44c"] { 107 -webkit-transform: translate3d(0, 110%, 0) scale3d(1, 1, 1) rotateX(60deg) rotateY(0) rotateZ(0deg) skew(20deg, 0); 108 -moz-transform: translate3d(0, 110%, 0) scale3d(1, 1, 1) rotateX(60deg) rotateY(0) rotateZ(0deg) skew(20deg, 0); 109 -ms-transform: translate3d(0, 110%, 0) scale3d(1, 1, 1) rotateX(60deg) rotateY(0) rotateZ(0deg) skew(20deg, 0); 110 transform: translate3d(0, 110%, 0) scale3d(1, 1, 1) rotateX(60deg) rotateY(0) rotateZ(0deg) skew(20deg, 0); 111 transform-style: preserve-3d; 112 } 113 } 114 115 @media (max-width:991px) and (min-width:768px) { 116 html.w-mod-js:not(.w-mod-ix) [data-w-id="d271dce6-4771-2c2a-ef3f-62c317128988"] { 117 -webkit-transform: translate3d(0%, 0, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0); 118 -moz-transform: translate3d(0%, 0, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0); 119 -ms-transform: translate3d(0%, 0, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0); 120 transform: translate3d(0%, 0, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0); 121 } 122 123 html.w-mod-js:not(.w-mod-ix) [data-w-id="ebf5e384-e7c1-4de4-0c63-86c3df0c4daf"] { 124 -webkit-transform: translate3d(0, 110%, 0) scale3d(1, 1, 1) rotateX(60deg) rotateY(0) rotateZ(0deg) skew(20deg, 0); 125 -moz-transform: translate3d(0, 110%, 0) scale3d(1, 1, 1) rotateX(60deg) rotateY(0) rotateZ(0deg) skew(20deg, 0); 126 -ms-transform: translate3d(0, 110%, 0) scale3d(1, 1, 1) rotateX(60deg) rotateY(0) rotateZ(0deg) skew(20deg, 0); 127 transform: translate3d(0, 110%, 0) scale3d(1, 1, 1) rotateX(60deg) rotateY(0) rotateZ(0deg) skew(20deg, 0); 128 transform-style: preserve-3d; 129 } 130 131 html.w-mod-js:not(.w-mod-ix) [data-w-id="7703a07c-a964-6eab-996d-9fe8773c1bf8"] { 132 opacity: 0; 133 -webkit-transform: translate3d(0, 30%, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0); 134 -moz-transform: translate3d(0, 30%, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0); 135 -ms-transform: translate3d(0, 30%, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0); 136 transform: translate3d(0, 30%, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0); 137 } 138 139 html.w-mod-js:not(.w-mod-ix) [data-w-id="adfe13c9-9b19-9b88-b4e0-4f99621e3b13"] { 140 -webkit-transform: translate3d(0, 0, 0) scale3d(0, 0, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0); 141 -moz-transform: translate3d(0, 0, 0) scale3d(0, 0, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0); 142 -ms-transform: translate3d(0, 0, 0) scale3d(0, 0, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0); 143 transform: translate3d(0, 0, 0) scale3d(0, 0, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0); 144 } 145 146 html.w-mod-js:not(.w-mod-ix) [data-w-id="adfe15cf-6940-bb11-79e0-8dc311f27949"] { 147 -webkit-transform: translate3d(0, 28vh, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0); 148 -moz-transform: translate3d(0, 28vh, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0); 149 -ms-transform: translate3d(0, 28vh, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0); 150 transform: translate3d(0, 28vh, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0); 151 } 152 153 html.w-mod-js:not(.w-mod-ix) [data-w-id="10137f63-95aa-c98e-1782-8326555af32a"] { 154 -webkit-transform: translate3d(0, 0, 0) scale3d(1, 0, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0); 155 -moz-transform: translate3d(0, 0, 0) scale3d(1, 0, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0); 156 -ms-transform: translate3d(0, 0, 0) scale3d(1, 0, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0); 157 transform: translate3d(0, 0, 0) scale3d(1, 0, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0); 158 } 159 160 html.w-mod-js:not(.w-mod-ix) [data-w-id="753c7dad-22fb-3405-ecc1-3d086c5cbb6f"] { 161 -webkit-transform: translate3d(-120%, 0, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0); 162 -moz-transform: translate3d(-120%, 0, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0); 163 -ms-transform: translate3d(-120%, 0, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0); 164 transform: translate3d(-120%, 0, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0); 165 } 166 167 html.w-mod-js:not(.w-mod-ix) [data-w-id="994efa14-9825-7a60-ff4e-7d0398971e50"] { 168 -webkit-transform: translate3d(120%, 0, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0); 169 -moz-transform: translate3d(120%, 0, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0); 170 -ms-transform: translate3d(120%, 0, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0); 171 transform: translate3d(120%, 0, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0); 172 } 173 174 html.w-mod-js:not(.w-mod-ix) [data-w-id="80e84307-a453-fe64-66cb-beb207adf818"] { 175 -webkit-transform: translate3d(0, 15%, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0); 176 -moz-transform: translate3d(0, 15%, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0); 177 -ms-transform: translate3d(0, 15%, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0); 178 transform: translate3d(0, 15%, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0); 179 } 180 181 html.w-mod-js:not(.w-mod-ix) [data-w-id="e2cc578a-b167-6998-ba3e-e537f3637000"] { 182 -webkit-transform: translate3d(150%, 0, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0); 183 -moz-transform: translate3d(150%, 0, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0); 184 -ms-transform: translate3d(150%, 0, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0); 185 transform: translate3d(150%, 0, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0); 186 } 187 188 html.w-mod-js:not(.w-mod-ix) [data-w-id="5c290d54-82e2-6202-e269-b1cd575e0f84"] { 189 -webkit-transform: translate3d(-150%, 0, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0); 190 -moz-transform: translate3d(-150%, 0, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0); 191 -ms-transform: translate3d(-150%, 0, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0); 192 transform: translate3d(-150%, 0, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0); 193 } 194 195 html.w-mod-js:not(.w-mod-ix) [data-w-id="ffdf8442-e3ea-e8e5-0ddd-8629120d88c7"] { 196 -webkit-transform: translate3d(0%, 0, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0); 197 -moz-transform: translate3d(0%, 0, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0); 198 -ms-transform: translate3d(0%, 0, 0) scale3d(1, 1, 1) rotateX
198(0) rotateY(0) rotateZ(0) skew(0, 0); 199 transform: translate3d(0%, 0, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0); 200 } 201 202 html.w-mod-js:not(.w-mod-ix) [data-w-id="46b3bf0d-b66d-f62c-1f53-b350604ba44c"] { 203 -webkit-transform: translate3d(0, 110%, 0) scale3d(1, 1, 1) rotateX(60deg) rotateY(0) rotateZ(0deg) skew(20deg, 0); 204 -moz-transform: translate3d(0, 110%, 0) scale3d(1, 1, 1) rotateX(60deg) rotateY(0) rotateZ(0deg) skew(20deg, 0); 205 -ms-transform: translate3d(0, 110%, 0) scale3d(1, 1, 1) rotateX(60deg) rotateY(0) rotateZ(0deg) skew(20deg, 0); 206 transform: translate3d(0, 110%, 0) scale3d(1, 1, 1) rotateX(60deg) rotateY(0) rotateZ(0deg) skew(20deg, 0); 207 transform-style: preserve-3d; 208 } 209 } 210 </style> 211 <!--[if lt IE 9]>
211<script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js" type="text/javascript"></script>
211<![endif]--> 212
212<script type="text/javascript">!function (o, c) {var n = c.documentElement, t = " w-mod-"; n.className += t + "js", ("ontouchstart" in o || o.DocumentTouch && c instanceof DocumentTouch) && (n.className += t + "touch")}(window, document);</script>
212 213 <link href="https://assets.website-files.com/6368c10664bdf4fb19499ec9/636925ee28ba31039e0cb7d6_Logo_black.png" rel="shortcut icon" type="image/x-icon" /> 214 <link href="https://assets.website-files.com/6368c10664bdf4fb19499ec9/636925aedf8f85b4802d5b79_webclip.png" rel="apple-touch-icon" /><!-- iubenda --> 215 216
216<script type="text/javascript"> 217 var _iub = _iub || []; 218 _iub.csConfiguration = {"lang": "en", "siteId": 1222479, "countryDetection": true, "consentOnContinuedBrowsing": false, "gdprAppliesGlobally": false, "cookiePolicyId": 16317949, "banner": {"position": "float-bottom-center", "acceptButtonDisplay": true, "rejectButtonDisplay": true, "acceptButtonColor": "#000", "acceptButtonCaptionColor": "white", "rejectButtonColor": "#000", "rejectButtonCaptionColor": "white", "textColor": "black", "backgroundColor": "white", "customizeButtonDisplay": true, "customizeButtonColor": "#f1f1f1", "customizeButtonCaptionColor": "#000", "fontSizeBody": "13px", "fontSize": "13px"}}; 219 </script>
219 220
220<script type="text/javascript" src="//cdn.iubenda.com/cs/iubenda_cs.js" charset="UTF-8" async></script>
220 221 <!-- End iubenda --> 222 223
223<script src="https://cdn.weglot.com/weglot.min.js" class="_iub_cs_activate" type="text/plain"></script>
223 224
224<script class="_iub_cs_activate" type="text/plain"> 225 Weglot.initialize({ 226 api_key: 'wg_2dd659b9db6f07a5ade3e7f81644fec96' 227 }); 228 </script>
228 229 230 <!-- Global site tag (gtag.js) - Google Analytics -->
vendor: 111 bytes, lines 230-231
230 231 <script class="_iub_cs_activate" type="text/plain" async src="https://www.googletagmanager.com/gtag/js?id=
231G-BM6YS9KGKJ
vendor: 16 bytes, lines 231-232
231"></script> 232
232<script class="_iub_cs_activate" type="text/plain"> 233
vendor: 150 bytes, lines 233-237
233window.dataLayer = window.dataLayer || []; 234 function gtag(){dataLayer.push(arguments);} 235 gtag('js', new Date()); 236 237 gtag('config', '
237G-BM6YS9KGKJ
vendor: 8 bytes, lines 237-238
237'); 238
238</script>
238 239 <style> 240 body { 241 -webkit-font-smoothing: antialiased; 242 } 243 244 [bg-transparent] { 245 background: transparent !important; 246 } 247 248 [bg-pink] { 249 background: #f0e4ff; 250 } 251 252 #cursor.cc-link { 253 width: 0.5em; 254 height: 0.5em; 255 } 256 257 .w-nav-menu { 258 position: static; 259 } 260 261 body, 262 a:hover, 263 .w-dropdown-toggle, 264 .w-dropdown-toggle:hover, 265 a:-webkit-any-link { 266 cursor: none 267 } 268 269 @media screen and (max-width: 991px) { 270 271 body, 272 a:hover, 273 .w-dropdown-toggle, 274 .w-dropdown-toggle:hover, 275 a:-webkit-any-link { 276 cursor: auto 277 } 278 } 279 280 281 .weglot-container.wg-default { 282 display: none !important; 283 } 284 285 .c-page_transition { 286 opacity: 1; 287 } 288 </style> 289 290 <!-- Google Tag Manager --> 291
291<script class="_iub_cs_activate" type="text/plain">
vendor: 435 bytes, lines 291-295
291(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': 292 new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], 293 j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= 294 'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); 295 })(window,document,'script','dataLayer','
295GTM-WRHDDSZ
vendor: 3 bytes, line 295
295');
295</script>
295 296 <!-- End Google Tag Manager --> 297 <style> 298 [text-split] { 299 opacity: 0; 300 } 301 302 html.w-editor [text-split] { 303 opacity: 1; 304 } 305 306 .line { 307 overflow: hidden; 308 } 309 </style> 310
310<script type="module" crossorigin src="/assets/index.f0ec4c6d.js"></script>
310 311</head> 312 313<body class="c-weglot-body"> 314 <div class="c-custom-code"> 315 <div class="c-custom-code w-embed"> 316 <style> 317 /* ----- Settings ----- */ 318 /* Setup */ 319 body { 320 /*font-size: 1.1111111111111112vw;*/ 321 -webkit-font-smoothing: antialiased; 322 } 323 324 /* Max Font Size */ 325 @media screen and (min-width:1440px) { 326 body { 327 font-size: 1rem; 328 } 329 } 330 331 /* only show Custom cursor when body is hovered */ 332 body:hover #cursor { 333 opacity: 1 334 } 335 336 /* cc-work is added when we enter "Work" section, cc-hover when project is hovered */ 337 /* moves text */ 338 #cursor.cc-link { 339 transform: translateY(-100%) 340 } 341 342 /* moves text */ 343 #cursor.cc-work .c-cursor-text-wrapper { 344 opacity: 1 345 } 346 347 /* reveals text */ 348 #cursor.cc-work { 349 width: 4em !important; 350 height: 4em !important; 351 font-size: 1em !important; 352 } 353 354 /* reveals text */ 355 #cursor.cc-work.cc-hover .c-cursor-text-wrapper { 356 transform: translateY(-100%) 357 } 358 359 /* ----- Titles ----- */ 360 .c-title-1, 361 .c-hero-title { 362 font-variation-settings: 'wght' 555 363 } 364 365 .c-title-1.cc-regular { 366 font-variation-settings: 'wght' 420 367 } 368 369 .c-title-2 { 370 font-variation-settings: 'wght' 569 371 } 372 373 .c-title-2.cc-regular { 374 font-variation-settings: 'wght' 379 375 } 376 377 .c-title-3 { 378 font-variation-settings: 'wght' 532 379 } 380 381 .c-title-3.cc-regular { 382 font-variation-settings: 'wght' 351 383 } 384 385 .c-title-4 { 386 font-variation-settings: 'wght' 515 387 } 388 389 .c-title-4.cc-regular { 390 font-variation-settings: 'wght' 373 391 } 392 393 .c-title-5 { 394 font-variation-settings: 'wght' 515 395 } 396 397 .c-title-5.cc-regular { 398 font-variation-settings: 'wght' 373 399 } 400 401 .c-title-6 { 402 font-variation-settings: 'wght' 515 403 } 404 405 .c-title-6.cc-regular { 406 font-variation-settings: 'wght' 370 407 } 408 409 .c-title-7 { 410 font-variation-settings: 'wght' 500 411 } 412 413 .c-title-7.cc-regular { 414 font-variation-settings: 'wght' 515 415 } 416 417 418 /* ----- Texts ----- */ 419 /* "cc-bold" will work for all classes starting with "c-text-" */ 420 [class^="c-text-"].cc-bold { 421 font-variation-settings: 'wght' 645 422 } 423 424 .c-cursor-text { 425 font-variation-settings: 'wght' 645 426 } 427 428 .c-weglot_selector.cc-active { 429 font-variation-settings: 'wght' 645 430 } 431 432 .c-more-text { 433 font-variation-settings: 'wght' 645 434 } 435 436 437 /* ----- Utility Attributes ----- */ 438 /* grid lines */ 439 [grid], 440 [grid] div { 441 border-color: rgba(134, 134, 145, 0.1) 442 } 443 444 /* make unclickable */ 445 [no-pointer="1"] { 446 pointer-events: none; 447 user-select: none; 448 } 449 450 /* hide overlfow */ 451 [overflow="1"] { 452 overflow: hidden; 453 } 454 455 /* Shadows */ 456 [shadow="main"] { 457 box-shadow: 8px 8px 32px 0 hsla(240, 7.14%, 10.98%, 0.08); 458 } 459 460 /* vertical text */ 461 [vertical-text] { 462 writing-mode: vertical-rl; 463 } 464 465 @media screen and (max-width: 991px) { 466 467 /* add value "desktop" to remove it on smaller screens */ 468 [vertical-text="desktop"] { 469 writing-mode: unset; 470 } 471 } 472 473 /* ----- Custom styling ----- */ 474 475 /* nav item resource */ 476 .c-nav_item [arrow-tip], 477 .c-nav_item [arrow-line] { 478 transition: transform .3s ease; 479 } 480 481 .c-nav_item:hover [arrow-tip], 482 .c-nav_item:hover [arrow-line] { 483 transform: translateX(3px); 484 } 485
486 /* cursor */ 487 .c-custom-cursor_dot.cc-work .c-cursor-text { 488 font-size: 14px; 489 } 490 491 /* Current Nav Link Dot */ 492 @media screen and (min-width: 992px) { 493 .c-nav-link.w--current::before { 494 content: ""; 495 width: 0.3em; 496 height: 0.3em; 497 position: absolute; 498 top: 0.35em; 499 left: -0.5em; 500 border-radius: 50%; 501 background-color: #00FF19; 502 box-shadow: 0 0 0.25em #00FF19; 503 } 504 505 .c-nav-link.cc-dropdown.w--open .c-nav-dropdown_circle-desktop { 506 display: block; 507 width: 0.375em; 508 } 509 510 .c-nav-link.cc-dropdown.w--open .c-nav-dropdown_close { 511 display: block; 512 width: 0.75em; 513 } 514 } 515 516 /* easing */ 517 .c-nav-link { 518 font-variation-settings: 'wght' 400; 519 transition: font-variation-settings 0.3s ease; 520 } 521 522 @media screen and (max-width: 991px) { 523 .c-nav-link { 524 font-variation-settings: 'wght' 515; 525 } 526 } 527 528 /* current link + hover */ 529 .c-nav-link:is(.w--current, :hover, .w--open) { 530 font-variation-settings: 'wght' 700; 531 } 532 533 /* services hero */ 534 .c-hero-services-title .c-title-4 { 535 font-variation-settings: 'wght' 515; 536 } 537 538 /* nav button */ 539 .c-nav-button { 540 font-variation-settings: 'wght' 400; 541 transition: all 0.3s ease; 542 } 543 544 .c-nav-button:hover { 545 font-variation-settings: 'wght' 700; 546 } 547 548 .c-button, 549 .cc-text-bold { 550 font-variation-settings: 'wght' 700; 551 } 552 553 /* Home videos */ 554 .c-work-video, 555 #hero-hands { 556 object-fit: cover; 557 } 558 </style> 559 </div> 560 <div class="c-custom-code w-embed w-script"> 561 <!-- Global js --> 562
562<script> 563 var Webflow = Webflow || []; 564 Webflow.push(function () { 565 566 // add clicked page's name into transition 567 const siteURL = "http://" + top.location.host.toString() 568 const allLinks = document.querySelectorAll("a[href^='" + siteURL + "'], a[href^='/'], a[href^='./'], a[href^='../']") 569 // function that will return the slug of the clicked link 570 let slug = url => new URL(url).pathname.slice(1); 571 572 const pageTitle = document.querySelector('#page-title') 573 574 allLinks.forEach(link => { 575 link.addEventListener('click', () => { 576 let path = slug(link.href) 577 578 // replace dash with spaces and replace the page title if there is a path 579 if (path) {pageTitle.innerHTML = path.replace(/-/g, ' ')} 580 // if null then write "home" 581 else {pageTitle.innerHTML = 'home'} 582 }) 583 }) 584 585 // nav bg change ---------- 586 if ($('[nav-change]').length) { //transition existence if 587 let original 588 const nav = $(".c-nav") 589 if ($('[nav-change="dark"]')) {//dark nav if 590 gsap.to(".c-nav", { 591 scrollTrigger: { 592 trigger: "[nav-change='dark']", 593 start: "top top", 594 toggleActions: "play none none reverse", 595 onEnter() { 596 if (nav.hasClass('cc-white')) { 597 original = 'cc-white'; 598 nav.removeClass('cc-white') 599 } 600 nav.addClass('cc-dark'); 601 }, 602 onEnterBack() { 603 nav.addClass(original); 604 nav.removeClass('cc-dark'); 605 606 } 607 }, 608 }) 609 } //end dark nav if 610 if ($('[nav-change="light"]')) {//light nav if 611 gsap.to(".c-nav", { 612 scrollTrigger: { 613 trigger: "[nav-change='light']", 614 start: "top top", 615 toggleActions: "play none none reverse", 616 onEnter() { 617 if (nav.hasClass('cc-dark')) { 618 original = 'cc-dark'; 619 nav.removeClass('cc-dark'); 620 } 621 nav.addClass('cc-white'); 622 }, 623 onEnterBack() { 624 nav.addClass(original); 625 nav.removeClass('cc-white'); 626 } 627 }, 628 }) 629 }// end light nav if 630 }//end existence if 631 // end of nav bg change ---- 632 }) 633 </script>
633 634 </div> 635 </div> 636 <div no-pointer="1" class="c-custom-cursor"> 637 <div id="cursor" class="c-custom-cursor_dot"> 638 <div class="c-cursor-text-wrapper"> 639 <div class="c-cursor-text">select</div> 640 </div> 641 <div class="c-cursor-text-wrapper"> 642 <div class="c-text-3 cc-bold">Live site</div> 643 </div> 644 </div> 645 </div> 646 <div data-w-id="d2a41140-e836-a505-9a46-9cd4ffd8c900" data-animation="over-left" data-collapse="medium" data-duration="300" data-easing="ease-in-out-quint" data-easing2="ease-in-out-quint" role="banner" class="c-nav w-nav"> 647 <div class="c-custom-code w-embed"> 648 <style> 649 /* start nav as transparent */ 650 .c-nav { 651 background-color: transparent 652 } 653 </style> 654 </div> 655 <div class="c-custom-code w-embed"> 656 <style> 657 .c-nav:is(.cc-white, .cc-pink) { 658 background-color: #faf5ff; 659 color: #1b1b1b; 660 } 661 662 .c-nav:is(.cc-white, .cc-pink) .c-nav-link.w--current { 663 background-image: none; 664 background-clip: none; 665 -webkit-text-fill-color: unset; 666 } 667 668 .c-nav:is(.cc-white, .cc-pink) :is(.c-refokus-logo, .c-nav-button) { 669 filter: invert(100%) 670 } 671 672 .c-nav:is(.cc-white, .cc-pink) .c-weglot_selector:hover { 673 color: #1b1b1b 674 } 675 676 .c-nav.cc-white .c-nav-separator { 677 background-color: rgba(0, 0, 0, 0.3); 678 } 679 680 .c-nav:is(.cc-white, .cc-pink) .c-hamburger { 681 background-color: #1b1b1b; 682 } 683 684 /* pink mode */ 685 .c-nav.cc-pink { 686 background-color: #f0e4ff; 687 } 688 689 /* dark mode */ 690 .c-nav.cc-dark, 691 .c-nav.cc-open { 692 background-color: #1b1b1b; 693 color: #faf5ff; 694 } 695 696 :is(.c-nav.cc-dark, .c-nav.cc-open) .c-nav-separator { 697 background-color: rgba(255, 255, 255, 0.3); 698 } 699 700 /* 701 .c-nav.cc-dark .c-nav-link.w--current { 702 background-image: none; 703 background-clip: none; 704 -webkit-text-fill-color: unset; 705 } 706 */ 707 :is(.c-nav.cc-dark, .c-nav.cc-open) :is(.c-refokus-logo, .c-nav-button) { 708 filter: invert(0%) 709 } 710 711 :is(.c-nav.cc-dark, .c-nav.cc-open) .c-weglot_selector:hover { 712 color: #faf5ff 713 } 714 715 :is(.c-nav.cc-dark, .c-nav.cc-open) .c-hamburger { 716 background-color: #faf5ff; 717 } 718 719 @media only screen and (max-width: 991px) { 720 .c-nav { 721 color: #faf5ff; 722 } 723 724 .c-nav .c-weglot_selector:hover { 725 color: #faf5ff 726 } 727 } 728 </style> 729 </div> 730 <div class="c-container-nav"><a href="/" class="c-refokus-logo w-nav-brand"><img src="https://assets.website-files.com/6368c10664bdf4fb19499ec9/6368c1cdd8207551c9d0f905_refokus%20logo.svg" loading="lazy" width="84" height="22" alt="Refokus" /></a> 731 <nav role="navigation" class="c-nav-menu w-nav-menu"> 732 <div class="c-nav-menu-wrapper"> 733 <div class="c-section-divider cc-black-bg cc-tablet-mb-12 cc-desktop-hide"> 734 <div class="c-section-divider_circle cc-white"></div> 735 </div> 736 <div class="c-nav-links-wrap"> 737 <div class="c-nav-link_wrapper-link"> 738 <div no-pointer="1" class="c-nav-link-hide">Home</div><a href="/" class="c-nav-link w-inline-block"> 739 <div class="c-text-3">Home</div> 740 </a> 741 </div> 742 <div class="c-nav-link_wrapper-link"> 743 <div no-pointer="1" class="c-nav-link-hide">Services</div><a href="/services" class="c-nav-link w-inline-block"> 744 <div class="c-text-3">Services</div> 745 </a> 746 </div> 747 <div class="c-nav-link_wrapper-link"> 748 <div no-pointer="1" class="c-nav-link-hide">Work</div><a href="/work" class="c-nav-link w-inline-block"> 749 <div class="c-text-3">Work</div> 750 </a> 751 </div> 752 <div class="c-nav-link_wrapper-link"> 753 <div no-pointer="1" class="c-nav-link-hide">Work</div><a href="/culture" class="c-nav-link w-inline-block"> 754 <div class="c-text-3">Culture</div> 755 </a> 756 </div> 757 </div> 758 <div class="c-nav-right"> 759 <div class="c-nav-button-wrapper"><a href="/contact" class="c-nav-button cc-absolute w-inline-block"> 760 <div class="c-button-icon-content">Start a Project</div> 761 <div class="c-button-icon-right w-embed"><svg width="14" height="8" viewBox="0 0 14 8" fill="none" xmlns="http://www.w3.org/2000/svg"> 762 <path d="M6 4.00049V4.50049H5.5V4.00049H6ZM13.8536 3.64693C14.0488 3.8422 14.0488 4.15878 13.8536 4.35404L10.6716 7.53602C10.4763 7.73128 10.1597 7.73128 9.96447 7.53602C9.7692 7.34076 9.7692 7.02418 9.96447 6.82892L12.7929 4.00049L9.96447 1.17206C9.7692 0.976799 9.7692 0.660217 9.96447 0.464954C10.1597 0.269692 10.4763 0.269692 10.6716 0.464954L13.8536 3.64693ZM6 3.50049H13.5V4.50049H6V3.50049ZM5.5 4.00049V0.999023H6.5V4.00049H5.5Z" fill="currentColor" /> 763 </svg></div> 764 </a></div> 765 </div> 766 </div> 767 </nav> 768 <div class="c-hamburger w-nav-button"><img src="https://assets.website-files.com/6368c10664bdf4fb19499ec9/6368c1cdd82075cf74d0f90b_close.svg" loading="lazy" width="10" height="10" alt="" class="c-hamburger_close" /></div> 769 </div> 770 <div class="c-nav-bottom-line"> 771 <div class="c-container"> 772 <div class="c-divider-line"></div> 773 </div> 774 </div> 775 </div> 776 <div class="c-custom-code w-embed"> 777 <style> 778 @font-face { 779 font-family: "Amarante"; 780 src: url("https://cdn.refokus.com/weglot/Amarante.woff2"); 781 font-weight: normal; 782 font-style: normal; 783 } 784 785 @font-face { 786 font-family: "PT-Serif"; 787 src: url("https://cdn.refokus.com/weglot/PTSerif-Regular.woff2"); 788 font-weight: normal; 789 font-style: normal; 790 } 791 792 @font-face { 793 font-family: "PT-Serif"; 794 src: url("https://cdn.refokus.com/weglot/PTSerif-Bold.woff2"); 795 font-weight: bold; 796 font-style: normal; 797 } 798 799 [Amarante] { 800 font-family: "Amarante"; 801 font-weight: 400; 802 } 803 804 [PT-Serif] { 805 font-family: "PT-Serif"; 806 } 807 808 [bold] { 809 font-weight: 700; 810 } 811 812 [flip-x] { 813 -webkit-transform: scaleX(-1); 814 transform: scaleX(-1); 815 } 816 817 [text-shadow] { 818 filter: drop-shadow(1px 1px 0px #FF2F00) drop-shadow(2px 2px 0px #841900); 819 } 820 821 [text-gradient] { 822 background: linear-gradient(180deg, #FFFFFF 0%, #FF8966 100%); 823 -webkit-background-clip: text; 824 -webkit-text-fill-color: transparent; 825 background-clip: text; 826 text-fill-color: transparent; 827 } 828 829 @media screen and (min-width: 767px) { 830 [text-gradient-line-1] { 831 background: linear-gradient(180deg, #FFFFFF 0%, #FFC4B3 100%); 832 -webkit-background-clip: text; 833 -webkit-text-fill-color: transparent; 834 background-clip: text; 835 text-fill-color: transparent; 836 } 837 838 [text-gradient-line-2] { 839 background: linear-gradient(180deg, #FFC4B3 0%, #FF8966 100%); 840 -webkit-background-clip: text; 841 -webkit-text-fill-color: transparent; 842 background-clip: text; 843 text-fill-color: transparent; 844 } 845 } 846 847 h2[words-slide-up] .line:nth-child(1) { 848 background: linear-gradient(180deg, #FFFFFF 0%, #FFC4B3 100%); 849 -webkit-background-clip: text; 850 -webkit-text-fill-color: transparent; 851 background-clip: text; 852 text-fill-color: transparent; 853 } 854 855 h2[words-slide-up] .line:nth-child(2) { 856 background: linear-gradient(180deg, #FFC4B3 0%, #FF8966 100%); 857 -webkit-background-clip: text; 858 -webkit-text-fill-color: transparent; 859 background-clip: text; 860 text-fill-color: transparent; 861 } 862 863 .line { 864 overflow: hidden; 865 } 866 867 /* Stars */ 868 [stars] { 869 animation: stars 5s ease infinite; 870 } 871 872 @keyframes stars { 873 0% { 874 opacity: .5; 875 } 876 877 50% { 878 opacity: 1; 879 } 880 881 100% { 882 opacity: .5; 883 } 884 } 885 </style> 886 </div> 887 <div hat-animation="wrapper" class="c-hero-animation-wrapper"> 888 <div no-pointer="1" class="c-weglot-gradient-circle-wrapper-move cc-hero"> 889 <div hat-animation="circle-scale" data-w-id="adfe13c9-9b19-9b88-b4e0-4f99621e3b13" class="c-weglot-gradient-circle-wrapper-movec-weglot-gradient-circle-wrapper-scale"> 890 <div hat-animation="circle-rotate" class="c-weglot-gradient-circle"></div> 891 </div> 892 </div> 893 <div no-pointer="1" data-w-id="7703a07c-a964-6eab-996d-9fe8773c1bf8" class="c-hat-canvas w-embed">
893<canvas id="hat-canvas" style="width: 100%; height: 100%;"></canvas></div> 894 <div class="c-weglot-hero wf-section"><img src="https://assets.website-files.com/6368c10664bdf4fb19499ec9/636cdd1e5e9b04e90355f37c_curtains-right.svg" loading="eager" data-w-id="d271dce6-4771-2c2a-ef3f-62c317128988" no-pointer="1" alt="" class="c-weglot-hero_curtains" /><img src="https://assets.website-files.com/6368c10664bdf4fb19499ec9/636cdc99709c50831d692ad2_curtains-left-inner.svg" loading="eager" data-w-id="5c290d54-82e2-6202-e269-b1cd575e0f84" no-pointer="1" alt="" 895 class="c-weglot-hero_curtains-inner" /><img src="https://assets.website-files.com/6368c10664bdf4fb19499ec9/636cdc99709c50831d692ad2_curtains-left-inner.svg" loading="eager" data-w-id="e2cc578a-b167-6998-ba3e-e537f3637000" no-pointer="1" alt="" class="c-weglot-hero_curtains-inner cc-left" /> 896 <div no-pointer="1" flip-x="1" class="c-weglot-hero_curtains cc-left"><img src="https://assets.website-files.com/6368c10664bdf4fb19499ec9/636cdd1e5e9b04e90355f37c_curtains-right.svg" loading="eager" data-w-id="ffdf8442-e3ea-e8e5-0ddd-8629120d88c7" no-pointer="1" alt="" class="c-weglot-hero_curtains" /></div><img src="https://assets.website-files.com/6368c10664bdf4fb19499ec9/636cdfb6656d6710c2806408_curtains-top.svg" loading="eager" data-w-id="80e84307-a453-fe64-66cb-beb207adf818" 897 no-pointer="1" alt="" class="c-weglot-hero_curtains cc-top" /> 898 <div class="c-container-wg cc-hero"> 899 <div data-w-id="adfe15cf-6940-bb11-79e0-8dc311f27949" class="c-weglot-hero_logo"> 900 <div class="c-weglot-hero_logo-wrapper"><img src="https://assets.website-files.com/6368c10664bdf4fb19499ec9/636ce179a91898b86235d307_logo-weglot.svg" loading="lazy" width="100" height="27" data-w-id="994efa14-9825-7a60-ff4e-7d0398971e50" alt="" class="c-weglot-logo" /></div> 901 <div data-w-id="10137f63-95aa-c98e-1782-8326555af32a" class="c-weglot-hero_logo-divider"></div> 902 <div class="c-weglot-hero_logo-wrapper"><img src="https://assets.website-files.com/6368c10664bdf4fb19499ec9/636ce17a7d4307904d417890_logo-LikeMagic.svg" loading="lazy" width="100" height="30" data-w-id="753c7dad-22fb-3405-ecc1-3d086c5cbb6f" alt="" class="c-like-magic-logo" /></div> 903 </div> 904 <div text-gradient="1" text-shadow="1" class="c-weglot-hero_title-wrapper"> 905 <h1 Amarante="1" class="c-title-2-wg cc-uppercase"><span class="c-gradient-title_1"><strong text-gradient-line-1="1" data-w-id="ebf5e384-e7c1-4de4-0c63-86c3df0c4daf" class="c-gradient-title_1-text">Unveiling the power</strong></span> <span class="c-gradient-title_2"><strong text-gradient-line-2="1" data-w-id="46b3bf0d-b66d-f62c-1f53-b350604ba44c" class="c-gradient-title_2-text">of translation</strong></span></h1> 906 </div> 907 </div> 908 </div> 909 <div data-w-id="fbb98d5a-b6a4-b096-5962-14f64e5f1de6" class="c-mobile-hero-wrapper"> 910 <div class="c-mobile-hero-gradient"></div><img src="https://assets.website-files.com/6368c10664bdf4fb19499ec9/6376a7b1cd38d9f9ed62c3d0_hat-mobile.webp" loading="lazy" width="144.5" height="190" alt="" class="c-hat-mobile" /> 911 <div PT-Serif="1" class="c-section-100 cc-center cc-like-magic wf-section"> 912 <div class="c-container-wg"> 913 <div class="c-intro-wrapper"> 914 <div text-gradient="1" class="c-content-wrapper"> 915 <h2 Amarante="1" class="c-title-3">WEGLOT LIKE MAGIC</h2> 916 </div> 917 <p class="c-text-1">Augmenting the Webflow Conference with an online gaming experience. A translation tool for websites supporting over 100 languages. Weglot allows you to reach new audiences with high-quality translated content.</p> 918 </div> 919 </div> 920 </div> 921 <div PT-Serif="1" class="c-section-100 cc-center cc-challenge wf-section"> 922 <div class="c-container-wg"> 923 <div class="c-intro-wrapper cc-large"> 924 <div text-gradient="1" class="c-content-wrapper cc-40"> 925 <h2 text-split="1" Amarante="1" words-slide-up="1" class="c-title-1-wg">- THE -<br />CHALLENGE</h2> 926 </div> 927 <div class="c-section-divider-line"></div> 928 <div class="c-challenge_text-wrapper"> 929 <p text-split="1" words-slide-up="1" class="c-text-1">Translating a real booth into an immersive, web-based gaming experience for the Webflow Conference 2022 - unique, but on brand.</p> 930 </div> 931 </div> 932 </div> 933 </div> 934 </div> 935 <div PT-Serif="1" class="c-section cc-approach wf-section"><img src="https://assets.website-files.com/6368c10664bdf4fb19499ec9/6372f6ee50723c11685fa806_roadmap.svg" loading="lazy" alt="" class="c-roadmap" /> 936 <div class="c-container-wg"> 937 <div class="c-intro-wrapper cc-large"> 938 <div text-gradient="1" class="c-content-wrapper cc-40"> 939 <h2 text-split="1" Amarante="1" words-slide-up="1" class="c-title-1-wg">- THE -<br />APPROACH</h2> 940 </div> 941 <div class="c-section-divider-line"></div> 942 <div class="c-challenge_text-wrapper"> 943 <p text-split="1" words-slide-up="1" class="c-text-1">We divided the workflow into cross-department stages so designers, project managers, and developers could collaboratively align on design and functionality.</p> 944 </div> 945 </div> 946 <div data-w-id="7c50a296-ca94-b8c5-524f-038b4c61f98b" class="c-cards-wrapper"> 947 <div class="c-wg-card cc-large"> 948 <div text-gradient="1" class="c-content-wrapper"> 949 <h3 Amarante="1" class="c-title-4-wg">MAIN GOAL</h3> 950 </div> 951 <p class="c-text-1">The aim was to define the game operations, the technical scope, and the conceptual and visual coherence.</p><img class="c-main-goal_image" src="https://assets.website-files.com/6368c10664bdf4fb19499ec9/637b97990bce7507a8ba0f6b_placeholder.png" width="260.5" height="371" alt="" sizes="(max-width: 479px) 91vw, (max-width: 767px) 45vw, (max-width: 991px) 213.486083984375px, 22vw" r-magnifier-img="1" loading="lazy" 952 srcset="https://assets.website-files.com/6368c10664bdf4fb19499ec9/637b97990bce7507a8ba0f6b_placeholder-p-500.png 500w, https://assets.website-files.com/6368c10664bdf4fb19499ec9/637b97990bce7507a8ba0f6b_placeholder-p-800.png 800w, https://assets.website-files.com/6368c10664bdf4fb19499ec9/637b97990bce7507a8ba0f6b_placeholder-p-1080.png 1080w, https://assets.website-files.com/6368c10664bdf4fb19499ec9/637b97990bce7507a8ba0f6b_placeholder.png 1186w" /> 953 </div> 954 <div class="c-wg-card cc-small"> 955 <div text-gradient="1" class="c-content-wrapper"> 956 <h3 Amarante="1" class="c-title-4-wg">PROCESS</h3> 957 </div> 958 <p class="c-text-1">We defined the specific tasks needed to find the right balance between a smooth gameplay experience and Webflow development.</p><img class="c-process-goal_image" src="https://assets.website-files.com/6368c10664bdf4fb19499ec9/637bb25bf6b5fac09b09f1e3_placeholder.png" width="260.5" height="223" alt="" sizes="(max-width: 479px) 93vw, (max-width: 767px) 259.9862060546875px, (max-width: 991px) 173.3238525390625px, 19vw" r-magnifier-img="1" loading="lazy" 959 srcset="https://assets.website-files.com/6368c10664bdf4fb19499ec9/637bb25bf6b5fac09b09f1e3_placeholder-p-500.png 500w, https://assets.website-files.com/6368c10664bdf4fb19499ec9/637bb25bf6b5fac09b09f1e3_placeholder-p-800.png 800w, https://assets.website-files.com/6368c10664bdf4fb19499ec9/637bb25bf6b5fac09b09f1e3_placeholder-p-1080.png 1080w, https://assets.website-files.com/6368c10664bdf4fb19499ec9/637bb25bf6b5fac09b09f1e3_placeholder-p-1600.png 1600w, https://assets.website-files.com/6368c10664bdf4fb19499ec9/637bb25bf6b5fac09b09f1e3_placeholder.png 1988w" /> 960 </div> 961 <div class="c-wg-card cc-mid"> 962 <div text-gradient="1" class="c-content-wrapper"> 963 <h3 Amarante="1" class="c-title-4-wg">OUTCOME</h3> 964 </div> 965 <p class="c-text-1">We created wireframes to validate our thoughts and iterate quickly. This helped define the game, its rules, mechanics, and features.</p><img src="https://assets.website-files.com/6368c10664bdf4fb19499ec9/6372e4ef59fe1c376f0f1545_img-wrapper-2.png" loading="lazy" height="260" sizes="(max-width: 479px) 87vw, (max-width: 767px) 250px, (max-width: 991px) 224px, 24vw" width="356" 966 srcset="https://assets.website-files.com/6368c10664bdf4fb19499ec9/6372e4ef59fe1c376f0f1545_img-wrapper-2-p-500.png 500w, https://assets.website-files.com/6368c10664bdf4fb19499ec9/6372e4ef59fe1c376f0f1545_img-wrapper-2.png 712w" alt="" class="c-outcome-goal_image" /> 967 </div> 968 </div> 969 </div> 970 </div> 971 </div> 972 <div data-w-id="4927aa20-0e5c-ef93-6801-7b889d0bf67e" class="c-section cc-torch wf-section"> 973 <div class="c-container-wg"> 974 <div class="c-torch-wrapper"><img src="https://assets.website-files.com/6368c10664bdf4fb19499ec9/637307ab534dd201941f978b_torch.svg" loading="lazy" width="300" height="300" alt="" class="c-torch" /> 975 <div class="c-torch-light"></div> 976 <p Amarante="1" class="c-title-4-wg cc-relative">The result is an immersive game where the user uses a flashlight to find clues in a magical theater. To win, the user has to figure out the meaning of the main word as quickly as possible.</p> 977 </div> 978 </div> 979 </div> 980 <div data-w-id="fe697fd3-db1b-d927-3235-9ef507ebf6dc" class="c-section-100 cc-center cc-eye wf-section"> 981 <div class="c-container-wg"> 982 <div data-is-ix2-target="1" class="c-eyeball" data-w-id="11eeb6be-3a0f-d13f-6b81-fd354f121019" data-animation-type="lottie" data-src="https://assets.website-files.com/6368c10664bdf4fb19499ec9/63738035c31174b8ab8edf28_eyeball%20(1).json" data-loop="0" data-direction="1" data-autoplay="0" data-renderer="svg" data-default-duration="2.0166666666666666" data-duration="0"></div> 983 </div><img src="https://assets.website-files.com/6368c10664bdf4fb19499ec9/6372f912b130aa49ed21a297_stars.svg" loading="lazy" stars="1" alt="" class="c-stars" /><img src="https://assets.website-files.com/6368c10664bdf4fb19499ec9/6372fa351e22b73cfebb48cc_crane.svg" loading="lazy" height="40" width="32" alt="" class="c-skull" /><img src="https://assets.website-files.com/6368c10664bdf4fb19499ec9/6372fdb132d0fd7646771ea9_hat-rabbit.svg" loading="lazy" height="80" width="32" alt="" 984 class="c-hat" /><img src="https://assets.website-files.com/6368c10664bdf4fb19499ec9/6372fdb150723c6f16604656_string.svg" loading="lazy" height="40" width="32" alt="" class="c-chain" /><img src="https://assets.website-files.com/6368c10664bdf4fb19499ec9/6372fdb10ca0b50ccd9fac6d_watch.svg" loading="lazy" height="100" width="32" alt="" class="c-swatch" /><img src="https://assets.website-files.com/6368c10664bdf4fb19499ec9/6372fdb08ef28015aab247fa_rabbit.svg" loading="lazy" height="32" 985 width="32" alt="" class="c-rabbit" /> 986 </div> 987 <div PT-Serif="1" class="c-section cc-visual wf-section"> 988 <div class="c-container-wg"> 989 <div class="c-intro-wrapper cc-large"> 990 <div text-gradient="1" class="c-content-wrapper cc-40"> 991 <h2 text-split="1" Amarante="1" words-slide-up="1" class="c-title-1-wg">- VISUAL -<br />STRATEGY</h2> 992 </div> 993 <div class="c-section-divider-line"></div> 994 <div class="c-challenge_text-wrapper"> 995 <p text-split="1" words-slide-up="1" class="c-text-1">Once we had the wireframes and the aim of the game defined, we explored how
995we can align the Weglot brand with the concept of Magic.</p> 996 </div> 997 </div> 998 </div> 999 <div data-w-id="9e72fa48-b687-77a0-d271-53d1ddca3be8" class="c-images-wrapper"> 1000 <div class="c-visual-images-wrapper cc-btm"><img src="https://assets.website-files.com/6368c10664bdf4fb19499ec9/6373d3af2683dc237ce12903_btm-middle-img-1.webp" loading="lazy" width="420" height="236" sizes="(max-width: 479px) 100vw, (max-width: 991px) 298.125px, 37vw" 1001 srcset="https://assets.website-files.com/6368c10664bdf4fb19499ec9/6373d3af2683dc237ce12903_btm-middle-img-1-p-500.webp 500w, https://assets.website-files.com/6368c10664bdf4fb19499ec9/6373d3af2683dc237ce12903_btm-middle-img-1-p-800.webp 800w, https://assets.website-files.com/6368c10664bdf4fb19499ec9/6373d3af2683dc237ce12903_btm-middle-img-1.webp 840w" alt="" class="c-btm" /><img 1002 src="https://assets.website-files.com/6368c10664bdf4fb19499ec9/6373d4e5a2e059e28463e641_btm-img-2.webp" loading="lazy" width="310" height="464" sizes="(max-width: 991px) 174.375px, 22vw" srcset="https://assets.website-files.com/6368c10664bdf4fb19499ec9/6373d4e5a2e059e28463e641_btm-img-2-p-500.webp 500w, https://assets.website-files.com/6368c10664bdf4fb19499ec9/6373d4e5a2e059e28463e641_btm-img-2.webp 620w" alt="" class="c-btm cc-2" /><img 1003 src="https://assets.website-files.com/6368c10664bdf4fb19499ec9/6373d4e5bb8f6ff5a77e05be_btm-img.webp" loading="lazy" width="310" height="310" sizes="(max-width: 991px) 174.375px, 22vw" srcset="https://assets.website-files.com/6368c10664bdf4fb19499ec9/6373d4e5bb8f6ff5a77e05be_btm-img-p-500.webp 500w, https://assets.website-files.com/6368c10664bdf4fb19499ec9/6373d4e5bb8f6ff5a77e05be_btm-img.webp 620w" alt="" class="c-btm cc-3" /></div> 1004 <div class="c-visual-images-wrapper cc-btm-mid"><img src="https://assets.website-files.com/6368c10664bdf4fb19499ec9/6373d3af2683dc237ce12903_btm-middle-img-1.webp" loading="lazy" width="420" height="236" sizes="(max-width: 991px) 236.25px, 29vw" 1005 srcset="https://assets.website-files.com/6368c10664bdf4fb19499ec9/6373d3af2683dc237ce12903_btm-middle-img-1-p-500.webp 500w, https://assets.website-files.com/6368c10664bdf4fb19499ec9/6373d3af2683dc237ce12903_btm-middle-img-1-p-800.webp 800w, https://assets.website-files.com/6368c10664bdf4fb19499ec9/6373d3af2683dc237ce12903_btm-middle-img-1.webp 840w" alt="" class="c-btm-mid" /><img 1006 src="https://assets.website-files.com/6368c10664bdf4fb19499ec9/6373d3b035763e86656ddfb9_btm-middle-img-2.webp" loading="lazy" width="530" height="222" sizes="(max-width: 479px) 100vw, (max-width: 991px) 298.125px, 37vw" 1007 srcset="https://assets.website-files.com/6368c10664bdf4fb19499ec9/6373d3b035763e86656ddfb9_btm-middle-img-2-p-500.webp 500w, https://assets.website-files.com/6368c10664bdf4fb19499ec9/6373d3b035763e86656ddfb9_btm-middle-img-2-p-800.webp 800w, https://assets.website-files.com/6368c10664bdf4fb19499ec9/6373d3b035763e86656ddfb9_btm-middle-img-2.webp 1060w" alt="" class="c-btm-mid cc-2" /><img 1008 src="https://assets.website-files.com/6368c10664bdf4fb19499ec9/6373d3afa5d981f20bcb5b74_btm-middle-img.webp" loading="lazy" width="575" height="323" sizes="(max-width: 479px) 100vw, (max-width: 991px) 323.4375px, 40vw" 1009 srcset="https://assets.website-files.com/6368c10664bdf4fb19499ec9/6373d3afa5d981f20bcb5b74_btm-middle-img-p-500.webp 500w, https://assets.website-files.com/6368c10664bdf4fb19499ec9/6373d3afa5d981f20bcb5b74_btm-middle-img-p-800.webp 800w, https://assets.website-files.com/6368c10664bdf4fb19499ec9/6373d3afa5d981f20bcb5b74_btm-middle-img-p-1080.webp 1080w, https://assets.website-files.com/6368c10664bdf4fb19499ec9/6373d3afa5d981f20bcb5b74_btm-middle-img.webp 1150w" alt="" 1010 class="c-btm-mid cc-3" /></div> 1011 <div class="c-visual-images-wrapper cc-top-mid"><img src="https://assets.website-files.com/6368c10664bdf4fb19499ec9/6373d250a38e3f41c0b8b611_top-middle-img-2.webp" loading="lazy" width="420" height="280" sizes="(max-width: 991px) 236.25px, 29vw" 1012 srcset="https://assets.website-files.com/6368c10664bdf4fb19499ec9/6373d250a38e3f41c0b8b611_top-middle-img-2-p-500.webp 500w, https://assets.website-files.com/6368c10664bdf4fb19499ec9/6373d250a38e3f41c0b8b611_top-middle-img-2-p-800.webp 800w, https://assets.website-files.com/6368c10664bdf4fb19499ec9/6373d250a38e3f41c0b8b611_top-middle-img-2.webp 840w" alt="" class="c-top-mid-img" /><img 1013 src="https://assets.website-files.com/6368c10664bdf4fb19499ec9/6373d2508f26e91048e51b31_top-middle-img.webp" loading="lazy" width="310" height="464" sizes="(max-width: 991px) 174.375px, 22vw" srcset="https://assets.website-files.com/6368c10664bdf4fb19499ec9/6373d2508f26e91048e51b31_top-middle-img-p-500.webp 500w, https://assets.website-files.com/6368c10664bdf4fb19499ec9/6373d2508f26e91048e51b31_top-middle-img.webp 620w" alt="" class="c-top-mid-img cc-2" /><img 1014 src="https://assets.website-files.com/6368c10664bdf4fb19499ec9/6373d251a5d9815aa6cb4257_top-middle-img-1.webp" loading="lazy" width="420" height="280" sizes="(max-width: 991px) 236.25px, 29vw" 1015 srcset="https://assets.website-files.com/6368c10664bdf4fb19499ec9/6373d251a5d9815aa6cb4257_top-middle-img-1-p-500.webp 500w, https://assets.website-files.com/6368c10664bdf4fb19499ec9/6373d251a5d9815aa6cb4257_top-middle-img-1-p-800.webp 800w, https://assets.website-files.com/6368c10664bdf4fb19499ec9/6373d251a5d9815aa6cb4257_top-middle-img-1.webp 840w" alt="" class="c-top-mid-img cc-3" /></div> 1016 <div class="c-visual-images-wrapper cc-top"><img src="https://assets.website-files.com/6368c10664bdf4fb19499ec9/6373d0c823ac2ec873640d4b_top-img-1.webp" loading="lazy" width="420" height="280" sizes="(max-width: 767px) 210px, (max-width: 991px) 236.25px, 29vw" 1017 srcset="https://assets.website-files.com/6368c10664bdf4fb19499ec9/6373d0c823ac2ec873640d4b_top-img-1-p-500.webp 500w, https://assets.website-files.com/6368c10664bdf4fb19499ec9/6373d0c823ac2ec873640d4b_top-img-1-p-800.webp 800w, https://assets.website-files.com/6368c10664bdf4fb19499ec9/6373d0c823ac2ec873640d4b_top-img-1.webp 840w" alt="" class="c-top-img" /><img src="https://assets.website-files.com/6368c10664bdf4fb19499ec9/6373d0c8cc0d177de300fb29_top-img-2.webp" 1018 loading="lazy" width="420" height="280" sizes="(max-width: 767px) 210px, (max-width: 991px) 236.25px, 29vw" srcset="https://assets.website-files.com/6368c10664bdf4fb19499ec9/6373d0c8cc0d177de300fb29_top-img-2-p-500.webp 500w, https://assets.website-files.com/6368c10664bdf4fb19499ec9/6373d0c8cc0d177de300fb29_top-img-2-p-800.webp 800w, https://assets.website-files.com/6368c10664bdf4fb19499ec9/6373d0c8cc0d177de300fb29_top-img-2.webp 840w" alt="" class="c-top-img cc-2" /><img 1019 src="https://assets.website-files.com/6368c10664bdf4fb19499ec9/6373d0c8a38e3f0b2db8a540_top-img-4.webp" loading="lazy" width="420" height="235" sizes="(max-width: 767px) 210px, (max-width: 991px) 236.25px, 29vw" 1020 srcset="https://assets.website-files.com/6368c10664bdf4fb19499ec9/6373d0c8a38e3f0b2db8a540_top-img-4-p-500.webp 500w, https://assets.website-files.com/6368c10664bdf4fb19499ec9/6373d0c8a38e3f0b2db8a540_top-img-4-p-800.webp 800w, https://assets.website-files.com/6368c10664bdf4fb19499ec9/6373d0c8a38e3f0b2db8a540_top-img-4.webp 840w" alt="" class="c-top-img cc-3" /><img src="https://assets.website-files.com/6368c10664bdf4fb19499ec9/6373d0c8a38e3f0b2db8a540_top-img-4.webp" 1021 loading="lazy" width="420" height="235" sizes="(max-width: 767px) 210px, (max-width: 991px) 236.25px, 29vw" srcset="https://assets.website-files.com/6368c10664bdf4fb19499ec9/6373d0c8a38e3f0b2db8a540_top-img-4-p-500.webp 500w, https://assets.website-files.com/6368c10664bdf4fb19499ec9/6373d0c8a38e3f0b2db8a540_top-img-4-p-800.webp 800w, https://assets.website-files.com/6368c10664bdf4fb19499ec9/6373d0c8a38e3f0b2db8a540_top-img-4.webp 840w" alt="" class="c-top-img cc-3" /><img 1022 src="https://assets.website-files.com/6368c10664bdf4fb19499ec9/6373d0c8a050660eb7d50f20_top-img.webp" loading="lazy" width="310" height="310" sizes="(max-width: 767px) 155px, (max-width: 991px) 174.375px, 22vw" srcset="https://assets.website-files.com/6368c10664bdf4fb19499ec9/6373d0c8a050660eb7d50f20_top-img-p-500.webp 500w, https://assets.website-files.com/6368c10664bdf4fb19499ec9/6373d0c8a050660eb7d50f20_top-img.webp 620w" alt="" class="c-top-img cc-4" /><img 1023 src="https://assets.website-files.com/6368c10664bdf4fb19499ec9/6373d0c8cc0d17a82800fb2a_top-img-3.webp" loading="lazy" width="530" height="222" sizes="(max-width: 479px) 100vw, (max-width: 767px) 265px, (max-width: 991px) 298.125px, 37vw" 1024 srcset="https://assets.website-files.com/6368c10664bdf4fb19499ec9/6373d0c8cc0d17a82800fb2a_top-img-3-p-500.webp 500w, https://assets.website-files.com/6368c10664bdf4fb19499ec9/6373d0c8cc0d17a82800fb2a_top-img-3-p-800.webp 800w, https://assets.website-files.com/6368c10664bdf4fb19499ec9/6373d0c8cc0d17a82800fb2a_top-img-3.webp 1060w" alt="" class="c-top-img cc-5" /></div> 1025 </div> 1026 </div> 1027 <div PT-Serif="1" data-w-id="a53a98e9-635c-93ba-c7f1-813a717fcf76" class="c-section cc-ui-kit wf-section"> 1028 <div class="c-container-wg"> 1029 <div class="c-ui-wrapper"><img src="https://assets.website-files.com/6368c10664bdf4fb19499ec9/637379b384c9824c041a4eb2_single-torch.svg" loading="lazy" width="217" height="228" alt="" class="c-ui-torch" /> 1030 <div text-gradient="1" class="c-content-wrapper"> 1031 <h2 Amarante="1" class="c-title-3">MAGIC UI-KIT</h2> 1032 </div> 1033 <p class="c-text-1">The result combines magic references with gaming UI to deliver the right balance between UX and engagement. All powered by Webflow.</p> 1034 </div><img src="https://assets.website-files.com/6368c10664bdf4fb19499ec9/63761a22f7db424189513b1e_main-ui_clock-step.svg" loading="lazy" width="306" height="91" alt="" class="c-ui-kit cc-1" /><img src="https://assets.website-files.com/6368c10664bdf4fb19499ec9/63761a22b5db3fa43a6613d0_Group%20378.svg" loading="lazy" width="476" height="92" alt="" class="c-ui-kit cc-2" /><img src="https://assets.website-files.com/6368c10664bdf4fb19499ec9/63761a21235a7384bdaddb8e_main-ui_box-item.svg" 1035 loading="lazy" width="165" height="122" alt="" class="c-ui-kit cc-3" /><img src="https://assets.website-files.com/6368c10664bdf4fb19499ec9/63761a23a06a3c8552622a42_sec-ui_language-dropdown.svg" loading="lazy" width="194" height="283" alt="" class="c-ui-kit cc-4" /><img src="https://assets.website-files.com/6368c10664bdf4fb19499ec9/63761a22e06a6f6a12570ed4_main-ui_option-item.svg" loading="lazy" width="1138" height="120" alt="" class="c-ui-kit cc-5" /> 1036 </div> 1037 </div> 1038 <div PT-Serif="1" class="c-section cc-creative-dev wf-section"> 1039 <div class="c-custom-code w-embed"> 1040 <style> 1041 .cc-invisible { 1042 opacity: 0; 1043 will-change: opacity; 1044 } 1045 1046 .c-ui_checkbox:hover .c-ui_checkbox-box { 1047 opacity: 1; 1048 } 1049 1050 .c-ui_checkbox[no-pointer] { 1051 color: #0611EA; 1052 } 1053 1054 .c-ui_checkbox[no-pointer] .c-ui_checkbox-box { 1055 border-color: #0611EA; 1056 opacity: 1; 1057 } 1058 1059 .c-ui_checkbox:has(input:checked) .c-ui_checkbox-box { 1060 display: none; 1061 } 1062 1063 .c-ui_checkbox:has(input:checked) .c-ui_checkbox-eye { 1064 display: block; 1065 } 1066 1067 .c-ui_checkbox:has(input:checked) .c-ui_checkbox-eye.cc-unique { 1068 display: none; 1069 } 1070 1071 .c-ui_checkbox:has(input:checked) .c-ui_checkbox-eye.cc-unique.cc-hide { 1072 display: block; 1073 } 1074 1075 .c-ui_checkbox { 1076 -webkit-user-select: none; 1077 -moz-user-select: none;
1078 -ms-user-select: none; 1079 user-select: none; 1080 } 1081 1082 [ui-modal] { 1083 will-change: transform; 1084 } 1085 1086 [ui-modal].cc-open { 1087 -webkit-transform: translate(0%, -50%); 1088 -ms-transform: translate(0%, -50%); 1089 transform: translate(0%, -50%); 1090 will-change: transform; 1091 } 1092 1093 [ui-screen-wrapper].cc-open { 1094 -webkit-transform: scale(0.9); 1095 -ms-transform: scale(0.9); 1096 transform: scale(0.9); 1097 will-change: transform; 1098 } 1099 1100 [ui-screen-wrapper] { 1101 will-change: transform; 1102 } 1103 </style> 1104 </div> 1105 <div class="c-container-wg"> 1106 <div no-pointer="1" class="c-weglot-gradient-circle-wrapper-move"> 1107 <div creative="circle-scale" class="c-weglot-gradient-circle-wrapper-movec-weglot-gradient-circle-wrapper-scale"> 1108 <div creative="circle-rotate" class="c-weglot-gradient-circle"></div> 1109 </div> 1110 </div> 1111 <div class="c-intro-wrapper cc-xlarge"> 1112 <div text-gradient="1" class="c-content-wrapper cc-40"> 1113 <h2 text-split="1" Amarante="1" words-slide-up="1" class="c-title-1-wg">- CREATIVE - DEVELOPMENT</h2> 1114 </div> 1115 <div class="c-section-divider-line"></div> 1116 <div class="c-challenge_text-wrapper cc-small"> 1117 <p text-split="1" words-slide-up="1" class="c-text-1">The development phase was divided into different components that include the stage, primary and secondary controls, and navigation. Combining form and function into smooth gameplay.</p> 1118 </div> 1119 </div> 1120 <div class="c-build-ui-wrapper"> 1121 <div class="c-build-ui_screen"> 1122 <div ui-screen-wrapper="1" class="c-ui-screen-wrapper">
1123 <div build-ui="text" class="c-build-ui_text"> 1124 <div text-gradient="1" class="c-content-wrapper"> 1125 <h2 Amarante="1" class="c-title-4-wg">BUILD THE UI</h2> 1126 </div> 1127 <p class="c-text-1">Use the checkboxes to unlock new components and build the entire game.</p> 1128 </div><img src="https://assets.website-files.com/6368c10664bdf4fb19499ec9/63739b1e3fd3205f17fabc83_Environment.svg" loading="lazy" ui-section="environment" height="627" width="1080" alt="" class="c-build-ui_section cc-env" /><img src="https://assets.website-files.com/6368c10664bdf4fb19499ec9/63739b1e4c436e84d82b133d_Main.svg" loading="lazy" width="1080" height="627" ui-section="main" alt="" class="c-build-ui_section" /><img 1129 src="https://assets.website-files.com/6368c10664bdf4fb19499ec9/63739b1e458c67fd5e717f0d_Secondary.svg" loading="lazy" width="1080" height="627" ui-section="secondary" alt="" class="c-build-ui_section" /><img src="https://assets.website-files.com/6368c10664bdf4fb19499ec9/63739d4edabf36be9eebefc2_Function.svg" loading="lazy" width="1080" height="627" ui-section="functionality" alt="" class="c-build-ui_section" /><img 1130 src="https://assets.website-files.com/6368c10664bdf4fb19499ec9/6373933dc8b86d5731addd62_Guide.svg" loading="lazy" width="1080" height="627" build-ui="guide" alt="" class="c-build-ui_guide" /> 1131 </div> 1132 <div ui-insights-wrapper="1" class="c-ui-insights"> 1133 <div class="c-insight"> 1134 <div ui-dot="1" class="c-insight-dot"> 1135 <div class="c-insight-dot-inner"></div> 1136 </div> 1137 <div ui-modal="1" class="c-insight-modal cc-right"> 1138 <div ui-modal-close="1" class="c-insight_close"> 1139 <div class="w-embed"><svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg"> 1140 <path d="M1 13L13 1M1 1L13 13" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" /> 1141 </svg></div> 1142 </div> 1143 <div class="c-insight-modal_wrapper"> 1144 <div class="c-content-wrapper"> 1145 <h3 Amarante="1" class="c-title-4-wg"><strong>Sound</strong></h3> 1146 </div> 1147 <p class="c-text-2">A range of audio was implemented to create an atmosphere and environment inside of the Weglot Like Magic. The background track kept players engaged during the game and additional feedback sounds on the UI elements added another layer of gamification to the browser experience.</p> 1148 </div> 1149 </div> 1150 </div> 1151 <div class="c-insight cc-2"> 1152 <div ui-dot="1" class="c-insight-dot cc-2"> 1153 <div class="c-insight-dot-inner"></div> 1154 </div> 1155 <div ui-modal="1" class="c-insight-modal cc-right"> 1156 <div ui-modal-close="1" class="c-insight_close"> 1157 <div class="w-embed"><svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg"> 1158 <path d="M1 13L13 1M1 1L13 13" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" /> 1159 </svg></div> 1160 </div> 1161 <div class="c-insight-modal_wrapper"> 1162 <div class="c-content-wrapper"> 1163 <h3 Amarante="1" class="c-title-4-wg">Modal Menus</h3> 1164 </div> 1165 <p class="c-text-2">The main menu for the UI was created to help users understand the functionality of the game, as well as the collaboration of Refokus x Weglot and the prizes available to win through the game. Implementing the modals through Webflow’s Interactions and Animations tools and using custom code to trigger the different modals at different stages of the user journey to create a seamless user flow.<
1165/p> 1166 </div> 1167 </div> 1168 </div> 1169 <div class="c-insight"> 1170 <div ui-dot="1" class="c-insight-dot cc-3"> 1171 <div class="c-insight-dot-inner"></div> 1172 </div> 1173 <div ui-modal="1" class="c-insight-modal cc-right"> 1174 <div ui-modal-close="1" class="c-insight_close"> 1175 <div class="w-embed"><svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg"> 1176 <path d="M1 13L13 1M1 1L13 13" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" /> 1177 </svg></div> 1178 </div> 1179 <div class="c-insight-modal_wrapper"> 1180 <div class="c-content-wrapper"> 1181 <h3 Amarante="1" class="c-title-4-wg">Canvas Clues</h3> 1182 </div> 1183 <p class="c-text-2">We placed different clues inside of the stage, which are revealed by the users magic torch. The main task of the game for the user, is to find the clues! A smart use of blending modes allows the torch to come to life and to reveal the clues. Custom code was implemented to randomly place the clues around the game canvas per question.</p> 1184 </div> 1185 </div> 1186 </div> 1187 <div class="c-insight"> 1188 <div ui-dot="1" class="c-insight-dot cc-4"> 1189 <div class="c-insight-dot-inner"></div> 1190 </div> 1191 <div ui-modal="1" class="c-insight-modal cc-right"> 1192 <div ui-modal-close="1" class="c-insight_close"> 1193 <div class="w-embed"><svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg"> 1194 <path d="M1 13L13 1M1 1L13 13" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" /> 1195 </svg></div> 1196 </div> 1197 <div class="c-insight-modal_wrapper"> 1198 <div class="c-content-wrapper"> 1199 <h3 Amarante="1" class="c-title-4-wg"><strong>Game Controls</strong></h3> 1200 </div> 1201 <p class="c-text-2">The main controls for the game were implemented in Webflow which included:<br />Injecting the word that needs to be guessed through custom code, for each round using the powerful Webflow CMS to store all of the words, clues and wrong answers for the game.<br />Creating all of the states for the buttons, which included user feedback for correct and incorrect answers that even flowed into the surrounding UI when a decision was made.</p> 1202 </div> 1203 </div> 1204 </div> 1205 <div class="c-insight"> 1206 <div ui-dot="1" class="c-insight-dot cc-5"> 1207 <div class="c-insight-dot-inner"></div> 1208 </div> 1209 <div ui-modal="1" class="c-insight-modal"> 1210 <div ui-modal-close="1" class="c-insight_close"> 1211 <div class="w-embed"><svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg"> 1212 <path d="M1 13L13 1M1 1L13 13" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" /> 1213 </svg></div> 1214 </div> 1215 <div class="c-insight-modal_wrapper"> 1216 <div class="c-content-wrapper"> 1217 <h3 Amarante="1" class="c-title-4-wg"><strong>Custom Cursor</strong></h3> 1218 </div> 1219 <p class="c-text-2">A custom cursor was implemented to further gamify the browser game which animated through mouse position on the different UI elements across the viewport. Inside of this custom cursor - the users main tool in winning this game - the light of the magic torch reveals the clues inside of the canvas.</p> 1220 </div> 1221 </div> 1222 </div> 1223 <div class="c-insight"> 1224 <div ui-dot="1" class="c-insight-dot cc-6"> 1225 <div class="c-insight-dot-inner"></div> 1226 </div> 1227 <div ui-modal="1" class="c-insight-modal"> 1228 <div ui-modal-close="1" class="c-insight_close"> 1229 <div class="w-embed"><svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg"> 1230 <path d="M1 13L13 1M1 1L13 13" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" /> 1231 </svg></div> 1232 </div> 1233 <div class="c-insight-modal_wrapper"> 1234 <div class="c-content-wrapper cc-text-align-left"> 1235 <h3 Amarante="1" class="c-title-4-wg"><strong>Language Dropdown (Powered by Weglot)</strong></h3> 1236 </div> 1237 <p class="c-text-2">Opening the dropdown in the game UI reveals a selection of languages in which the game can be played. This feature is directly powered by the Weglot Integration, which ensures that everyone could enjoy the magic at Webflow Conference.</p> 1238 </div> 1239 </div> 1240 </div> 1241 <div class="c-insight"> 1242 <div ui-dot="1" class="c-insight-dot cc-7"> 1243 <div class="c-insight-dot-inner"></div> 1244 </div> 1245 <div ui-modal="1" class="c-insight-modal"> 1246 <div ui-modal-close="1" class="c-insight_close"> 1247 <div class="w-embed"><svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg"> 1248 <path d="M1 13L13 1M1 1L13 13" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" /> 1249 </svg></div> 1250 </div> 1251 <div class="c-insight-modal_wrapper"> 1252 <div class="c-content-wrapper"> 1253 <h3 Amarante="1" class="c-title-4-wg"><strong>Game Metrics</strong></h3> 1254 </div> 1255 <p class="c-text-2">The game logic was developed with plain javascript in a git centered approach and hosted on a Vercel server. While we wanted to stay as Webflow native as possible we were able to create most of the UI and even animations inside of Webflow. We used data-attributes to communicate between the codebase and the frontend canvas. By using Weglots API and Webflow CMS system the content translation and management is fully dynamic and can be scaled 1256 up in the future by the client themselves without touching the basecode.</p> 1257 </div> 1258 </div> 1259 </div> 1260 <div class="c-insight"> 1261 <div ui-dot="1" class="c-insight-dot cc-8"> 1262 <div class="c-insight-dot-inner"></div> 1263 </div> 1264 <div ui-modal="1" class="c-insight-modal"> 1265 <div ui-modal-close="1" class="c-insight_close"> 1266 <div class="w-embed"><svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg"> 1267 <path d="M1 13L13 1M1 1L13 13" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" /> 1268 </svg></div> 1269 </div> 1270 <div class="c-insight-modal_wrapper"> 1271 <div class="c-content-wrapper"> 1272 <h3 Amarante="1" class="c-title-4-wg"><strong>Stage Elements</strong></h3> 1273 </div> 1274 <p class="c-text-2">The main stage, entirely built within Webflow is utilising the true power of visual development. Combining the use of Webflow Symbols, Animations and Interactions to build the curtains at the edges of the viewport and to create a feeling of theatre as you take your journey through Weglot Like Magic.</p> 1275 </div> 1276 </div> 1277 </div> 1278 </div> 1279 </div> 1280 <div Amarante="1" class="c-build-ui-form-block w-form"> 1281 <form id="email-form" name="email-form" data-name="Email Form" method="get" class="c-build-ui-form"> 1282 <div class="c-ui-checkboxes_wrapper cc-small"><label class="w-checkbox c-ui_checkbox"> 1283 <div class="w-checkbox-input w-checkbox-input--inputType-custom c-ui_checkbox-box cc-hide w--redirected-checked"></div><input type="checkbox" id="checkbox" name="checkbox" data-name="Checkbox" checked="" ui-guide="1" style="opacity:0;position:absolute;z-index:-1" /><img src="https://assets.website-files.com/6368c10664bdf4fb19499ec9/6373a0d8d86a1215c3866d21_small-eye.svg" loading="lazy" width="16" height="16" alt="" 1284 class="c-ui_checkbox-eye cc-unique cc-hide" /><img src="https://assets.website-files.com/6368c10664bdf4fb19499ec9/6373a394c8dbbf6286241b2b_eye-off.svg" loading="lazy" alt="" class="c-ui_checkbox-eye cc-unique" /><span class="c-text-2-wg w-form-label" for="checkbox">Skeleton</span> 1285 </label> 1286 <div class="c-ui-checkboxes_border cc-blue"></div> 1287 </div> 1288 <div class="c-ui-checkboxes_wrapper"><label class="w-checkbox c-ui_checkbox"> 1289 <div class="w-checkbox-input w-checkbox-input--inputType-custom c-ui_checkbox-box"></div><input type="checkbox" id="Checkbox" name="Checkbox" data-name="Checkbox" ui="main" style="opacity:0;position:absolute;z-index:-1" /><img src="https://assets.website-files.com/6368c10664bdf4fb19499ec9/6373a0d8d86a1215c3866d21_small-eye.svg" loading="eager" width="16" height="16" alt="" class="c-ui_checkbox-eye" /><span class="c-text-2-wg w-form-label" 1290 for="Checkbox">Main-UI</span> 1291 </label><img src="https://assets.website-files.com/6368c10664bdf4fb19499ec9/6373a14cf6ab3147fbefd976_arrow.svg" loading="lazy" width="20" height="5" alt="" /><label no-pointer="1" class="w-checkbox c-ui_checkbox"> 1292 <div class="w-checkbox-input w-checkbox-input--inputType-custom c-ui_checkbox-box"></div><input type="checkbox" id="checkbox-4" name="checkbox-4" data-name="Checkbox 4" ui="secondary" style="opacity:0;position:absolute;z-index:-1" /><img src="https://assets.website-files.com/6368c10664bdf4fb19499ec9/6373a0d8d86a1215c3866d21_small-eye.svg" loading="lazy" width="16" height="16" alt="" class="c-ui_checkbox-eye" /><span class="c-text-2-wg w-form-label" 1293 for="checkbox-4">Secondary-UI</span> 1294 </label><img src="https://assets.website-files.com/6368c10664bdf4fb19499ec9/6373a14cf6ab3147fbefd976_arrow.svg" loading="lazy" width="20" height="5" alt="" /><label no-pointer="1" class="w-checkbox c-ui_checkbox"> 1295 <div class="w-checkbox-input w-checkbox-input--inputType-custom c-ui_checkbox-box"></div><input type="checkbox" id="checkbox-3" name="checkbox-3" data-name="Checkbox 3" ui="functionality" style="opacity:0;position:absolute;z-index:-1" /><img src="https://assets.website-files.com/6368c10664bdf4fb19499ec9/6373a0d8d86a1215c3866d21_small-eye.svg" loading="lazy" width="16" height="16" alt="" class="c-ui_checkbox-eye" /><span class="c-text-2-wg w-form-label" 1296 for="checkbox-3">Functionality</span> 1297 </label><img src="https://assets.website-files.com/6368c10664bdf4fb19499ec9/6373a14cf6ab3147fbefd976_arrow.svg" loading="lazy" width="20" height="5" alt="" /><label no-pointer="1" class="w-checkbox c-ui_checkbox"> 1298 <div class="w-checkbox-input w-checkbox-input--inputType-custom c-ui_checkbox-box"></div><input type="checkbox" id="checkbox-2" name="checkbox-2" data-name="Checkbox 2" ui="environment" style="opacity:0;position:absolute;z-index:-1" /><img src="https://assets.website-files.com/6368c10664bdf4fb19499ec9/6373a0d8d86a1215c3866d21_small-eye.svg" loading="lazy" width="16" height="16" alt="" class="c-ui_checkbox-eye" /><span class="c-text-2-wg w-form-label" 1299 for="checkbox-2">Environment</span> 1300 </label> 1301 <div class="c-ui-checkboxes_border"></div> 1302 </div> 1303 <div class="c-ui-checkboxes_wrapper cc-small"><label class="w-checkbox c-ui_checkbox"> 1304 <div class="w-checkbox-input w-checkbox-input--inputType-custom c-ui_checkbox-box cc-hide"></div><input type="checkbox" id="checkbox-6" name="checkbox-6" data-name="Checkbox 6" ui-insights="1" style="opacity:0;position:absolute;z-index:-1" /><img src="https://assets.website-files.com/6368c10664bdf4fb19499ec9/6373a0d8d86a1215c3866d21_small-eye.svg" loading="lazy" alt="" class="c-ui_checkbox-eye cc-unique cc-hide" /><img 1305 src="https://assets.website-files.com/6368c10664bdf4fb19499ec9/6373a394c8dbbf6286241b2b_eye-off.svg" loading="lazy" width="16" height="16" alt="" class="c-ui_checkbox-eye cc-unique" /><span class="c-text-2-wg w-form-label" for="checkbox-6">Insights</span> 1306 </label> 1307 <div class="c-ui-checkboxes_border cc-blue"></div> 1308 </div> 1309 </form> 1310 <div class="w-form-done"> 1311 <div>Thank you! Your submission has been received!</div> 1312 </div> 1313 <div class="w-form-fail"> 1314 <div>Oops! Something went wrong while submitting the form.</div> 1315 </div> 1316 </div> 1317 </div> 1318 <div no-pointer="1" class="c-footer-curtains-wrapper"> 1319 <div class="c-weglot-footer-black"></div><img src="https://assets.website-files.com/6368c10664bdf4fb19499ec9/636cdd1e5e9b04e90355f37c_curtains-right.svg" loading="lazy" data-w-id="abfb7455-d46e-0b72-c1ee-12b345b91554" no-pointer="1" alt="" class="c-weglot-hero_curtains cc-footer" /> 1320 <div no-pointer="1" flip-x="1" class="c-weglot-hero_curtains cc-left"><img src="https://assets.website-files.com/6368c10664bdf4fb19499ec9/636cdd1e5e9b04e90355f37c_curtains-right.svg" loading="lazy" data-w-id="6b59ae77-0141-291c-b991-8c8ebbef30a9" no-pointer="1" alt="" class="c-weglot-hero_curtains cc-footer" /></div><img src="https://assets.website-files.com/6368c10664bdf4fb19499
1320ec9/636cdfb6656d6710c2806408_curtains-top.svg" loading="lazy" 1321 data-w-id="cd87cfee-0a2d-90de-3f32-21ec2dd4383e" no-pointer="1" alt="" class="c-weglot-hero_curtains cc-top cc-footer" /> 1322 </div> 1323 <div Amarante="1" data-w-id="d4ac9605-b332-c60a-e108-707678228098" class="c-wg-footer"> 1324 <div class="c-weglot-like-magic-lottie" data-w-id="c7d74c94-de18-9d72-fd63-1ba596ea364a" data-animation-type="lottie" data-src="https://assets.website-files.com/6368c10664bdf4fb19499ec9/63777d72964b879f48843ae0_floating_typo.json" data-loop="1" data-direction="1" data-autoplay="1" data-is-ix2-target="0" data-renderer="svg" data-default-duration="4" data-duration="0"></div><a href="https://www.weglot-like-magic.com/" target="_blank" class="c-start_button w-inline-block"> 1325 <div class="c-button_main_outer"> 1326 <div class="c-button_main_inner"> 1327 <div> 1328 <div class="c-clone_text"> 1329 <div>LET THE MAGIC BEGIN!</div> 1330 </div> 1331 <div class="c-button_text"> 1332 <div>LET THE MAGIC BEGIN!</div> 1333 </div> 1334 </div> 1335 </div> 1336 </div> 1337 </a><img src="https://assets.website-files.com/6368c10664bdf4fb19499ec9/637b916d6f8fe01888391606_award-css-UX.png" loading="lazy" width="156.5" 1338 style="-webkit-transform:translate3d(0, 260px, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0deg) skew(0, 0);-moz-transform:translate3d(0, 260px, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0deg) skew(0, 0);-ms-transform:translate3d(0, 260px, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0deg) skew(0, 0);transform:translate3d(0, 260px, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0deg) skew(0, 0)" alt="" class="c-weglot-award cc-1" /><img 1339 src="https://assets.website-files.com/6368c10664bdf4fb19499ec9/637b916a300b9ccd0209fcfc_combo.png" loading="lazy" width="156.5" 1340 style="-webkit-transform:translate3d(0, 260px, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0deg) skew(0, 0);-moz-transform:translate3d(0, 260px, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0deg) skew(0, 0);-ms-transform:translate3d(0, 260px, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0deg) skew(0, 0);transform:translate3d(0, 260px, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0deg) skew(0, 0)" alt="" class="c-weglot-award cc-2" /><img 1341 src="https://assets.website-files.com/6368c10664bdf4fb19499ec9/637b916c2646926c8ee9734a_award-css-wotd.png" loading="lazy" width="156.5" 1342 style="-webkit-transform:translate3d(0, 260px, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0deg) skew(0, 0);-moz-transform:translate3d(0, 260px, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0deg) skew(0, 0);-ms-transform:translate3d(0, 260px, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0deg) skew(0, 0);transform:translate3d(0, 260px, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0deg) skew(0, 0)" alt="" class="c-weglot-award cc-3" /><img 1343 src="https://assets.website-files.com/6368c10664bdf4fb19499ec9/637ba7cf8a40ed79be55f868_award-css-inn.png" loading="lazy" width="156.5" 1344 style="-webkit-transform:translate3d(0, 260px, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0deg) skew(0, 0);-moz-transform:translate3d(0, 260px, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0deg) skew(0, 0);-ms-transform:translate3d(0, 260px, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0deg) skew(0, 0);transform:translate3d(0, 260px, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0deg) skew(0, 0)" alt="" class="c-weglot-award cc-4" /> 1345 </div> 1346 </div> 1347 </div> 1348 <div data-w-id="87a81841-b17b-bff7-24e9-850418c44752" class="c-footer-wrapper-weglot"> 1349 <div id="footer-black" class="cc-relative"> 1350 <div class="c-custom-code w-embed"> 1351 <style> 1352 .c-footer { 1353 background-color: #1b1b1b; 1354 color: white; 1355 background-image: url(https://assets.website-files.com/6334198f239547d0f9cd84b3/635131420c9e8eb85f8da2af_Refokus%20R.png); 1356 } 1357 1358 .c-footer a.c-text-3.cc-link.cc-black { 1359 color: white; 1360 } 1361 1362 .c-footer .c-section-divider { 1363 border-color: #3E3E46; 1364 } 1365 1366 .c-footer .c-section-divider .c-section-divider_circle { 1367 background: white; 1368 } 1369 </style> 1370 </div> 1371 <footer id="footer" class="c-footer"> 1372 <div class="c-custom-code w-embed w-script"> 1373
1373<script> 1374 var Webflow = Webflow || []; 1375 Webflow.push(function () { 1376 gsap.fromTo('.c-footer', { 1377 backgroundPosition: '30vw 20vw' 1378 }, { 1379 scrollTrigger: { 1380 trigger: '.c-footer', 1381 start: 'top 95%', 1382 toggleActions: 'play none none reverse' 1383 }, 1384 duration: 1, 1385 backgroundPosition: '30vw 2vw', 1386 ease: "power2.inOut" 1387 }); 1388 1389 $('.c-footer_menu-list a').hover( 1390 (e) => { 1391 console.log(this) 1392 $(e.currentTarget).parents('.c-footer_menu-col').find('.c-footer_menu-title').css('color', '#7443ff') 1393 }, 1394 (e) => { 1395 $(e.currentTarget).parents('.c-footer_menu-col').find('.c-footer_menu-title').css('color', '#868691') 1396 }, 1397 ) 1398 }); 1399 </script>
1399 1400 </div> 1401 <div class="c-container"> 1402 <div class="c-section-divider"> 1403 <div class="c-section-divider_circle"></div> 1404 </div> 1405 <div class="c-footer_wrapper"> 1406 <div class="c-footer_title"> 1407 <div class="c-footer_logo w-embed"><svg xmlns="http://www.w3.org/2000/svg" width="100%" viewBox="0 0 670 151" fill="none"> 1408 <path d="M58.1557 49.1955V68.4721H49.5326C40.709 68.4721 33.6902 71.0155 28.4762 76.1024C23.396 81.0554 20.8558 88.2841 20.8558 97.7886V148.39H0V49.9987H19.4521L21.2569 70.0785H19.2515C20.5885 63.5191 23.7302 58.2314 28.6768 54.2154C33.757 50.0656 40.1742 47.9907 47.9283 47.9907C49.6663 47.9907 51.3374 48.1246 52.9417 48.3923C54.546 48.5262 56.284 48.7939 58.1557 49.1955Z" fill="currentColor" /> 1409 <path 1410 d="M111.173 151C101.547 151 92.9906 148.791 85.5039 144.374C78.1509 139.956 72.3353 133.865 68.0572 126.101C63.9128 118.337 61.8406 109.368 61.8406 99.1942C61.8406 88.8865 63.8459 79.8506 67.8567 72.0864C72.0011 64.1884 77.683 58.0306 84.9023 53.613C92.2553 49.1955 100.745 46.9867 110.37 46.9867C119.863 46.9867 128.085 49.0616 135.037 53.2114C142.122 57.2274 147.604 62.9167 151.481 70.2793C155.358 77.6418 157.296 86.2761 157.296 96.1822V103.411L72.8701 103.612L73.2712 89.9574H136.641C136.641 82.1933 134.234 75.9685 129.421 71.2832C124.742 66.598 118.392 64.2553 110.37 64.2553C104.354 64.2553 99.2073 65.594 94.9292 68.2713C90.651 70.9486 87.3756 74.8307 85.1028 79.9175C82.8301 85.0044 81.6937 91.1622 81.6937 98.391C81.6937 109.903 84.2338 118.672 89.3141 124.695C94.3944 130.719 101.814 133.731 111.574 133.731C118.659 133.731 124.475 132.326 129.02 129.515C133.566 126.703 136.574 122.688 138.045 117.467H157.497C155.224 127.908 150.01 136.141 141.855 142.165C133.833 148.055 123.606 151 111.173 151Z" 1411 fill="currentColor" /> 1412 <path 1413 d="M163.488 49.7979H222.044V67.2673H163.488V49.7979ZM222.446 1.00399V18.6742C221.242 18.6742 219.905 18.6742 218.435 18.6742C217.098 18.6742 215.627 18.6742 214.023 18.6742C207.873 18.6742 203.729 20.2137 201.59 23.2926C199.584 26.2376 198.582 30.2535 198.582 35.3404V148.39H177.926V35.3404C177.926 27.0408 179.33 20.2806 182.138 15.0598C184.945 9.83909 188.755 6.02394 193.568 3.61436C198.515 1.20479 204.197 0 210.614 0C212.486 0 214.424 0.0669317 216.429 0.200795C218.568 0.334659 220.574 0.60239 222.446 1.00399Z" 1414 fill="currentColor" /> 1415 <path 1416 d="M225.764 98.9934C225.764 88.8196 227.97 79.8506 232.382 72.0864C236.927 64.3222 243.077 58.2314 250.831 53.8138C258.719 49.3963 267.609 47.1875 277.502 47.1875C287.529 47.1875 296.42 49.3963 304.174 53.8138C311.928 58.2314 318.011 64.3222 322.423 72.0864C326.968 79.8506 329.241 88.8196 329.241 98.9934C329.241 109.167 326.968 118.136 322.423 125.9C318.011 133.664 311.928 139.755 304.174 144.173C296.42 148.59 287.529 150.799 277.502 150.799C267.609 150.799 258.719 148.59 250.831 144.173C243.077 139.755 236.927 133.664 232.382 125.9C227.97 118.136 225.764 109.167 225.764 98.9934ZM246.62 98.9934C246.62 105.419 247.957 111.175 250.63 116.262C253.304 121.215 256.914 125.097 261.459 127.908C266.139 130.719 271.486 132.125 277.502 132.125C283.652 132.125 289 130.719 293.545 127.908C298.224 125.097 301.834 121.215 304.374 116.262C307.048 111.175 308.385 105.419 308.385 98.9934C308.385 92.3001 307.048 86.477 304.374 81.5239C301.834 76.5709 298.224 72.7558 293.545 70.0785C289 67.2673 283.652 65.8617 277.502 65.8617C271.486 65.8617 266.139 67.2673 261.459 70.0785C256.914 72.7558 253.304 76.5709 250.63 81.5239C247.957 86.477 246.62 92.3001 246.62 98.9934Z" 1417 fill="currentColor" /> 1418 <path d="M366.729 148.39H345.873V0H366.729V94.375L408.44 49.7979H434.51L397.01 89.1543L434.109 148.39H410.245L382.571 104.214L366.729 120.88V148.39Z" fill="currentColor" /> 1419 <path d="M512.836 49.7979H533.491V148.39H514.64L512.836 133.932C510.028 139.019 505.616 143.169 499.6 146.382C493.584 149.461 487.1 151 480.148 151C468.651 151 459.76 147.386 453.477 140.157C447.193 132.928 444.051 123.29 444.051 111.242V49.7979H464.907V104.214C464.907 114.254 466.913 121.483 470.923 125.9C474.934 130.184 480.482 132.326 487.568 132.326C495.857 132.326 502.14 129.782 506.418 124.695C510.696 119.609 512.836 111.978 512.836 101.805V49.7979Z" 1420 fill="currentColor" /> 1421 <path 1422 d="M546.421 119.274H566.274C566.408 124.093 568.146 127.908 571.488 130.719C574.83 133.397 579.509 134.735 585.525 134.735C591.943 134.735 596.822 133.531 600.165 131.121C603.641 128.578 605.379 125.231 605.379 121.081C605.379 118.136 604.443 115.66 602.571 113.652C600.833 111.644 597.491 110.037 592.544 108.832L575.098 104.616C566.408 102.608 559.857 99.395 555.445 94.9774C551.167 90.426 549.028 84.469 549.028 77.1064C549.028 70.8147 550.632 65.4601 553.841 61.0425C557.183 56.4911 561.662 53.0106 567.277 50.6011C573.025 48.1915 579.576 46.9867 586.929 46.9867C594.149 46.9867 600.432 48.3254 605.78 51.0027C611.261 53.5461 615.539 57.1605 618.614 61.8457C621.689 66.3972 623.226 71.8856 623.226 78.3112H603.574C603.44 73.492 601.836 69.7438 598.761 67.0665C595.686 64.2553 591.475 62.8497 586.127 62.8497C580.646 62.8497 576.368 64.0545 573.293 66.4641C570.352 68.8737 568.881 72.1534 568.881 76.3032C568.881 82.5949 573.493 86.8116 582.718 88.9535L600.165 93.1702C608.453 95.0443 614.67 98.1232 618.815 102.407C622.959 106.557 625.031 112.313 625.031 119.676C625.031 125.967 623.3
14226 131.523 620.018 136.342C616.676 141.027 611.996 144.641 605.98 147.185C599.964 149.728 593.012 151 585.124 151C573.226 151 563.801 148.122 556.849 142.366C549.897 136.476 546.421 128.778 546.421 119.274Z" 1423 fill="currentColor" /> 1424 <path d="M654.96 150.799C650.949 150.799 647.473 149.394 644.532 146.582C641.591 143.637 640.12 140.157 640.12 136.141C640.12 131.991 641.591 128.511 644.532 125.699C647.473 122.754 650.949 121.282 654.96 121.282C659.104 121.282 662.647 122.754 665.588 125.699C668.529 128.511 670 131.991 670 136.141C670 140.157 668.529 143.637 665.588 146.582C662.647 149.394 659.104 150.799 654.96 150.799Z" fill="currentColor" /> 1425 </svg></div> 1426 </div> 1427 <div class="c-footer_menu"> 1428 <div class="c-footer_menu-col"> 1429 <div class="c-footer_menu-title"> 1430 <div class="c-text-4">Socials</div> 1431 </div> 1432 <div class="c-footer_menu-list"><a href="https://www.instagram.com/refokusagency/" target="_blank" class="c-text-3 cc-bold cc-link">Instagram</a><a href="https://twitter.com/refokusagency" target="_blank" class="c-text-3 cc-bold cc-link">Twitter</a><a href="https://www.linkedin.com/company/refokusagency/mycompany/" target="_blank" class="c-text-3 cc-bold cc-link">LinkedIn</a></div> 1433 </div> 1434 <div class="c-footer_menu-col"> 1435 <div class="c-footer_menu-title"> 1436 <div class="c-text-4">Sitemap</div> 1437 </div> 1438 <div class="c-footer_menu-list"><a href="/" class="c-text-3 cc-bold cc-link cc-black">Home</a><a href="/services" class="c-text-3 cc-bold cc-link cc-black">Services</a><a href="/work" class="c-text-3 cc-bold cc-link cc-black">Work</a><a href="/contact" class="c-text-3 cc-bold cc-link cc-black">Contact</a></div> 1439 </div> 1440 <div class="c-footer_menu-col cc-large"> 1441 <p class="c-text-3 cc-bold">Refokus is a <span class="cc-black-300">full-service Webflow agency </span>designing and building <span class="cc-black-300">brands and websites </span>that empower growth.</p><img src="https://assets.website-files.com/6368c10664bdf4fb19499ec9/6368c1cdd820753034d0f903_Badge-EnterprisePartner-Blue%201.svg" loading="lazy" alt="Webflow Enterprise Partner batch for webflow agencies" class="c-webflow-badge" /> 1442 </div> 1443 </div> 1444 </div> 1445 <div class="c-footer_legal-wrapper"> 1446 <div class="w-embed w-script"><a href="https://www.iubenda.com/privacy-policy/16317949" class="c-text-3 cc-bold cc-link iubenda-nostyle no-brand iubenda-embed iub-legal-only" title="Privacy Policy">Privacy Policy</a> 1447
1447<script type="text/javascript">(function (w, d) {var loader = function () {var s = d.createElement("script"), tag = d.getElementsByTagName("script")[0]; s.src = "https://cdn.iubenda.com/iubenda.js"; tag.parentNode.insertBefore(s, tag);}; if (w.addEventListener) {w.addEventListener("load", loader, false);} else if (w.attachEvent) {w.attachEvent("onload", loader);} else {w.onload = loader;} })(window, document);</script>
1447 1448 </div> 1449 <div class="w-embed w-script"><a href="https://www.iubenda.com/privacy-policy/16317949/cookie-policy" class="c-text-3 cc-bold cc-link iubenda-nostyle no-brand iubenda-embed" title="Cookie Policy">Cookie Policy</a> 1450
1450<script type="text/javascript">(function (w, d) {var loader = function () {var s = d.createElement("script"), tag = d.getElementsByTagName("script")[0]; s.src = "https://cdn.iubenda.com/iubenda.js"; tag.parentNode.insertBefore(s, tag);}; if (w.addEventListener) {w.addEventListener("load", loader, false);} else if (w.attachEvent) {w.attachEvent("onload", loader);} else {w.onload = loader;} })(window, document);</script>
1450 1451 </div><a href="/impressum" class="c-text-3 cc-bold cc-link">Impressum</a><a href="http://terms-of-service" class="c-text-3 cc-bold cc-link">Terms</a> 1452 </div> 1453 </div> 1454 </footer> 1455 </div> 1456 </div> 1457
1457<script src="https://d3e54v103j8qbb.cloudfront.net/js/jquery-3.5.1.min.dc5e7f18c8.js?site=6368c10664bdf4fb19499ec9" type="text/javascript" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
1457 1458
1458<script src="https://assets.website-files.com/6368c10664bdf4fb19499ec9/js/refokus-cs.3f1090ebe.js" type="text/javascript"></script>
1458 1459 <!--[if lte IE 9]>
1459<script src="//cdnjs.cloudflare.com/ajax/libs/placeholders/3.0.2/placeholders.min.js"></script>
1459<![endif]--> 1460 <!-- Google Tag Manager (noscript) -->
vendor: 72 bytes, lines 1460-1461
1460 1461 <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=
1461GTM-WRHDDSZ
vendor: 87 bytes, lines 1461-1462
1461" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript> 1462
1462<!-- End Google Tag Manager (noscript) --> 1463 1464
1464<script src="https://cdn.refokus.com/refokus-redesign/gsap.min.js"></script>
1464 1465
1465<script src="https://cdn.refokus.com/refokus-redesign/ScrollTrigger.min.js"></script>
1465 1466 1467 <!-- Custom cursor --> 1468
1468<script> 1469 const cursor = document.querySelector('#cursor'); 1470 gsap.set(cursor, {xPercent: -50, yPercent: -50}); 1471 1472 window.addEventListener('mousemove', e => { 1473 gsap.to(cursor, {x: e.clientX, y: e.clientY, duration: 0}); 1474 }); 1475 </script>
1475 1476 1477 <!-- Nav dropdowns --> 1478
1478<script> 1479 const navbar = $('.c-nav') 1480 1481 // extension method: 1482 $.fn.classChange = function (cb) { 1483 return $(this).each((_, el) => { 1484 new MutationObserver(mutations => { 1485 mutations.forEach(mutation => cb && cb(mutation.target, $(mutation.target).prop(mutation.attributeName))); 1486 }).observe(el, { 1487 attributes: true, 1488 attributeFilter: ['class'] // only listen for class attribute changes 1489 }); 1490 }); 1491 } 1492 /* 1493 $(".c-nav-link.cc-dropdown").classChange((el, newClass) => { 1494 if (window.innerWidth < 992) return; 1495 1496 const dropdownToggle = $(el) 1497 const nav = dropdownToggle.parents('.c-nav') 1498 const isOpen = dropdownToggle.hasClass('w--open') 1499 1500 if (isOpen) { 1501 nav.removeClass('cc-blending') 1502 } else { 1503 nav.addClass('cc-blending') 1504 } 1505 }); 1506 1507 $(".c-nav .c-hamburger").classChange((el, newClass) => { 1508 const hamburger = $(el) 1509 const nav = hamburger.parents('.c-nav') 1510 const isOpen = hamburger.hasClass('w--open') 1511 1512 if (isOpen) { 1513 nav.removeClass('cc-blending') 1514 } else { 1515 nav.addClass('cc-blending') 1516 } 1517 }); 1518 */ 1519 $(".c-nav .c-hamburger, .c-nav-link.cc-dropdown").classChange((el, newClass) => { 1520 const hamburger = $(el) 1521 const nav = hamburger.parents('.c-nav') 1522 const isOpen = hamburger.hasClass('w--open') 1523 1524 if (isOpen) { 1525 nav.addClass('cc-open') 1526 } else { 1527 nav.removeClass('cc-open') 1528 } 1529 }); 1530 1531 1532 $('[nav-dropdown-back]').click(function () { 1533 const $this = $(this); 1534 const selector = $this.attr('nav-dropdown-back') 1535 $('.c-nav-link.cc-dropdown').trigger('tap') 1536 }) 1537 1538 const $cursor = $('#cursor') 1539 1540 $('a, [link-cursor]').hover( 1541 function () { 1542 $cursor.addClass('cc-link'); 1543 }, 1544 function () { 1545 $cursor.removeClass('cc-link'); 1546 }) 1547 </script>
1547 1548
1548<script> 1549 window.onbeforeunload = function () { 1550 window.scrollTo(0, 0); 1551 } 1552 </script>
1552 1553 1554
1554<script src="https://tools.refokus.com/magnifier/bundle.v1.0.0.js"></script>
1554 1555 1556 <!--
1556<script async hat-script type="module" data-src="https://cs-weglot.vercel.app/assets"></script>
1556 --> 1557 1558 1559
1559<script src="https://unpkg.com/split-type"></script>
1559 1560 1561 <style> 1562 .c-weglot-gradient-circle-wrapper-move { 1563 opacity: 1; 1564 } 1565 </style> 1566 1567 <!-- Handle Hat model responsive --> 1568
1568<script> 1569 // Create a condition that targets viewports max 767px wide 1570 const mediaQueryHat = window.matchMedia('(max-width: 767px)') 1571 const hatScript = document.querySelector('[hat-script]') 1572 function handleLandscapeSize(e) { 1573 if (e.matches) { 1574 hatScript.src = '' 1575 return 1576 } 1577 1578 hatScript.src = hatScript.dataset.src 1579 } 1580 1581 // Register event listener 1582 mediaQueryHat.addListener(handleLandscapeSize) 1583 1584 // Initial check 1585 handleLandscapeSize(mediaQueryHat) 1586 </script>
1586 1587 1588 <!-- UI Builder --> 1589
1589<script> 1590 const $buildText = $('[build-ui="text"]') 1591 const $guide = $('[build-ui="guide"]') 1592 const $insights = $('[ui-insights-wrapper]') 1593 const $uiScreenWrapper = $('[ui-screen-wrapper]') 1594 1595 // Create a condition that targets viewports min 992px wide 1596 const mediaQueryBuilder = window.matchMedia('(min-width: 992px)') 1597 function handleDesktopSize(e) { 1598 if (e.matches) { 1599 $(`[ui-section]`).addClass('cc-invisible') 1600 $insights.addClass('cc-invisible') 1601 1602 return 1603 } 1604 1605 $(`[ui-section]`).removeClass('cc-invisible') 1606 $insights.removeClass('cc-invisible') 1607 } 1608 1609 // Register event listener 1610 mediaQueryBuilder.addListener(handleDesktopSize) 1611 1612 // Initial check 1613 handleDesktopSize(mediaQueryBuilder) 1614 1615 1616 1617 $('.c-ui_checkbox input').change(function () { 1618 const $this = $(this) 1619 const checked = this.checked 1620 const id = $this.attr('ui') 1621 const nextCheckbox = $this.parents('.c-ui_checkbox').next().length > 0 ? $this.parents('.c-ui_checkbox').next().next() : null 1622 1623 if (checked) { 1624 $(`[ui-section="${id}"]`).removeClass('cc-invisible') 1625 if (nextCheckbox) nextCheckbox.removeAttr('no-pointer') 1626 } else { 1627 $(`[ui-section="${id}"]`).addClass('cc-invisible') 1628 } 1629 1630 if ($('[ui]input:checked').length) { 1631 $buildText.addClass('cc-invisible') 1632 } else { 1633 $buildText.removeClass('cc-invisible') 1634 } 1635 }) 1636 1637 $('[ui-guide]').change(function () { 1638 const checked = this.checked 1639 1640 if (checked) { 1641 $guide.removeClass('cc-invisible') 1642 } else { 1643 $guide.addClass('cc-invisible') 1644 } 1645 }) 1646 1647 $('[ui-insights]').change(function () { 1648 const checked = this.checked 1649 1650 if (checked) { 1651 $('[ui]input:not(:checked)').click() 1652 $insights.removeClass('cc-invisible') 1653 } else { 1654 $insights.addClass('cc-invisible') 1655 } 1656 }) 1657 1658 $('[ui-dot]').click(function () { 1659 const $this = $(this) 1660 const $modal = $this.parents('.c-insight').find('[ui-modal]') 1661 1662 $uiScreenWrapper.addClass('cc-open') 1663 $modal.addClass('cc-open') 1664 $('[ui-dot]').addClass('cc-invisible') 1665 }) 1666 1667 $('[ui-modal-close]').click(function () { 1668 const $this = $(this) 1669 1670 $uiScreenWrapper.removeClass('cc-open') 1671 $this.parents('[ui-modal]').removeClass('cc-open') 1672 $('[ui-dot]').removeClass('cc-invisible') 1673 }) 1674 </script>
1674 1675 1676 <!-- Creative development --> 1677
1677<script> 1678 const tl = gsap.timeline({ 1679 scrollTrigger: { 1680 trigger: ".c-section.cc-creative-dev", 1681 start: '7% bottom', 1682 end: 'bottom top', 1683 scrub: 0.5, 1684 duration: 1 1685 } 1686 }) 1687 1688 tl.fromTo('[creative="circle-rotate"]', { 1689 rotateZ: '0deg' 1690 }, 1691 { 1692 duration: 1, 1693 rotateZ: '400deg' 1694 }) 1695 1696 tl.fromTo('[creative="circle-rotate"]', { 1697 opacity: 0, 1698 }, 1699 { 1700 opacity: 1, 1701 duration: 0.01, 1702 }, '<') 1703 1704 tl.fromTo('[creative="circle-scale"]', { 1705 scaleX: 0, 1706 scaleY: 0, 1707 }, 1708 { 1709 duration: 0.2, 1710 scaleX: 5, 1711 scaleY: 5 1712 }, '0.025') 1713 </script>
1713 1714 1715 <!-- Texts animations --> 1716
1716<script> 1717 window.addEventListener("DOMContentLoaded", (event) => { 1718 // Link timelines to scroll position 1719 function createScrollTrigger(triggerElement, timeline) { 1720 // Reset tl when scroll out of view past bottom of screen 1721 ScrollTrigger.create({ 1722 trigger: triggerElement, 1723 start: "top bottom", 1724 onLeaveBack: () => { 1725 timeline.progress(0); 1726 timeline.pause(); 1727 } 1728 }); 1729 // Play tl when scrolled into view (60% from top of screen) 1730 ScrollTrigger.create({ 1731 trigger: triggerElement, 1732 start: "top 80%", 1733 onEnter: () => timeline.play() 1734 }); 1735 } 1736 1737 setTimeout(function () { 1738 // Split text into spans 1739 let typeSplit = new SplitType("[text-split]", { 1740 types: "lines", 1741 tagName: "span" 1742 }); 1743 1744 $("[words-slide-up]").each(function (index) { 1745 let tl = gsap.timeline({paused: true}); 1746 tl.from($(this).find(".line"), {opacity: 0, yPercent: 100, skewX: 20, rotateX: 60, duration: 1.2, ease: "out.cubic", stagger: {amount: 0.2}}); 1747 createScrollTrigger($(this), tl); 1748 }); 1749 1750 // Avoid flash of unstyled content 1751 gsap.set("[text-split]", {opacity: 1}); 1752 }, 1000) 1753 }); 1754 </script>
1754 1755</body> 1756 1757</html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.