Skip to content

Commit 6efc86f

Browse files
J-HunxhoJ-Hunxho
authored
Update index.html
1 parent 1279849 commit 6efc86f

File tree

1 file changed

+63
-211
lines changed

1 file changed

+63
-211
lines changed

‎index.html‎

Lines changed: 63 additions & 211 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,9 @@
1818
<link href="https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@400;700&family=Open+Sans:wght@300;400&display=swap" rel="stylesheet">
1919

2020
<style>
21-
/* ========== your existing CSS (kept) ========== */
21+
/* ========================================================================= */
22+
/* == 1. VARIABLES & RESET == */
23+
/* ========================================================================= */
2224
:root {
2325
--color-black-deep: #0e0e0e;
2426
--color-charcoal: #1c1c1c;
@@ -38,79 +40,60 @@
3840
color: var(--color-text-light);
3941
line-height: 1.6;
4042
overflow-x: hidden;
43+
/* Subtle background noise/texture */
4144
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAABZJREFUeNpiYGBgYGJgoOCXjYGNjIAAAAB2AE/gE879AAAAAElFTkSuQmCC');
4245
}
4346

4447
.container { width: 90%; max-width: 1200px; margin: 0 auto; padding: 80px 0; }
48+
.stealth-section { padding:100px 0; position:relative; overflow:hidden; z-index:1; }
49+
.lowkey-glow { color: var(--color-neon-green); text-shadow: 0 0 5px var(--color-neon-green), 0 0 10px rgba(0,255,153,0.5); }
50+
.cta-buttons { display:flex; justify-content:center; gap:20px; flex-wrap:wrap; margin-top:20px; }
4551

52+
53+
/* ========================================================================= */
54+
/* == 2. NAVIGATION & HEADER == */
55+
/* ========================================================================= */
4656
header {
4757
position: fixed; width:100%; z-index:1000; padding:15px 0; background:var(--color-black-deep); border-bottom:1px solid var(--color-charcoal);
4858
}
4959
nav { display:flex; justify-content:space-between; align-items:center; width:90%; max-width:1200px; margin:0 auto; }
5060
.logo { font-family:var(--font-header); font-size:1.5rem; font-weight:700; color:var(--color-text-light); text-decoration:none; letter-spacing:3px; display:flex; align-items:center; gap:12px; }
5161
.logo img { height:28px; display:block; }
52-
5362
.nav-links a { color:var(--color-text-light); text-decoration:none; margin-left:25px; text-transform:uppercase; font-size:0.9rem; opacity:0.7; transition: opacity var(--transition-speed), color var(--transition-speed); }
5463
.nav-links a:hover { opacity:1; color:var(--color-neon-green); }
5564

56-
.lowkey-glow { color: var(--color-neon-green); text-shadow: 0 0 5px var(--color-neon-green), 0 0 10px rgba(0,255,153,0.5); }
5765

58-
/* hero, canvas, fader classes - kept from your original file */
66+
/* ========================================================================= */
67+
/* == 3. HERO & BUTTONS == */
68+
/* ========================================================================= */
5969
#hero-section { height:100vh; display:flex; align-items:center; justify-content:center; text-align:center; position:relative; overflow:hidden; color:white; }
6070
#particle-canvas { position:absolute; top:0; left:0; width:100%; height:100%; z-index:0; opacity:0.2; }
6171

6272
.hero-content { position:relative; z-index:10; padding:20px; text-shadow:0 0 10px rgba(0,0,0,0.8); }
6373
.hero-content h1 { font-size: clamp(2.5rem, 8vw, 6rem); margin-bottom: 10px; }
6474
.hero-content p { font-size: clamp(1rem, 2.5vw, 1.5rem); opacity:0.8; letter-spacing:3px; }
6575

