@hviana/sema 0.5.5 → 0.5.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CITATION.cff +5 -5
- package/HOW_IT_WORKS.md +40 -30
- package/README.md +161 -80
- package/index.html +796 -688
- package/jsr.json +1 -1
- package/package.json +1 -1
package/index.html
CHANGED
|
@@ -9,720 +9,798 @@
|
|
|
9
9
|
content="© Sema: a deterministic, auditable, weight-free reasoning engine. No neural network, no GPU, no hallucination."
|
|
10
10
|
>
|
|
11
11
|
<style>
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
position: fixed;
|
|
51
|
-
inset: 0;
|
|
52
|
-
z-index: 0;
|
|
53
|
-
overflow: hidden;
|
|
54
|
-
background: var(--bg);
|
|
55
|
-
/* own stacking context + GPU layer: keeps the blend-mode orbs from
|
|
56
|
-
forcing full-page re-rasterization every frame on mobile */
|
|
57
|
-
isolation: isolate;
|
|
58
|
-
transform: translateZ(0);
|
|
59
|
-
}
|
|
60
|
-
|
|
61
|
-
/* — colour weather: two huge drifting orbs + aurora sweep — */
|
|
62
|
-
.orb {
|
|
63
|
-
position: absolute;
|
|
64
|
-
border-radius: 50%;
|
|
65
|
-
filter: blur(70px);
|
|
66
|
-
mix-blend-mode: screen;
|
|
67
|
-
will-change: transform;
|
|
68
|
-
}
|
|
69
|
-
.orb.a {
|
|
70
|
-
width: 75vmax;
|
|
71
|
-
height: 75vmax;
|
|
72
|
-
left: -25vmax;
|
|
73
|
-
top: -30vmax;
|
|
74
|
-
background: radial-gradient(
|
|
75
|
-
circle at 50% 50%,
|
|
76
|
-
rgba(57, 230, 255, 0.30),
|
|
77
|
-
rgba(57, 120, 255, 0.10) 45%,
|
|
78
|
-
transparent 70%
|
|
79
|
-
);
|
|
80
|
-
animation: orbA 26s ease-in-out infinite alternate;
|
|
81
|
-
}
|
|
82
|
-
.orb.b {
|
|
83
|
-
width: 70vmax;
|
|
84
|
-
height: 70vmax;
|
|
85
|
-
right: -28vmax;
|
|
86
|
-
bottom: -32vmax;
|
|
87
|
-
background: radial-gradient(
|
|
88
|
-
circle at 50% 50%,
|
|
89
|
-
rgba(255, 79, 216, 0.22),
|
|
90
|
-
rgba(168, 120, 255, 0.12) 45%,
|
|
91
|
-
transparent 70%
|
|
92
|
-
);
|
|
93
|
-
animation: orbB 32s ease-in-out infinite alternate;
|
|
94
|
-
}
|
|
95
|
-
.orb.c {
|
|
96
|
-
width: 44vmax;
|
|
97
|
-
height: 44vmax;
|
|
98
|
-
left: 34%;
|
|
99
|
-
top: 56%;
|
|
100
|
-
background: radial-gradient(
|
|
101
|
-
circle at 50% 50%,
|
|
102
|
-
rgba(255, 194, 75, 0.14),
|
|
103
|
-
transparent 65%
|
|
104
|
-
);
|
|
105
|
-
animation: orbA 40s ease-in-out infinite alternate-reverse;
|
|
106
|
-
}
|
|
107
|
-
@keyframes orbA {
|
|
108
|
-
from {
|
|
109
|
-
transform: translate3d(0, 0, 0) scale(1);
|
|
110
|
-
}
|
|
111
|
-
to {
|
|
112
|
-
transform: translate3d(9vmax, 7vmax, 0) scale(1.15);
|
|
113
|
-
}
|
|
114
|
-
}
|
|
115
|
-
@keyframes orbB {
|
|
116
|
-
from {
|
|
117
|
-
transform: translate3d(0, 0, 0) scale(1.1);
|
|
118
|
-
}
|
|
119
|
-
to {
|
|
120
|
-
transform: translate3d(-8vmax, -6vmax, 0) scale(0.95);
|
|
121
|
-
}
|
|
122
|
-
}
|
|
12
|
+
/* ———————————————————————————— tokens ———————————————————————————— */
|
|
13
|
+
:root {
|
|
14
|
+
--bg: #02040c;
|
|
15
|
+
--ink: #f2f7ff;
|
|
16
|
+
--dim: #93a7cf;
|
|
17
|
+
--cyan: #39e6ff;
|
|
18
|
+
--violet: #a878ff;
|
|
19
|
+
--magenta: #ff4fd8;
|
|
20
|
+
--amber: #ffc24b;
|
|
21
|
+
}
|
|
22
|
+
*,
|
|
23
|
+
*::before,
|
|
24
|
+
*::after {
|
|
25
|
+
box-sizing: border-box;
|
|
26
|
+
margin: 0;
|
|
27
|
+
padding: 0;
|
|
28
|
+
}
|
|
29
|
+
html {
|
|
30
|
+
scroll-behavior: smooth;
|
|
31
|
+
}
|
|
32
|
+
html,
|
|
33
|
+
body {
|
|
34
|
+
height: 100%;
|
|
35
|
+
}
|
|
36
|
+
body {
|
|
37
|
+
font-family:
|
|
38
|
+
ui-sans-serif, system-ui, "Segoe UI", Roboto, Helvetica, Arial,
|
|
39
|
+
sans-serif;
|
|
40
|
+
background: var(--bg);
|
|
41
|
+
color: var(--ink);
|
|
42
|
+
min-height: 100svh;
|
|
43
|
+
overflow-x: hidden;
|
|
44
|
+
display: flex;
|
|
45
|
+
flex-direction: column;
|
|
46
|
+
}
|
|
47
|
+
a {
|
|
48
|
+
color: inherit;
|
|
49
|
+
}
|
|
123
50
|
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
}
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
51
|
+
/* ═══════════════════════ THE FIELD (fixed, full-bleed) ═══════════ */
|
|
52
|
+
.field {
|
|
53
|
+
position: fixed;
|
|
54
|
+
inset: 0;
|
|
55
|
+
z-index: 0;
|
|
56
|
+
overflow: hidden;
|
|
57
|
+
background: var(--bg);
|
|
58
|
+
/* own stacking context + GPU layer: keeps the blend-mode orbs from
|
|
59
|
+
forcing full-page re-rasterization every frame on mobile */
|
|
60
|
+
isolation: isolate;
|
|
61
|
+
transform: translateZ(0);
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
/* — colour weather: two huge drifting orbs + aurora sweep — */
|
|
65
|
+
.orb {
|
|
66
|
+
position: absolute;
|
|
67
|
+
border-radius: 50%;
|
|
68
|
+
filter: blur(70px);
|
|
69
|
+
mix-blend-mode: screen;
|
|
70
|
+
will-change: transform;
|
|
71
|
+
}
|
|
72
|
+
.orb.a {
|
|
73
|
+
width: 75vmax;
|
|
74
|
+
height: 75vmax;
|
|
75
|
+
left: -25vmax;
|
|
76
|
+
top: -30vmax;
|
|
77
|
+
background: radial-gradient(
|
|
78
|
+
circle at 50% 50%,
|
|
79
|
+
rgba(57, 230, 255, 0.30),
|
|
80
|
+
rgba(57, 120, 255, 0.10) 45%,
|
|
81
|
+
transparent 70%
|
|
82
|
+
);
|
|
83
|
+
animation: orbA 26s ease-in-out infinite alternate;
|
|
84
|
+
}
|
|
85
|
+
.orb.b {
|
|
86
|
+
width: 70vmax;
|
|
87
|
+
height: 70vmax;
|
|
88
|
+
right: -28vmax;
|
|
89
|
+
bottom: -32vmax;
|
|
90
|
+
background: radial-gradient(
|
|
91
|
+
circle at 50% 50%,
|
|
92
|
+
rgba(255, 79, 216, 0.22),
|
|
93
|
+
rgba(168, 120, 255, 0.12) 45%,
|
|
94
|
+
transparent 70%
|
|
95
|
+
);
|
|
96
|
+
animation: orbB 32s ease-in-out infinite alternate;
|
|
97
|
+
}
|
|
98
|
+
.orb.c {
|
|
99
|
+
width: 44vmax;
|
|
100
|
+
height: 44vmax;
|
|
101
|
+
left: 34%;
|
|
102
|
+
top: 56%;
|
|
103
|
+
background: radial-gradient(
|
|
104
|
+
circle at 50% 50%,
|
|
105
|
+
rgba(255, 194, 75, 0.14),
|
|
106
|
+
transparent 65%
|
|
107
|
+
);
|
|
108
|
+
animation: orbA 40s ease-in-out infinite alternate-reverse;
|
|
109
|
+
}
|
|
110
|
+
@keyframes orbA {
|
|
111
|
+
from {
|
|
112
|
+
transform: translate3d(0, 0, 0) scale(1);
|
|
113
|
+
}
|
|
114
|
+
to {
|
|
115
|
+
transform: translate3d(9vmax, 7vmax, 0) scale(1.15);
|
|
116
|
+
}
|
|
117
|
+
}
|
|
118
|
+
@keyframes orbB {
|
|
119
|
+
from {
|
|
120
|
+
transform: translate3d(0, 0, 0) scale(1.1);
|
|
121
|
+
}
|
|
122
|
+
to {
|
|
123
|
+
transform: translate3d(-8vmax, -6vmax, 0) scale(0.95);
|
|
124
|
+
}
|
|
125
|
+
}
|
|
126
|
+
|
|
127
|
+
.aurora {
|
|
128
|
+
position: absolute;
|
|
129
|
+
inset: -40%;
|
|
130
|
+
background: conic-gradient(
|
|
131
|
+
from 180deg at 50% 50%,
|
|
132
|
+
transparent 0deg,
|
|
133
|
+
rgba(57, 230, 255, 0.07) 40deg,
|
|
134
|
+
transparent 105deg,
|
|
135
|
+
rgba(168, 120, 255, 0.09) 165deg,
|
|
136
|
+
transparent 230deg,
|
|
137
|
+
rgba(255, 79, 216, 0.06) 300deg,
|
|
138
|
+
transparent 360deg
|
|
139
|
+
);
|
|
140
|
+
animation: spin 70s linear infinite;
|
|
141
|
+
will-change: transform;
|
|
142
|
+
}
|
|
143
|
+
@keyframes spin {
|
|
144
|
+
to {
|
|
145
|
+
transform: rotate(1turn);
|
|
146
|
+
}
|
|
147
|
+
}
|
|
148
|
+
|
|
149
|
+
/* — the addressable lattice — */
|
|
150
|
+
.lattice {
|
|
151
|
+
position: absolute;
|
|
152
|
+
inset: -80px;
|
|
153
|
+
background-image:
|
|
154
|
+
radial-gradient(rgba(147, 167, 207, 0.28) 1px, transparent 1.7px),
|
|
155
|
+
radial-gradient(rgba(147, 167, 207, 0.14) 1px, transparent 1.7px);
|
|
156
|
+
background-size: 64px 64px, 16px 16px;
|
|
157
|
+
background-position: 0 0, 8px 8px;
|
|
158
|
+
mask-image: radial-gradient(
|
|
159
|
+
closest-side at 50% 46%,
|
|
160
|
+
#000 20%,
|
|
161
|
+
transparent 100%
|
|
162
|
+
);
|
|
163
|
+
-webkit-mask-image: radial-gradient(
|
|
164
|
+
closest-side at 50% 46%,
|
|
165
|
+
#000 20%,
|
|
166
|
+
transparent 100%
|
|
167
|
+
);
|
|
168
|
+
animation: drift 50s linear infinite alternate;
|
|
169
|
+
opacity: 0.8;
|
|
170
|
+
will-change: transform;
|
|
171
|
+
}
|
|
172
|
+
@keyframes drift {
|
|
173
|
+
to {
|
|
174
|
+
transform: translate3d(64px, 32px, 0);
|
|
175
|
+
}
|
|
176
|
+
}
|
|
177
|
+
|
|
178
|
+
/* — the memory graph: full-viewport SVG, curved learned edges — */
|
|
179
|
+
.graph {
|
|
180
|
+
position: absolute;
|
|
181
|
+
inset: 0;
|
|
182
|
+
width: 100%;
|
|
183
|
+
height: 100%;
|
|
184
|
+
}
|
|
185
|
+
.graph svg {
|
|
186
|
+
width: 100%;
|
|
187
|
+
height: 100%;
|
|
188
|
+
display: block;
|
|
189
|
+
}
|
|
190
|
+
.layerA {
|
|
191
|
+
animation: sway 30s ease-in-out infinite alternate;
|
|
192
|
+
transform-origin: 50% 50%;
|
|
193
|
+
will-change: transform;
|
|
194
|
+
}
|
|
195
|
+
.layerB {
|
|
196
|
+
animation: sway 44s ease-in-out infinite alternate-reverse;
|
|
197
|
+
transform-origin: 50% 50%;
|
|
198
|
+
will-change: transform;
|
|
199
|
+
}
|
|
200
|
+
@keyframes sway {
|
|
201
|
+
from {
|
|
202
|
+
transform: translate(0, 0) rotate(0.001deg);
|
|
203
|
+
}
|
|
204
|
+
to {
|
|
205
|
+
transform: translate(26px, -18px) rotate(0.4deg);
|
|
206
|
+
}
|
|
207
|
+
}
|
|
208
|
+
|
|
209
|
+
.graph path {
|
|
210
|
+
fill: none;
|
|
211
|
+
stroke-linecap: round;
|
|
212
|
+
}
|
|
213
|
+
.wire {
|
|
214
|
+
stroke-width: 1.6;
|
|
215
|
+
stroke-dasharray: 7 15;
|
|
216
|
+
animation: flow 2.4s linear infinite;
|
|
217
|
+
filter: drop-shadow(0 0 6px rgba(57, 230, 255, 0.55));
|
|
218
|
+
}
|
|
219
|
+
.wire.v {
|
|
220
|
+
filter: drop-shadow(0 0 6px rgba(168, 120, 255, 0.55));
|
|
221
|
+
}
|
|
222
|
+
.wire.m {
|
|
223
|
+
filter: drop-shadow(0 0 6px rgba(255, 79, 216, 0.45));
|
|
224
|
+
}
|
|
225
|
+
.wire.g {
|
|
226
|
+
filter: drop-shadow(0 0 6px rgba(255, 194, 75, 0.5));
|
|
227
|
+
}
|
|
228
|
+
.wire.slow {
|
|
229
|
+
animation-duration: 3.6s;
|
|
230
|
+
}
|
|
231
|
+
.wire.rev {
|
|
232
|
+
animation-direction: reverse;
|
|
233
|
+
}
|
|
234
|
+
@keyframes flow {
|
|
235
|
+
to {
|
|
236
|
+
stroke-dashoffset: -44;
|
|
237
|
+
}
|
|
238
|
+
}
|
|
239
|
+
|
|
240
|
+
.dot {
|
|
241
|
+
transform-box: fill-box;
|
|
242
|
+
transform-origin: center;
|
|
243
|
+
animation: beat 4s ease-in-out infinite;
|
|
244
|
+
}
|
|
245
|
+
.dot.d1 {
|
|
246
|
+
animation-delay: -0.7s;
|
|
247
|
+
}
|
|
248
|
+
.dot.d2 {
|
|
249
|
+
animation-delay: -1.4s;
|
|
250
|
+
}
|
|
251
|
+
.dot.d3 {
|
|
252
|
+
animation-delay: -2.1s;
|
|
253
|
+
}
|
|
254
|
+
.dot.d4 {
|
|
255
|
+
animation-delay: -2.8s;
|
|
256
|
+
}
|
|
257
|
+
.dot.d5 {
|
|
258
|
+
animation-delay: -3.5s;
|
|
259
|
+
}
|
|
260
|
+
@keyframes beat {
|
|
261
|
+
0%,
|
|
262
|
+
100% {
|
|
263
|
+
transform: scale(0.8);
|
|
264
|
+
opacity: 0.65;
|
|
265
|
+
}
|
|
266
|
+
50% {
|
|
267
|
+
transform: scale(1.25);
|
|
268
|
+
opacity: 1;
|
|
269
|
+
}
|
|
270
|
+
}
|
|
271
|
+
|
|
272
|
+
.ring {
|
|
273
|
+
transform-box: fill-box;
|
|
274
|
+
transform-origin: center;
|
|
275
|
+
fill: none;
|
|
276
|
+
stroke-width: 1.4;
|
|
277
|
+
animation: ripple 5s cubic-bezier(0.2, 0.65, 0.3, 1) infinite;
|
|
278
|
+
}
|
|
279
|
+
.ring.r2 {
|
|
280
|
+
animation-delay: -1.6s;
|
|
281
|
+
}
|
|
282
|
+
.ring.r3 {
|
|
283
|
+
animation-delay: -3.2s;
|
|
284
|
+
}
|
|
285
|
+
@keyframes ripple {
|
|
286
|
+
0% {
|
|
287
|
+
transform: scale(0.4);
|
|
288
|
+
opacity: 0.9;
|
|
289
|
+
}
|
|
290
|
+
80%,
|
|
291
|
+
100% {
|
|
292
|
+
transform: scale(3.4);
|
|
293
|
+
opacity: 0;
|
|
294
|
+
}
|
|
295
|
+
}
|
|
296
|
+
|
|
297
|
+
/* — cinematic finish: vignette + grain + scanline shimmer — */
|
|
298
|
+
.vignette {
|
|
299
|
+
position: absolute;
|
|
300
|
+
inset: 0;
|
|
301
|
+
background:
|
|
302
|
+
radial-gradient(
|
|
303
|
+
120vmax 90vmax at 50% 42%,
|
|
304
|
+
transparent 30%,
|
|
305
|
+
rgba(2, 4, 12, 0.6) 75%,
|
|
306
|
+
rgba(2, 4, 12, 0.95) 100%
|
|
307
|
+
),
|
|
308
|
+
linear-gradient(
|
|
309
|
+
180deg,
|
|
310
|
+
rgba(2, 4, 12, 0.5),
|
|
311
|
+
transparent 18% 82%,
|
|
312
|
+
rgba(2, 4, 12, 0.75)
|
|
313
|
+
);
|
|
314
|
+
}
|
|
315
|
+
.grain {
|
|
316
|
+
position: absolute;
|
|
317
|
+
inset: 0;
|
|
318
|
+
opacity: 0.5;
|
|
319
|
+
mix-blend-mode: overlay;
|
|
320
|
+
pointer-events: none;
|
|
321
|
+
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.35'/%3E%3C/svg%3E");
|
|
322
|
+
}
|
|
323
|
+
|
|
324
|
+
/* ═══════════════════════════ THE HERO ═══════════════════════════ */
|
|
325
|
+
.hero {
|
|
326
|
+
position: relative;
|
|
327
|
+
z-index: 1;
|
|
328
|
+
flex: 1;
|
|
329
|
+
display: grid;
|
|
330
|
+
place-items: center;
|
|
331
|
+
padding: clamp(4rem, 10vh, 7rem) 1.2rem clamp(3rem, 8vh, 5rem);
|
|
332
|
+
text-align: center;
|
|
333
|
+
}
|
|
334
|
+
.stage {
|
|
335
|
+
position: relative;
|
|
336
|
+
display: grid;
|
|
337
|
+
place-items: center;
|
|
338
|
+
}
|
|
339
|
+
|
|
340
|
+
/* — counter-rotating hexagon rings behind the wordmark — */
|
|
341
|
+
.hexring {
|
|
342
|
+
position: absolute;
|
|
343
|
+
z-index: -1;
|
|
344
|
+
width: min(78vmin, 620px);
|
|
345
|
+
aspect-ratio: 1;
|
|
346
|
+
clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
|
|
347
|
+
background: conic-gradient(
|
|
348
|
+
from 0deg,
|
|
349
|
+
var(--cyan),
|
|
350
|
+
var(--violet),
|
|
351
|
+
var(--magenta),
|
|
352
|
+
var(--amber),
|
|
353
|
+
var(--cyan)
|
|
354
|
+
);
|
|
355
|
+
opacity: 0.5;
|
|
356
|
+
animation: spin 40s linear infinite;
|
|
357
|
+
filter: drop-shadow(0 0 30px rgba(57, 230, 255, 0.3));
|
|
358
|
+
will-change: transform;
|
|
359
|
+
}
|
|
360
|
+
.hexring::before {
|
|
361
|
+
content: "";
|
|
362
|
+
position: absolute;
|
|
363
|
+
inset: 2px;
|
|
364
|
+
clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
|
|
365
|
+
background: var(--bg);
|
|
366
|
+
}
|
|
367
|
+
.hexring.inner {
|
|
368
|
+
width: min(58vmin, 460px);
|
|
369
|
+
opacity: 0.35;
|
|
370
|
+
animation: spinrev 28s linear infinite;
|
|
371
|
+
}
|
|
372
|
+
@keyframes spinrev {
|
|
373
|
+
to {
|
|
374
|
+
transform: rotate(-1turn);
|
|
375
|
+
}
|
|
376
|
+
}
|
|
377
|
+
|
|
378
|
+
.hex-glow {
|
|
379
|
+
position: absolute;
|
|
380
|
+
z-index: -2;
|
|
381
|
+
width: min(70vmin, 560px);
|
|
382
|
+
aspect-ratio: 1;
|
|
383
|
+
border-radius: 50%;
|
|
384
|
+
background: radial-gradient(
|
|
385
|
+
circle,
|
|
386
|
+
rgba(57, 230, 255, 0.16),
|
|
387
|
+
rgba(168, 120, 255, 0.08) 45%,
|
|
388
|
+
transparent 70%
|
|
389
|
+
);
|
|
390
|
+
animation: breath 7s ease-in-out infinite;
|
|
391
|
+
will-change: transform, opacity;
|
|
392
|
+
}
|
|
393
|
+
@keyframes breath {
|
|
394
|
+
0%,
|
|
395
|
+
100% {
|
|
396
|
+
transform: scale(0.94);
|
|
397
|
+
opacity: 0.7;
|
|
196
398
|
}
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
}
|
|
201
|
-
to {
|
|
202
|
-
transform: translate(26px, -18px) rotate(0.4deg);
|
|
203
|
-
}
|
|
399
|
+
50% {
|
|
400
|
+
transform: scale(1.06);
|
|
401
|
+
opacity: 1;
|
|
204
402
|
}
|
|
403
|
+
}
|
|
404
|
+
|
|
405
|
+
.kicker {
|
|
406
|
+
font-size: clamp(0.72rem, 1.8vw, 0.9rem);
|
|
407
|
+
letter-spacing: 0.55em;
|
|
408
|
+
padding-left: 0.55em;
|
|
409
|
+
text-transform: uppercase;
|
|
410
|
+
color: var(--dim);
|
|
411
|
+
animation: up 0.9s 0.1s cubic-bezier(0.2, 0.7, 0.2, 1) both;
|
|
412
|
+
}
|
|
413
|
+
.kicker b {
|
|
414
|
+
color: var(--cyan);
|
|
415
|
+
font-weight: 600;
|
|
416
|
+
}
|
|
205
417
|
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
418
|
+
h1 {
|
|
419
|
+
position: relative;
|
|
420
|
+
font-size: clamp(4.6rem, 19vw, 13rem);
|
|
421
|
+
font-weight: 900;
|
|
422
|
+
line-height: 0.95;
|
|
423
|
+
letter-spacing: 0.08em;
|
|
424
|
+
margin-left: 0.08em;
|
|
425
|
+
background: linear-gradient(
|
|
426
|
+
95deg,
|
|
427
|
+
#8ff2ff 0%,
|
|
428
|
+
#fff 22%,
|
|
429
|
+
var(--cyan) 42%,
|
|
430
|
+
var(--violet) 68%,
|
|
431
|
+
var(--magenta) 100%
|
|
432
|
+
);
|
|
433
|
+
background-size: 250% 100%;
|
|
434
|
+
-webkit-background-clip: text;
|
|
435
|
+
background-clip: text;
|
|
436
|
+
color: transparent;
|
|
437
|
+
animation:
|
|
438
|
+
up 1s 0.2s cubic-bezier(0.2, 0.7, 0.2, 1) both,
|
|
439
|
+
sheen 8s 1.2s ease-in-out infinite;
|
|
440
|
+
filter: drop-shadow(0 0 22px rgba(57, 230, 255, 0.35)) drop-shadow(
|
|
441
|
+
0 8px 60px rgba(168, 120, 255, 0.25)
|
|
442
|
+
);
|
|
443
|
+
/* gradient-clipped text flickers on iOS while its background animates
|
|
444
|
+
unless the element sits on its own composited layer */
|
|
445
|
+
-webkit-backface-visibility: hidden;
|
|
446
|
+
backface-visibility: hidden;
|
|
447
|
+
transform: translateZ(0);
|
|
448
|
+
}
|
|
449
|
+
@keyframes sheen {
|
|
450
|
+
0%,
|
|
451
|
+
100% {
|
|
452
|
+
background-position: 0% 50%;
|
|
453
|
+
}
|
|
454
|
+
50% {
|
|
455
|
+
background-position: 100% 50%;
|
|
456
|
+
}
|
|
457
|
+
}
|
|
458
|
+
|
|
459
|
+
/* ghost echo behind the wordmark */
|
|
460
|
+
.echo {
|
|
461
|
+
position: absolute;
|
|
462
|
+
left: 50%;
|
|
463
|
+
top: 50%;
|
|
464
|
+
z-index: -1;
|
|
465
|
+
user-select: none;
|
|
466
|
+
pointer-events: none;
|
|
467
|
+
font-size: clamp(4.6rem, 19vw, 13rem);
|
|
468
|
+
font-weight: 900;
|
|
469
|
+
line-height: 0.95;
|
|
470
|
+
letter-spacing: 0.08em;
|
|
471
|
+
padding-left: 0.08em;
|
|
472
|
+
white-space: nowrap;
|
|
473
|
+
color: transparent;
|
|
474
|
+
-webkit-text-stroke: 1px rgba(57, 230, 255, 0.22);
|
|
475
|
+
animation: echo 8s ease-in-out infinite;
|
|
476
|
+
will-change: transform, opacity;
|
|
477
|
+
}
|
|
478
|
+
@keyframes echo {
|
|
479
|
+
0%,
|
|
480
|
+
100% {
|
|
481
|
+
transform: translate(-50%, -50%) scale(1.07);
|
|
482
|
+
opacity: 0.5;
|
|
209
483
|
}
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
animation: flow 2.4s linear infinite;
|
|
214
|
-
filter: drop-shadow(0 0 6px rgba(57, 230, 255, 0.55));
|
|
484
|
+
50% {
|
|
485
|
+
transform: translate(-50%, -50%) scale(1.13);
|
|
486
|
+
opacity: 0.9;
|
|
215
487
|
}
|
|
216
|
-
|
|
217
|
-
|
|
488
|
+
}
|
|
489
|
+
|
|
490
|
+
.tag {
|
|
491
|
+
margin-top: 1.1rem;
|
|
492
|
+
font-size: clamp(1.25rem, 4.2vw, 2rem);
|
|
493
|
+
font-weight: 650;
|
|
494
|
+
letter-spacing: 0.01em;
|
|
495
|
+
animation: up 1s 0.35s cubic-bezier(0.2, 0.7, 0.2, 1) both;
|
|
496
|
+
}
|
|
497
|
+
.tag em {
|
|
498
|
+
font-style: normal;
|
|
499
|
+
background: linear-gradient(90deg, var(--cyan), var(--violet));
|
|
500
|
+
-webkit-background-clip: text;
|
|
501
|
+
background-clip: text;
|
|
502
|
+
color: transparent;
|
|
503
|
+
}
|
|
504
|
+
|
|
505
|
+
.sub {
|
|
506
|
+
margin: 1.1rem auto 0;
|
|
507
|
+
max-width: 36em;
|
|
508
|
+
color: var(--dim);
|
|
509
|
+
font-size: clamp(0.98rem, 2.6vw, 1.15rem);
|
|
510
|
+
line-height: 1.7;
|
|
511
|
+
animation: up 1s 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) both;
|
|
512
|
+
}
|
|
513
|
+
.sub b {
|
|
514
|
+
color: var(--ink);
|
|
515
|
+
font-weight: 600;
|
|
516
|
+
}
|
|
517
|
+
|
|
518
|
+
@keyframes up {
|
|
519
|
+
from {
|
|
520
|
+
opacity: 0;
|
|
521
|
+
transform: translateY(26px);
|
|
218
522
|
}
|
|
219
|
-
|
|
220
|
-
|
|
523
|
+
to {
|
|
524
|
+
opacity: 1;
|
|
525
|
+
transform: none;
|
|
221
526
|
}
|
|
222
|
-
|
|
223
|
-
|
|
527
|
+
}
|
|
528
|
+
|
|
529
|
+
.cta {
|
|
530
|
+
display: flex;
|
|
531
|
+
flex-wrap: wrap;
|
|
532
|
+
gap: 1rem;
|
|
533
|
+
justify-content: center;
|
|
534
|
+
margin-top: 2.4rem;
|
|
535
|
+
animation: up 1s 0.65s cubic-bezier(0.2, 0.7, 0.2, 1) both;
|
|
536
|
+
}
|
|
537
|
+
.btn {
|
|
538
|
+
position: relative;
|
|
539
|
+
display: inline-block;
|
|
540
|
+
text-decoration: none;
|
|
541
|
+
padding: 0.95em 2em;
|
|
542
|
+
border-radius: 999px;
|
|
543
|
+
font-weight: 750;
|
|
544
|
+
font-size: clamp(0.95rem, 2.6vw, 1.06rem);
|
|
545
|
+
letter-spacing: 0.03em;
|
|
546
|
+
transition:
|
|
547
|
+
transform 0.2s ease,
|
|
548
|
+
box-shadow 0.2s ease,
|
|
549
|
+
background 0.2s ease;
|
|
550
|
+
}
|
|
551
|
+
.btn:focus-visible {
|
|
552
|
+
outline: 2px solid var(--cyan);
|
|
553
|
+
outline-offset: 4px;
|
|
554
|
+
}
|
|
555
|
+
.btn.primary {
|
|
556
|
+
color: #021018;
|
|
557
|
+
background: linear-gradient(
|
|
558
|
+
110deg,
|
|
559
|
+
var(--cyan),
|
|
560
|
+
var(--violet) 60%,
|
|
561
|
+
var(--magenta)
|
|
562
|
+
);
|
|
563
|
+
background-size: 200% 100%;
|
|
564
|
+
box-shadow:
|
|
565
|
+
0 0 0 1px rgba(255, 255, 255, 0.25) inset,
|
|
566
|
+
0 12px 40px rgba(57, 230, 255, 0.35);
|
|
567
|
+
animation: sheen 5s ease-in-out infinite;
|
|
568
|
+
}
|
|
569
|
+
.btn.primary:hover {
|
|
570
|
+
transform: translateY(-3px) scale(1.02);
|
|
571
|
+
box-shadow:
|
|
572
|
+
0 0 0 1px rgba(255, 255, 255, 0.3) inset,
|
|
573
|
+
0 18px 60px rgba(57, 230, 255, 0.55);
|
|
574
|
+
}
|
|
575
|
+
.btn.ghost {
|
|
576
|
+
color: var(--ink);
|
|
577
|
+
background:
|
|
578
|
+
linear-gradient(var(--bg), var(--bg)) padding-box,
|
|
579
|
+
linear-gradient(
|
|
580
|
+
120deg,
|
|
581
|
+
rgba(57, 230, 255, 0.7),
|
|
582
|
+
rgba(168, 120, 255, 0.7)
|
|
583
|
+
) border-box;
|
|
584
|
+
border: 1px solid transparent;
|
|
585
|
+
box-shadow: 0 0 24px rgba(57, 230, 255, 0.10);
|
|
586
|
+
}
|
|
587
|
+
.btn.ghost:hover {
|
|
588
|
+
transform: translateY(-3px);
|
|
589
|
+
box-shadow: 0 0 34px rgba(57, 230, 255, 0.28);
|
|
590
|
+
}
|
|
591
|
+
|
|
592
|
+
/* ═══════════════════════ DOWNLOADS ══════════════════════════════ */
|
|
593
|
+
.grab {
|
|
594
|
+
margin: 2.6rem auto 0;
|
|
595
|
+
max-width: 42em;
|
|
596
|
+
animation: up 1s 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) both;
|
|
597
|
+
}
|
|
598
|
+
.grab .lede {
|
|
599
|
+
font-size: clamp(0.72rem, 1.8vw, 0.82rem);
|
|
600
|
+
letter-spacing: 0.28em;
|
|
601
|
+
text-transform: uppercase;
|
|
602
|
+
color: var(--dim);
|
|
603
|
+
}
|
|
604
|
+
.grab .lede b {
|
|
605
|
+
color: var(--ink);
|
|
606
|
+
font-weight: 700;
|
|
607
|
+
}
|
|
608
|
+
.grab .note {
|
|
609
|
+
margin-top: 0.55rem;
|
|
610
|
+
color: var(--dim);
|
|
611
|
+
font-size: clamp(0.85rem, 2.3vw, 0.95rem);
|
|
612
|
+
line-height: 1.6;
|
|
613
|
+
}
|
|
614
|
+
.grabs {
|
|
615
|
+
display: flex;
|
|
616
|
+
flex-wrap: wrap;
|
|
617
|
+
gap: 0.6rem;
|
|
618
|
+
justify-content: center;
|
|
619
|
+
margin-top: 1.1rem;
|
|
620
|
+
}
|
|
621
|
+
.chip {
|
|
622
|
+
display: inline-flex;
|
|
623
|
+
align-items: baseline;
|
|
624
|
+
gap: 0.5em;
|
|
625
|
+
text-decoration: none;
|
|
626
|
+
padding: 0.6em 1.1em;
|
|
627
|
+
border-radius: 999px;
|
|
628
|
+
font-size: clamp(0.83rem, 2.2vw, 0.92rem);
|
|
629
|
+
font-weight: 700;
|
|
630
|
+
letter-spacing: 0.02em;
|
|
631
|
+
color: var(--ink);
|
|
632
|
+
background:
|
|
633
|
+
linear-gradient(rgba(6, 10, 24, 0.72), rgba(6, 10, 24, 0.72))
|
|
634
|
+
padding-box,
|
|
635
|
+
linear-gradient(
|
|
636
|
+
120deg,
|
|
637
|
+
rgba(57, 230, 255, 0.45),
|
|
638
|
+
rgba(168, 120, 255, 0.45)
|
|
639
|
+
) border-box;
|
|
640
|
+
border: 1px solid transparent;
|
|
641
|
+
transition:
|
|
642
|
+
transform 0.2s ease,
|
|
643
|
+
box-shadow 0.2s ease,
|
|
644
|
+
color 0.2s ease;
|
|
645
|
+
}
|
|
646
|
+
.chip span {
|
|
647
|
+
color: var(--dim);
|
|
648
|
+
font-weight: 500;
|
|
649
|
+
font-size: 0.86em;
|
|
650
|
+
}
|
|
651
|
+
.chip:hover {
|
|
652
|
+
transform: translateY(-2px);
|
|
653
|
+
box-shadow: 0 10px 30px rgba(57, 230, 255, 0.22);
|
|
654
|
+
}
|
|
655
|
+
.chip:focus-visible {
|
|
656
|
+
outline: 2px solid var(--cyan);
|
|
657
|
+
outline-offset: 3px;
|
|
658
|
+
}
|
|
659
|
+
|
|
660
|
+
/* ═══════════════════════ TICKER + FOOTER ════════════════════════ */
|
|
661
|
+
.ticker {
|
|
662
|
+
position: relative;
|
|
663
|
+
z-index: 1;
|
|
664
|
+
overflow: hidden;
|
|
665
|
+
border-top: 1px solid rgba(147, 167, 207, 0.15);
|
|
666
|
+
border-bottom: 1px solid rgba(147, 167, 207, 0.15);
|
|
667
|
+
background: linear-gradient(
|
|
668
|
+
90deg,
|
|
669
|
+
rgba(57, 230, 255, 0.05),
|
|
670
|
+
rgba(168, 120, 255, 0.05)
|
|
671
|
+
);
|
|
672
|
+
mask-image: linear-gradient(
|
|
673
|
+
90deg,
|
|
674
|
+
transparent,
|
|
675
|
+
#000 12% 88%,
|
|
676
|
+
transparent
|
|
677
|
+
);
|
|
678
|
+
-webkit-mask-image: linear-gradient(
|
|
679
|
+
90deg,
|
|
680
|
+
transparent,
|
|
681
|
+
#000 12% 88%,
|
|
682
|
+
transparent
|
|
683
|
+
);
|
|
684
|
+
}
|
|
685
|
+
.ticker .rail {
|
|
686
|
+
display: inline-flex;
|
|
687
|
+
white-space: nowrap;
|
|
688
|
+
width: max-content;
|
|
689
|
+
animation: scroll 34s linear infinite;
|
|
690
|
+
will-change: transform;
|
|
691
|
+
}
|
|
692
|
+
.ticker span {
|
|
693
|
+
padding: 0.72em 0;
|
|
694
|
+
font-size: 0.8rem;
|
|
695
|
+
letter-spacing: 0.28em;
|
|
696
|
+
text-transform: uppercase;
|
|
697
|
+
color: var(--dim);
|
|
698
|
+
}
|
|
699
|
+
.ticker span::after {
|
|
700
|
+
content: "⬡";
|
|
701
|
+
margin: 0 1.6em;
|
|
702
|
+
color: var(--cyan);
|
|
703
|
+
opacity: 0.7;
|
|
704
|
+
}
|
|
705
|
+
@keyframes scroll {
|
|
706
|
+
to {
|
|
707
|
+
transform: translateX(-50%);
|
|
708
|
+
}
|
|
709
|
+
}
|
|
710
|
+
|
|
711
|
+
footer {
|
|
712
|
+
position: relative;
|
|
713
|
+
z-index: 1;
|
|
714
|
+
padding: 1.4rem 1.2rem 1.8rem;
|
|
715
|
+
text-align: center;
|
|
716
|
+
color: var(--dim);
|
|
717
|
+
font-size: 0.83rem;
|
|
718
|
+
line-height: 1.9;
|
|
719
|
+
}
|
|
720
|
+
footer a {
|
|
721
|
+
color: var(--cyan);
|
|
722
|
+
text-decoration: none;
|
|
723
|
+
}
|
|
724
|
+
footer a:hover {
|
|
725
|
+
text-decoration: underline;
|
|
726
|
+
text-shadow: 0 0 12px rgba(57, 230, 255, 0.6);
|
|
727
|
+
}
|
|
728
|
+
footer .lic {
|
|
729
|
+
opacity: 0.85;
|
|
730
|
+
}
|
|
731
|
+
|
|
732
|
+
/* ————————————————————————— small screens ————————————————————————— */
|
|
733
|
+
@media (max-width: 640px) {
|
|
734
|
+
.lattice {
|
|
735
|
+
background-size: 44px 44px, 11px 11px;
|
|
224
736
|
}
|
|
225
|
-
.
|
|
226
|
-
|
|
737
|
+
.hexring {
|
|
738
|
+
width: 92vmin;
|
|
227
739
|
}
|
|
228
|
-
.
|
|
229
|
-
|
|
740
|
+
.hexring.inner {
|
|
741
|
+
width: 70vmin;
|
|
230
742
|
}
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
}
|
|
743
|
+
.kicker {
|
|
744
|
+
letter-spacing: 0.28em;
|
|
745
|
+
padding-left: 0.28em;
|
|
235
746
|
}
|
|
747
|
+
}
|
|
236
748
|
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
animation-delay: -1.4s;
|
|
749
|
+
/* ——————————————————— mobile / touch performance ——————————————————
|
|
750
|
+
Phones can't sustain the per-frame repaint work: SVG dash/scale
|
|
751
|
+
animations and background-position sheens repaint every frame, and
|
|
752
|
+
each pass runs through blur/drop-shadow filters. Strip the filters
|
|
753
|
+
and the repaint-driven animations; keep every compositor-friendly
|
|
754
|
+
transform/opacity animation so the page stays alive. */
|
|
755
|
+
@media (max-width: 820px), (pointer: coarse) {
|
|
756
|
+
.orb {
|
|
757
|
+
filter: blur(40px);
|
|
247
758
|
}
|
|
248
|
-
.
|
|
249
|
-
animation
|
|
759
|
+
.aurora {
|
|
760
|
+
animation: none;
|
|
250
761
|
}
|
|
251
|
-
.
|
|
252
|
-
|
|
762
|
+
.grain {
|
|
763
|
+
display: none;
|
|
253
764
|
}
|
|
254
|
-
.
|
|
255
|
-
|
|
765
|
+
.wire,
|
|
766
|
+
.wire.v,
|
|
767
|
+
.wire.m,
|
|
768
|
+
.wire.g {
|
|
769
|
+
filter: none;
|
|
770
|
+
animation: none;
|
|
771
|
+
stroke-dasharray: none;
|
|
772
|
+
stroke-width: 1.2;
|
|
773
|
+
opacity: 0.75;
|
|
256
774
|
}
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
opacity: 0.65;
|
|
261
|
-
}
|
|
262
|
-
50% {
|
|
263
|
-
transform: scale(1.25);
|
|
264
|
-
opacity: 1;
|
|
265
|
-
}
|
|
775
|
+
.layerA,
|
|
776
|
+
.layerB {
|
|
777
|
+
animation: none;
|
|
266
778
|
}
|
|
267
|
-
|
|
268
779
|
.ring {
|
|
269
|
-
|
|
270
|
-
transform-origin: center;
|
|
271
|
-
fill: none;
|
|
272
|
-
stroke-width: 1.4;
|
|
273
|
-
animation: ripple 5s cubic-bezier(0.2, 0.65, 0.3, 1) infinite;
|
|
274
|
-
}
|
|
275
|
-
.ring.r2 {
|
|
276
|
-
animation-delay: -1.6s;
|
|
277
|
-
}
|
|
278
|
-
.ring.r3 {
|
|
279
|
-
animation-delay: -3.2s;
|
|
280
|
-
}
|
|
281
|
-
@keyframes ripple {
|
|
282
|
-
0% {
|
|
283
|
-
transform: scale(0.4);
|
|
284
|
-
opacity: 0.9;
|
|
285
|
-
}
|
|
286
|
-
80%, 100% {
|
|
287
|
-
transform: scale(3.4);
|
|
288
|
-
opacity: 0;
|
|
289
|
-
}
|
|
290
|
-
}
|
|
291
|
-
|
|
292
|
-
/* — cinematic finish: vignette + grain + scanline shimmer — */
|
|
293
|
-
.vignette {
|
|
294
|
-
position: absolute;
|
|
295
|
-
inset: 0;
|
|
296
|
-
background:
|
|
297
|
-
radial-gradient(
|
|
298
|
-
120vmax 90vmax at 50% 42%,
|
|
299
|
-
transparent 30%,
|
|
300
|
-
rgba(2, 4, 12, 0.6) 75%,
|
|
301
|
-
rgba(2, 4, 12, 0.95) 100%
|
|
302
|
-
),
|
|
303
|
-
linear-gradient(
|
|
304
|
-
180deg,
|
|
305
|
-
rgba(2, 4, 12, 0.5),
|
|
306
|
-
transparent 18% 82%,
|
|
307
|
-
rgba(2, 4, 12, 0.75)
|
|
308
|
-
);
|
|
309
|
-
}
|
|
310
|
-
.grain {
|
|
311
|
-
position: absolute;
|
|
312
|
-
inset: 0;
|
|
313
|
-
opacity: 0.5;
|
|
314
|
-
mix-blend-mode: overlay;
|
|
315
|
-
pointer-events: none;
|
|
316
|
-
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.35'/%3E%3C/svg%3E");
|
|
317
|
-
}
|
|
318
|
-
|
|
319
|
-
/* ═══════════════════════════ THE HERO ═══════════════════════════ */
|
|
320
|
-
.hero {
|
|
321
|
-
position: relative;
|
|
322
|
-
z-index: 1;
|
|
323
|
-
flex: 1;
|
|
324
|
-
display: grid;
|
|
325
|
-
place-items: center;
|
|
326
|
-
padding: clamp(4rem, 10vh, 7rem) 1.2rem clamp(3rem, 8vh, 5rem);
|
|
327
|
-
text-align: center;
|
|
328
|
-
}
|
|
329
|
-
.stage {
|
|
330
|
-
position: relative;
|
|
331
|
-
display: grid;
|
|
332
|
-
place-items: center;
|
|
780
|
+
animation-duration: 7s;
|
|
333
781
|
}
|
|
334
|
-
|
|
335
|
-
/* — counter-rotating hexagon rings behind the wordmark — */
|
|
336
782
|
.hexring {
|
|
337
|
-
|
|
338
|
-
z-index: -1;
|
|
339
|
-
width: min(78vmin, 620px);
|
|
340
|
-
aspect-ratio: 1;
|
|
341
|
-
clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
|
|
342
|
-
background: conic-gradient(
|
|
343
|
-
from 0deg,
|
|
344
|
-
var(--cyan),
|
|
345
|
-
var(--violet),
|
|
346
|
-
var(--magenta),
|
|
347
|
-
var(--amber),
|
|
348
|
-
var(--cyan)
|
|
349
|
-
);
|
|
350
|
-
opacity: 0.5;
|
|
351
|
-
animation: spin 40s linear infinite;
|
|
352
|
-
filter: drop-shadow(0 0 30px rgba(57, 230, 255, 0.3));
|
|
353
|
-
will-change: transform;
|
|
354
|
-
}
|
|
355
|
-
.hexring::before {
|
|
356
|
-
content: "";
|
|
357
|
-
position: absolute;
|
|
358
|
-
inset: 2px;
|
|
359
|
-
clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
|
|
360
|
-
background: var(--bg);
|
|
361
|
-
}
|
|
362
|
-
.hexring.inner {
|
|
363
|
-
width: min(58vmin, 460px);
|
|
364
|
-
opacity: 0.35;
|
|
365
|
-
animation: spinrev 28s linear infinite;
|
|
366
|
-
}
|
|
367
|
-
@keyframes spinrev {
|
|
368
|
-
to {
|
|
369
|
-
transform: rotate(-1turn);
|
|
370
|
-
}
|
|
371
|
-
}
|
|
372
|
-
|
|
373
|
-
.hex-glow {
|
|
374
|
-
position: absolute;
|
|
375
|
-
z-index: -2;
|
|
376
|
-
width: min(70vmin, 560px);
|
|
377
|
-
aspect-ratio: 1;
|
|
378
|
-
border-radius: 50%;
|
|
379
|
-
background: radial-gradient(
|
|
380
|
-
circle,
|
|
381
|
-
rgba(57, 230, 255, 0.16),
|
|
382
|
-
rgba(168, 120, 255, 0.08) 45%,
|
|
383
|
-
transparent 70%
|
|
384
|
-
);
|
|
385
|
-
animation: breath 7s ease-in-out infinite;
|
|
386
|
-
will-change: transform, opacity;
|
|
387
|
-
}
|
|
388
|
-
@keyframes breath {
|
|
389
|
-
0%, 100% {
|
|
390
|
-
transform: scale(0.94);
|
|
391
|
-
opacity: 0.7;
|
|
392
|
-
}
|
|
393
|
-
50% {
|
|
394
|
-
transform: scale(1.06);
|
|
395
|
-
opacity: 1;
|
|
396
|
-
}
|
|
397
|
-
}
|
|
398
|
-
|
|
399
|
-
.kicker {
|
|
400
|
-
font-size: clamp(0.72rem, 1.8vw, 0.9rem);
|
|
401
|
-
letter-spacing: 0.55em;
|
|
402
|
-
padding-left: 0.55em;
|
|
403
|
-
text-transform: uppercase;
|
|
404
|
-
color: var(--dim);
|
|
405
|
-
animation: up 0.9s 0.1s cubic-bezier(0.2, 0.7, 0.2, 1) both;
|
|
783
|
+
filter: none;
|
|
406
784
|
}
|
|
407
|
-
.kicker b {
|
|
408
|
-
color: var(--cyan);
|
|
409
|
-
font-weight: 600;
|
|
410
|
-
}
|
|
411
|
-
|
|
412
785
|
h1 {
|
|
413
|
-
|
|
414
|
-
|
|
415
|
-
|
|
416
|
-
line-height: 0.95;
|
|
417
|
-
letter-spacing: 0.08em;
|
|
418
|
-
margin-left: 0.08em;
|
|
419
|
-
background: linear-gradient(
|
|
420
|
-
95deg,
|
|
421
|
-
#8ff2ff 0%,
|
|
422
|
-
#fff 22%,
|
|
423
|
-
var(--cyan) 42%,
|
|
424
|
-
var(--violet) 68%,
|
|
425
|
-
var(--magenta) 100%
|
|
426
|
-
);
|
|
427
|
-
background-size: 250% 100%;
|
|
428
|
-
-webkit-background-clip: text;
|
|
429
|
-
background-clip: text;
|
|
430
|
-
color: transparent;
|
|
431
|
-
animation:
|
|
432
|
-
up 1s 0.2s cubic-bezier(0.2, 0.7, 0.2, 1) both,
|
|
433
|
-
sheen 8s 1.2s ease-in-out infinite;
|
|
434
|
-
filter: drop-shadow(0 0 22px rgba(57, 230, 255, 0.35)) drop-shadow(
|
|
435
|
-
0 8px 60px rgba(168, 120, 255, 0.25)
|
|
436
|
-
);
|
|
437
|
-
/* gradient-clipped text flickers on iOS while its background animates
|
|
438
|
-
unless the element sits on its own composited layer */
|
|
439
|
-
-webkit-backface-visibility: hidden;
|
|
440
|
-
backface-visibility: hidden;
|
|
441
|
-
transform: translateZ(0);
|
|
442
|
-
}
|
|
443
|
-
@keyframes sheen {
|
|
444
|
-
0%, 100% {
|
|
445
|
-
background-position: 0% 50%;
|
|
446
|
-
}
|
|
447
|
-
50% {
|
|
448
|
-
background-position: 100% 50%;
|
|
449
|
-
}
|
|
450
|
-
}
|
|
451
|
-
|
|
452
|
-
/* ghost echo behind the wordmark */
|
|
453
|
-
.echo {
|
|
454
|
-
position: absolute;
|
|
455
|
-
left: 50%;
|
|
456
|
-
top: 50%;
|
|
457
|
-
z-index: -1;
|
|
458
|
-
user-select: none;
|
|
459
|
-
pointer-events: none;
|
|
460
|
-
font-size: clamp(4.6rem, 19vw, 13rem);
|
|
461
|
-
font-weight: 900;
|
|
462
|
-
line-height: 0.95;
|
|
463
|
-
letter-spacing: 0.08em;
|
|
464
|
-
padding-left: 0.08em;
|
|
465
|
-
white-space: nowrap;
|
|
466
|
-
color: transparent;
|
|
467
|
-
-webkit-text-stroke: 1px rgba(57, 230, 255, 0.22);
|
|
468
|
-
animation: echo 8s ease-in-out infinite;
|
|
469
|
-
will-change: transform, opacity;
|
|
470
|
-
}
|
|
471
|
-
@keyframes echo {
|
|
472
|
-
0%, 100% {
|
|
473
|
-
transform: translate(-50%, -50%) scale(1.07);
|
|
474
|
-
opacity: 0.5;
|
|
475
|
-
}
|
|
476
|
-
50% {
|
|
477
|
-
transform: translate(-50%, -50%) scale(1.13);
|
|
478
|
-
opacity: 0.9;
|
|
479
|
-
}
|
|
480
|
-
}
|
|
481
|
-
|
|
482
|
-
.tag {
|
|
483
|
-
margin-top: 1.1rem;
|
|
484
|
-
font-size: clamp(1.25rem, 4.2vw, 2rem);
|
|
485
|
-
font-weight: 650;
|
|
486
|
-
letter-spacing: 0.01em;
|
|
487
|
-
animation: up 1s 0.35s cubic-bezier(0.2, 0.7, 0.2, 1) both;
|
|
488
|
-
}
|
|
489
|
-
.tag em {
|
|
490
|
-
font-style: normal;
|
|
491
|
-
background: linear-gradient(90deg, var(--cyan), var(--violet));
|
|
492
|
-
-webkit-background-clip: text;
|
|
493
|
-
background-clip: text;
|
|
494
|
-
color: transparent;
|
|
495
|
-
}
|
|
496
|
-
|
|
497
|
-
.sub {
|
|
498
|
-
margin: 1.1rem auto 0;
|
|
499
|
-
max-width: 36em;
|
|
500
|
-
color: var(--dim);
|
|
501
|
-
font-size: clamp(0.98rem, 2.6vw, 1.15rem);
|
|
502
|
-
line-height: 1.7;
|
|
503
|
-
animation: up 1s 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) both;
|
|
504
|
-
}
|
|
505
|
-
.sub b {
|
|
506
|
-
color: var(--ink);
|
|
507
|
-
font-weight: 600;
|
|
508
|
-
}
|
|
509
|
-
|
|
510
|
-
@keyframes up {
|
|
511
|
-
from {
|
|
512
|
-
opacity: 0;
|
|
513
|
-
transform: translateY(26px);
|
|
514
|
-
}
|
|
515
|
-
to {
|
|
516
|
-
opacity: 1;
|
|
517
|
-
transform: none;
|
|
518
|
-
}
|
|
519
|
-
}
|
|
520
|
-
|
|
521
|
-
.cta {
|
|
522
|
-
display: flex;
|
|
523
|
-
flex-wrap: wrap;
|
|
524
|
-
gap: 1rem;
|
|
525
|
-
justify-content: center;
|
|
526
|
-
margin-top: 2.4rem;
|
|
527
|
-
animation: up 1s 0.65s cubic-bezier(0.2, 0.7, 0.2, 1) both;
|
|
528
|
-
}
|
|
529
|
-
.btn {
|
|
530
|
-
position: relative;
|
|
531
|
-
display: inline-block;
|
|
532
|
-
text-decoration: none;
|
|
533
|
-
padding: 0.95em 2em;
|
|
534
|
-
border-radius: 999px;
|
|
535
|
-
font-weight: 750;
|
|
536
|
-
font-size: clamp(0.95rem, 2.6vw, 1.06rem);
|
|
537
|
-
letter-spacing: 0.03em;
|
|
538
|
-
transition:
|
|
539
|
-
transform 0.2s ease,
|
|
540
|
-
box-shadow 0.2s ease,
|
|
541
|
-
background 0.2s ease;
|
|
542
|
-
}
|
|
543
|
-
.btn:focus-visible {
|
|
544
|
-
outline: 2px solid var(--cyan);
|
|
545
|
-
outline-offset: 4px;
|
|
786
|
+
animation: up 1s 0.2s cubic-bezier(0.2, 0.7, 0.2, 1) both;
|
|
787
|
+
background-position: 35% 50%;
|
|
788
|
+
filter: drop-shadow(0 0 22px rgba(57, 230, 255, 0.35));
|
|
546
789
|
}
|
|
547
790
|
.btn.primary {
|
|
548
|
-
|
|
549
|
-
background:
|
|
550
|
-
110deg,
|
|
551
|
-
var(--cyan),
|
|
552
|
-
var(--violet) 60%,
|
|
553
|
-
var(--magenta)
|
|
554
|
-
);
|
|
555
|
-
background-size: 200% 100%;
|
|
556
|
-
box-shadow:
|
|
557
|
-
0 0 0 1px rgba(255, 255, 255, 0.25) inset,
|
|
558
|
-
0 12px 40px rgba(57, 230, 255, 0.35);
|
|
559
|
-
animation: sheen 5s ease-in-out infinite;
|
|
560
|
-
}
|
|
561
|
-
.btn.primary:hover {
|
|
562
|
-
transform: translateY(-3px) scale(1.02);
|
|
563
|
-
box-shadow:
|
|
564
|
-
0 0 0 1px rgba(255, 255, 255, 0.3) inset,
|
|
565
|
-
0 18px 60px rgba(57, 230, 255, 0.55);
|
|
566
|
-
}
|
|
567
|
-
.btn.ghost {
|
|
568
|
-
color: var(--ink);
|
|
569
|
-
background:
|
|
570
|
-
linear-gradient(var(--bg), var(--bg)) padding-box,
|
|
571
|
-
linear-gradient(
|
|
572
|
-
120deg,
|
|
573
|
-
rgba(57, 230, 255, 0.7),
|
|
574
|
-
rgba(168, 120, 255, 0.7)
|
|
575
|
-
) border-box;
|
|
576
|
-
border: 1px solid transparent;
|
|
577
|
-
box-shadow: 0 0 24px rgba(57, 230, 255, 0.10);
|
|
578
|
-
}
|
|
579
|
-
.btn.ghost:hover {
|
|
580
|
-
transform: translateY(-3px);
|
|
581
|
-
box-shadow: 0 0 34px rgba(57, 230, 255, 0.28);
|
|
582
|
-
}
|
|
583
|
-
|
|
584
|
-
/* ═══════════════════════ TICKER + FOOTER ════════════════════════ */
|
|
585
|
-
.ticker {
|
|
586
|
-
position: relative;
|
|
587
|
-
z-index: 1;
|
|
588
|
-
overflow: hidden;
|
|
589
|
-
border-top: 1px solid rgba(147, 167, 207, 0.15);
|
|
590
|
-
border-bottom: 1px solid rgba(147, 167, 207, 0.15);
|
|
591
|
-
background: linear-gradient(
|
|
592
|
-
90deg,
|
|
593
|
-
rgba(57, 230, 255, 0.05),
|
|
594
|
-
rgba(168, 120, 255, 0.05)
|
|
595
|
-
);
|
|
596
|
-
mask-image: linear-gradient(
|
|
597
|
-
90deg,
|
|
598
|
-
transparent,
|
|
599
|
-
#000 12% 88%,
|
|
600
|
-
transparent
|
|
601
|
-
);
|
|
602
|
-
-webkit-mask-image: linear-gradient(
|
|
603
|
-
90deg,
|
|
604
|
-
transparent,
|
|
605
|
-
#000 12% 88%,
|
|
606
|
-
transparent
|
|
607
|
-
);
|
|
608
|
-
}
|
|
609
|
-
.ticker .rail {
|
|
610
|
-
display: inline-flex;
|
|
611
|
-
white-space: nowrap;
|
|
612
|
-
width: max-content;
|
|
613
|
-
animation: scroll 34s linear infinite;
|
|
614
|
-
will-change: transform;
|
|
615
|
-
}
|
|
616
|
-
.ticker span {
|
|
617
|
-
padding: 0.72em 0;
|
|
618
|
-
font-size: 0.8rem;
|
|
619
|
-
letter-spacing: 0.28em;
|
|
620
|
-
text-transform: uppercase;
|
|
621
|
-
color: var(--dim);
|
|
622
|
-
}
|
|
623
|
-
.ticker span::after {
|
|
624
|
-
content: "⬡";
|
|
625
|
-
margin: 0 1.6em;
|
|
626
|
-
color: var(--cyan);
|
|
627
|
-
opacity: 0.7;
|
|
628
|
-
}
|
|
629
|
-
@keyframes scroll {
|
|
630
|
-
to {
|
|
631
|
-
transform: translateX(-50%);
|
|
632
|
-
}
|
|
633
|
-
}
|
|
634
|
-
|
|
635
|
-
footer {
|
|
636
|
-
position: relative;
|
|
637
|
-
z-index: 1;
|
|
638
|
-
padding: 1.4rem 1.2rem 1.8rem;
|
|
639
|
-
text-align: center;
|
|
640
|
-
color: var(--dim);
|
|
641
|
-
font-size: 0.83rem;
|
|
642
|
-
line-height: 1.9;
|
|
643
|
-
}
|
|
644
|
-
footer a {
|
|
645
|
-
color: var(--cyan);
|
|
646
|
-
text-decoration: none;
|
|
647
|
-
}
|
|
648
|
-
footer a:hover {
|
|
649
|
-
text-decoration: underline;
|
|
650
|
-
text-shadow: 0 0 12px rgba(57, 230, 255, 0.6);
|
|
651
|
-
}
|
|
652
|
-
footer .lic {
|
|
653
|
-
opacity: 0.85;
|
|
654
|
-
}
|
|
655
|
-
|
|
656
|
-
/* ————————————————————————— small screens ————————————————————————— */
|
|
657
|
-
@media (max-width: 640px) {
|
|
658
|
-
.lattice {
|
|
659
|
-
background-size: 44px 44px, 11px 11px;
|
|
660
|
-
}
|
|
661
|
-
.hexring {
|
|
662
|
-
width: 92vmin;
|
|
663
|
-
}
|
|
664
|
-
.hexring.inner {
|
|
665
|
-
width: 70vmin;
|
|
666
|
-
}
|
|
667
|
-
.kicker {
|
|
668
|
-
letter-spacing: 0.28em;
|
|
669
|
-
padding-left: 0.28em;
|
|
670
|
-
}
|
|
671
|
-
}
|
|
672
|
-
|
|
673
|
-
/* ——————————————————— mobile / touch performance ——————————————————
|
|
674
|
-
Phones can't sustain the per-frame repaint work: SVG dash/scale
|
|
675
|
-
animations and background-position sheens repaint every frame, and
|
|
676
|
-
each pass runs through blur/drop-shadow filters. Strip the filters
|
|
677
|
-
and the repaint-driven animations; keep every compositor-friendly
|
|
678
|
-
transform/opacity animation so the page stays alive. */
|
|
679
|
-
@media (max-width: 820px), (pointer: coarse) {
|
|
680
|
-
.orb {
|
|
681
|
-
filter: blur(40px);
|
|
682
|
-
}
|
|
683
|
-
.aurora {
|
|
684
|
-
animation: none;
|
|
685
|
-
}
|
|
686
|
-
.grain {
|
|
687
|
-
display: none;
|
|
688
|
-
}
|
|
689
|
-
.wire,
|
|
690
|
-
.wire.v,
|
|
691
|
-
.wire.m,
|
|
692
|
-
.wire.g {
|
|
693
|
-
filter: none;
|
|
694
|
-
animation: none;
|
|
695
|
-
stroke-dasharray: none;
|
|
696
|
-
stroke-width: 1.2;
|
|
697
|
-
opacity: 0.75;
|
|
698
|
-
}
|
|
699
|
-
.layerA,
|
|
700
|
-
.layerB {
|
|
701
|
-
animation: none;
|
|
702
|
-
}
|
|
703
|
-
.ring {
|
|
704
|
-
animation-duration: 7s;
|
|
705
|
-
}
|
|
706
|
-
.hexring {
|
|
707
|
-
filter: none;
|
|
708
|
-
}
|
|
709
|
-
h1 {
|
|
710
|
-
animation: up 1s 0.2s cubic-bezier(0.2, 0.7, 0.2, 1) both;
|
|
711
|
-
background-position: 35% 50%;
|
|
712
|
-
filter: drop-shadow(0 0 22px rgba(57, 230, 255, 0.35));
|
|
713
|
-
}
|
|
714
|
-
.btn.primary {
|
|
715
|
-
animation: none;
|
|
716
|
-
background-position: 50% 50%;
|
|
717
|
-
}
|
|
718
|
-
}
|
|
719
|
-
|
|
720
|
-
/* ————————————————————————— reduced motion ———————————————————————— */
|
|
721
|
-
@media (prefers-reduced-motion: reduce) {
|
|
722
|
-
*, *::before, *::after {
|
|
723
|
-
animation: none !important;
|
|
724
|
-
}
|
|
791
|
+
animation: none;
|
|
792
|
+
background-position: 50% 50%;
|
|
725
793
|
}
|
|
794
|
+
}
|
|
795
|
+
|
|
796
|
+
/* ————————————————————————— reduced motion ———————————————————————— */
|
|
797
|
+
@media (prefers-reduced-motion: reduce) {
|
|
798
|
+
*,
|
|
799
|
+
*::before,
|
|
800
|
+
*::after {
|
|
801
|
+
animation: none !important;
|
|
802
|
+
}
|
|
803
|
+
}
|
|
726
804
|
</style>
|
|
727
805
|
</head>
|
|
728
806
|
<body>
|
|
@@ -915,6 +993,36 @@
|
|
|
915
993
|
>View on GitHub</a>
|
|
916
994
|
<a class="btn ghost" href="mailto:reis.marcelo@gmail.com">Contact</a>
|
|
917
995
|
</div>
|
|
996
|
+
|
|
997
|
+
<section class="grab" aria-labelledby="grab-t">
|
|
998
|
+
<p class="lede" id="grab-t">try it — <b>one file, zero setup</b></p>
|
|
999
|
+
<p class="note">
|
|
1000
|
+
A self-contained app that opens a <b>web chat with Sema</b>. Download,
|
|
1001
|
+
run, start talking — nothing to install.
|
|
1002
|
+
</p>
|
|
1003
|
+
<div class="grabs">
|
|
1004
|
+
<a
|
|
1005
|
+
class="chip"
|
|
1006
|
+
href="https://huggingface.co/buckets/hviana/sema-binary-examples/resolve/sema-demo-windows-x64.exe?download=true"
|
|
1007
|
+
>Windows <span>85 MB</span></a>
|
|
1008
|
+
<a
|
|
1009
|
+
class="chip"
|
|
1010
|
+
href="https://huggingface.co/buckets/hviana/sema-binary-examples/resolve/sema-demo-macos-arm64?download=true"
|
|
1011
|
+
>Mac <span>M1–M4 · 73 MB</span></a>
|
|
1012
|
+
<a
|
|
1013
|
+
class="chip"
|
|
1014
|
+
href="https://huggingface.co/buckets/hviana/sema-binary-examples/resolve/sema-demo-macos-x64?download=true"
|
|
1015
|
+
>Mac <span>Intel · 85 MB</span></a>
|
|
1016
|
+
<a
|
|
1017
|
+
class="chip"
|
|
1018
|
+
href="https://huggingface.co/buckets/hviana/sema-binary-examples/resolve/sema-demo-linux-x64?download=true"
|
|
1019
|
+
>Linux <span>Intel/AMD · 113 MB</span></a>
|
|
1020
|
+
<a
|
|
1021
|
+
class="chip"
|
|
1022
|
+
href="https://huggingface.co/buckets/hviana/sema-binary-examples/resolve/sema-demo-linux-arm64?download=true"
|
|
1023
|
+
>Linux <span>ARM · 114 MB</span></a>
|
|
1024
|
+
</div>
|
|
1025
|
+
</section>
|
|
918
1026
|
</div>
|
|
919
1027
|
</main>
|
|
920
1028
|
|