justgoodcuber/web-portfolio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Simplify website design by removing repetitive visual elements

Browse Source 
Remove grid lines, floating bubbles, grain texture, and marquee banners from the website.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: f5797e65-2210-4d2e-bf70-278d8a0098c1
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Event-Id: d5b554c5-54c3-413c-8039-39c6605b0dd3
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/2a2c58da-54a0-4c86-8ad0-3b93439f70de/f5797e65-2210-4d2e-bf70-278d8a0098c1/tnshPZC
Replit-Helium-Checkpoint-Created: true
This commit is contained in:
Replit Agent
2026-07-02 00:50:09 +00:00
parent 9f34f0c524
commit 5451853728
3 changed files with 185 additions and 374 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
.replit Normal file
View File

@@ -0,0 +1,29 @@
modules = ["python-3.11"]
[workflows]
runButton = "Project"
[[workflows.workflow]]
name = "Project"
mode = "parallel"
author = "agent"
[[workflows.workflow.tasks]]
task = "workflow.run"
args = "Start application"
[[workflows.workflow]]
name = "Start application"
author = "agent"
[[workflows.workflow.tasks]]
task = "shell.exec"
args = "python3 -m http.server 5000"
waitForPort = 5000
[workflows.workflow.metadata]
outputType = "webview"
[[ports]]
localPort = 5000
externalPort = 80

132
index.html
View File

