PageSourceSearch

https://cs-weglot.vercel.app/

html cs-weglot.vercel.app collected 2026-10-03 06:30:03 UTC 118,263 bytes, 1,757 lines download raw bytes

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.