0f60be4174
Introduces six new HTML product pages (e.g., rubiks-cube-mug-auf-victim.html) with individual SEO meta tags, Open Graph, Twitter cards, and structured data. Updates index.html to include a new 'Shop' section, adds robots.txt and sitemap.xml, and enhances homepage SEO with a canonical URL, organization schema, and an ItemList schema for products. Replit-Commit-Author: Agent Replit-Commit-Session-Id: f5797e65-2210-4d2e-bf70-278d8a0098c1 Replit-Commit-Checkpoint-Type: full_checkpoint Replit-Commit-Event-Id: cb7f5886-1e99-485f-ba60-5e1aed72d023 Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/2a2c58da-54a0-4c86-8ad0-3b93439f70de/f5797e65-2210-4d2e-bf70-278d8a0098c1/z77BLws Replit-Helium-Checkpoint-Created: true
402 lines
16 KiB
CSS
402 lines
16 KiB
CSS
|
|
:root {
|
|
--bg: #ede9e1;
|
|
--surface: #e4e0d8;
|
|
--surface2: #d8d4cb;
|
|
--border: #c8c4bb;
|
|
--border-heavy: #8a867c;
|
|
--orange: #c94b0f;
|
|
--orange-glow: #c94b0f18;
|
|
--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;
|
|
}
|
|
|
|
/* ── HORIZONTAL RULES ── */
|
|
.h-rule {
|
|
width: 100%; height: 1px;
|
|
background: rgba(26,24,21,0.14);
|
|
position: relative; z-index: 1;
|
|
}
|
|
|
|
/* ── 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 clamp(1.5rem, 8vw, 5rem); height: 56px;
|
|
background: rgba(237,233,225,0.96); backdrop-filter: blur(20px);
|
|
border-bottom: 1px solid rgba(26,24,21,0.1);
|
|
}
|
|
.logo { display:flex; align-items:center; text-decoration:none; }
|
|
.logo img { height:34px; width:auto; display:block; }
|
|
.nav-links { display:flex; gap:0; list-style:none; justify-content:center; }
|
|
.nav-links a {
|
|
display:block; padding:6px 18px; font-size:0.72rem; font-weight:500;
|
|
letter-spacing:0.1em; text-transform:uppercase; color:var(--muted);
|
|
text-decoration:none; border:none; background:none; transition:color 0.18s;
|
|
}
|
|
.nav-links a:hover, .nav-links a.active { color:var(--white); }
|
|
|
|
.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:6px 16px;
|
|
font-family:'Space Mono',monospace; font-size:0.7rem; font-weight:700;
|
|
letter-spacing:0.06em; text-transform:uppercase;
|
|
color:var(--orange); border:1px solid var(--orange);
|
|
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:56px; left:0; right:0;
|
|
background:rgba(237,233,225,0.98); backdrop-filter:blur(18px);
|
|
border-bottom:1px solid rgba(26,24,21,0.1); z-index:99;
|
|
padding:1.2rem clamp(1rem,5vw,2.5rem); flex-direction:column; gap:4px;
|
|
}
|
|
.mobile-menu.open { display:flex; }
|
|
.mobile-menu a {
|
|
display:block; padding:12px 16px; font-size:0.85rem; font-weight:600;
|
|
text-transform:uppercase; letter-spacing:0.08em; color:var(--muted);
|
|
text-decoration:none; border-bottom:1px solid rgba(26,24,21,0.07); transition:color 0.18s;
|
|
}
|
|
.mobile-menu a:hover { color:var(--white); }
|
|
.mobile-menu a.store-link { color:var(--orange); border:none; }
|
|
|
|
/* ── SECTIONS ── */
|
|
section {
|
|
padding: clamp(5rem,10vh,8rem) clamp(1.5rem,8vw,5rem) clamp(4rem,8vh,6rem);
|
|
position: relative;
|
|
}
|
|
|
|
#home {
|
|
min-height: 100vh;
|
|
display:flex; flex-direction:column; justify-content:center; align-items:flex-start;
|
|
overflow: hidden;
|
|
}
|
|
|
|
#about { background: var(--surface); }
|
|
#faq { background: var(--bg); }
|
|
#contact { background: var(--surface); }
|
|
|
|
/* ── SECTION LABELS & TITLES ── */
|
|
.section-label {
|
|
font-family:'Space Mono',monospace; font-size:0.72rem; letter-spacing:0.2em;
|
|
text-transform:uppercase; margin-bottom:1rem; color:var(--orange);
|
|
}
|
|
.section-title {
|
|
font-size:clamp(2rem,5vw,3.6rem); font-weight:900; letter-spacing:-0.03em;
|
|
line-height:1.05; margin-bottom:3rem; color:var(--white);
|
|
}
|
|
|
|
/* ── HERO TEXT ── */
|
|
.hero-eyebrow {
|
|
font-family:'Space Mono',monospace; font-size:0.78rem; letter-spacing:0.2em;
|
|
text-transform:uppercase; color:var(--orange); margin-bottom:1.5rem;
|
|
opacity:0; transform:translateY(20px); animation:fadeUp 0.7s 0.2s forwards;
|
|
}
|
|
.hero-title {
|
|
font-size:clamp(3.2rem,9vw,8rem); font-weight:900; line-height:0.92;
|
|
letter-spacing:-0.03em; margin-bottom:2rem;
|
|
opacity:0; transform:translateY(30px); animation:fadeUp 0.8s 0.35s forwards;
|
|
}
|
|
.hero-title .line-orange { color:var(--orange); }
|
|
.hero-sub {
|
|
font-size:clamp(1rem,1.8vw,1.15rem); color:rgba(26,24,21,0.55);
|
|
max-width:440px; line-height:1.65; margin-bottom:2.8rem;
|
|
opacity:0; transform:translateY(20px); animation:fadeUp 0.8s 0.5s forwards;
|
|
}
|
|
.hero-cta-row {
|
|
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:15px 34px; background:var(--orange); color:#fff;
|
|
font-family:'Space Mono',monospace; font-weight:700; font-size:0.85rem;
|
|
letter-spacing:0.04em; text-transform:uppercase; border:1px solid var(--orange);
|
|
cursor:pointer; text-decoration:none; transition:all 0.18s;
|
|
}
|
|
.btn-primary:hover { background:transparent; color:var(--orange); }
|
|
.btn-secondary {
|
|
display:inline-block; padding:15px 34px; background:transparent; color:var(--white);
|
|
font-family:'Space Mono',monospace; font-weight:700; font-size:0.85rem;
|
|
letter-spacing:0.04em; text-transform:uppercase; border:1px solid var(--border-heavy);
|
|
cursor:pointer; text-decoration:none; transition:all 0.18s;
|
|
}
|
|
.btn-secondary:hover { border-color:var(--white); }
|
|
|
|
/* ── 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(150px,20vw,240px); height:clamp(150px,20vw,240px); perspective:700px; }
|
|
.cube-3d {
|
|
width:100%; height:100%; position:relative; transform-style:preserve-3d;
|
|
animation:rotateCube3d 10s linear infinite;
|
|
}
|
|
@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(75px,10vw,120px)); }
|
|
.cube-face.back { transform:rotateY(180deg) translateZ(clamp(75px,10vw,120px)); }
|
|
.cube-face.right { transform:rotateY(90deg) translateZ(clamp(75px,10vw,120px)); }
|
|
.cube-face.left { transform:rotateY(-90deg) translateZ(clamp(75px,10vw,120px)); }
|
|
.cube-face.top { transform:rotateX(90deg) translateZ(clamp(75px,10vw,120px)); }
|
|
.cube-face.bottom { transform:rotateX(-90deg) translateZ(clamp(75px,10vw,120px)); }
|
|
.cubie { border:1px solid rgba(0,0,0,0.3); }
|
|
|
|
/* ── SHOP GRID (home + related products) ── */
|
|
#shop { background: var(--bg); }
|
|
.shop-grid, .related-grid {
|
|
display:grid; grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); gap:1.4rem;
|
|
}
|
|
.product-card {
|
|
display:flex; flex-direction:column; background:var(--surface);
|
|
border:1px solid var(--border); text-decoration:none; color:inherit;
|
|
transition:transform 0.2s, border-color 0.2s;
|
|
}
|
|
.product-card:hover { transform:translateY(-4px); border-color:var(--border-heavy); }
|
|
.product-card-img { width:100%; aspect-ratio:1/1; overflow:hidden; background:#fff; border-bottom:1px solid var(--border); }
|
|
.product-card-img img { width:100%; height:100%; object-fit:cover; display:block; transition:transform 0.3s; }
|
|
.product-card:hover .product-card-img img { transform:scale(1.04); }
|
|
.product-card-body { padding:1rem 1.1rem 1.2rem; display:flex; flex-direction:column; gap:0.3rem; }
|
|
.product-card-cat { font-family:'Space Mono',monospace; font-size:0.65rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--orange); }
|
|
.product-card-name { font-size:1rem; font-weight:700; color:var(--white); line-height:1.3; }
|
|
.product-card-link { font-family:'Space Mono',monospace; font-size:0.72rem; letter-spacing:0.06em; text-transform:uppercase; color:var(--muted); margin-top:0.4rem; }
|
|
|
|
/* ── PRODUCT PAGE ── */
|
|
.breadcrumb {
|
|
font-family:'Space Mono',monospace; font-size:0.72rem; letter-spacing:0.04em;
|
|
color:var(--muted); margin-bottom:2.4rem; text-transform:uppercase;
|
|
}
|
|
.breadcrumb a { color:var(--muted); text-decoration:none; }
|
|
.breadcrumb a:hover { color:var(--orange); }
|
|
.product-grid {
|
|
display:grid; grid-template-columns:1fr 1fr; gap:3.5rem; align-items:start;
|
|
}
|
|
@media(max-width:820px){ .product-grid { grid-template-columns:1fr; gap:2rem; } }
|
|
.product-image-wrap {
|
|
background:#fff; border:1px solid var(--border); overflow:hidden;
|
|
}
|
|
.product-image-wrap img { width:100%; height:100%; object-fit:cover; display:block; }
|
|
.product-info { display:flex; flex-direction:column; }
|
|
.product-title {
|
|
font-size:clamp(1.8rem,3.6vw,2.6rem); font-weight:900; letter-spacing:-0.02em;
|
|
line-height:1.1; margin:0.6rem 0 1rem; color:var(--white);
|
|
}
|
|
.product-price {
|
|
font-family:'Space Mono',monospace; font-size:1.1rem; font-weight:700;
|
|
color:var(--white); min-height:1.6rem; margin-bottom:1.2rem;
|
|
}
|
|
.product-description {
|
|
font-size:1rem; line-height:1.75; color:rgba(26,24,21,0.68);
|
|
min-height:2rem; margin-bottom:2rem;
|
|
}
|
|
.product-info .btn-primary { align-self:flex-start; }
|
|
|
|
/* ── ABOUT ── */
|
|
.about-bio-grid {
|
|
display:grid; grid-template-columns:1fr 1fr; gap:3rem; align-items:start;
|
|
}
|
|
@media(max-width:820px){ .about-bio-grid { grid-template-columns:1fr; } }
|
|
.about-bio-text { display:flex; flex-direction:column; gap:1.4rem; }
|
|
.about-bio-text p { font-size:clamp(0.97rem,1.5vw,1.1rem); color:rgba(26,24,21,0.68); line-height:1.8; }
|
|
.about-cards-col { display:flex; flex-direction:column; gap:1rem; }
|
|
.text-orange { color:var(--orange); }
|
|
|
|
/* ── CARDS ── */
|
|
.clay-card {
|
|
background: rgba(237,233,225,0.7);
|
|
border:1px solid var(--border); padding:1.6rem; position:relative;
|
|
transition:transform 0.2s, border-color 0.2s;
|
|
}
|
|
.clay-card:hover { transform:translateY(-3px); border-color:var(--border-heavy); }
|
|
.clay-card.orange-accent { border-top:2px solid var(--orange); }
|
|
|
|
.card-icon {
|
|
width:44px; height:44px; display:flex; align-items:center; justify-content:center;
|
|
margin-bottom:1rem; border:1px solid var(--border);
|
|
}
|
|
.card-icon svg { width:22px; height:22px; }
|
|
.card-icon.orange { background:var(--orange-glow); border-color:var(--orange); }
|
|
|
|
.card-title { font-size:1rem; font-weight:700; margin-bottom:0.5rem; color:var(--white); }
|
|
.card-body { font-size:0.9rem; line-height:1.65; color:var(--muted); }
|
|
|
|
/* ── PHOTO GALLERY ── */
|
|
.about-photos {
|
|
display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-top:3rem;
|
|
}
|
|
@media(max-width:600px){ .about-photos { grid-template-columns:1fr; } }
|
|
.about-photo-wrap {
|
|
position:relative; overflow:hidden;
|
|
border:1px solid var(--border); transition:border-color 0.22s;
|
|
}
|
|
.about-photo-wrap:hover { border-color:var(--border-heavy); }
|
|
.about-photo-wrap img {
|
|
width:100%; height:320px; object-fit:cover; display:block;
|
|
filter:saturate(0.85) brightness(0.96); transition:filter 0.3s, transform 0.3s;
|
|
}
|
|
.about-photo-wrap:hover img { filter:saturate(1) brightness(1); transform:scale(1.02); }
|
|
.about-photo-label {
|
|
position:absolute; bottom:0; left:0; right:0;
|
|
padding:0.7rem 1rem;
|
|
background:linear-gradient(transparent, rgba(237,233,225,0.9));
|
|
font-family:'Space Mono',monospace; font-size:0.7rem; letter-spacing:0.12em;
|
|
text-transform:uppercase; color:rgba(26,24,21,0.75);
|
|
}
|
|
|
|
/* ── FAQ ── */
|
|
.faq-grid {
|
|
display:grid;
|
|
grid-template-columns:repeat(auto-fill, minmax(340px, 1fr));
|
|
gap:1px;
|
|
background: var(--border);
|
|
border: 1px solid var(--border);
|
|
}
|
|
|
|
.faq-card {
|
|
background: var(--bg);
|
|
padding:0; position:relative; overflow:hidden;
|
|
transition:background 0.18s;
|
|
cursor:pointer;
|
|
}
|
|
.faq-card:hover { background: var(--surface); }
|
|
.faq-card.open { background: var(--surface); }
|
|
|
|
.faq-card-q {
|
|
display:flex; align-items:center; justify-content:space-between;
|
|
gap:1rem; padding:1.4rem 1.6rem;
|
|
background:none; border:none; width:100%;
|
|
font-family:'Space Grotesk',sans-serif; font-size:0.97rem; font-weight:700;
|
|
color:var(--white); text-align:left; cursor:pointer;
|
|
}
|
|
.faq-card.open .faq-card-q { color:var(--orange); }
|
|
|
|
.faq-card-num {
|
|
font-family:'Space Mono',monospace; font-size:0.68rem; letter-spacing:0.15em;
|
|
color:var(--muted); flex-shrink:0; margin-bottom:0.25rem;
|
|
display:block;
|
|
}
|
|
.faq-card-title { display:block; }
|
|
|
|
.faq-chevron {
|
|
width:18px; height:18px; flex-shrink:0;
|
|
color:var(--muted); transition:transform 0.25s, color 0.2s;
|
|
}
|
|
.faq-card.open .faq-chevron { transform:rotate(180deg); color:var(--orange); }
|
|
|
|
.faq-card-a {
|
|
max-height:0; overflow:hidden;
|
|
font-size:0.9rem; color:var(--muted); line-height:1.7;
|
|
padding:0 1.6rem;
|
|
transition:max-height 0.35s ease, padding 0.35s ease;
|
|
}
|
|
.faq-card.open .faq-card-a {
|
|
max-height:300px; padding:0 1.6rem 1.4rem;
|
|
border-top:1px solid var(--border);
|
|
}
|
|
.faq-a-link { color:var(--orange); text-decoration:none; }
|
|
.faq-a-link:hover { text-decoration:underline; }
|
|
|
|
/* ── 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:1px; background:var(--border); border:1px solid var(--border); }
|
|
|
|
.contact-block {
|
|
display:flex; align-items:flex-start; gap:1rem; padding:1.3rem 1.4rem;
|
|
background:var(--surface); transition:background 0.18s;
|
|
}
|
|
.contact-block:hover { background:var(--bg); }
|
|
.contact-block-icon {
|
|
width:38px; height:38px; flex-shrink:0;
|
|
display:flex; align-items:center; justify-content:center; border:1px solid var(--border);
|
|
}
|
|
.contact-block-icon svg { width:18px; height:18px; }
|
|
.contact-block-title {
|
|
font-size:0.72rem; font-family:'Space Mono',monospace; letter-spacing:0.1em;
|
|
text-transform:uppercase; color:var(--muted); margin-bottom:3px;
|
|
}
|
|
.contact-block-value { font-size:0.95rem; font-weight:600; color:var(--white); }
|
|
.contact-link { color:var(--white); text-decoration:none; }
|
|
.contact-link:hover { color:var(--orange); }
|
|
|
|
.contact-form {
|
|
background:var(--surface); border:1px solid var(--border);
|
|
padding:2rem; display:flex; flex-direction:column; gap:1.1rem;
|
|
}
|
|
.form-label {
|
|
font-size:0.72rem; font-family:'Space Mono',monospace; letter-spacing:0.1em;
|
|
text-transform:uppercase; color:var(--muted); display:block; margin-bottom:5px;
|
|
}
|
|
.form-input, .form-textarea {
|
|
width:100%; background:var(--bg); border:1px solid var(--border);
|
|
padding:11px 14px; color:var(--white);
|
|
font-family:'Space Grotesk',sans-serif; font-size:0.95rem; transition:border-color 0.18s; outline:none;
|
|
}
|
|
.form-input:focus, .form-textarea:focus { border-color:var(--orange); }
|
|
.form-textarea { resize:vertical; min-height:110px; }
|
|
.form-submit {
|
|
display:inline-block; padding:14px 32px; background:var(--orange); color:#fff;
|
|
font-family:'Space Mono',monospace; font-weight:700; font-size:0.85rem;
|
|
letter-spacing:0.04em; text-transform:uppercase; border:1px solid var(--orange);
|
|
cursor:pointer; transition:all 0.18s; align-self:flex-start;
|
|
}
|
|
.form-submit:hover { background:transparent; color:var(--orange); }
|
|
|
|
/* ── FOOTER ── */
|
|
footer {
|
|
border-top:1px solid var(--border); padding:2rem clamp(1.5rem,8vw,5rem);
|
|
display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1rem;
|
|
background:var(--surface2);
|
|
}
|
|
.footer-logo img { height:30px; width:auto; display:block; }
|
|
.footer-copy { font-size:0.8rem; color:var(--muted); }
|
|
|
|
/* ── ANIMATIONS ── */
|
|
.reveal { opacity:0; transform:translateY(28px); transition:opacity 0.65s ease, transform 0.65s ease; }
|
|
.reveal.visible { opacity:1; transform:translateY(0); }
|
|
@keyframes fadeUp { to { opacity:1; transform:translateY(0); } }
|
|
|
|
/* ── 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; }
|
|
.faq-grid { grid-template-columns:1fr; }
|
|
}
|