@@ -10,12 +10,6 @@
</head>
<body>
<!-- GRID LINES (fixed vertical rails flanking content) -->
<div class="site-grid" aria-hidden="true">
<span class="vline" style="left:7%"></span>
<span class="vline" style="left:93%"></span>
</div>
<!-- NAV -->
<nav>
<a href="#home" class="logo"><img src="images/logo.png" alt="JustGoodCubing"/></a>
@@ -54,13 +48,13 @@
</div>
<div class="store-modal-body">
<div>
<svg width="56" height="56" viewBox="0 0 24 24" fill="none" stroke="var(--orange)" stroke-width="1.5" stroke-linecap="square">
<svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="var(--orange)" stroke-width="1.5" stroke-linecap="square">
<path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/>
<polyline points="3.27 6.96 12 12.01 20.73 6.96"/><line x1="12" y1="22.08" x2="12" y2="12"/>
</svg>
</div>
<h2 class="store-modal-title">JustGoodCubing Store</h2>
<p class="store-modal-desc">Our store opens in a new tab. Come back here when you are done browsing or checking out.</p>
<p class="store-modal-desc">Our store opens in a new tab. Come back here when you're done browsing.</p>
<a href="https://justgoodcubing.printify.me/products" target="_blank" rel="noopener" class="store-launch-btn">Open Store &#x2197;</a>
</div>
</div>
@@ -68,18 +62,13 @@
<!-- ═══ HOME ═══ -->
<section id="home">
<div class="bubbles" aria-hidden="true">
<div class="bubble" style="width:480px;height:480px;top:-8%;right:12%;--dur:18s;--delay:-4s;--x1:60px;--y1:-80px;--x2:-50px;--y2:40px;--x3:30px;--y3:70px"></div>
<div class="bubble" style="width:280px;height:280px;bottom:10%;left:5%;--dur:13s;--delay:-9s;--x1:-40px;--y1:60px;--x2:50px;--y2:-30px;--x3:-20px;--y3:-50px"></div>
<div class="bubble" style="width:200px;height:200px;top:40%;right:30%;--dur:16s;--delay:-2s;--x1:30px;--y1:-40px;--x2:-60px;--y2:20px;--x3:40px;--y3:30px"></div>
</div>
<div class="hero-eyebrow">Premium Speedcubing Gear</div>
<h1 class="hero-title">
JUST<br/>
<span class="line-orange">GOOD</span><br/>
<span class="line-green">CUBING.</span>
CUBING.
</h1>
<p class="hero-sub">JustGoodCubing creates premium cubing-inspired accessories and merchandise designed for speedcubers and puzzle enthusiasts. From mugs and magnets to apparel and everyday essentials, our products let you show your passion for cubing beyond the solve. Every design is made with the cubing community in mind, combining quality, creativity, and a love for the hobby.</p>
<p class="hero-sub">Premium cubing-inspired accessories and merchandise — designed for the community, by a cuber.</p>
<div class="hero-cta-row">
<a href="#" class="btn-primary" id="heroCta">Shop the Store ↗</a>
<a href="#about" class="btn-secondary">Learn More</a>
@@ -123,47 +112,16 @@
</section>
<div class="h-rule"></div>
<!-- ═══ MARQUEE ═══ -->
<div class="marquee-strip" aria-hidden="true">
<div class="marquee-inner">
<span class="marquee-item">JUST GOOD CUBING</span><span class="marquee-sep">·</span>
<span class="marquee-item">JUST GOOD CUBING</span><span class="marquee-sep">·</span>
<span class="marquee-item">JUST GOOD CUBING</span><span class="marquee-sep">·</span>
<span class="marquee-item">JUST GOOD CUBING</span><span class="marquee-sep">·</span>
<span class="marquee-item">JUST GOOD CUBING</span><span class="marquee-sep">·</span>
<span class="marquee-item">JUST GOOD CUBING</span><span class="marquee-sep">·</span>
<span class="marquee-item">JUST GOOD CUBING</span><span class="marquee-sep">·</span>
<span class="marquee-item">JUST GOOD CUBING</span><span class="marquee-sep">·</span>
<span class="marquee-item">JUST GOOD CUBING</span><span class="marquee-sep">·</span>
<span class="marquee-item">JUST GOOD CUBING</span><span class="marquee-sep">·</span>
<span class="marquee-item">JUST GOOD CUBING</span><span class="marquee-sep">·</span>
<span class="marquee-item">JUST GOOD CUBING</span><span class="marquee-sep">·</span>
<span class="marquee-item">JUST GOOD CUBING</span><span class="marquee-sep">·</span>
<span class="marquee-item">JUST GOOD CUBING</span><span class="marquee-sep">·</span>
<span class="marquee-item">JUST GOOD CUBING</span><span class="marquee-sep">·</span>
<span class="marquee-item">JUST GOOD CUBING</span><span class="marquee-sep">·</span>
<span class="marquee-item">JUST GOOD CUBING</span><span class="marquee-sep">·</span>
<span class="marquee-item">JUST GOOD CUBING</span><span class="marquee-sep">·</span>
<span class="marquee-item">JUST GOOD CUBING</span><span class="marquee-sep">·</span>
<span class="marquee-item">JUST GOOD CUBING</span><span class="marquee-sep">·</span>
</div>
</div>
<div class="h-rule"></div>
<!-- ═══ ABOUT ═══ -->
<section id="about">
<div class="bubbles" aria-hidden="true">
<div class="bubble" style="width:420px;height:420px;top:5%;right:2%;--dur:20s;--delay:-6s;--x1:-50px;--y1:70px;--x2:60px;--y2:-40px;--x3:-30px;--y3:-60px"></div>
<div class="bubble" style="width:260px;height:260px;bottom:15%;left:0%;--dur:14s;--delay:-11s;--x1:50px;--y1:-50px;--x2:-40px;--y2:60px;--x3:30px;--y3:20px"></div>
</div>
<div class="section-label reveal">The Story</div>
<h2 class="section-title reveal">Hi, I'm Anshveer<br/>Kang.</h2>
<div class="about-bio-grid">
<div class="about-bio-text reveal">
<p>I've been a speedcuber for over 6 years. What started as a simple hobby during the COVID-19 pandemic turned into a passion I've integrated into every aspect of my life. I'm an official <span class="text-orange">World Cube Association Organizer</span> and the founder of this store.</p>
<p>The cube has challenged me to grow, introduced me to an incredible community, and shown me how a simple hobby can have a lasting impact. That's why I started JustGoodCubing.</p>
<p>My goal is to create unique cubing products that celebrate the creativity, excitement, and community behind the sport — helping share that experience with cubers and non-cubers alike. Whether you're chasing your next personal best or simply appreciate the art of the cube, I hope these products inspire the same excitement that speedcubing has given me.</p>
<p>The cube has challenged me to grow, introduced me to an incredible community, and shown me how a simple hobby can have a lasting impact. That's why I started JustGoodCubing — to create products that celebrate the creativity and community behind the sport.</p>
</div>
<div class="about-cards-col">
<div class="clay-card orange-accent reveal">
@@ -175,17 +133,17 @@
<div class="card-title">WCA Organizer</div>
<div class="card-body">Officially recognized by the World Cube Association — running real competitions, building the community from the ground up.</div>
</div>
<div class="clay-card green-accent reveal">
<div class="card-icon green">
<div class="clay-card reveal">
<div class="card-icon">
<svg viewBox="0 0 24 24" fill="none" stroke="#4a4640" stroke-width="2" stroke-linecap="square">
<path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"/>
</svg>
</div>
<div class="card-title">6+ Years Cubing</div>
<div class="card-body">From pandemic hobby to obsession. Every product in this store comes from genuine experience and love for the sport.</div>
<div class="card-body">From pandemic hobby to obsession. Every product comes from genuine experience and love for the sport.</div>
</div>
<div class="clay-card purple-accent reveal">
<div class="card-icon purple">
<div class="clay-card reveal">
<div class="card-icon">
<svg viewBox="0 0 24 24" fill="none" stroke="#4a4640" stroke-width="2" stroke-linecap="square">
<circle cx="12" cy="12" r="10"/><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/>
</svg>
@@ -206,41 +164,14 @@
<div class="about-photo-label">In the Zone</div>
</div>
</div>
</section>
<div class="h-rule"></div>
<!-- ═══ MARQUEE 2 ═══ -->
<div class="marquee-strip light" aria-hidden="true">
<div class="marquee-inner rtl slow">
<span class="marquee-item">PRECISION BUILT</span><span class="marquee-sep">·</span>
<span class="marquee-item">WCA LEGAL</span><span class="marquee-sep">·</span>
<span class="marquee-item">COMP READY</span><span class="marquee-sep">·</span>
<span class="marquee-item">BUILT DIFFERENT</span><span class="marquee-sep">·</span>
<span class="marquee-item">SPEED WITHOUT COMPROMISE</span><span class="marquee-sep">·</span>
<span class="marquee-item">TURN FASTER</span><span class="marquee-sep">·</span>
<span class="marquee-item">PREMIUM MATERIALS</span><span class="marquee-sep">·</span>
<span class="marquee-item">DESIGNED TO WIN</span><span class="marquee-sep">·</span>
<span class="marquee-item">PRECISION BUILT</span><span class="marquee-sep">·</span>
<span class="marquee-item">WCA LEGAL</span><span class="marquee-sep">·</span>
<span class="marquee-item">COMP READY</span><span class="marquee-sep">·</span>
<span class="marquee-item">BUILT DIFFERENT</span><span class="marquee-sep">·</span>
<span class="marquee-item">SPEED WITHOUT COMPROMISE</span><span class="marquee-sep">·</span>
<span class="marquee-item">TURN FASTER</span><span class="marquee-sep">·</span>
<span class="marquee-item">PREMIUM MATERIALS</span><span class="marquee-sep">·</span>
<span class="marquee-item">DESIGNED TO WIN</span><span class="marquee-sep">·</span>
</div>
</div>
<div class="h-rule"></div>
<!-- ═══ FAQ ═══ -->
<section id="faq">
<div class="bubbles" aria-hidden="true">
<div class="bubble" style="width:380px;height:380px;top:10%;left:-4%;--dur:17s;--delay:-3s;--x1:70px;--y1:-50px;--x2:-40px;--y2:60px;--x3:50px;--y3:-30px"></div>
<div class="bubble" style="width:220px;height:220px;bottom:20%;right:5%;--dur:12s;--delay:-8s;--x1:-50px;--y1:40px;--x2:60px;--y2:-50px;--x3:-30px;--y3:40px"></div>
</div>
<div class="section-label reveal">Got Questions?</div>
<h2 class="section-title reveal">We've got<br/>answers.</h2>
<div class="section-label reveal">FAQ</div>
<h2 class="section-title reveal">Common<br/>Questions.</h2>
<div class="faq-grid">
@@ -281,7 +212,7 @@
<span><span class="faq-card-num">05</span><span class="faq-card-title">Can I return my order?</span></span>
<svg class="faq-chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="square"><polyline points="6 9 12 15 18 9"/></svg>
</button>
<div class="faq-card-a">Because every item is made to order, we cannot accept returns or exchanges for incorrect sizes. However, if there's a manufacturing defect or printing error, we'll definitely assist you.</div>
<div class="faq-card-a">Because every item is made to order, we cannot accept returns or exchanges for incorrect sizes. However, if there's a manufacturing defect or printing error, we'll assist you.</div>
</div>
<div class="faq-card reveal">
@@ -312,37 +243,11 @@
</section>
<div class="h-rule"></div>
<!-- ═══ MARQUEE 3 ═══ -->
<div class="marquee-strip" aria-hidden="true">
<div class="marquee-inner fast">
<span class="marquee-item">SHOP NOW</span><span class="marquee-sep">·</span>
<span class="marquee-item">CUBE HARDER</span><span class="marquee-sep">·</span>
<span class="marquee-item">LEVEL UP</span><span class="marquee-sep">·</span>
<span class="marquee-item">GET FASTER</span><span class="marquee-sep">·</span>
<span class="marquee-item">STAY SHARP</span><span class="marquee-sep">·</span>
<span class="marquee-item">SOLVE MORE</span><span class="marquee-sep">·</span>
<span class="marquee-item">JOIN THE COMMUNITY</span><span class="marquee-sep">·</span>
<span class="marquee-item">SUB-10 MENTALITY</span><span class="marquee-sep">·</span>
<span class="marquee-item">SHOP NOW</span><span class="marquee-sep">·</span>
<span class="marquee-item">CUBE HARDER</span><span class="marquee-sep">·</span>
<span class="marquee-item">LEVEL UP</span><span class="marquee-sep">·</span>
<span class="marquee-item">GET FASTER</span><span class="marquee-sep">·</span>
<span class="marquee-item">STAY SHARP</span><span class="marquee-sep">·</span>
<span class="marquee-item">SOLVE MORE</span><span class="marquee-sep">·</span>
<span class="marquee-item">JOIN THE COMMUNITY</span><span class="marquee-sep">·</span>
<span class="marquee-item">SUB-10 MENTALITY</span><span class="marquee-sep">·</span>
</div>
</div>
<div class="h-rule"></div>
<!-- ═══ CONTACT ═══ -->
<section id="contact">
<div class="bubbles" aria-hidden="true">
<div class="bubble" style="width:440px;height:440px;top:-5%;left:-2%;--dur:19s;--delay:-5s;--x1:55px;--y1:70px;--x2:-45px;--y2:-50px;--x3:60px;--y3:30px"></div>
<div class="bubble" style="width:240px;height:240px;bottom:8%;right:4%;--dur:13s;--delay:-10s;--x1:-60px;--y1:-40px;--x2:40px;--y2:55px;--x3:-30px;--y3:-30px"></div>
</div>
<div class="section-label reveal">Get in Touch</div>
<h2 class="section-title reveal">We actually<br/>reply fast.</h2>
<h2 class="section-title reveal">Let's Talk.</h2>
<div class="contact-grid">
<div class="contact-info reveal">
@@ -376,7 +281,7 @@
</div>
<div>
<div class="contact-block-title">YouTube</div>
<div class="contact-block-value"><a href="https://www.youtube.com/@JustGoodCuber" target="_blank" rel="noopener" style="color:var(--white);text-decoration:none;">@JustGoodCuber</a></div>
<div class="contact-block-value"><a href="https://www.youtube.com/@JustGoodCuber" target="_blank" rel="noopener" class="contact-link">@JustGoodCuber</a></div>
</div>
</div>
<div class="contact-block">
@@ -388,7 +293,7 @@
</div>
<div>
<div class="contact-block-title">Shipping</div>
<div class="contact-block-value">Ships worldwide — rates calculated at checkout.</div>
<div class="contact-block-value">Ships worldwide — rates at checkout.</div>
</div>
</div>
</div>
@@ -404,14 +309,15 @@
</div>
<div>
<label class="form-label" for="msgInput">Message</label>
<textarea class="form-textarea" id="msgInput" placeholder="Cube recommendations, order help, collab — let's talk."></textarea>
<textarea class="form-textarea" id="msgInput" placeholder="Orders, collabs, or just saying hi — we're listening."></textarea>
</div>
<button type="submit" class="form-submit">Send It ↗</button>
<button type="submit" class="form-submit">Send Message ↗</button>
</form>
</div>
</section>
<div class="h-rule"></div>
<!-- FOOTER -->
<footer>
<div class="footer-logo"><img src="images/logo.png" alt="JustGoodCubing"/></div>