66-
.ghost-fade-in { opacity: 0; transform: translateY(20px); transition: opacity 1.2s ease-out, transform 1.2s ease-out; }
67-
.ghost-fade-in.is-visible { opacity:1; transform:translateY(0); }
68-
69-
.stealth-section { padding:100px 0; position:relative; overflow:hidden; z-index:1; }
70-
71-
/* motto section styling */
72-
#motto { text-align:center; padding:60px 0; }
73-
#motto h2 { font-family:var(--font-header); font-size:3rem; letter-spacing:3px; margin-bottom:10px; }
74-
#motto p { font-size:1.15rem; opacity:0.85; margin-top:6px; }
75-
76-
/* founder key CTA */
7776
.cta-button {
78-
display:inline-block; padding:12px 30px; margin-top:20px; background:var(--color-charcoal); border:1px solid var(--color-neon-green); color:var(--color-neon-green); text-decoration:none; text-transform:uppercase; font-weight:700; letter-spacing:1px; transition: transform 0.2s ease-out, box-shadow var(--transition-speed); cursor:pointer; position:relative; overflow:hidden; z-index:2;
77+
display:inline-block; padding:12px 30px; margin-top:20px; background:var(--color-charcoal); border:1px solid var(--color-neon-green); color:var(--color-neon-green); text-decoration:none; text-transform:uppercase; font-weight:700; letter-spacing:1px; transition: transform 0.2s ease-out, box-shadow var(--transition-speed), background var(--transition-speed), color var(--transition-speed); cursor:pointer; position:relative; overflow:hidden; z-index:2;
7978
}
8079
.cta-button:hover { background:var(--color-neon-green); color:var(--color-black-deep); box-shadow:0 0 15px rgba(0,255,153,0.6); transform:scale(1.05); }
8180

82-
.cta-buttons { display:flex; justify-content:center; gap:20px; flex-wrap:wrap; margin-top:20px; }
83-
84-
/* merch gallery */
85-
.merch-gallery { display:flex; flex-wrap:wrap; justify-content:center; gap:30px; margin-top:40px; }
86-
.merch-card { width:320px; max-width:100%; background:var(--color-charcoal); padding:18px; border-radius:8px; text-align:center; border:1px solid rgba(255,255,255,0.03); box-shadow:0 8px 24px rgba(0,0,0,0.4); }
87-
.merch-card img { width:100%; height:auto; object-fit:cover; border-radius:6px; display:block; margin-bottom:12px; }
8881

89-
/* products & other styles retained from original */
90-
.product-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap:30px; margin-top:50px; }
91-
.product-item { background:var(--color-charcoal); border:1px solid rgba(255,255,255,0.05); padding:20px; text-align:center; transition:box-shadow var(--transition-speed), transform var(--transition-speed); }
92-
.product-item:hover { box-shadow:0 0 20px rgba(0,255,153,0.3); transform:translateY(-5px); }
93-
94-
footer { background:var(--color-charcoal); border-top:1px solid var(--color-charcoal); color:rgba(255,255,255,0.5); padding:30px 0; text-align:center; font-size:0.8rem; letter-spacing:1px; position:relative; z-index:5; }
95-
96-
@media (max-width:768px) {
97-
.nav-links { display:none; }
98-
.container { padding:50px 0; }
99-
h1{ font-size:2.5rem; }
100-
h2{ font-size:1.8rem; }
101-
.merch-gallery { gap:18px; }
102-
}
82+
/* ========================================================================= */
83+
/* == 4. MOTTO & MANIFESTO == */
84+
/* ========================================================================= */
85+
#motto { text-align:center; padding:60px 0; }
86+
#motto h2 { font-family:var(--font-header); font-size:3rem; letter-spacing:3px; margin-bottom:10px; }
87+
#motto p { font-size:1.15rem; opacity:0.85; margin-top:6px; }
10388

104-
/* MANIFESTO SECTION (Parallax Effect) */
10589
#manifesto {
10690
background-color: var(--color-charcoal);
107-
color: var(--color-text-light);
108-
text-align: center;
10991
background-image: linear-gradient(rgba(14, 14, 14, 0.8), rgba(14, 14, 14, 0.8)), url('https://via.placeholder.com/1920x1080?text=Abstract+Background');
11092
background-attachment: fixed; /* Parallax effect */
11193
background-position: center;
11294
background-repeat: no-repeat;
11395
background-size: cover;
96+
text-align: center;
11497
}
11598

