diff --git a/index.html b/index.html index 1e8d12e..73d6ff7 100644 --- a/index.html +++ b/index.html @@ -6,525 +6,7 @@ JustGoodCubing - + @@ -932,61 +414,10 @@
- + diff --git a/index.js b/index.js new file mode 100644 index 0000000..14ef86f --- /dev/null +++ b/index.js @@ -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(); diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..fe03503 --- /dev/null +++ b/styles.css @@ -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; } +}