398
styles.css
View File

@@ -3,16 +3,10 @@
--bg: #ede9e1;
--surface: #e4e0d8;
--surface2: #d8d4cb;
--border: #b8b4aa;
--border: #c8c4bb;
--border-heavy: #8a867c;
--orange: #c94b0f;
--orange-glow: #c94b0f22;
--green: #3a6b30;
--green-dim: #3a6b3018;
--purple: #5c3d8f;
--purple-dim: #5c3d8f18;
--blue: #1a5fa8;
--blue-dim: #1a5fa818;
--orange-glow: #c94b0f18;
--white: #1a1815;
--muted: #6b6760;
}
@@ -25,50 +19,32 @@ body {
font-family: 'Space Grotesk', sans-serif;
overflow-x: hidden;
}
body::before {
content: '';
position: fixed; inset: 0; z-index: 0; pointer-events: none;
background: url('/grain.png') repeat;
opacity: 0.42;
}
nav, section, footer, .marquee-strip { position: relative; z-index: 1; }
/* ── SITE GRID LINES ── */
.site-grid {
position: fixed; inset: 0; z-index: 50; pointer-events: none;
}
.site-grid .vline {
position: absolute; top: 0; bottom: 0; width: 1px;
background: rgba(26,24,21,0.14);
}
/* ── HORIZONTAL RULES (in-flow, intersect the fixed vertical lines) ── */
/* ── HORIZONTAL RULES ── */
.h-rule {
width: 100%; height: 1px;
background: rgba(26,24,21,0.16);
background: rgba(26,24,21,0.14);
position: relative; z-index: 1;
flex-shrink: 0;
}
.marquee-strip { border-top: none; border-bottom: none; }
/* ── NAV ── */
nav {
position: fixed; top: 0; left: 0; right: 0; z-index: 100;
display: grid; grid-template-columns: 1fr auto 1fr;
align-items: center;
padding: 0 max(10%, 1.5rem); height: 52px;
background: rgba(237,233,225,0.95); backdrop-filter: blur(20px);
border-bottom: 1px solid rgba(26,24,21,0.12);
padding: 0 clamp(1.5rem, 8vw, 5rem); height: 56px;
background: rgba(237,233,225,0.96); backdrop-filter: blur(20px);
border-bottom: 1px solid rgba(26,24,21,0.1);
}
.logo { display:flex; align-items:center; text-decoration:none; }
.logo img { height:36px; width:auto; display:block; }
.logo img { height:34px; width:auto; display:block; }
.nav-links { display:flex; gap:0; list-style:none; justify-content:center; }
.nav-links a {
display:block; padding:6px 18px; font-size:0.72rem; font-weight:500;
letter-spacing:0.1em; text-transform:uppercase; color:var(--muted);
text-decoration:none; border:none; background:none; transition:color 0.18s;
}
.nav-links a:hover, .nav-links a.active { color:var(--white); background:none; border:none; }
.nav-links a:hover, .nav-links a.active { color:var(--white); }
.nav-right {
display:flex; align-items:center; gap:0.5rem; justify-content:flex-end;
@@ -79,7 +55,7 @@ nav {
}
.nav-yt-link:hover { color:#c00; }
.nav-store-btn {
display:inline-block; padding:5px 14px;
display:inline-block; padding:6px 16px;
font-family:'Space Mono',monospace; font-size:0.7rem; font-weight:700;
letter-spacing:0.06em; text-transform:uppercase;
color:var(--orange); border:1px solid var(--orange);
@@ -94,135 +70,61 @@ nav {
.hamburger.open span:nth-child(3) { transform:translateY(-5.5px) rotate(-45deg); }
.mobile-menu {
display:none; position:fixed; top:52px; left:0; right:0;
display:none; position:fixed; top:56px; left:0; right:0;
background:rgba(237,233,225,0.98); backdrop-filter:blur(18px);
border-bottom:1px solid rgba(26,24,21,0.12); z-index:99;
padding:1.5rem clamp(1rem,5vw,2.5rem); flex-direction:column; gap:6px;
border-bottom:1px solid rgba(26,24,21,0.1); z-index:99;
padding:1.2rem clamp(1rem,5vw,2.5rem); flex-direction:column; gap:4px;
}
.mobile-menu.open { display:flex; }
.mobile-menu a {
display:block; padding:12px 16px; font-size:0.85rem; font-weight:600;
text-transform:uppercase; letter-spacing:0.08em; color:var(--muted);
text-decoration:none; border-bottom:1px solid rgba(26,24,21,0.08); transition:color 0.18s;
text-decoration:none; border-bottom:1px solid rgba(26,24,21,0.07); transition:color 0.18s;
}
.mobile-menu a:hover { color:var(--white); }
.mobile-menu a.store-link { color:var(--orange); border:none; }
/* ── MARQUEE ── */
.marquee-strip {
width:100%; overflow:hidden; background:#1a1815;
padding:13px 0;
}
.marquee-inner {
display:flex; width:max-content;
animation: marquee 28s linear infinite;
}
.marquee-inner:hover { animation-play-state: paused; }
.marquee-item {
font-family:'Space Mono',monospace; font-size:0.72rem;
letter-spacing:0.18em; text-transform:uppercase;
color:rgba(237,233,225,0.6); white-space:nowrap; padding:0 0.5rem;
}
.marquee-sep {
font-family:'Space Mono',monospace; font-size:0.72rem;
color:var(--orange); padding:0 1rem; line-height:1;
display:flex; align-items:center;
}
@keyframes marquee {
0% { transform: translateX(0); }
100% { transform: translateX(-50%); }
}
@keyframes marquee-rtl {
0% { transform: translateX(-50%); }
100% { transform: translateX(0); }
}
.marquee-inner.rtl { animation-name: marquee-rtl; }
.marquee-inner.fast { animation-duration: 18s; }
.marquee-inner.slow { animation-duration: 40s; }
.marquee-strip.light {
background: var(--surface2);
}
.marquee-strip.light .marquee-item {
color: rgba(26,24,21,0.55);
}
.marquee-strip.light .marquee-sep {
color: var(--orange);
}
/* ── FLOATING BUBBLES ── */
.bubbles {
position: absolute; inset: 0; pointer-events: none; z-index: 0; overflow: hidden;
}
.bubble {
position: absolute; border-radius: 50%;
background: radial-gradient(circle, rgba(201,75,15,0.22) 0%, rgba(201,75,15,0.07) 45%, transparent 70%);
filter: blur(60px);
will-change: transform;
animation: floatBubble var(--dur,15s) ease-in-out var(--delay,0s) infinite;
}
@keyframes floatBubble {
0%,100% { transform: translate(0,0) scale(1); }
25% { transform: translate(var(--x1,40px),var(--y1,-60px)) scale(1.1); }
55% { transform: translate(var(--x2,-35px),var(--y2,30px)) scale(0.92); }
80% { transform: translate(var(--x3,20px),var(--y3,50px)) scale(1.05); }
}
/* ── SECTION BACKGROUNDS ── */
/* ── SECTIONS ── */
section {
min-height: 100vh;
padding: clamp(6rem,12vh,10rem) max(11%, 1.5rem) clamp(4rem,8vh,6rem);
position: relative; overflow: hidden;
padding: clamp(5rem,10vh,8rem) clamp(1.5rem,8vw,5rem) clamp(4rem,8vh,6rem);
position: relative;
}
#home {
background: radial-gradient(ellipse 70% 55% at 65% 50%, rgba(201,75,15,0.08) 0%, transparent 70%),
var(--bg);
display:flex; flex-direction:column; justify-content:center; align-items:flex-start; overflow:hidden;
min-height: 100vh;
display:flex; flex-direction:column; justify-content:center; align-items:flex-start;
overflow: hidden;
}
#about {
background: var(--surface);
display:flex; flex-direction:column; justify-content:center;
}
#faq {
background: var(--bg);
display:flex; flex-direction:column; justify-content:center;
}
#contact {
background: var(--surface);
display:flex; flex-direction:column; justify-content:center;
}
#about { background: var(--surface); }
#faq { background: var(--bg); }
#contact { background: var(--surface); }
/* ── SECTION LABELS & TITLES ── */
.section-label {
font-family:'Space Mono',monospace; font-size:0.75rem; letter-spacing:0.2em;
text-transform:uppercase; margin-bottom:1.2rem; color:var(--orange);
font-family:'Space Mono',monospace; font-size:0.72rem; letter-spacing:0.2em;
text-transform:uppercase; margin-bottom:1rem; color:var(--orange);
}
.section-title {
font-size:clamp(2rem,5vw,4rem); font-weight:900; letter-spacing:-0.03em;
line-height:1; margin-bottom:3rem; color:var(--white);
font-size:clamp(2rem,5vw,3.6rem); font-weight:900; letter-spacing:-0.03em;
line-height:1.05; margin-bottom:3rem; color:var(--white);
}
/* ── HERO TEXT ── */
.hero-eyebrow {
font-family:'Space Mono',monospace; font-size:0.8rem; letter-spacing:0.2em;
font-family:'Space Mono',monospace; font-size:0.78rem; letter-spacing:0.2em;
text-transform:uppercase; color:var(--orange); margin-bottom:1.5rem;
opacity:0; transform:translateY(20px); animation:fadeUp 0.7s 0.2s forwards;
}
.hero-title {
font-size:clamp(3rem,9vw,8rem); font-weight:900; line-height:0.9;
font-size:clamp(3.2rem,9vw,8rem); font-weight:900; line-height:0.92;
letter-spacing:-0.03em; margin-bottom:2rem;
opacity:0; transform:translateY(30px); animation:fadeUp 0.8s 0.35s forwards;
}
.hero-title .line-orange { color:var(--orange); }
.hero-title .line-green { color:#1a1815; }
.hero-sub {
font-size:clamp(1rem,2vw,1.25rem); color:rgba(26,24,21,0.6);
max-width:520px; line-height:1.6; margin-bottom:3rem;
font-size:clamp(1rem,1.8vw,1.15rem); color:rgba(26,24,21,0.55);
max-width:440px; line-height:1.65; margin-bottom:2.8rem;
opacity:0; transform:translateY(20px); animation:fadeUp 0.8s 0.5s forwards;
}
.hero-cta-row {
@@ -232,19 +134,19 @@ section {
/* ── BUTTONS ── */
.btn-primary {
display:inline-block; padding:16px 36px; background:var(--orange); color:#fff;
font-family:'Space Mono',monospace; font-weight:700; font-size:0.9rem;
display:inline-block; padding:15px 34px; background:var(--orange); color:#fff;
font-family:'Space Mono',monospace; font-weight:700; font-size:0.85rem;
letter-spacing:0.04em; text-transform:uppercase; border:1px solid var(--orange);
cursor:pointer; text-decoration:none; transition:all 0.18s;
}
.btn-primary:hover { background:transparent; color:var(--orange); transform:translateY(-2px); }
.btn-primary:hover { background:transparent; color:var(--orange); }
.btn-secondary {
display:inline-block; padding:16px 36px; background:transparent; color:var(--white);
font-family:'Space Mono',monospace; font-weight:700; font-size:0.9rem;
display:inline-block; padding:15px 34px; background:transparent; color:var(--white);
font-family:'Space Mono',monospace; font-weight:700; font-size:0.85rem;
letter-spacing:0.04em; text-transform:uppercase; border:1px solid var(--border-heavy);
cursor:pointer; text-decoration:none; transition:all 0.18s;
}
.btn-secondary:hover { border-color:var(--white); transform:translateY(-2px); }
.btn-secondary:hover { border-color:var(--white); }
/* ── 3D CUBE ── */
.cube-deco {
@@ -252,7 +154,7 @@ section {
display:flex; align-items:center; justify-content:center;
opacity:0; animation:fadeUp 1s 0.9s forwards; pointer-events:none;
}
.cube-scene { width:clamp(160px,22vw,260px); height:clamp(160px,22vw,260px); perspective:700px; }
.cube-scene { width:clamp(150px,20vw,240px); height:clamp(150px,20vw,240px); perspective:700px; }
.cube-3d {
width:100%; height:100%; position:relative; transform-style:preserve-3d;
animation:rotateCube3d 10s linear infinite;
@@ -266,139 +168,114 @@ section {
display:grid; grid-template-columns:repeat(3,1fr); grid-template-rows:repeat(3,1fr);
gap:4px; padding:4px; border:1px solid rgba(0,0,0,0.08);
}
.cube-face.front { transform:translateZ(clamp(80px,11vw,130px)); }
.cube-face.back { transform:rotateY(180deg) translateZ(clamp(80px,11vw,130px)); }
.cube-face.right { transform:rotateY(90deg) translateZ(clamp(80px,11vw,130px)); }
.cube-face.left { transform:rotateY(-90deg) translateZ(clamp(80px,11vw,130px)); }
.cube-face.top { transform:rotateX(90deg) translateZ(clamp(80px,11vw,130px)); }
.cube-face.bottom { transform:rotateX(-90deg) translateZ(clamp(80px,11vw,130px)); }
.cubie { border:1px solid rgba(0,0,0,0.35); }
.cube-face.front { transform:translateZ(clamp(75px,10vw,120px)); }
.cube-face.back { transform:rotateY(180deg) translateZ(clamp(75px,10vw,120px)); }
.cube-face.right { transform:rotateY(90deg) translateZ(clamp(75px,10vw,120px)); }
.cube-face.left { transform:rotateY(-90deg) translateZ(clamp(75px,10vw,120px)); }
.cube-face.top { transform:rotateX(90deg) translateZ(clamp(75px,10vw,120px)); }
.cube-face.bottom { transform:rotateX(-90deg) translateZ(clamp(75px,10vw,120px)); }
.cubie { border:1px solid rgba(0,0,0,0.3); }
/* ── CARDS ── */
.clay-card {
background: rgba(228,224,216,0.85);
border:1px solid var(--border); padding:2rem; position:relative; overflow:hidden;
transition:transform 0.22s, border-color 0.22s;
}
.clay-card::before {
content:''; position:absolute; inset:0;
background:linear-gradient(135deg,rgba(255,255,255,0.25) 0%,transparent 60%);
pointer-events:none;
}
.clay-card:hover { transform:translateY(-4px); border-color:var(--border-heavy); }
.clay-card.orange-accent { border-top:2px solid var(--orange); }
.clay-card.green-accent { border-top:2px solid var(--border-heavy); }
.clay-card.purple-accent { border-top:2px solid var(--border-heavy); }
.clay-card.blue-accent { border-top:2px solid var(--border-heavy); }
.card-icon {
width:52px; height:52px; display:flex; align-items:center; justify-content:center;
margin-bottom:1.2rem; border:1px solid;
}
.card-icon svg { width:26px; height:26px; }
.card-icon.orange { background:var(--orange-glow); border-color:var(--orange); }
.card-icon.green { background:rgba(0,0,0,0.06); border-color:var(--border-heavy); }
.card-icon.purple { background:rgba(0,0,0,0.06); border-color:var(--border-heavy); }
.card-icon.blue { background:rgba(0,0,0,0.06); border-color:var(--border-heavy); }
.card-title { font-size:1.1rem; font-weight:700; margin-bottom:0.6rem; color:var(--white); }
.card-body { font-size:0.92rem; line-height:1.65; color:var(--muted); }
/* ── STAT ROW ── */
.stat-row {
display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
gap:1px; overflow:hidden; background:transparent;
}
.stat-cell { background:rgba(17,17,19,0.85); padding:1.8rem; text-align:center; }
.stat-number {
font-family:'Space Mono',monospace; font-size:clamp(2rem,4vw,3rem);
font-weight:700; color:var(--orange); line-height:1; margin-bottom:0.4rem;
}
.stat-label { font-size:0.78rem; letter-spacing:0.1em; text-transform:uppercase; color:rgba(232,224,255,0.5); }
/* ── ABOUT BIO ── */
/* ── ABOUT ── */
.about-bio-grid {
display:grid; grid-template-columns:1fr 1fr; gap:3rem; align-items:start;
}
@media(max-width:820px){ .about-bio-grid { grid-template-columns:1fr; } }
.about-bio-text { display:flex; flex-direction:column; gap:1.4rem; }
.about-bio-text p { font-size:clamp(0.97rem,1.5vw,1.1rem); color:rgba(26,24,21,0.7); line-height:1.75; }
.about-cards-col { display:flex; flex-direction:column; gap:1.2rem; }
.about-bio-text p { font-size:clamp(0.97rem,1.5vw,1.1rem); color:rgba(26,24,21,0.68); line-height:1.8; }
.about-cards-col { display:flex; flex-direction:column; gap:1rem; }
.text-orange { color:var(--orange); }
/* ── CARDS ── */
.clay-card {
background: rgba(237,233,225,0.7);
border:1px solid var(--border); padding:1.6rem; position:relative;
transition:transform 0.2s, border-color 0.2s;
}
.clay-card:hover { transform:translateY(-3px); border-color:var(--border-heavy); }
.clay-card.orange-accent { border-top:2px solid var(--orange); }
.card-icon {
width:44px; height:44px; display:flex; align-items:center; justify-content:center;
margin-bottom:1rem; border:1px solid var(--border);
}
.card-icon svg { width:22px; height:22px; }
.card-icon.orange { background:var(--orange-glow); border-color:var(--orange); }
.card-title { font-size:1rem; font-weight:700; margin-bottom:0.5rem; color:var(--white); }
.card-body { font-size:0.9rem; line-height:1.65; color:var(--muted); }
/* ── PHOTO GALLERY ── */
.about-photos {
display:grid; grid-template-columns:1fr 1fr; gap:1.2rem; margin-top:3rem;
display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-top:3rem;
}
@media(max-width:600px){ .about-photos { grid-template-columns:1fr; } }
.about-photo-wrap {
position:relative; overflow:hidden;
border:1px solid var(--border); transition:border-color 0.22s, transform 0.22s;
border:1px solid var(--border); transition:border-color 0.22s;
}
.about-photo-wrap:hover { border-color:var(--orange); transform:translateY(-4px); }
.about-photo-wrap:hover { border-color:var(--border-heavy); }
.about-photo-wrap img {
width:100%; height:340px; object-fit:cover; display:block;
filter:saturate(0.8) brightness(0.95); transition:filter 0.3s, transform 0.3s;
width:100%; height:320px; object-fit:cover; display:block;
filter:saturate(0.85) brightness(0.96); transition:filter 0.3s, transform 0.3s;
}
.about-photo-wrap:hover img { filter:saturate(1) brightness(1); transform:scale(1.03); }
.about-photo-wrap:hover img { filter:saturate(1) brightness(1); transform:scale(1.02); }
.about-photo-label {
position:absolute; bottom:0; left:0; right:0;
padding:0.8rem 1rem;
background:linear-gradient(transparent, rgba(237,233,225,0.92));
font-family:'Space Mono',monospace; font-size:0.72rem; letter-spacing:0.12em;
text-transform:uppercase; color:rgba(26,24,21,0.8);
padding:0.7rem 1rem;
background:linear-gradient(transparent, rgba(237,233,225,0.9));
font-family:'Space Mono',monospace; font-size:0.7rem; letter-spacing:0.12em;
text-transform:uppercase; color:rgba(26,24,21,0.75);
}
/* ── FAQ CARDS GRID ── */
/* ── FAQ ── */
.faq-grid {
display:grid;
grid-template-columns:repeat(auto-fill, minmax(340px, 1fr));
gap:1.5rem;
gap:1px;
background: var(--border);
border: 1px solid var(--border);
}
.faq-card {
background:rgba(228,224,216,0.7);
border:1px solid var(--border);
padding:0;
position:relative;
overflow:hidden;
transition:border-color 0.2s, transform 0.2s;
background: var(--bg);
padding:0; position:relative; overflow:hidden;
transition:background 0.18s;
cursor:pointer;
}
.faq-card:hover { border-color:var(--border-heavy); transform:translateY(-3px); }
.faq-card.open { border-color:var(--orange); }
.faq-card:hover { background: var(--surface); }
.faq-card.open { background: var(--surface); }
.faq-card-q {
display:flex; align-items:center; justify-content:space-between;
gap:1rem; padding:1.5rem 1.6rem;
gap:1rem; padding:1.4rem 1.6rem;
background:none; border:none; width:100%;
font-family:'Space Grotesk',sans-serif; font-size:1rem; font-weight:700;
font-family:'Space Grotesk',sans-serif; font-size:0.97rem; font-weight:700;
color:var(--white); text-align:left; cursor:pointer;
}
.faq-card.open .faq-card-q { color:var(--orange); }
.faq-card-num {
font-family:'Space Mono',monospace; font-size:0.72rem; letter-spacing:0.15em;
color:var(--muted); flex-shrink:0; margin-bottom:0.3rem;
font-family:'Space Mono',monospace; font-size:0.68rem; letter-spacing:0.15em;
color:var(--muted); flex-shrink:0; margin-bottom:0.25rem;
display:block;
}
.faq-card-title { display:block; }
.faq-chevron {
width:20px; height:20px; flex-shrink:0;
width:18px; height:18px; flex-shrink:0;
color:var(--muted); transition:transform 0.25s, color 0.2s;
}
.faq-card.open .faq-chevron { transform:rotate(180deg); color:var(--orange); }
.faq-card-a {
max-height:0; overflow:hidden;
font-size:0.92rem; color:var(--muted); line-height:1.7;
font-size:0.9rem; color:var(--muted); line-height:1.7;
padding:0 1.6rem;
transition:max-height 0.35s ease, padding 0.35s ease;
border-top:0px solid var(--border);
}
.faq-card.open .faq-card-a {
max-height:300px; padding:0 1.6rem 1.5rem;
max-height:300px; padding:0 1.6rem 1.4rem;
border-top:1px solid var(--border);
}
.faq-a-link { color:var(--orange); text-decoration:none; }
@@ -407,41 +284,41 @@ section {
/* ── STORE OVERLAY ── */
.store-overlay {
display:none; position:fixed; inset:0; z-index:200;
background:rgba(0,0,0,0.82); backdrop-filter:blur(8px);
background:rgba(0,0,0,0.75); backdrop-filter:blur(6px);
align-items:center; justify-content:center; padding:1rem;
}
.store-overlay.active { display:flex; }
.store-modal-card {
background:var(--surface); border:1px solid var(--orange);
width:100%; max-width:480px; overflow:hidden;
animation:popIn 0.3s cubic-bezier(0.34,1.56,0.64,1);
background:var(--surface); border:1px solid var(--border);
width:100%; max-width:460px; overflow:hidden;
animation:popIn 0.28s cubic-bezier(0.34,1.56,0.64,1);
}
@keyframes popIn { 0%{opacity:0;transform:scale(0.88)} 100%{opacity:1;transform:scale(1)} }
@keyframes popIn { 0%{opacity:0;transform:scale(0.9)} 100%{opacity:1;transform:scale(1)} }
.store-modal-top {
display:flex; align-items:center; gap:1rem; padding:1rem 1.4rem;
border-bottom:1px solid var(--border); background:var(--surface2);
}
.store-modal-url {
flex:1; background:var(--bg); border:1px solid var(--border); padding:7px 18px;
font-family:'Space Mono',monospace; font-size:0.78rem; color:var(--muted);
flex:1; background:var(--bg); border:1px solid var(--border); padding:6px 16px;
font-family:'Space Mono',monospace; font-size:0.75rem; color:var(--muted);
overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.modal-close {
background:transparent; border:1px solid var(--border-heavy); color:var(--white);
font-family:'Space Mono',monospace; font-size:0.8rem; font-weight:700;
padding:6px 18px; cursor:pointer; transition:all 0.18s; white-space:nowrap;
font-family:'Space Mono',monospace; font-size:0.78rem; font-weight:700;
padding:6px 16px; cursor:pointer; transition:all 0.18s; white-space:nowrap;
}
.modal-close:hover { border-color:var(--orange); color:var(--orange); }
.store-modal-body {
padding:2.8rem 2.4rem 2.4rem;
display:flex; flex-direction:column; align-items:center; text-align:center; gap:1rem;
padding:2.4rem 2.2rem 2.2rem;
display:flex; flex-direction:column; align-items:center; text-align:center; gap:0.9rem;
}
.store-modal-title { font-family:'Space Mono',monospace; font-weight:700; font-size:1.3rem; color:var(--white); }
.store-modal-desc { font-size:0.95rem; color:var(--muted); line-height:1.6; max-width:320px; }
.store-modal-title { font-family:'Space Mono',monospace; font-weight:700; font-size:1.2rem; color:var(--white); }
.store-modal-desc { font-size:0.92rem; color:var(--muted); line-height:1.6; max-width:300px; }
.store-launch-btn {
display:inline-block; margin-top:0.6rem; padding:16px 40px;
background:var(--orange); color:#000; font-family:'Space Mono',monospace;
font-weight:700; font-size:0.9rem; letter-spacing:0.04em; text-transform:uppercase;
display:inline-block; margin-top:0.4rem; padding:14px 36px;
background:var(--orange); color:#fff; font-family:'Space Mono',monospace;
font-weight:700; font-size:0.85rem; letter-spacing:0.04em; text-transform:uppercase;
border:1px solid var(--orange); text-decoration:none; transition:all 0.18s;
}
.store-launch-btn:hover { background:transparent; color:var(--orange); }
@@ -449,59 +326,60 @@ section {
/* ── CONTACT ── */
.contact-grid { display:grid; grid-template-columns:1fr 1fr; gap:2rem; align-items:start; }
@media(max-width:720px){ .contact-grid { grid-template-columns:1fr; } }
.contact-info { display:flex; flex-direction:column; gap:1.2rem; }
.contact-info { display:flex; flex-direction:column; gap:1px; background:var(--border); border:1px solid var(--border); }
.contact-block {
display:flex; align-items:flex-start; gap:1rem; padding:1.4rem;
background:rgba(228,224,216,0.6); border:1px solid var(--border); transition:border-color 0.2s;
display:flex; align-items:flex-start; gap:1rem; padding:1.3rem 1.4rem;
background:var(--surface); transition:background 0.18s;
}
.contact-block:hover { border-color:var(--orange); }
.contact-block:hover { background:var(--bg); }
.contact-block-icon {
width:40px; height:40px; flex-shrink:0;
display:flex; align-items:center; justify-content:center; border:1px solid var(--border-heavy);
width:38px; height:38px; flex-shrink:0;
display:flex; align-items:center; justify-content:center; border:1px solid var(--border);
}
.contact-block-icon svg { width:20px; height:20px; }
.contact-block-icon svg { width:18px; height:18px; }
.contact-block-title {
font-size:0.78rem; font-family:'Space Mono',monospace; letter-spacing:0.1em;
text-transform:uppercase; color:var(--muted); margin-bottom:4px;
font-size:0.72rem; font-family:'Space Mono',monospace; letter-spacing:0.1em;
text-transform:uppercase; color:var(--muted); margin-bottom:3px;
}
.contact-block-value { font-size:0.97rem; font-weight:600; color:var(--white); }
.contact-block-value { font-size:0.95rem; font-weight:600; color:var(--white); }
.contact-link { color:var(--white); text-decoration:none; }
.contact-link:hover { color:var(--orange); }
.contact-form {
background:rgba(228,224,216,0.6); border:1px solid var(--border);
padding:2.2rem; display:flex; flex-direction:column; gap:1.2rem; position:relative;
background:var(--surface); border:1px solid var(--border);
padding:2rem; display:flex; flex-direction:column; gap:1.1rem;
}
.form-label {
font-size:0.78rem; font-family:'Space Mono',monospace; letter-spacing:0.1em;
text-transform:uppercase; color:var(--muted); display:block; margin-bottom:6px;
font-size:0.72rem; font-family:'Space Mono',monospace; letter-spacing:0.1em;
text-transform:uppercase; color:var(--muted); display:block; margin-bottom:5px;
}
.form-input, .form-textarea {
width:100%; background:rgba(237,233,225,0.9); border:1px solid var(--border);
padding:12px 16px; color:var(--white);
font-family:'Space Grotesk',sans-serif; font-size:0.97rem; transition:border-color 0.18s; outline:none;
width:100%; background:var(--bg); border:1px solid var(--border);
padding:11px 14px; color:var(--white);
font-family:'Space Grotesk',sans-serif; font-size:0.95rem; transition:border-color 0.18s; outline:none;
}
.form-input:focus, .form-textarea:focus { border-color:var(--orange); }
.form-textarea { resize:vertical; min-height:120px; }
.form-textarea { resize:vertical; min-height:110px; }
.form-submit {
display:inline-block; padding:16px 36px; background:var(--orange); color:#fff;
font-family:'Space Mono',monospace; font-weight:700; font-size:0.9rem;
display:inline-block; padding:14px 32px; background:var(--orange); color:#fff;
font-family:'Space Mono',monospace; font-weight:700; font-size:0.85rem;
letter-spacing:0.04em; text-transform:uppercase; border:1px solid var(--orange);
cursor:pointer; transition:all 0.18s; align-self:flex-start;
}
.form-submit:hover { background:transparent; color:var(--orange); transform:translateY(-2px); }
.form-submit:hover { background:transparent; color:var(--orange); }
/* ── FOOTER ── */
footer {
border-top:1px solid var(--border); padding:2.5rem clamp(1.5rem,8vw,6rem);
border-top:1px solid var(--border); padding:2rem clamp(1.5rem,8vw,5rem);
display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1rem;
background:var(--surface);
background:var(--surface2);
}
.footer-logo { display:flex; align-items:center; }
.footer-logo img { height:32px; width:auto; display:block; }
.footer-copy { font-size:0.82rem; color:var(--muted); }
.footer-logo img { height:30px; width:auto; display:block; }
.footer-copy { font-size:0.8rem; color:var(--muted); }
/* ── ANIMATIONS ── */
.reveal { opacity:0; transform:translateY(36px); transition:opacity 0.7s ease, transform 0.7s ease; }
.reveal { opacity:0; transform:translateY(28px); transition:opacity 0.65s ease, transform 0.65s ease; }
.reveal.visible { opacity:1; transform:translateY(0); }
@keyframes fadeUp { to { opacity:1; transform:translateY(0); } }
@@ -512,7 +390,5 @@ footer {
.nav-right .nav-store-btn { display:none; }
.hamburger { display:flex; }
.cube-deco { display:none; }
.stat-row { grid-template-columns:repeat(2,1fr); }
.faq-grid { grid-template-columns:1fr; }
.site-grid span[style*="50%"] { display:none; }
}