damage calculator
feat: provide font files
+285
-170
+1
-1
app/index.html
+1
-1
app/index.html
app/public/fonts/Avenir-Bold.ttf
app/public/fonts/Avenir-Bold.ttf
This is a binary file and will not be displayed.
app/public/fonts/Avenir-BoldOblique.ttf
app/public/fonts/Avenir-BoldOblique.ttf
This is a binary file and will not be displayed.
app/public/fonts/Avenir-ExtraBold.ttf
app/public/fonts/Avenir-ExtraBold.ttf
This is a binary file and will not be displayed.
app/public/fonts/Avenir-ExtraBoldOblique.ttf
app/public/fonts/Avenir-ExtraBoldOblique.ttf
This is a binary file and will not be displayed.
app/public/fonts/Avenir-ExtraLight.ttf
app/public/fonts/Avenir-ExtraLight.ttf
This is a binary file and will not be displayed.
app/public/fonts/Avenir-ExtraLightOblique.ttf
app/public/fonts/Avenir-ExtraLightOblique.ttf
This is a binary file and will not be displayed.
app/public/fonts/Avenir-Light.ttf
app/public/fonts/Avenir-Light.ttf
This is a binary file and will not be displayed.
app/public/fonts/Avenir-LightOblique.ttf
app/public/fonts/Avenir-LightOblique.ttf
This is a binary file and will not be displayed.
app/public/fonts/Avenir-Medium.ttf
app/public/fonts/Avenir-Medium.ttf
This is a binary file and will not be displayed.
app/public/fonts/Avenir-MediumOblique.ttf
app/public/fonts/Avenir-MediumOblique.ttf
This is a binary file and will not be displayed.
app/public/fonts/Avenir-Oblique.ttf
app/public/fonts/Avenir-Oblique.ttf
This is a binary file and will not be displayed.
app/public/fonts/Avenir-Regular.ttf
app/public/fonts/Avenir-Regular.ttf
This is a binary file and will not be displayed.
+284
-169
app/src/styles.css
+284
-169
app/src/styles.css
···
1
-
@import url("https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,700&family=Manrope:wght@400;500;600;700;800&display=swap");
2
-
@import "tailwindcss";
1
+
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,700&family=Manrope:wght@400;500;600;700;800&display=swap');
2
+
@import 'tailwindcss';
3
3
@plugin "@tailwindcss/typography";
4
4
5
+
@font-face {
6
+
font-family: Avenir;
7
+
font-style: normal;
8
+
font-weight: 200;
9
+
font-display: swap;
10
+
src: url('/fonts/Avenir-ExtraLight.ttf') format('truetype');
11
+
}
12
+
13
+
@font-face {
14
+
font-family: Avenir;
15
+
font-style: oblique;
16
+
font-weight: 200;
17
+
font-display: swap;
18
+
src: url('/fonts/Avenir-ExtraLightOblique.ttf') format('truetype');
19
+
}
20
+
21
+
@font-face {
22
+
font-family: Avenir;
23
+
font-style: normal;
24
+
font-weight: 300;
25
+
font-display: swap;
26
+
src: url('/fonts/Avenir-Light.ttf') format('truetype');
27
+
}
28
+
29
+
@font-face {
30
+
font-family: Avenir;
31
+
font-style: oblique;
32
+
font-weight: 300;
33
+
font-display: swap;
34
+
src: url('/fonts/Avenir-LightOblique.ttf') format('truetype');
35
+
}
36
+
37
+
@font-face {
38
+
font-family: Avenir;
39
+
font-style: normal;
40
+
font-weight: 400;
41
+
font-display: swap;
42
+
src: url('/fonts/Avenir-Regular.ttf') format('truetype');
43
+
}
44
+
45
+
@font-face {
46
+
font-family: Avenir;
47
+
font-style: oblique;
48
+
font-weight: 400;
49
+
font-display: swap;
50
+
src: url('/fonts/Avenir-Oblique.ttf') format('truetype');
51
+
}
52
+
53
+
@font-face {
54
+
font-family: Avenir;
55
+
font-style: normal;
56
+
font-weight: 500;
57
+
font-display: swap;
58
+
src: url('/fonts/Avenir-Medium.ttf') format('truetype');
59
+
}
60
+
61
+
@font-face {
62
+
font-family: Avenir;
63
+
font-style: oblique;
64
+
font-weight: 500;
65
+
font-display: swap;
66
+
src: url('/fonts/Avenir-MediumOblique.ttf') format('truetype');
67
+
}
68
+
69
+
@font-face {
70
+
font-family: Avenir;
71
+
font-style: normal;
72
+
font-weight: 700;
73
+
font-display: swap;
74
+
src: url('/fonts/Avenir-Bold.ttf') format('truetype');
75
+
}
76
+
77
+
@font-face {
78
+
font-family: Avenir;
79
+
font-style: oblique;
80
+
font-weight: 700;
81
+
font-display: swap;
82
+
src: url('/fonts/Avenir-BoldOblique.ttf') format('truetype');
83
+
}
84
+
85
+
@font-face {
86
+
font-family: Avenir;
87
+
font-style: normal;
88
+
font-weight: 800;
89
+
font-display: swap;
90
+
src: url('/fonts/Avenir-ExtraBold.ttf') format('truetype');
91
+
}
92
+
93
+
@font-face {
94
+
font-family: Avenir;
95
+
font-style: oblique;
96
+
font-weight: 800;
97
+
font-display: swap;
98
+
src: url('/fonts/Avenir-ExtraBoldOblique.ttf') format('truetype');
99
+
}
100
+
5
101
@theme {
6
-
--font-sans: "Manrope", ui-sans-serif, system-ui, sans-serif;
102
+
--font-sans: 'Avenir', ui-sans-serif, system-ui, sans-serif;
103
+
}
104
+
105
+
.italic {
106
+
font-style: oblique;
7
107
}
8
108
9
109
:root {
10
-
--sea-ink: #173a40;
11
-
--sea-ink-soft: #416166;
12
-
--lagoon: #4fb8b2;
13
-
--lagoon-deep: #328f97;
14
-
--palm: #2f6a4a;
15
-
--sand: #e7f0e8;
16
-
--foam: #f3faf5;
17
-
--surface: rgba(255, 255, 255, 0.74);
18
-
--surface-strong: rgba(255, 255, 255, 0.9);
19
-
--line: rgba(23, 58, 64, 0.14);
20
-
--inset-glint: rgba(255, 255, 255, 0.82);
21
-
--kicker: rgba(47, 106, 74, 0.9);
22
-
--bg-base: #e7f3ec;
23
-
--header-bg: rgba(251, 255, 248, 0.84);
24
-
--chip-bg: rgba(255, 255, 255, 0.8);
25
-
--chip-line: rgba(47, 106, 74, 0.18);
26
-
--link-bg-hover: rgba(255, 255, 255, 0.9);
27
-
--hero-a: rgba(79, 184, 178, 0.36);
28
-
--hero-b: rgba(47, 106, 74, 0.2);
110
+
--sea-ink: #173a40;
111
+
--sea-ink-soft: #416166;
112
+
--lagoon: #4fb8b2;
113
+
--lagoon-deep: #328f97;
114
+
--palm: #2f6a4a;
115
+
--sand: #e7f0e8;
116
+
--foam: #f3faf5;
117
+
--surface: rgba(255, 255, 255, 0.74);
118
+
--surface-strong: rgba(255, 255, 255, 0.9);
119
+
--line: rgba(23, 58, 64, 0.14);
120
+
--inset-glint: rgba(255, 255, 255, 0.82);
121
+
--kicker: rgba(47, 106, 74, 0.9);
122
+
--bg-base: #e7f3ec;
123
+
--header-bg: rgba(251, 255, 248, 0.84);
124
+
--chip-bg: rgba(255, 255, 255, 0.8);
125
+
--chip-line: rgba(47, 106, 74, 0.18);
126
+
--link-bg-hover: rgba(255, 255, 255, 0.9);
127
+
--hero-a: rgba(79, 184, 178, 0.36);
128
+
--hero-b: rgba(47, 106, 74, 0.2);
29
129
}
30
130
31
-
:root[data-theme="dark"] {
32
-
--sea-ink: #d7ece8;
33
-
--sea-ink-soft: #afcdc8;
34
-
--lagoon: #60d7cf;
35
-
--lagoon-deep: #8de5db;
36
-
--palm: #6ec89a;
37
-
--sand: #0f1a1e;
38
-
--foam: #101d22;
39
-
--surface: rgba(16, 30, 34, 0.8);
40
-
--surface-strong: rgba(15, 27, 31, 0.92);
41
-
--line: rgba(141, 229, 219, 0.18);
42
-
--inset-glint: rgba(194, 247, 238, 0.14);
43
-
--kicker: #b8efe5;
44
-
--bg-base: #0a1418;
45
-
--header-bg: rgba(10, 20, 24, 0.8);
46
-
--chip-bg: rgba(13, 28, 32, 0.9);
47
-
--chip-line: rgba(141, 229, 219, 0.24);
48
-
--link-bg-hover: rgba(24, 44, 49, 0.8);
49
-
--hero-a: rgba(96, 215, 207, 0.18);
50
-
--hero-b: rgba(110, 200, 154, 0.12);
131
+
:root[data-theme='dark'] {
132
+
--sea-ink: #d7ece8;
133
+
--sea-ink-soft: #afcdc8;
134
+
--lagoon: #60d7cf;
135
+
--lagoon-deep: #8de5db;
136
+
--palm: #6ec89a;
137
+
--sand: #0f1a1e;
138
+
--foam: #101d22;
139
+
--surface: rgba(16, 30, 34, 0.8);
140
+
--surface-strong: rgba(15, 27, 31, 0.92);
141
+
--line: rgba(141, 229, 219, 0.18);
142
+
--inset-glint: rgba(194, 247, 238, 0.14);
143
+
--kicker: #b8efe5;
144
+
--bg-base: #0a1418;
145
+
--header-bg: rgba(10, 20, 24, 0.8);
146
+
--chip-bg: rgba(13, 28, 32, 0.9);
147
+
--chip-line: rgba(141, 229, 219, 0.24);
148
+
--link-bg-hover: rgba(24, 44, 49, 0.8);
149
+
--hero-a: rgba(96, 215, 207, 0.18);
150
+
--hero-b: rgba(110, 200, 154, 0.12);
51
151
}
52
152
53
153
@media (prefers-color-scheme: dark) {
54
-
:root:not([data-theme="light"]) {
55
-
--sea-ink: #d7ece8;
56
-
--sea-ink-soft: #afcdc8;
57
-
--lagoon: #60d7cf;
58
-
--lagoon-deep: #8de5db;
59
-
--palm: #6ec89a;
60
-
--sand: #0f1a1e;
61
-
--foam: #101d22;
62
-
--surface: rgba(16, 30, 34, 0.8);
63
-
--surface-strong: rgba(15, 27, 31, 0.92);
64
-
--line: rgba(141, 229, 219, 0.18);
65
-
--inset-glint: rgba(194, 247, 238, 0.14);
66
-
--kicker: #b8efe5;
67
-
--bg-base: #0a1418;
68
-
--header-bg: rgba(10, 20, 24, 0.8);
69
-
--chip-bg: rgba(13, 28, 32, 0.9);
70
-
--chip-line: rgba(141, 229, 219, 0.24);
71
-
--link-bg-hover: rgba(24, 44, 49, 0.8);
72
-
--hero-a: rgba(96, 215, 207, 0.18);
73
-
--hero-b: rgba(110, 200, 154, 0.12);
74
-
}
154
+
:root:not([data-theme='light']) {
155
+
--sea-ink: #d7ece8;
156
+
--sea-ink-soft: #afcdc8;
157
+
--lagoon: #60d7cf;
158
+
--lagoon-deep: #8de5db;
159
+
--palm: #6ec89a;
160
+
--sand: #0f1a1e;
161
+
--foam: #101d22;
162
+
--surface: rgba(16, 30, 34, 0.8);
163
+
--surface-strong: rgba(15, 27, 31, 0.92);
164
+
--line: rgba(141, 229, 219, 0.18);
165
+
--inset-glint: rgba(194, 247, 238, 0.14);
166
+
--kicker: #b8efe5;
167
+
--bg-base: #0a1418;
168
+
--header-bg: rgba(10, 20, 24, 0.8);
169
+
--chip-bg: rgba(13, 28, 32, 0.9);
170
+
--chip-line: rgba(141, 229, 219, 0.24);
171
+
--link-bg-hover: rgba(24, 44, 49, 0.8);
172
+
--hero-a: rgba(96, 215, 207, 0.18);
173
+
--hero-b: rgba(110, 200, 154, 0.12);
174
+
}
75
175
}
76
176
77
177
* {
78
-
box-sizing: border-box;
178
+
box-sizing: border-box;
79
179
}
80
180
81
181
html,
82
182
body,
83
183
#app {
84
-
min-height: 100%;
184
+
min-height: 100%;
85
185
}
86
186
87
187
body {
88
-
margin: 0;
89
-
color: var(--sea-ink);
90
-
font-family: var(--font-sans);
91
-
background-color: var(--bg-base);
92
-
background:
93
-
radial-gradient(1100px 620px at -8% -10%, var(--hero-a), transparent 58%),
94
-
radial-gradient(1050px 620px at 112% -12%, var(--hero-b), transparent 62%),
95
-
radial-gradient(720px 380px at 50% 115%, rgba(79, 184, 178, 0.1), transparent 68%),
96
-
linear-gradient(180deg, color-mix(in oklab, var(--sand) 68%, white) 0%, var(--foam) 44%, var(--bg-base) 100%);
97
-
overflow-x: hidden;
98
-
-webkit-font-smoothing: antialiased;
99
-
-moz-osx-font-smoothing: grayscale;
188
+
margin: 0;
189
+
color: var(--sea-ink);
190
+
font-family: var(--font-sans);
191
+
background-color: var(--bg-base);
192
+
background:
193
+
radial-gradient(1100px 620px at -8% -10%, var(--hero-a), transparent 58%),
194
+
radial-gradient(1050px 620px at 112% -12%, var(--hero-b), transparent 62%),
195
+
radial-gradient(720px 380px at 50% 115%,
196
+
rgba(79, 184, 178, 0.1),
197
+
transparent 68%),
198
+
linear-gradient(180deg,
199
+
color-mix(in oklab, var(--sand) 68%, white) 0%,
200
+
var(--foam) 44%,
201
+
var(--bg-base) 100%);
202
+
overflow-x: hidden;
203
+
-webkit-font-smoothing: antialiased;
204
+
-moz-osx-font-smoothing: grayscale;
100
205
}
101
206
102
207
body::before {
103
-
content: "";
104
-
position: fixed;
105
-
inset: 0;
106
-
pointer-events: none;
107
-
z-index: -1;
108
-
opacity: 0.28;
109
-
background:
110
-
radial-gradient(circle at 20% 15%, rgba(255, 255, 255, 0.8), transparent 34%),
111
-
radial-gradient(circle at 78% 26%, rgba(79, 184, 178, 0.2), transparent 42%),
112
-
radial-gradient(circle at 42% 82%, rgba(47, 106, 74, 0.14), transparent 36%);
208
+
content: '';
209
+
position: fixed;
210
+
inset: 0;
211
+
pointer-events: none;
212
+
z-index: -1;
213
+
opacity: 0.28;
214
+
background:
215
+
radial-gradient(circle at 20% 15%,
216
+
rgba(255, 255, 255, 0.8),
217
+
transparent 34%),
218
+
radial-gradient(circle at 78% 26%,
219
+
rgba(79, 184, 178, 0.2),
220
+
transparent 42%),
221
+
radial-gradient(circle at 42% 82%, rgba(47, 106, 74, 0.14), transparent 36%);
113
222
}
114
223
115
224
body::after {
116
-
content: "";
117
-
position: fixed;
118
-
inset: 0;
119
-
pointer-events: none;
120
-
z-index: -1;
121
-
opacity: 0.14;
122
-
background-image:
123
-
linear-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px),
124
-
linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
125
-
background-size: 28px 28px;
126
-
mask-image: radial-gradient(circle at 50% 30%, black, transparent 78%);
225
+
content: '';
226
+
position: fixed;
227
+
inset: 0;
228
+
pointer-events: none;
229
+
z-index: -1;
230
+
opacity: 0.14;
231
+
background-image:
232
+
linear-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px),
233
+
linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
234
+
background-size: 28px 28px;
235
+
mask-image: radial-gradient(circle at 50% 30%, black, transparent 78%);
127
236
}
128
237
129
238
a {
130
-
color: var(--lagoon-deep);
131
-
text-decoration-color: rgba(50, 143, 151, 0.4);
132
-
text-decoration-thickness: 1px;
133
-
text-underline-offset: 2px;
239
+
color: var(--lagoon-deep);
240
+
text-decoration-color: rgba(50, 143, 151, 0.4);
241
+
text-decoration-thickness: 1px;
242
+
text-underline-offset: 2px;
134
243
}
135
244
136
245
a:hover {
137
-
color: #246f76;
246
+
color: #246f76;
138
247
}
139
248
140
249
code {
141
-
font-size: 0.9em;
142
-
border: 1px solid var(--line);
143
-
background: color-mix(in oklab, var(--surface-strong) 82%, white 18%);
144
-
border-radius: 7px;
145
-
padding: 2px 7px;
250
+
font-size: 0.9em;
251
+
border: 1px solid var(--line);
252
+
background: color-mix(in oklab, var(--surface-strong) 82%, white 18%);
253
+
border-radius: 7px;
254
+
padding: 2px 7px;
146
255
}
147
256
148
257
pre code {
149
-
border: 0;
150
-
background: transparent;
151
-
padding: 0;
152
-
border-radius: 0;
153
-
font-size: inherit;
154
-
color: inherit;
258
+
border: 0;
259
+
background: transparent;
260
+
padding: 0;
261
+
border-radius: 0;
262
+
font-size: inherit;
263
+
color: inherit;
155
264
}
156
265
157
266
.page-wrap {
158
-
width: min(1080px, calc(100% - 2rem));
159
-
margin-inline: auto;
267
+
width: min(1080px, calc(100% - 2rem));
268
+
margin-inline: auto;
160
269
}
161
270
162
271
.display-title {
163
-
font-family: "Fraunces", Georgia, serif;
272
+
font-family: 'Fraunces', Georgia, serif;
164
273
}
165
274
166
275
.island-shell {
167
-
border: 1px solid var(--line);
168
-
background: linear-gradient(165deg, var(--surface-strong), var(--surface));
169
-
box-shadow:
170
-
0 1px 0 var(--inset-glint) inset,
171
-
0 22px 44px rgba(30, 90, 72, 0.1),
172
-
0 6px 18px rgba(23, 58, 64, 0.08);
173
-
backdrop-filter: blur(4px);
276
+
border: 1px solid var(--line);
277
+
background: linear-gradient(165deg, var(--surface-strong), var(--surface));
278
+
box-shadow:
279
+
0 1px 0 var(--inset-glint) inset,
280
+
0 22px 44px rgba(30, 90, 72, 0.1),
281
+
0 6px 18px rgba(23, 58, 64, 0.08);
282
+
backdrop-filter: blur(4px);
174
283
}
175
284
176
285
.feature-card {
177
-
background: linear-gradient(165deg, color-mix(in oklab, var(--surface-strong) 93%, white 7%), var(--surface));
178
-
box-shadow:
179
-
0 1px 0 var(--inset-glint) inset,
180
-
0 18px 34px rgba(30, 90, 72, 0.1),
181
-
0 4px 14px rgba(23, 58, 64, 0.06);
286
+
background: linear-gradient(165deg,
287
+
color-mix(in oklab, var(--surface-strong) 93%, white 7%),
288
+
var(--surface));
289
+
box-shadow:
290
+
0 1px 0 var(--inset-glint) inset,
291
+
0 18px 34px rgba(30, 90, 72, 0.1),
292
+
0 4px 14px rgba(23, 58, 64, 0.06);
182
293
}
183
294
184
295
.feature-card:hover {
185
-
transform: translateY(-2px);
186
-
border-color: color-mix(in oklab, var(--lagoon-deep) 35%, var(--line));
296
+
transform: translateY(-2px);
297
+
border-color: color-mix(in oklab, var(--lagoon-deep) 35%, var(--line));
187
298
}
188
299
189
300
button,
190
301
.island-shell,
191
302
a {
192
-
transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease,
193
-
transform 180ms ease;
303
+
transition:
304
+
background-color 180ms ease,
305
+
color 180ms ease,
306
+
border-color 180ms ease,
307
+
transform 180ms ease;
194
308
}
195
309
196
310
.island-kicker {
197
-
letter-spacing: 0.16em;
198
-
text-transform: uppercase;
199
-
font-weight: 700;
200
-
font-size: 0.69rem;
201
-
color: var(--kicker);
311
+
letter-spacing: 0.16em;
312
+
text-transform: uppercase;
313
+
font-weight: 700;
314
+
font-size: 0.69rem;
315
+
color: var(--kicker);
202
316
}
203
317
204
318
.nav-link {
205
-
position: relative;
206
-
display: inline-flex;
207
-
align-items: center;
208
-
text-decoration: none;
209
-
color: var(--sea-ink-soft);
319
+
position: relative;
320
+
display: inline-flex;
321
+
align-items: center;
322
+
text-decoration: none;
323
+
color: var(--sea-ink-soft);
210
324
}
211
325
212
326
.nav-link::after {
213
-
content: "";
214
-
position: absolute;
215
-
left: 0;
216
-
bottom: -6px;
217
-
width: 100%;
218
-
height: 2px;
219
-
transform: scaleX(0);
220
-
transform-origin: left;
221
-
background: linear-gradient(90deg, var(--lagoon), #7ed3bf);
222
-
transition: transform 170ms ease;
327
+
content: '';
328
+
position: absolute;
329
+
left: 0;
330
+
bottom: -6px;
331
+
width: 100%;
332
+
height: 2px;
333
+
transform: scaleX(0);
334
+
transform-origin: left;
335
+
background: linear-gradient(90deg, var(--lagoon), #7ed3bf);
336
+
transition: transform 170ms ease;
223
337
}
224
338
225
339
.nav-link:hover,
226
340
.nav-link.is-active {
227
-
color: var(--sea-ink);
341
+
color: var(--sea-ink);
228
342
}
229
343
230
344
.nav-link:hover::after,
231
345
.nav-link.is-active::after {
232
-
transform: scaleX(1);
346
+
transform: scaleX(1);
233
347
}
234
348
235
349
@media (max-width: 640px) {
236
-
.nav-link::after {
237
-
bottom: -4px;
238
-
}
350
+
.nav-link::after {
351
+
bottom: -4px;
352
+
}
239
353
}
240
354
241
355
.site-footer {
242
-
border-top: 1px solid var(--line);
243
-
background: color-mix(in oklab, var(--header-bg) 84%, transparent 16%);
356
+
border-top: 1px solid var(--line);
357
+
background: color-mix(in oklab, var(--header-bg) 84%, transparent 16%);
244
358
}
245
359
246
360
.rise-in {
247
-
animation: rise-in 700ms cubic-bezier(0.16, 1, 0.3, 1) both;
361
+
animation: rise-in 700ms cubic-bezier(0.16, 1, 0.3, 1) both;
248
362
}
249
363
250
364
@keyframes rise-in {
251
-
from {
252
-
opacity: 0;
253
-
transform: translateY(12px);
254
-
}
255
-
to {
256
-
opacity: 1;
257
-
transform: translateY(0);
258
-
}
365
+
from {
366
+
opacity: 0;
367
+
transform: translateY(12px);
368
+
}
369
+
370
+
to {
371
+
opacity: 1;
372
+
transform: translateY(0);
373
+
}
259
374
}