refactored single html into js, css
This commit is contained in:
575
index.html
575
index.html
@@ -6,525 +6,7 @@
|
||||
<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>
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
@@ -932,61 +414,10 @@
|
||||
<div class="h-rule"></div>
|
||||
<!-- FOOTER -->
|
||||
<footer>
|
||||
<div class="footer-logo"><img src="/logo.png" alt="JustGoodCubing"/></div>
|
||||
<div class="footer-logo"><img src="images/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>
|
||||
<script src="index.js" defer></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
51
index.js
Normal file
51
index.js
Normal file
@@ -0,0 +1,51 @@
|
||||
|
||||
// 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();
|
||||
518
styles.css
Normal file
518
styles.css
Normal file
@@ -0,0 +1,518 @@
|
||||
|
||||
: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; }
|
||||
}
|
||||
Reference in New Issue
Block a user