11699
.manifesto-line {
@@ -123,222 +106,91 @@
123106
color: rgba(255, 255, 255, 0.1); /* Subtle initial state */
124107
transition: color 1s ease-out;
125108
}
126-
127109
.manifesto-line.is-visible {
128110
color: var(--color-text-light);
129111
text-shadow: 0 0 5px rgba(255, 255, 255, 0.1);
130112
}
131113

132-
/* ABOUT Section */
133-
#about {
134-
text-align: center;
135-
}
136-
137-
#about h2 {
138-
margin-bottom: 30px;
139-
border-bottom: 2px solid var(--color-charcoal);
140-
padding-bottom: 15px;
141-
display: inline-block;
142-
}
143-
144-
/* PRODUCT TEASER (Grid) */
145-
/* Re-using .product-grid from above, but for completeness: */
146-
/* .product-grid {
147-
display: grid;
148-
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
149-
gap: 30px;
150-
margin-top: 50px;
151-
}
114+
/* ========================================================================= */
115+
/* == 5. MERCH & PRODUCTS == */
116+
/* ========================================================================= */
117+
.merch-gallery { display:flex; flex-wrap:wrap; justify-content:center; gap:30px; margin-top:40px; }
118+
.merch-card { width:320px; max-width:100%; background:var(--color-charcoal); padding:18px; border-radius:8px; text-align:center; border:1px solid rgba(255,255,255,0.03); box-shadow:0 8px 24px rgba(0,0,0,0.4); }
119+
.merch-card img { width:100%; height:auto; object-fit:cover; border-radius:6px; display:block; margin-bottom:12px; }
152120

153-
.product-item {
154-
background: var(--color-charcoal);
155-
border: 1px solid rgba(255, 255, 255, 0.05);
156-
padding: 20px;
157-
text-align: center;
158-
transition: box-shadow var(--transition-speed), transform var(--transition-speed);
159-
}
160-
161-
.product-item:hover {
162-
box-shadow: 0 0 20px rgba(0, 255, 153, 0.3);
163-
transform: translateY(-5px);
164-
} */
121+
.product-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap:30px; margin-top:50px; }
122+
.product-item { background:var(--color-charcoal); border:1px solid rgba(255,255,255,0.05); padding:20px; text-align:center; transition:box-shadow var(--transition-speed), transform var(--transition-speed); }
123+
.product-item:hover { box-shadow:0 0 20px rgba(0,255,153,0.3); transform:translateY(-5px); }
165124

166125
.product-item-placeholder {
167-
width: 100%;
168-
height: 200px;
169-
background: var(--color-black-deep);
170-
display: flex;
171-
align-items: center;
172-
justify-content: center;
173-
margin-bottom: 15px;
174-
font-size: 0.9rem;
175-
color: rgba(255, 255, 255, 0.3);
176-
border: 1px dashed rgba(255, 255, 255, 0.1);
177-
}
178-
179-
/* MEMBERSHIP WAITLIST (Glassmorphism) */
180-
#waitlist {
181-
padding: 100px 0;
182-
background: var(--color-black-deep);
126+
width: 100%; height: 200px; background: var(--color-black-deep); display: flex; align-items: center; justify-content: center; margin-bottom: 15px; font-size: 0.9rem; color: rgba(255, 255, 255, 0.3); border: 1px dashed rgba(255, 255, 255, 0.1);
183127
}
184128

