-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathband-application.html
More file actions
371 lines (352 loc) · 25.9 KB
/
band-application.html
File metadata and controls
371 lines (352 loc) · 25.9 KB
1
2
3
4
5
6
7
8
9
10
11
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
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
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
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Apply to Join Dark Canvas Merch</title>
<link rel="stylesheet" href="https://indestructibletype.com/fonts/Jost.css" type="text/css" charset="utf-8" />
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
theme: {
extend: {
colors: {
'night-ink': '#0C090A',
'deep-charcoal': '#1A1A1B',
'mustard-yellow': '#FFDE59',
'cold-chrome': '#F5F5F7',
'muted-silver': '#C0C0C0',
'gunmetal': '#6E6E73',
},
fontFamily: {
heading: ['Jost', 'sans-serif'],
body: ['Jost', 'sans-serif'],
},
maxWidth: {
store: '84rem',
reading: '46rem',
},
boxShadow: {
'yellow-glow': '0 0 24px rgba(255, 222, 89, 0.16)',
},
}
}
}
</script>
<style>
html { scroll-behavior: smooth; }
body { background-color: #0C090A; }
</style>
</head>
<body class="bg-night-ink font-body text-cold-chrome antialiased selection:bg-mustard-yellow selection:text-night-ink">
<header class="border-b border-white/10 bg-night-ink">
<div class="mx-auto flex max-w-store items-center justify-between px-6 py-5 lg:px-8">
<a href="index.html" class="flex items-center flex-shrink-0">
<img src="https://res.cloudinary.com/dragon-fire-design-studio/image/upload/f_auto,q_90/v1777279041/Dark%20Canvas/darkcanvas-logo_xzdhmn.svg" alt="Dark Canvas Merch" class="h-8 w-auto md:h-9" />
</a>
<nav class="hidden items-center gap-8 text-sm uppercase tracking-[0.08em] text-muted-silver md:flex">
<a href="index.html" class="transition hover:text-cold-chrome">Store</a>
<a href="for-bands.html" class="transition hover:text-cold-chrome">For Bands</a>
<a href="for-bands.html#faq" class="transition hover:text-cold-chrome">FAQ</a>
</nav>
<a href="index.html" class="inline-flex items-center justify-center border border-mustard-yellow px-5 py-3 text-[0.88rem] font-[600] uppercase tracking-[0.08em] text-cold-chrome transition hover:bg-mustard-yellow hover:text-night-ink">
Back to Store
</a>
</div>
</header>
<main>
<section class="border-b border-white/10">
<div class="mx-auto grid max-w-store gap-12 px-6 py-20 lg:grid-cols-12 lg:px-8 lg:py-28">
<div class="lg:col-span-8">
<p class="text-[0.82rem] font-[600] uppercase tracking-[0.22em] text-mustard-yellow">Band Application</p>
<h1 class="mt-5 max-w-5xl text-[3.4rem] font-[700] uppercase leading-[0.98] tracking-[0.02em] text-cold-chrome sm:text-[4.4rem] lg:text-[5.1rem]">
Apply to Join Dark Canvas
</h1>
<p class="mt-8 max-w-reading text-[1.08rem] font-[450] leading-8 text-muted-silver">
Dark Canvas is a curated merch platform for bands with active UK and European demand but limited local fulfilment. We review every application by hand to make sure the fit is right for the band, the fans, and the store.
</p>
</div>
<aside class="lg:col-span-4 lg:pl-6">
<div class="border border-white/10 bg-deep-charcoal/70 p-6">
<p class="text-[0.82rem] font-[600] uppercase tracking-[0.22em] text-mustard-yellow">Best fit</p>
<p class="mt-5 text-[1.45rem] font-[700] uppercase leading-tight tracking-[0.02em] text-cold-chrome">
Bands outside the UK/EU with existing merch, active fans, and high international shipping friction.
</p>
</div>
</aside>
</div>
</section>
<section class="border-b border-white/10">
<div class="mx-auto max-w-store px-6 py-14 lg:px-8 lg:py-16">
<div class="grid gap-6 md:grid-cols-3">
<div class="border border-white/10 bg-deep-charcoal/50 p-6 text-center">
<p class="text-[0.95rem] font-[700] uppercase tracking-[0.08em] text-cold-chrome">Outside UK/EU</p>
<p class="mt-3 text-sm leading-7 text-muted-silver">Primarily US, Canada, Australia, Japan, South America, and similar regions.</p>
</div>
<div class="border border-white/10 bg-deep-charcoal/50 p-6 text-center">
<p class="text-[0.95rem] font-[700] uppercase tracking-[0.08em] text-cold-chrome">Existing Demand</p>
<p class="mt-3 text-sm leading-7 text-muted-silver">Existing merch, active fanbase, and evidence of UK or European interest.</p>
</div>
<div class="border border-white/10 bg-deep-charcoal/50 p-6 text-center">
<p class="text-[0.95rem] font-[700] uppercase tracking-[0.08em] text-cold-chrome">No Local Fulfilment</p>
<p class="mt-3 text-sm leading-7 text-muted-silver">A clear opportunity to make official merch easier to buy in the UK and EU.</p>
</div>
</div>
</div>
</section>
<section id="application">
<div class="mx-auto max-w-store px-6 py-16 lg:px-8 lg:py-20">
<form
class="grid gap-12"
name="band-application"
method="POST"
action="/thank-you.html"
data-netlify="true"
netlify
netlify-honeypot="bot-field"
>
<input type="hidden" name="form-name" value="band-application" />
<p class="hidden">
<label>Don’t fill this out if you’re human: <input name="bot-field" /></label>
</p>
<div class="grid gap-10 lg:grid-cols-[0.75fr_1.25fr]">
<div>
<p class="text-[0.82rem] font-[600] uppercase tracking-[0.22em] text-mustard-yellow">01</p>
<h2 class="mt-3 text-[2.2rem] font-[700] uppercase tracking-[0.02em] text-cold-chrome">Band details</h2>
<p class="mt-5 text-[1rem] leading-7 text-muted-silver">Start with the basics so we can understand who you are and where your current audience lives.</p>
</div>
<div class="grid gap-6 md:grid-cols-2">
<div>
<label class="mb-2 block text-[0.82rem] font-[600] uppercase tracking-[0.16em] text-cold-chrome">Band name</label>
<input name="band-name" type="text" class="w-full border border-white/15 bg-deep-charcoal px-4 py-4 text-cold-chrome outline-none transition placeholder:text-gunmetal focus:border-mustard-yellow" placeholder="Band name" />
</div>
<div>
<label class="mb-2 block text-[0.82rem] font-[600] uppercase tracking-[0.16em] text-cold-chrome">Country / region</label>
<input name="country-region" type="text" class="w-full border border-white/15 bg-deep-charcoal px-4 py-4 text-cold-chrome outline-none transition placeholder:text-gunmetal focus:border-mustard-yellow" placeholder="USA, Canada, Australia..." />
</div>
<div>
<label class="mb-2 block text-[0.82rem] font-[600] uppercase tracking-[0.16em] text-cold-chrome">Genre</label>
<input name="genre" type="text" class="w-full border border-white/15 bg-deep-charcoal px-4 py-4 text-cold-chrome outline-none transition placeholder:text-gunmetal focus:border-mustard-yellow" placeholder="Death metal, black metal, metalcore..." />
</div>
<div>
<label class="mb-2 block text-[0.82rem] font-[600] uppercase tracking-[0.16em] text-cold-chrome">Main contact email</label>
<input name="email" type="email" class="w-full border border-white/15 bg-deep-charcoal px-4 py-4 text-cold-chrome outline-none transition placeholder:text-gunmetal focus:border-mustard-yellow" placeholder="you@band.com" />
</div>
<div>
<label class="mb-2 block text-[0.82rem] font-[600] uppercase tracking-[0.16em] text-cold-chrome">Website</label>
<input name="website" type="url" class="w-full border border-white/15 bg-deep-charcoal px-4 py-4 text-cold-chrome outline-none transition placeholder:text-gunmetal focus:border-mustard-yellow" placeholder="https://" />
</div>
<div>
<label class="mb-2 block text-[0.82rem] font-[600] uppercase tracking-[0.16em] text-cold-chrome">Current store link</label>
<input name="store-link" type="url" class="w-full border border-white/15 bg-deep-charcoal px-4 py-4 text-cold-chrome outline-none transition placeholder:text-gunmetal focus:border-mustard-yellow" placeholder="https://" />
</div>
</div>
</div>
<div class="grid gap-10 border-t border-white/10 pt-12 lg:grid-cols-[0.75fr_1.25fr]">
<div>
<p class="text-[0.82rem] font-[600] uppercase tracking-[0.22em] text-mustard-yellow">02</p>
<h2 class="mt-3 text-[2.2rem] font-[700] uppercase tracking-[0.02em] text-cold-chrome">Activity & audience</h2>
<p class="mt-5 text-[1rem] leading-7 text-muted-silver">Dark Canvas is built for active bands with evidence of demand in the UK and Europe.</p>
</div>
<div class="grid gap-6">
<div class="grid gap-6 md:grid-cols-2">
<div>
<label class="mb-2 block text-[0.82rem] font-[600] uppercase tracking-[0.16em] text-cold-chrome">Released music in the last 18 months?</label>
<select name="released-last-18-months" class="w-full border border-white/15 bg-deep-charcoal px-4 py-4 text-cold-chrome outline-none transition focus:border-mustard-yellow">
<option>Please select</option>
<option>Yes</option>
<option>No</option>
</select>
</div>
<div>
<label class="mb-2 block text-[0.82rem] font-[600] uppercase tracking-[0.16em] text-cold-chrome">Toured in the last 18 months?</label>
<select name="toured-last-18-months" class="w-full border border-white/15 bg-deep-charcoal px-4 py-4 text-cold-chrome outline-none transition focus:border-mustard-yellow">
<option>Please select</option>
<option>Yes</option>
<option>No</option>
</select>
</div>
</div>
<div>
<label class="mb-2 block text-[0.82rem] font-[600] uppercase tracking-[0.16em] text-cold-chrome">Where are your strongest fan regions?</label>
<textarea name="fan-regions" rows="4" class="w-full border border-white/15 bg-deep-charcoal px-4 py-4 text-cold-chrome outline-none transition placeholder:text-gunmetal focus:border-mustard-yellow" placeholder="UK, Germany, Scandinavia, France, etc."></textarea>
</div>
<div>
<label class="mb-2 block text-[0.82rem] font-[600] uppercase tracking-[0.16em] text-cold-chrome">Do you have evidence of UK/EU demand?</label>
<textarea name="uk-eu-demand" rows="4" class="w-full border border-white/15 bg-deep-charcoal px-4 py-4 text-cold-chrome outline-none transition placeholder:text-gunmetal focus:border-mustard-yellow" placeholder="Streaming numbers, tour history, merch enquiries, comments, fan groups, mailing list data..."></textarea>
</div>
<div>
<label class="mb-2 block text-[0.82rem] font-[600] uppercase tracking-[0.16em] text-cold-chrome">Approximate social following</label>
<input name="social-following" type="text" class="w-full border border-white/15 bg-deep-charcoal px-4 py-4 text-cold-chrome outline-none transition placeholder:text-gunmetal focus:border-mustard-yellow" placeholder="e.g. Instagram 12k, Facebook 8k, TikTok 5k" />
</div>
</div>
</div>
<div class="grid gap-10 border-t border-white/10 pt-12 lg:grid-cols-[0.75fr_1.25fr]">
<div>
<p class="text-[0.82rem] font-[600] uppercase tracking-[0.22em] text-mustard-yellow">03</p>
<h2 class="mt-3 text-[2.2rem] font-[700] uppercase tracking-[0.02em] text-cold-chrome">Current merch setup</h2>
<p class="mt-5 text-[1rem] leading-7 text-muted-silver">This is where we identify the real friction. Shipping cost is often the clearest signal.</p>
</div>
<div class="grid gap-6">
<div class="grid gap-6 md:grid-cols-2">
<div>
<label class="mb-2 block text-[0.82rem] font-[600] uppercase tracking-[0.16em] text-cold-chrome">Do you currently sell merch?</label>
<select name="currently-sell-merch" class="w-full border border-white/15 bg-deep-charcoal px-4 py-4 text-cold-chrome outline-none transition focus:border-mustard-yellow">
<option>Please select</option>
<option>Yes</option>
<option>No</option>
</select>
</div>
<div>
<label class="mb-2 block text-[0.82rem] font-[600] uppercase tracking-[0.16em] text-cold-chrome">Do you have UK/EU fulfilment?</label>
<select name="uk-eu-fulfilment" class="w-full border border-white/15 bg-deep-charcoal px-4 py-4 text-cold-chrome outline-none transition focus:border-mustard-yellow">
<option>Please select</option>
<option>No</option>
<option>Yes</option>
<option>Not sure</option>
</select>
</div>
</div>
<div>
<label class="mb-2 block text-[0.82rem] font-[600] uppercase tracking-[0.16em] text-cold-chrome">What products do you currently offer?</label>
<textarea name="current-products" rows="4" class="w-full border border-white/15 bg-deep-charcoal px-4 py-4 text-cold-chrome outline-none transition placeholder:text-gunmetal focus:border-mustard-yellow" placeholder="Tees, long sleeves, hoodies, patches, vinyl, CDs..."></textarea>
</div>
<div class="grid gap-6 md:grid-cols-2">
<div>
<label class="mb-2 block text-[0.82rem] font-[600] uppercase tracking-[0.16em] text-cold-chrome">Where is your merch shipped from?</label>
<input name="shipping-origin" type="text" class="w-full border border-white/15 bg-deep-charcoal px-4 py-4 text-cold-chrome outline-none transition placeholder:text-gunmetal focus:border-mustard-yellow" placeholder="USA, Canada, Australia..." />
</div>
<div>
<label class="mb-2 block text-[0.82rem] font-[600] uppercase tracking-[0.16em] text-cold-chrome">Cost to ship one T-shirt to UK/EU?</label>
<input name="one-shirt-shipping-cost" type="text" class="w-full border border-mustard-yellow bg-deep-charcoal px-4 py-4 text-cold-chrome outline-none transition placeholder:text-gunmetal focus:border-mustard-yellow" placeholder="$28 to UK, $35 to Germany..." />
</div>
</div>
<div>
<label class="mb-2 block text-[0.82rem] font-[600] uppercase tracking-[0.16em] text-cold-chrome">Have fans mentioned shipping, customs, VAT, or import costs as a reason they did not buy?</label>
<textarea name="fan-shipping-feedback" rows="4" class="w-full border border-white/15 bg-deep-charcoal px-4 py-4 text-cold-chrome outline-none transition placeholder:text-gunmetal focus:border-mustard-yellow" placeholder="Tell us what fans have said, if anything."></textarea>
</div>
</div>
</div>
<div class="grid gap-10 border-t border-white/10 pt-12 lg:grid-cols-[0.75fr_1.25fr]">
<div>
<p class="text-[0.82rem] font-[600] uppercase tracking-[0.22em] text-mustard-yellow">04</p>
<h2 class="mt-3 text-[2.2rem] font-[700] uppercase tracking-[0.02em] text-cold-chrome">Fit & products</h2>
<p class="mt-5 text-[1rem] leading-7 text-muted-silver">We’re looking for bands that make sense inside a curated heavy music merch environment.</p>
</div>
<div class="grid gap-6">
<div>
<label class="mb-2 block text-[0.82rem] font-[600] uppercase tracking-[0.16em] text-cold-chrome">What products would you want to offer through Dark Canvas?</label>
<textarea name="wanted-products" rows="4" class="w-full border border-white/15 bg-deep-charcoal px-4 py-4 text-cold-chrome outline-none transition placeholder:text-gunmetal focus:border-mustard-yellow" placeholder="Tees, long sleeves, hoodies, exclusive colourways, UK/EU only variants..."></textarea>
</div>
<div>
<label class="mb-2 block text-[0.82rem] font-[600] uppercase tracking-[0.16em] text-cold-chrome">Do you have print-ready artwork?</label>
<select name="print-ready-artwork" class="w-full border border-white/15 bg-deep-charcoal px-4 py-4 text-cold-chrome outline-none transition focus:border-mustard-yellow">
<option>Please select</option>
<option>Yes</option>
<option>No</option>
<option>Some, but not all</option>
</select>
</div>
<div>
<label class="mb-2 block text-[0.82rem] font-[600] uppercase tracking-[0.16em] text-cold-chrome">Why do you think Dark Canvas is a good fit?</label>
<textarea name="why-dark-canvas" rows="5" class="w-full border border-white/15 bg-deep-charcoal px-4 py-4 text-cold-chrome outline-none transition placeholder:text-gunmetal focus:border-mustard-yellow" placeholder="Tell us why this makes sense for your band and your fans."></textarea>
</div>
</div>
</div>
<div class="grid gap-10 border-t border-white/10 pt-12 lg:grid-cols-[0.75fr_1.25fr]">
<div>
<p class="text-[0.82rem] font-[600] uppercase tracking-[0.22em] text-mustard-yellow">05</p>
<h2 class="mt-3 text-[2.2rem] font-[700] uppercase tracking-[0.02em] text-cold-chrome">Submit</h2>
<p class="mt-5 text-[1rem] leading-7 text-muted-silver">Applications are reviewed by hand. Submitting does not guarantee acceptance, but it helps us understand whether the fit is right.</p>
</div>
<div class="grid gap-6">
<div class="grid gap-6 md:grid-cols-2">
<div>
<label class="mb-2 block text-[0.82rem] font-[600] uppercase tracking-[0.16em] text-cold-chrome">Your name</label>
<input name="contact-name" type="text" class="w-full border border-white/15 bg-deep-charcoal px-4 py-4 text-cold-chrome outline-none transition placeholder:text-gunmetal focus:border-mustard-yellow" placeholder="Name" />
</div>
<div>
<label class="mb-2 block text-[0.82rem] font-[600] uppercase tracking-[0.16em] text-cold-chrome">Role</label>
<input name="role" type="text" class="w-full border border-white/15 bg-deep-charcoal px-4 py-4 text-cold-chrome outline-none transition placeholder:text-gunmetal focus:border-mustard-yellow" placeholder="Band member, manager, label..." />
</div>
</div>
<label class="flex gap-3 text-sm leading-7 text-muted-silver">
<input name="asset-permission" type="checkbox" class="mt-1 h-4 w-4 accent-mustard-yellow" />
<span>I confirm that I am authorised to speak on behalf of the band and that any submitted artwork or assets are owned, licensed, or approved for use by the band.</span>
</label>
<button type="submit" class="inline-flex items-center justify-center border border-mustard-yellow bg-mustard-yellow px-6 py-4 text-[0.95rem] font-[700] uppercase tracking-[0.08em] text-night-ink shadow-yellow-glow transition hover:opacity-90 sm:w-fit">
Submit Application
</button>
</div>
</div>
</form>
</div>
</section>
</main>
<footer class="border-t border-white/10 bg-night-ink">
<div class="mx-auto max-w-store px-6 py-16 lg:px-8">
<div class="grid gap-10 sm:grid-cols-2 lg:grid-cols-[1.35fr_0.85fr_0.85fr_0.85fr] lg:gap-10">
<div>
<a href="index.html" class="flex items-center mb-5">
<img src="https://res.cloudinary.com/dragon-fire-design-studio/image/upload/f_auto,q_90/v1777279041/Dark%20Canvas/darkcanvas-logo_xzdhmn.svg" alt="Dark Canvas Merch" class="h-8 w-auto" />
</a>
<p class="max-w-[18rem] text-sm leading-7 text-gunmetal">Official merch from bands, artists, and scene-led brands — built to make UK and EU access cleaner and easier.</p>
<div class="mt-6 flex items-center gap-4">
<a href="#" aria-label="Instagram" class="text-gunmetal transition hover:text-mustard-yellow">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="currentColor" viewBox="0 0 24 24">
<path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z"/>
</svg>
</a>
<a href="#" aria-label="Facebook" class="text-gunmetal transition hover:text-mustard-yellow">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="currentColor" viewBox="0 0 24 24">
<path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/>
</svg>
</a>
<a href="#" aria-label="X / Twitter" class="text-gunmetal transition hover:text-mustard-yellow">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="currentColor" viewBox="0 0 24 24">
<path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-4.714-6.231-5.401 6.231H2.746l7.73-8.835L1.254 2.25H8.08l4.253 5.622zm-1.161 17.52h1.833L7.084 4.126H5.117z"/>
</svg>
</a>
<a href="#" aria-label="TikTok" class="text-gunmetal transition hover:text-mustard-yellow">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="currentColor" viewBox="0 0 24 24">
<path d="M12.525.02c1.31-.02 2.61-.01 3.91-.02.08 1.53.63 3.09 1.75 4.17 1.12 1.11 2.7 1.62 4.24 1.79v4.03c-1.44-.05-2.89-.35-4.2-.97-.57-.26-1.1-.59-1.62-.93-.01 2.92.01 5.84-.02 8.75-.08 1.4-.54 2.79-1.35 3.94-1.31 1.92-3.58 3.17-5.91 3.21-1.43.08-2.86-.31-4.08-1.03-2.02-1.19-3.44-3.37-3.65-5.71-.02-.5-.03-1-.01-1.49.18-1.9 1.12-3.72 2.58-4.96 1.66-1.44 3.98-2.13 6.15-1.72.02 1.48-.04 2.96-.04 4.44-.99-.32-2.15-.23-3.02.37-.63.41-1.11 1.04-1.36 1.75-.21.51-.15 1.07-.14 1.61.24 1.64 1.82 3.02 3.5 2.87 1.12-.01 2.19-.66 2.77-1.61.19-.33.4-.67.41-1.06.1-1.79.06-3.57.07-5.36.01-4.03-.01-8.05.02-12.07z"/>
</svg>
</a>
</div>
</div>
<div>
<h3 class="font-heading text-sm uppercase tracking-[0.16em] text-cold-chrome mb-5">Shop</h3>
<ul class="space-y-3 text-sm text-gunmetal">
<li><a href="index.html#latest-drops" class="transition hover:text-cold-chrome">New Drops</a></li>
<li><a href="bands.html" class="transition hover:text-cold-chrome">All Bands</a></li>
<li><a href="index.html#bestsellers" class="transition hover:text-cold-chrome">Bestsellers</a></li>
<li><a href="faq.html" class="transition hover:text-cold-chrome">FAQ</a></li>
</ul>
</div>
<div>
<h3 class="font-heading text-sm uppercase tracking-[0.16em] text-cold-chrome mb-5">About</h3>
<ul class="space-y-3 text-sm text-gunmetal">
<li><a href="about.html" class="transition hover:text-cold-chrome">About Dark Canvas</a></li>
<li><a href="for-bands.html" class="transition hover:text-cold-chrome">For Bands</a></li>
<li><a href="band-application.html" class="transition hover:text-cold-chrome">Apply</a></li>
<li><a href="contact.html" class="transition hover:text-cold-chrome">Contact</a></li>
</ul>
</div>
<div>
<h3 class="font-heading text-sm uppercase tracking-[0.16em] text-cold-chrome mb-5">Legal</h3>
<ul class="space-y-3 text-sm text-gunmetal">
<li><a href="privacy.html" class="transition hover:text-cold-chrome">Privacy Policy</a></li>
<li><a href="terms.html" class="transition hover:text-cold-chrome">Terms & Conditions</a></li>
<li><a href="cookies.html" class="transition hover:text-cold-chrome">Cookie Policy</a></li>
<li><a href="returns.html" class="transition hover:text-cold-chrome">Returns Policy</a></li>
</ul>
</div>
</div>
<div class="mt-12 border-t border-white/10 pt-8 flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
<p class="text-xs uppercase tracking-[0.16em] text-gunmetal">© 2026 Dark Canvas Merch. All rights reserved.</p>
<p class="text-xs uppercase tracking-[0.16em] text-gunmetal">Shop The Art Of Metal.</p>
</div>
</div>
</footer>
</body>
</html>