993 lines
49 KiB
HTML
993 lines
49 KiB
HTML
|
||
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8"/>
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
||
<title>JustGoodCubing</title>
|
||
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;700;900&family=Space+Mono:wght@400;700&display=swap" rel="stylesheet"/>
|
||
<style>
|
||
:root {
|
||
--bg: #ede9e1;
|
||
--surface: #e4e0d8;
|
||
--surface2: #d8d4cb;
|
||
--border: #b8b4aa;
|
||
--border-heavy: #8a867c;
|
||
--orange: #c94b0f;
|
||
--orange-glow: #c94b0f22;
|
||
--green: #3a6b30;
|
||
--green-dim: #3a6b3018;
|
||
--purple: #5c3d8f;
|
||
--purple-dim: #5c3d8f18;
|
||
--blue: #1a5fa8;
|
||
--blue-dim: #1a5fa818;
|
||
--white: #1a1815;
|
||
--muted: #6b6760;
|
||
}
|
||
|
||
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
||
html { scroll-behavior: smooth; }
|
||
body {
|
||
background: var(--bg);
|
||
color: var(--white);
|
||
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) ── */
|
||
.h-rule {
|
||
width: 100%; height: 1px;
|
||
background: rgba(26,24,21,0.16);
|
||
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);
|
||
}
|
||
.logo { display:flex; align-items:center; text-decoration:none; }
|
||
.logo img { height:36px; 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-right {
|
||
display:flex; align-items:center; gap:0.5rem; justify-content:flex-end;
|
||
}
|
||
.nav-yt-link {
|
||
display:flex; align-items:center; justify-content:center;
|
||
color:var(--muted); transition:color 0.18s; padding:6px;
|
||
}
|
||
.nav-yt-link:hover { color:#c00; }
|
||
.nav-store-btn {
|
||
display:inline-block; padding:5px 14px;
|
||
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);
|
||
text-decoration:none; transition:all 0.18s; white-space:nowrap;
|
||
}
|
||
.nav-store-btn:hover { background:var(--orange); color:#fff; }
|
||
|
||
.hamburger { display:none; flex-direction:column; gap:4px; cursor:pointer; background:none; border:none; padding:4px; }
|
||
.hamburger span { display:block; width:22px; height:1.5px; background:var(--white); transition:all 0.2s; }
|
||
.hamburger.open span:nth-child(1) { transform:translateY(5.5px) rotate(45deg); }
|
||
.hamburger.open span:nth-child(2) { opacity:0; }
|
||
.hamburger.open span:nth-child(3) { transform:translateY(-5.5px) rotate(-45deg); }
|
||
|
||
.mobile-menu {
|
||
display:none; position:fixed; top:52px; 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;
|
||
}
|
||
.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;
|
||
}
|
||
.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 ── */
|
||
section {
|
||
min-height: 100vh;
|
||
padding: clamp(6rem,12vh,10rem) max(11%, 1.5rem) clamp(4rem,8vh,6rem);
|
||
position: relative; overflow: hidden;
|
||
}
|
||
|
||
#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;
|
||
}
|
||
|
||
#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;
|
||
}
|
||
|
||
/* ── 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);
|
||
}
|
||
|
||
.section-title {
|
||
font-size:clamp(2rem,5vw,4rem); font-weight:900; letter-spacing:-0.03em;
|
||
line-height:1; margin-bottom:3rem; color:var(--white);
|
||
}
|
||
|
||
/* ── HERO TEXT ── */
|
||
.hero-eyebrow {
|
||
font-family:'Space Mono',monospace; font-size:0.8rem; 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;
|
||
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;
|
||
opacity:0; transform:translateY(20px); animation:fadeUp 0.8s 0.5s forwards;
|
||
}
|
||
.hero-cta-row {
|
||
display:flex; flex-wrap:wrap; gap:1rem;
|
||
opacity:0; transform:translateY(20px); animation:fadeUp 0.8s 0.65s forwards;
|
||
}
|
||
|
||
/* ── 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;
|
||
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-secondary {
|
||
display:inline-block; padding:16px 36px; background:transparent; color:var(--white);
|
||
font-family:'Space Mono',monospace; font-weight:700; font-size:0.9rem;
|
||
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); }
|
||
|
||
/* ── 3D CUBE ── */
|
||
.cube-deco {
|
||
position:absolute; right:0; top:0; bottom:0; width:50%;
|
||
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-3d {
|
||
width:100%; height:100%; position:relative; transform-style:preserve-3d;
|
||
animation:rotateCube3d 10s linear infinite;
|
||
}
|
||
@keyframes rotateCube3d {
|
||
0% { transform:rotateX(22deg) rotateY(0deg); }
|
||
100% { transform:rotateX(22deg) rotateY(360deg); }
|
||
}
|
||
.cube-face {
|
||
position:absolute; width:100%; height:100%;
|
||
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); }
|
||
|
||
/* ── 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-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; }
|
||
.text-orange { color:var(--orange); }
|
||
|
||
/* ── PHOTO GALLERY ── */
|
||
.about-photos {
|
||
display:grid; grid-template-columns:1fr 1fr; gap:1.2rem; 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;
|
||
}
|
||
.about-photo-wrap:hover { border-color:var(--orange); transform:translateY(-4px); }
|
||
.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;
|
||
}
|
||
.about-photo-wrap:hover img { filter:saturate(1) brightness(1); transform:scale(1.03); }
|
||
.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);
|
||
}
|
||
|
||
/* ── FAQ CARDS GRID ── */
|
||
.faq-grid {
|
||
display:grid;
|
||
grid-template-columns:repeat(auto-fill, minmax(340px, 1fr));
|
||
gap:1.5rem;
|
||
}
|
||
|
||
.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;
|
||
cursor:pointer;
|
||
}
|
||
.faq-card:hover { border-color:var(--border-heavy); transform:translateY(-3px); }
|
||
.faq-card.open { border-color:var(--orange); }
|
||
|
||
.faq-card-q {
|
||
display:flex; align-items:center; justify-content:space-between;
|
||
gap:1rem; padding:1.5rem 1.6rem;
|
||
background:none; border:none; width:100%;
|
||
font-family:'Space Grotesk',sans-serif; font-size:1rem; 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;
|
||
display:block;
|
||
}
|
||
.faq-card-title { display:block; }
|
||
|
||
.faq-chevron {
|
||
width:20px; height:20px; 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;
|
||
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;
|
||
border-top:1px solid var(--border);
|
||
}
|
||
.faq-a-link { color:var(--orange); text-decoration:none; }
|
||
.faq-a-link:hover { text-decoration:underline; }
|
||
|
||
/* ── STORE OVERLAY ── */
|
||
.store-overlay {
|
||
display:none; position:fixed; inset:0; z-index:200;
|
||
background:rgba(0,0,0,0.82); backdrop-filter:blur(8px);
|
||
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);
|
||
}
|
||
@keyframes popIn { 0%{opacity:0;transform:scale(0.88)} 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);
|
||
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;
|
||
}
|
||
.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;
|
||
}
|
||
.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-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;
|
||
border:1px solid var(--orange); text-decoration:none; transition:all 0.18s;
|
||
}
|
||
.store-launch-btn:hover { background:transparent; color:var(--orange); }
|
||
|
||
/* ── 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-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;
|
||
}
|
||
.contact-block:hover { border-color:var(--orange); }
|
||
.contact-block-icon {
|
||
width:40px; height:40px; flex-shrink:0;
|
||
display:flex; align-items:center; justify-content:center; border:1px solid var(--border-heavy);
|
||
}
|
||
.contact-block-icon svg { width:20px; height:20px; }
|
||
.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;
|
||
}
|
||
.contact-block-value { font-size:0.97rem; font-weight:600; color:var(--white); }
|
||
|
||
.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;
|
||
}
|
||
.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;
|
||
}
|
||
.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;
|
||
}
|
||
.form-input:focus, .form-textarea:focus { border-color:var(--orange); }
|
||
.form-textarea { resize:vertical; min-height:120px; }
|
||
.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;
|
||
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); }
|
||
|
||
/* ── FOOTER ── */
|
||
footer {
|
||
border-top:1px solid var(--border); padding:2.5rem clamp(1.5rem,8vw,6rem);
|
||
display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1rem;
|
||
background:var(--surface);
|
||
}
|
||
.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); }
|
||
|
||
/* ── ANIMATIONS ── */
|
||
.reveal { opacity:0; transform:translateY(36px); transition:opacity 0.7s ease, transform 0.7s ease; }
|
||
.reveal.visible { opacity:1; transform:translateY(0); }
|
||
@keyframes fadeUp { to { opacity:1; transform:translateY(0); } }
|
||
|
||
/* ── RESPONSIVE ── */
|
||
@media(max-width:768px){
|
||
nav { grid-template-columns: 1fr auto; }
|
||
.nav-links { display:none; }
|
||
.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; }
|
||
}
|
||
</style>
|
||
</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="/logo.png" alt="JustGoodCubing"/></a>
|
||
<ul class="nav-links">
|
||
<li><a href="#home" data-section="home">Home</a></li>
|
||
<li><a href="#about" data-section="about">About</a></li>
|
||
<li><a href="#faq" data-section="faq">FAQ</a></li>
|
||
<li><a href="#contact" data-section="contact">Contact</a></li>
|
||
</ul>
|
||
<div class="nav-right">
|
||
<a href="https://www.youtube.com/@JustGoodCuber" target="_blank" rel="noopener" class="nav-yt-link" aria-label="YouTube">
|
||
<svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><path d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z"/></svg>
|
||
</a>
|
||
<a href="#" class="nav-store-btn" id="storeNavBtn">Store ↗</a>
|
||
<button class="hamburger" id="hamburger" aria-label="Open menu">
|
||
<span></span><span></span><span></span>
|
||
</button>
|
||
</div>
|
||
</nav>
|
||
|
||
<!-- MOBILE MENU -->
|
||
<div class="mobile-menu" id="mobileMenu">
|
||
<a href="#home" class="mobile-nav-link">Home</a>
|
||
<a href="#about" class="mobile-nav-link">About</a>
|
||
<a href="#faq" class="mobile-nav-link">FAQ</a>
|
||
<a href="#contact" class="mobile-nav-link">Contact</a>
|
||
<a href="#" class="store-link mobile-nav-link" id="storeMobileBtn">Store ↗</a>
|
||
</div>
|
||
|
||
<!-- STORE OVERLAY -->
|
||
<div class="store-overlay" id="storeOverlay">
|
||
<div class="store-modal-card">
|
||
<div class="store-modal-top">
|
||
<div class="store-modal-url">justgoodcubing.printify.me/products</div>
|
||
<button class="modal-close" id="storeClose">✕ Close</button>
|
||
</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">
|
||
<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>
|
||
<a href="https://justgoodcubing.printify.me/products" target="_blank" rel="noopener" class="store-launch-btn">Open Store ↗</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ═══ 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>
|
||
</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>
|
||
<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>
|
||
</div>
|
||
<div class="cube-deco">
|
||
<div class="cube-scene">
|
||
<div class="cube-3d" id="cube3d">
|
||
<div class="cube-face front">
|
||
<div class="cubie" style="background:#ff5f1f"></div><div class="cubie" style="background:#ff5f1f"></div><div class="cubie" style="background:#ff5f1f"></div>
|
||
<div class="cubie" style="background:#ff5f1f"></div><div class="cubie" style="background:#ff5f1f"></div><div class="cubie" style="background:#ff5f1f"></div>
|
||
<div class="cubie" style="background:#ff5f1f"></div><div class="cubie" style="background:#ff5f1f"></div><div class="cubie" style="background:#ff5f1f"></div>
|
||
</div>
|
||
<div class="cube-face back">
|
||
<div class="cubie" style="background:#39ff14"></div><div class="cubie" style="background:#39ff14"></div><div class="cubie" style="background:#39ff14"></div>
|
||
<div class="cubie" style="background:#39ff14"></div><div class="cubie" style="background:#39ff14"></div><div class="cubie" style="background:#39ff14"></div>
|
||
<div class="cubie" style="background:#39ff14"></div><div class="cubie" style="background:#39ff14"></div><div class="cubie" style="background:#39ff14"></div>
|
||
</div>
|
||
<div class="cube-face right">
|
||
<div class="cubie" style="background:#b14fff"></div><div class="cubie" style="background:#b14fff"></div><div class="cubie" style="background:#b14fff"></div>
|
||
<div class="cubie" style="background:#b14fff"></div><div class="cubie" style="background:#b14fff"></div><div class="cubie" style="background:#b14fff"></div>
|
||
<div class="cubie" style="background:#b14fff"></div><div class="cubie" style="background:#b14fff"></div><div class="cubie" style="background:#b14fff"></div>
|
||
</div>
|
||
<div class="cube-face left">
|
||
<div class="cubie" style="background:#e8e8e8"></div><div class="cubie" style="background:#e8e8e8"></div><div class="cubie" style="background:#e8e8e8"></div>
|
||
<div class="cubie" style="background:#e8e8e8"></div><div class="cubie" style="background:#e8e8e8"></div><div class="cubie" style="background:#e8e8e8"></div>
|
||
<div class="cubie" style="background:#e8e8e8"></div><div class="cubie" style="background:#e8e8e8"></div><div class="cubie" style="background:#e8e8e8"></div>
|
||
</div>
|
||
<div class="cube-face top">
|
||
<div class="cubie" style="background:#ffe020"></div><div class="cubie" style="background:#ffe020"></div><div class="cubie" style="background:#ffe020"></div>
|
||
<div class="cubie" style="background:#ffe020"></div><div class="cubie" style="background:#ffe020"></div><div class="cubie" style="background:#ffe020"></div>
|
||
<div class="cubie" style="background:#ffe020"></div><div class="cubie" style="background:#ffe020"></div><div class="cubie" style="background:#ffe020"></div>
|
||
</div>
|
||
<div class="cube-face bottom">
|
||
<div class="cubie" style="background:#1e90ff"></div><div class="cubie" style="background:#1e90ff"></div><div class="cubie" style="background:#1e90ff"></div>
|
||
<div class="cubie" style="background:#1e90ff"></div><div class="cubie" style="background:#1e90ff"></div><div class="cubie" style="background:#1e90ff"></div>
|
||
<div class="cubie" style="background:#1e90ff"></div><div class="cubie" style="background:#1e90ff"></div><div class="cubie" style="background:#1e90ff"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</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>
|
||
</div>
|
||
<div class="about-cards-col">
|
||
<div class="clay-card orange-accent reveal">
|
||
<div class="card-icon orange">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="#c94b0f" stroke-width="2" stroke-linecap="square">
|
||
<polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/>
|
||
</svg>
|
||
</div>
|
||
<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">
|
||
<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>
|
||
<div class="clay-card purple-accent reveal">
|
||
<div class="card-icon purple">
|
||
<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>
|
||
</div>
|
||
<div class="card-title">Community First</div>
|
||
<div class="card-body">This store exists to bring the cubing experience to everyone — whether you're a world-class solver or just picked up your first cube.</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="about-photos reveal">
|
||
<div class="about-photo-wrap">
|
||
<img src="/photo1.png" alt="Anshveer at a speedcubing competition"/>
|
||
<div class="about-photo-label">At a WCA Competition</div>
|
||
</div>
|
||
<div class="about-photo-wrap">
|
||
<img src="/photo2.png" alt="Solving a Rubik's cube"/>
|
||
<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="faq-grid">
|
||
|
||
<div class="faq-card reveal">
|
||
<button class="faq-card-q">
|
||
<span><span class="faq-card-num">01</span><span class="faq-card-title">What is JustGoodCubing?</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">JustGoodCubing is a cubing-inspired brand creating unique merchandise and accessories for speedcubers and puzzle enthusiasts. Our products are designed to bring cubing into everyday life.</div>
|
||
</div>
|
||
|
||
<div class="faq-card reveal">
|
||
<button class="faq-card-q">
|
||
<span><span class="faq-card-num">02</span><span class="faq-card-title">How long does shipping take?</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">Most orders are produced within 2–5 business days and shipped shortly after. Delivery times vary depending on your location.</div>
|
||
</div>
|
||
|
||
<div class="faq-card reveal">
|
||
<button class="faq-card-q">
|
||
<span><span class="faq-card-num">03</span><span class="faq-card-title">Where do you ship?</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">We currently ship to most countries supported by our fulfillment partners. Shipping availability and rates are calculated during checkout.</div>
|
||
</div>
|
||
|
||
<div class="faq-card reveal">
|
||
<button class="faq-card-q">
|
||
<span><span class="faq-card-num">04</span><span class="faq-card-title">What if my order arrives damaged or incorrect?</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">If your order arrives damaged, misprinted, or incorrect, please contact us within 30 days of delivery with photos of the issue, and we'll work to make it right.</div>
|
||
</div>
|
||
|
||
<div class="faq-card reveal">
|
||
<button class="faq-card-q">
|
||
<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>
|
||
|
||
<div class="faq-card reveal">
|
||
<button class="faq-card-q">
|
||
<span><span class="faq-card-num">06</span><span class="faq-card-title">Will the colors look exactly like the photos?</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">Colors may vary slightly depending on your screen settings and the printing process, but we strive to make every product as accurate as possible.</div>
|
||
</div>
|
||
|
||
<div class="faq-card reveal">
|
||
<button class="faq-card-q">
|
||
<span><span class="faq-card-num">07</span><span class="faq-card-title">Do you sell official Rubik's products?</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">No. JustGoodCubing creates original designs that are not related to official Rubik's products.</div>
|
||
</div>
|
||
|
||
<div class="faq-card reveal">
|
||
<button class="faq-card-q">
|
||
<span><span class="faq-card-num">08</span><span class="faq-card-title">How can I contact you?</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">Feel free to reach out through our contact section, or email us directly at <a class="faq-a-link" href="mailto:Askang04@gmail.com">Askang04@gmail.com</a>. We always reply.</div>
|
||
</div>
|
||
|
||
</div>
|
||
</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>
|
||
|
||
<div class="contact-grid">
|
||
<div class="contact-info reveal">
|
||
<div class="contact-block">
|
||
<div class="contact-block-icon">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="var(--orange)" stroke-width="2" stroke-linecap="square">
|
||
<rect x="2" y="4" width="20" height="16"/><polyline points="2,4 12,13 22,4"/>
|
||
</svg>
|
||
</div>
|
||
<div>
|
||
<div class="contact-block-title">Email</div>
|
||
<div class="contact-block-value">Askang04@gmail.com</div>
|
||
</div>
|
||
</div>
|
||
<div class="contact-block">
|
||
<div class="contact-block-icon">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="var(--orange)" stroke-width="2" stroke-linecap="square">
|
||
<path d="M22 16.92v3a2 2 0 0 1-2.18 2A19.79 19.79 0 0 1 11.61 19 19.5 19.5 0 0 1 5 12.39 19.79 19.79 0 0 1 2.12 4.18 2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.127.96.361 1.903.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0 1 22 16.92z"/>
|
||
</svg>
|
||
</div>
|
||
<div>
|
||
<div class="contact-block-title">Phone</div>
|
||
<div class="contact-block-value">945-227-8728</div>
|
||
</div>
|
||
</div>
|
||
<div class="contact-block">
|
||
<div class="contact-block-icon">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="#ff0000" stroke-width="2" stroke-linecap="square">
|
||
<polygon points="5 3 19 12 5 21 5 3"/>
|
||
</svg>
|
||
</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>
|
||
</div>
|
||
<div class="contact-block">
|
||
<div class="contact-block-icon">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="var(--orange)" stroke-width="2" stroke-linecap="square">
|
||
<circle cx="12" cy="12" r="10"/><line x1="2" y1="12" x2="22" y2="12"/>
|
||
<path d="M12 2a15 15 0 0 1 0 20M12 2a15 15 0 0 0 0 20"/>
|
||
</svg>
|
||
</div>
|
||
<div>
|
||
<div class="contact-block-title">Shipping</div>
|
||
<div class="contact-block-value">Ships worldwide — rates calculated at checkout.</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<form class="contact-form reveal" id="contactForm">
|
||
<div>
|
||
<label class="form-label" for="nameInput">Your Name</label>
|
||
<input class="form-input" id="nameInput" type="text" placeholder="Your name"/>
|
||
</div>
|
||
<div>
|
||
<label class="form-label" for="emailInput">Email</label>
|
||
<input class="form-input" id="emailInput" type="email" placeholder="your@email.com"/>
|
||
</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>
|
||
</div>
|
||
<button type="submit" class="form-submit">Send It ↗</button>
|
||
</form>
|
||
</div>
|
||
</section>
|
||
|
||
<div class="h-rule"></div>
|
||
<!-- FOOTER -->
|
||
<footer>
|
||
<div class="footer-logo"><img src="/logo.png" alt="JustGoodCubing"/></div>
|
||
<div class="footer-copy">© 2026 JustGoodCubing. All rights reserved.</div>
|
||
</footer>
|
||
|
||
<script>
|
||
// Store
|
||
const overlay = document.getElementById('storeOverlay');
|
||
function openStore(e){ if(e) e.preventDefault(); overlay.classList.add('active'); document.body.style.overflow='hidden'; }
|
||
function closeStore(){ overlay.classList.remove('active'); document.body.style.overflow=''; }
|
||
document.getElementById('storeNavBtn').addEventListener('click', openStore);
|
||
document.getElementById('storeMobileBtn').addEventListener('click', openStore);
|
||
document.getElementById('heroCta').addEventListener('click', openStore);
|
||
document.getElementById('storeClose').addEventListener('click', closeStore);
|
||
overlay.addEventListener('click', function(e){ if(e.target===overlay) closeStore(); });
|
||
document.addEventListener('keydown', function(e){ if(e.key==='Escape'&&overlay.classList.contains('active')) closeStore(); });
|
||
|
||
// Hamburger
|
||
const hamburger=document.getElementById('hamburger'), mobileMenu=document.getElementById('mobileMenu');
|
||
hamburger.addEventListener('click', function(){ hamburger.classList.toggle('open'); mobileMenu.classList.toggle('open'); });
|
||
document.querySelectorAll('.mobile-nav-link').forEach(function(a){ a.addEventListener('click', function(){ hamburger.classList.remove('open'); mobileMenu.classList.remove('open'); }); });
|
||
|
||
// Scroll reveal
|
||
const observer = new IntersectionObserver(function(entries){
|
||
entries.forEach(function(e){ if(e.isIntersecting){ e.target.classList.add('visible'); observer.unobserve(e.target); } });
|
||
}, {threshold:0.1});
|
||
document.querySelectorAll('.reveal').forEach(function(el){ observer.observe(el); });
|
||
|
||
// Active nav
|
||
const secObs = new IntersectionObserver(function(entries){
|
||
entries.forEach(function(e){ if(e.isIntersecting){ const id=e.target.id; document.querySelectorAll('.nav-links a[data-section]').forEach(function(a){ a.classList.toggle('active', a.dataset.section===id); }); } });
|
||
}, {rootMargin:'-40% 0px -55% 0px'});
|
||
['home','about','faq','contact'].forEach(function(id){ const el=document.getElementById(id); if(el) secObs.observe(el); });
|
||
|
||
// FAQ card accordion
|
||
document.querySelectorAll('.faq-card-q').forEach(function(btn){
|
||
btn.addEventListener('click', function(){
|
||
const card=this.closest('.faq-card');
|
||
const isOpen=card.classList.contains('open');
|
||
document.querySelectorAll('.faq-card.open').forEach(function(c){ c.classList.remove('open'); });
|
||
if(!isOpen) card.classList.add('open');
|
||
});
|
||
});
|
||
|
||
// Contact form
|
||
document.getElementById('contactForm').addEventListener('submit', function(e){
|
||
e.preventDefault();
|
||
const btn=this.querySelector('.form-submit');
|
||
btn.textContent='Message Sent ✓'; btn.style.background='var(--green)'; btn.style.borderColor='var(--green)'; btn.style.color='#000';
|
||
setTimeout(function(){ btn.textContent='Send It ↗'; btn.style.background=btn.style.borderColor=btn.style.color=''; }, 3000);
|
||
});
|
||
|
||
// 3D cube float
|
||
const cube=document.getElementById('cube3d'); let t=0;
|
||
function floatCube(){ t+=0.012; cube.style.marginTop=(Math.sin(t)*12)+'px'; requestAnimationFrame(floatCube); }
|
||
floatCube();
|
||
</script>
|
||
</body>
|
||
</html>
|