129+
/* ========================================================================= */
130+
/* == 6. WAITLIST & CONTACT FORMS == */
131+
/* ========================================================================= */
185132
.waitlist-card {
186-
max-width: 600px;
187-
margin: 0 auto;
188-
padding: 40px;
189-
border-radius: 10px;
190-
backdrop-filter: blur(10px);
191-
background: var(--color-glass-bg);
192-
border: 1px solid rgba(255, 255, 255, 0.1);
193-
box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3);
194-
text-align: center;
195-
position: relative;
196-
/* Subtle Aurora Background for Glassmorphism */
197-
background-image: radial-gradient(circle at top left, rgba(0, 255, 153, 0.1), transparent 50%),
198-
radial-gradient(circle at bottom right, rgba(255, 215, 0, 0.05), transparent 50%);
133+
max-width: 600px; margin: 0 auto; padding: 40px; border-radius: 10px; backdrop-filter: blur(10px); background: var(--color-glass-bg); border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3); text-align: center; position: relative;
134+
background-image: radial-gradient(circle at top left, rgba(0, 255, 153, 0.1), transparent 50%), radial-gradient(circle at bottom right, rgba(255, 215, 0, 0.05), transparent 50%);
199135
}
200-
201-
.waitlist-card h2 {
202-
color: var(--color-neon-green);
203-
}
204-
136+
.waitlist-card h2 { color: var(--color-neon-green); }
205137
.waitlist-form input[type="email"] {
206-
width: 80%;
207-
padding: 15px;
208-
margin: 25px 0 20px 0;
209-
background: rgba(0, 0, 0, 0.5);
210-
border: 1px solid rgba(255, 255, 255, 0.2);
211-
color: var(--color-text-light);
212-
font-size: 1rem;
138+
width: 80%; padding: 15px; margin: 25px 0 20px 0; background: rgba(0, 0, 0, 0.5); border: 1px solid rgba(255, 255, 255, 0.2); color: var(--color-text-light); font-size: 1rem;
213139
}
140+
.waitlist-form input::placeholder { color: rgba(255, 255, 255, 0.5); }
214141

215-
.waitlist-form input::placeholder {
216-
color: rgba(255, 255, 255, 0.5);
142+
.contact-form { max-width: 600px; margin: 0 auto; }
143+
.form-group { margin-bottom: 20px; }
144+
.contact-form label { display: block; margin-bottom: 8px; font-weight: 700; color: var(--color-neon-green); text-transform: uppercase; font-size: 0.8rem; }
145+
.contact-form input, .contact-form textarea {
146+
width: 100%; padding: 12px; background: var(--color-charcoal); border: 1px solid var(--color-charcoal); color: var(--color-text-light); font-size: 1rem; transition: border-color var(--transition-speed);
217147
}
148+
.contact-form input:focus, .contact-form textarea:focus { outline: none; border-color: var(--color-neon-green); }
218149

219-
/* SOCIAL PROOF */
220-
#social-proof {
221-
text-align: center;
222-
padding: 80px 0;
223-
}
224150

151+
/* ========================================================================= */
152+
/* == 7. FOOTER & SOCIAL PROOF == */
153+
/* ========================================================================= */
154+
#social-proof { text-align: center; padding: 80px 0; }
225155
#social-proof h2 {
226-
font-size: clamp(1.5rem, 5vw, 4rem);
227-
color: var(--color-charcoal);
228-
-webkit-text-stroke: 1px rgba(255, 255, 255, 0.1); /* Ghosted text effect */
229-
letter-spacing: 5px;
230-
transition: color 0.5s;
231-
}
232-
233-
#social-proof h2.is-visible {
234-
color: rgba(255, 255, 255, 0.2);
235-
}
236-
237-
/* CONTACT FORM */
238-
.contact-form {
239-
max-width: 600px;
240-
margin: 0 auto;
241-
}
242-
243-
.form-group {
244-
margin-bottom: 20px;
245-
}
246-
247-
.contact-form label {
248-
display: block;
249-
margin-bottom: 8px;
250-
font-weight: 700;
251-
color: var(--color-neon-green);
252-
text-transform: uppercase;
253-
font-size: 0.8rem;
156+
font-size: clamp(1.5rem, 5vw, 4rem); color: var(--color-charcoal); -webkit-text-stroke: 1px rgba(255, 255, 255, 0.1); letter-spacing: 5px; transition: color 0.5s;
254157
}
158+
footer { background:var(--color-charcoal); border-top:1px solid var(--color-charcoal); color:rgba(255,255,255,0.5); padding:30px 0; text-align:center; font-size:0.8rem; letter-spacing:1px; position:relative; z-index:5; }
255159

256-
.contact-form input, .contact-form textarea {
257-
width: 100%;
258-
padding: 12px;
259-
background: var(--color-charcoal);
260-
border: 1px solid var(--color-charcoal);
261-
color: var(--color-text-light);
262-
font-size: 1rem;
263-
transition: border-color var(--transition-speed);
264-
}
265160

266-
.contact-form input:focus, .contact-form textarea:focus {
267-
outline: none;
268-
border-color: var(--color-neon-green);
269-
}
161+
/* ========================================================================= */
162+
/* == 8. ANIMATIONS & MEDIA QUERIES == */
163+
/* ========================================================================= */
164+
.ghost-fade-in { opacity: 0; transform: translateY(20px); transition: opacity 1.2s ease-out, transform 1.2s ease-out; }
165+
.ghost-fade-in.is-visible { opacity:1; transform:translateY(0); }
270166

271-
/* Media Queries for Responsiveness (Mobile-First) */
272167
@media (max-width: 768px) {
273-
.nav-links {
274-
display: none; /* Simple mobile nav hiding for minimalism */
275-
}
276-
277-
.container {
278-
padding: 50px 0;
279-
}
280-
168+
.nav-links { display: none; } /* Simple mobile nav hiding for minimalism */
169+
.container { padding: 50px 0; }
281170
h1 { font-size: 2.5rem; }
282171
h2 { font-size: 1.8rem; }
283172
.manifesto-line { margin: 40px auto; }
284-
285-
.product-grid {
286-
grid-template-columns: 1fr;
287-
}
288-
289-
.waitlist-form input[type="email"] {
290-
width: 100%;
291-
}
173+
.product-grid { grid-template-columns: 1fr; }
174+
.waitlist-form input[type="email"] { width: 100%; }
292175
}
293176
</style>
294177
</head>
295178
<body>
296179

297180
<header>
298181
<nav>
299-
<a href="#" class="logo" aria-label="Lowkey Luxury">
182+
<a href="#" class="logo" aria-label="Lowkey Luxury - Home">
300183
<img src="images/lowkeyluxmainlogo.png" alt="Lowkey Luxury logo" />
301184
<span style="font-size:0.9rem; color:rgba(255,255,255,0.85); letter-spacing:2px">LOWKEY LUXURY</span>
302185
</a>
303186

304187
<div class="nav-links">
305188
<a href="#about">Philosophy</a>
306-
<a href="#products">Artifacts</a>
189+
<a href="#merch">Artifacts</a>
307190
<a href="#waitlist">Access</a>
308191
<a href="#contact">Contact</a>
309192
</div>
310193
</nav>
311194
</header>
312195

313196
<main>
314-
<section id="hero-section">
315-
<canvas id="particle-canvas"></canvas>
316-
<div class="hero-content">
317-
<h1 class="lowkey-glow ghost-fade-in">LOWKEY LUXURY</h1>
318-
<p class="ghost-fade-in" data-delay="0.5">Stay Seen by Staying Unseen.</p>
319-
<a href="#waitlist" class="cta-button ghost-fade-in magnetic-target" data-delay="1.0">Request Access Protocol</a>
320-
</div>
321-
</section>
322-
323-
<section id="motto" class="stealth-section">
324-
<div class="container">
325-
<h2 class="lowkey-glow">SLEEP RICH</h2>
326-
<p class="ghost-fade-in is-visible">Where silence builds empires.</p>
327-
<div style="margin-top:22px;">
328-
<picture>
329-
<source srcset="images/motto-sleeprich.webp" type="image/webp">
330-
<img src="images/motto-sleeprich.webp" alt="Sleep Rich - Lowkey Luxury" style="max-width:720px; width:100%; height:auto; display:inline-block; border-radius:8px; border:1px solid rgba(255,255,255,0.04);" loading="eager">
331-
</picture>
332-
</div>
333-
</div>
334-
</section>
335-
336-
<section id="founder-key" class="stealth-section">
337-
<div class="container" style="text-align:center;">
338-
<h2 class="lowkey-glow">Become a Founder</h2>
339-
<p style="opacity:0.8;">Unlock lifetime access to private drops, unreleased designs, and the Lowkey inner circle.</p>
340-
341-
<div class="cta-buttons" style="margin-top:28px;">
342-
<a href="https://buy.stripe.com/00wdRbgiT9dk46vfVh8ww01" target="_blank" rel="noopener" class="cta-button">Unlock the Founder Key</a>
343-
344-
<a href="

0 commit comments

Comments
 (0)