/* Google Fonts loaded via non-blocking in each page's */ /* ============================================================ CSS Variables ============================================================ */ :root { /* Primary Theme (Default) */ --primary-color: #2c1810; --secondary-color: #5c3d2e; --accent-color: #8b5a2b; --accent-gold: #c9a961; --accent-rust: #a0522d; --light-bg: #16110d; --cream-deep: #100c08; --text-color: #ece2d2; --text-light: #9b8d79; --text-muted: #a99a86; /* AA-contrast muted tone — cart/product muted + shipping text */ --border-color: rgba(216, 178, 122, 0.16); --card-bg: #1d1711; --hover-bg: #241c14; /* Alternate Theme variables (defined here, applied via body.alt) */ --alt-primary: #0a0a0a; --alt-secondary: #111111; --alt-accent: #ff006e; --alt-cyan: #00d9ff; --alt-text: #00d9ff; --glow-soft: 0 0 10px; --glow-strong: 0 0 25px; /* Spacing scale */ --space-xs: 8px; --space-sm: 16px; --space-md: 24px; --space-lg: 40px; --space-xl: 60px; --space-2xl: 80px; /* Transitions */ --transition-fast: 0.2s ease; --transition-base: 0.4s ease; --transition-slow: 0.6s ease; /* Shadows */ --shadow-sm: 0 1px 3px rgba(0,0,0,0.08), 0 4px 12px rgba(0,0,0,0.05); --shadow-md: 0 2px 8px rgba(0,0,0,0.08), 0 10px 30px rgba(0,0,0,0.08); --shadow-lg: 0 4px 16px rgba(0,0,0,0.1), 0 20px 50px rgba(0,0,0,0.12); --shadow-hover: 0 8px 24px rgba(0,0,0,0.12), 0 24px 60px rgba(0,0,0,0.15); /* Typography — overridden per theme by render.js when the admin picks different fonts. Fallback chains live in the var value so consumers don't have to re-specify them. */ --font-heading: 'Cormorant Garamond', Georgia, serif; --font-body: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; } body.alt { --primary-color: #0a0a0a; --secondary-color: #111111; --accent-color: #ff006e; --accent-gold: #00d9ff; --light-bg: #0a0a0a; --cream-deep: #141414; --text-color: #00d9ff; --text-light: rgba(0, 217, 255, 0.7); --border-color: rgba(0, 217, 255, 0.3); --card-bg: #141414; --hover-bg: #1e1e1e; --font-heading: 'Orbitron', monospace; } /* ============================================================ Reset & Base ============================================================ */ * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: var(--font-body); background-color: var(--light-bg); color: var(--text-color); transition: background-color 0.5s ease, color 0.5s ease; line-height: 1.7; } /* Single cohesive dark-luxury theme — the neon "alt" theme is retired for now (the toggle is hidden). Revisit if a light "showroom" theme is wanted. */ .theme-switch { display: none !important; } /* =================================================================== Age gate (21+). html.age-gate-pending (set inline in by render.js) hides content until the modal resolves — no flash of unverified content. Styled from the dark-luxury theme vars. =================================================================== */ html.age-gate-pending body > *:not(.age-gate-overlay) { visibility: hidden; } .age-gate-overlay { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center; padding: 24px; background: radial-gradient(circle at 50% 32%, rgba(20,15,11,0.93), rgba(6,5,4,0.98)); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); } .age-gate-card { width: 100%; max-width: 440px; text-align: center; background: var(--card-bg, #1d1711); color: var(--text-color, #ece2d2); border: 1px solid var(--border-color, rgba(216,178,122,0.18)); border-radius: 12px; padding: 40px 32px 26px; box-shadow: 0 30px 80px rgba(0,0,0,0.7); } .age-gate-card.age-gate-shake { animation: ageGateShake 380ms ease-in-out; } .age-gate-brand { font-family: var(--font-heading, 'Playfair Display', serif); font-size: 26px; letter-spacing: 1px; line-height: 1.15; color: var(--accent-gold, #d8b27a); margin-bottom: 14px; } .age-gate-msg { margin: 0 0 22px; font-size: 15px; line-height: 1.6; color: var(--text-light, #9b8d79); white-space: pre-line; } .age-gate-form { display: block; } .age-gate-dob { display: flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: 8px; } .age-gate-dob input { width: 58px; padding: 12px 8px; text-align: center; font-size: 18px; border: 1px solid var(--border-color, rgba(216,178,122,0.25)); border-radius: 6px; background: #100c08; color: var(--text-color, #ece2d2); } .age-gate-dob input.age-gate-yy { width: 84px; } .age-gate-dob input:focus { outline: none; border-color: var(--accent-color, #c39455); } .age-gate-sep { color: var(--text-light, #9b8d79); font-size: 18px; user-select: none; } .age-gate-err { min-height: 1.2em; margin: 6px 0 14px; font-size: 13px; color: #e2796b; } .age-gate-submit { appearance: none; border: none; cursor: pointer; width: 100%; padding: 13px 18px; border-radius: 6px; font-size: 15px; font-weight: 700; letter-spacing: 0.5px; background: var(--accent-color, #c39455); color: #17110a; font-family: var(--font-body, sans-serif); } .age-gate-submit:hover { opacity: 0.92; } .age-gate-submit:active { transform: translateY(1px); } .age-gate-foot { margin: 16px 0 0; font-size: 11px; color: var(--text-light, #9b8d79); opacity: 0.8; } @keyframes ageGateShake { 0%, 100% { transform: translateX(0); } 20%, 60% { transform: translateX(-7px); } 40%, 80% { transform: translateX(7px); } } @media (max-width: 480px) { .age-gate-card { padding: 30px 20px 18px; } .age-gate-dob input { width: 52px; padding: 11px 6px; font-size: 17px; } .age-gate-dob input.age-gate-yy { width: 76px; } } h1, h2, h3, h4 { font-family: var(--font-heading); line-height: 1.2; /* Defaults to the body text color when no explicit heading color is set. Admin override via --heading-color (per theme, from render.js). */ color: var(--heading-color, var(--text-color)); } /* Product-specific headings can be a different color than page headings. Falls back to --heading-color when --product-heading-color isn't set. */ .featured-item h3, .product-details h3, .product-page-title { color: var(--product-heading-color, var(--heading-color, var(--text-color))); } body.alt h1, body.alt h2, body.alt h3, body.alt h4 { font-family: var(--font-heading); } /* ============================================================ Navigation ============================================================ */ .navbar { background-color: transparent; color: var(--light-bg); padding: 1rem 0; position: sticky; top: 0; z-index: 100; box-shadow: none; border-bottom: 1px solid transparent; /* transparent over the hero — a soft shadow keeps the logo/links legible */ text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5); transition: padding 0.32s ease, background-color 0.5s ease, box-shadow 0.3s ease, border-color 0.32s ease; } /* condensed state once the page scrolls — the bar tightens, darkens, and a brass hairline appears, like a tool settling into place. */ .navbar.nav-scrolled { padding: 0.5rem 0; background-color: rgba(18, 12, 8, 0.97); box-shadow: 0 8px 30px rgba(0, 0, 0, 0.45); border-bottom-color: rgba(201, 169, 110, 0.22); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } /* keyboard focus — a brass ring, never shown on plain mouse clicks */ :focus-visible { outline: 2px solid var(--accent-gold); outline-offset: 3px; border-radius: 2px; } /* ── Cross-page transitions — pages cross-fade instead of hard-cutting, so moving between rooms feels continuous rather than like reloading. Pure progressive enhancement: browsers without the View Transitions API just navigate exactly as before. */ @view-transition { navigation: auto; } ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.4s; animation-timing-function: var(--ease-craft, cubic-bezier(.2,.7,.2,1)); } @media (prefers-reduced-motion: reduce) { ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.01s; } } /* ── Material texture & warmth ──────────────────────────────────────── A faint grayscale film grain over the content (overlay blend touches midtones, spares text & blacks) and a firelight glow that rises from the floor as you descend (soft-light, driven by --scroll). Both are fixed, click-through, and sit below the nav/modals/lightbox. One dial: --grain-opacity (0 = off). */ :root { --grain-opacity: 0.05; /* Effective navbar height — inner-page headers slide up under the nav by this much so their background image bleeds to the very top of the page, behind the (transparent) nav bar. Measured at 70px on the editorial nav. */ --nav-h: 70px; } body::before { content: ''; position: fixed; inset: 0; z-index: 50; pointer-events: none; opacity: var(--grain-opacity, 0.05); mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"); background-size: 200px 200px; } body::after { content: ''; position: fixed; inset: 0; z-index: 49; pointer-events: none; mix-blend-mode: soft-light; background: radial-gradient(130% 90% at 50% 118%, rgba(150, 78, 26, 0.22), transparent 62%); opacity: calc(var(--scroll, 0) * 0.85); } @media (prefers-reduced-motion: reduce) { body::after { opacity: 0; } } body.alt .navbar { background-color: rgba(10, 10, 10, 0.95); box-shadow: 0 0 30px rgba(0, 217, 255, 0.2), 0 2px 20px rgba(0,0,0,0.5); } .nav-container { max-width: 1200px; margin: 0 auto; padding: 0 20px; display: flex; justify-content: space-between; align-items: center; } .nav-logo { font-family: var(--font-heading); font-size: 22px; font-weight: 600; letter-spacing: 1.5px; color: var(--accent-gold); transition: color 0.5s ease; } body.alt .nav-logo { color: var(--alt-cyan); text-shadow: 0 0 15px rgba(0, 217, 255, 0.5); } .nav-menu { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 30px; row-gap: 10px; align-items: center; } .nav-toggle { display: none; background: none; border: none; color: var(--text-color, #ece2d2); font-size: 24px; line-height: 1; cursor: pointer; padding: 4px 8px; } .nav-link { color: rgba(245, 240, 232, 0.85); text-decoration: none; font-size: 13px; font-weight: 400; letter-spacing: 1px; text-transform: uppercase; transition: color var(--transition-fast), text-shadow var(--transition-fast); position: relative; } .nav-link::after { content: ''; position: absolute; bottom: -3px; left: 0; width: 0; height: 1px; background-color: var(--accent-gold); transition: width var(--transition-base); } .nav-link:hover::after, .nav-link.active::after { width: 100%; } .nav-link:hover, .nav-link.active { color: var(--accent-gold); } body.alt .nav-link { color: rgba(0, 217, 255, 0.8); } body.alt .nav-link::after { background-color: var(--alt-cyan); } body.alt .nav-link:hover, body.alt .nav-link.active { color: #ff006e; text-shadow: 0 0 15px #ff006e, 0 0 35px rgba(255,0,110,0.6); } .alt .brand-glow { color: #ff006e; text-shadow: 0 0 15px #ff006e, 0 0 35px rgba(255,0,110,0.6); } .theme-switch { background: none; border: 1px solid rgba(245, 240, 232, 0.4); color: rgba(245, 240, 232, 0.85); padding: 6px 14px; border-radius: 20px; cursor: pointer; font-size: 15px; transition: all var(--transition-base); display: flex; align-items: center; gap: 4px; } .theme-switch:hover { border-color: var(--accent-gold); color: var(--accent-gold); background: rgba(201, 169, 97, 0.1); } body.alt .theme-switch { border-color: rgba(0, 217, 255, 0.5); color: var(--alt-cyan); } body.alt .theme-switch:hover { border-color: var(--alt-accent); color: var(--alt-accent); box-shadow: 0 0 12px rgba(255, 0, 110, 0.4); background: rgba(255, 0, 110, 0.1); } .theme-switch.spinning { animation: spin-toggle 0.4s ease; } @keyframes spin-toggle { 0% { transform: rotate(0deg); } 50% { transform: rotate(180deg) scale(1.2); } 100% { transform: rotate(360deg); } } /* ============================================================ Main Layout ============================================================ */ main { min-height: calc(100vh - 80px); } .container { max-width: 1200px; margin: 0 auto; padding: 0 24px; } /* ============================================================ Hero Section ============================================================ */ .hero { position: relative; z-index: 1; background-image: linear-gradient(165deg, #1c1510 0%, #0b0807 100%); background-size: cover; background-position: center; background-attachment: fixed; color: #efe6d6; /* Full-bleed to the top: slide up under the (transparent) nav so the hero image encompasses the nav bar — same treatment as the inner-page headers. Every hero element is centered on this box, so they shift up in unison and the composition is preserved. */ margin-top: calc(-1 * var(--nav-h)); min-height: calc(100vh - 95px); padding: 80px 20px; display: flex; align-items: center; justify-content: center; text-align: center; transition: background-color 0.5s ease; overflow: hidden; } body.alt .hero { background-image: linear-gradient( 135deg, rgba(0, 0, 0, 0.80) 0%, rgba(10, 0, 30, 0.75) 100% ), url('https://images.unsplash.com/photo-1477959858617-67f85cf4f1df?auto=format&fit=crop&w=1920&q=80'); background-attachment: fixed; } .hero-content { max-width: 640px; margin: 0 auto; position: relative; z-index: 1; } /* Hero logo rendered as a CSS mask so its color is themeable (matches the .site-watermark technique). The PNG provides the silhouette; --logo-color fills it. --logo-scale (1 = default 280px wide) lets the admin resize it from the floating panel. */ .logo { width: calc(280px * var(--logo-scale, 1)); aspect-ratio: 1 / 1; margin: 0 auto 30px; background-color: var(--logo-color, var(--accent-gold)); -webkit-mask-image: url('/assets/logo.png'); mask-image: url('/assets/logo.png'); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; transition: background-color 0.5s ease, width 0.3s ease; } /* Body watermark — full logo in bottom-left corner, fully visible */ .site-watermark { position: fixed; bottom: 20px; left: 20px; width: 760px; height: 760px; background-color: #4a3422; -webkit-mask-image: url('/assets/logo-mark.png'); mask-image: url('/assets/logo-mark.png'); /* skull-only mark (wordmark cropped out); contain fits it with no cropping */ -webkit-mask-size: contain; mask-size: contain; -webkit-mask-position: center; mask-position: center; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; opacity: 0.16; pointer-events: none; z-index: 0; } body.alt .site-watermark { background-color: #ffffff; opacity: 0.09; } .hero h1 { font-size: 60px; margin-bottom: 16px; font-weight: 600; letter-spacing: 2px; animation: fadeInUp 0.9s ease both; } .tagline { font-size: 18px; opacity: 0.9; font-weight: 300; letter-spacing: 0.5px; animation: fadeInUp 0.9s ease 0.2s both; } body.alt .hero h1 { color: var(--alt-cyan); text-shadow: 0 0 30px rgba(0, 217, 255, 0.7), 0 0 60px rgba(0, 217, 255, 0.3); font-size: 52px; } body.alt .tagline { color: rgba(0, 217, 255, 0.85); text-shadow: 0 0 15px rgba(0, 217, 255, 0.4); } /* Scroll indicator */ .scroll-indicator { position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%); color: rgba(245, 240, 232, 0.6); font-size: 24px; animation: bounce 2s ease infinite; cursor: pointer; } body.alt .scroll-indicator { color: rgba(0, 217, 255, 0.6); } @keyframes bounce { 0%, 100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(8px); } } /* ============================================================ Page Header (inner pages) ============================================================ */ .page-header { position: relative; z-index: 1; /* dark gradient default — no stock photo. Per-page header images are layered on top via body[data-page="..."] rules in render.js (theme_style). */ background-image: linear-gradient(135deg, #14100b 0%, #0a0806 100%); background-size: cover; background-position: center; background-attachment: fixed; color: #efe6d6; /* Full-bleed to the top: pull up under the (transparent) nav so the header image encompasses the nav bar, then restore the top padding so the title stays centered in the visible band below the nav. min-height grows by the same amount so the visible header stays the intended 42vh. */ margin-top: calc(-1 * var(--nav-h)); min-height: calc(42vh + var(--nav-h)); padding: calc(72px + var(--nav-h)) 20px 72px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; transition: background-color 0.5s ease; overflow: hidden; } body.alt .page-header { background-image: linear-gradient( 135deg, rgba(0, 0, 0, 0.85) 0%, rgba(10, 0, 30, 0.80) 100% ), url('https://images.unsplash.com/photo-1518709268805-4e9042af2176?auto=format&fit=crop&w=1920&q=80'); background-attachment: fixed; } /* ── Inner-page thresholds — an oversized ghost word gives each page its own "room" at the threshold. Driven purely by body[data-page]; the identical 42vh gradient header now reads differently on every page. */ .page-header .container { position: relative; z-index: 1; } .page-header::before { content: ''; position: absolute; font-family: var(--font-heading); font-weight: 700; font-size: clamp(70px, 16vw, 230px); line-height: 0.8; letter-spacing: 0.05em; color: transparent; -webkit-text-stroke: 1.5px rgba(216, 178, 122, 0.13); white-space: nowrap; pointer-events: none; z-index: 0; } body[data-page="shop"] .page-header::before { content: 'WARES'; right: -2vw; bottom: -4vh; } body[data-page="gallery"] .page-header::before { content: 'MADE'; left: -2vw; top: -4vh; } body[data-page="learning-center"] .page-header::before { content: 'LEARN'; left: -2vw; bottom: -4vh; } body[data-page="design"] .page-header::before { content: 'BUILD'; right: -2vw; top: -4vh; } .page-header h1 { font-size: 48px; margin-bottom: 10px; font-weight: 600; letter-spacing: 2px; animation: fadeInUp 0.7s ease both; } .page-header p { font-size: 16px; opacity: 0.9; font-weight: 300; letter-spacing: 0.5px; animation: fadeInUp 0.7s ease 0.15s both; } body.alt .page-header h1 { color: var(--alt-cyan); text-shadow: 0 0 25px rgba(0, 217, 255, 0.6); } body.alt .page-header p { color: rgba(0, 217, 255, 0.8); } /* ============================================================ About Section ============================================================ */ .about { padding: var(--space-2xl) 20px; } .about h2 { font-size: 40px; margin-bottom: var(--space-lg); text-align: center; font-weight: 600; letter-spacing: 1px; } .about h2::after { content: ''; display: block; width: 60px; height: 2px; background: var(--accent-gold); margin: 16px auto 0; transition: background 0.5s ease; } body.alt .about h2::after { background: var(--alt-cyan); box-shadow: 0 0 10px var(--alt-cyan); } .about-content { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-xl); margin-bottom: var(--space-lg); align-items: start; } .about-text p { margin-bottom: 20px; line-height: 1.8; color: var(--text-light); font-size: 16px; } .featured-works { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 20px; } .featured-item { background: var(--card-bg); border-radius: 8px; overflow: hidden; border: 1px solid var(--border-color); box-shadow: var(--shadow-sm); transition: transform var(--transition-base), box-shadow var(--transition-base); cursor: pointer; } .featured-item:hover { transform: translateY(-6px); box-shadow: var(--shadow-hover); } body.alt .featured-item { border-color: rgba(0, 217, 255, 0.15); } body.alt .featured-item:hover { box-shadow: 0 0 25px rgba(0, 217, 255, 0.3), var(--shadow-hover); border-color: rgba(0, 217, 255, 0.4); } .featured-item img { width: 100%; aspect-ratio: 1 / 1; object-fit: contain; background: var(--card-bg); padding: 12px; box-sizing: border-box; transition: transform var(--transition-slow); } .featured-item:hover img { transform: scale(1.07); } .featured-item h3 { padding: 14px 16px 6px; font-size: 15px; font-weight: 600; } .featured-item .price { padding: 0 16px 14px; font-weight: 600; color: var(--accent-gold); font-size: 15px; transition: color 0.5s ease; } body.alt .featured-item .price { color: var(--alt-accent); } /* ============================================================ CTA Section ============================================================ */ .cta-section { text-align: center; margin-top: var(--space-lg); } .cta-button { display: inline-block; background: var(--primary-color); color: var(--accent-gold); border: 1px solid var(--accent-gold); padding: 16px 48px; border-radius: 2px; text-decoration: none; font-weight: 700; font-size: 13px; letter-spacing: 2px; text-transform: uppercase; transition: all var(--transition-base); position: relative; overflow: hidden; } .cta-button::before { content: ''; position: absolute; inset: 0; background: var(--accent-gold); transform: translateX(-101%); transition: transform var(--transition-base); } .cta-button span { position: relative; z-index: 1; } .cta-button:hover::before { transform: translateX(0); } .cta-button:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25); color: var(--primary-color); } body.alt .cta-button { background: var(--alt-accent); color: #0a0a0a; box-shadow: 0 0 20px rgba(255, 0, 110, 0.4); } body.alt .cta-button::before { background: var(--alt-cyan); } body.alt .cta-button:hover { box-shadow: 0 0 35px rgba(0, 217, 255, 0.5); color: #0a0a0a; } /* ============================================================ Shop / Products Grid ============================================================ */ .shop { padding: var(--space-xl) 20px; } .products-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 32px; margin-bottom: var(--space-lg); } /* Skeleton Loader */ .skeleton-card { background: var(--card-bg); border-radius: 8px; overflow: hidden; box-shadow: var(--shadow-sm); border: 1px solid var(--border-color); } .skeleton-image { height: 260px; background: linear-gradient(90deg, var(--hover-bg) 25%, var(--cream-deep) 50%, var(--hover-bg) 75%); background-size: 200% 100%; animation: shimmer 1.6s infinite; } .skeleton-text { padding: 20px; } .skeleton-line { height: 14px; border-radius: 4px; background: linear-gradient(90deg, var(--hover-bg) 25%, var(--cream-deep) 50%, var(--hover-bg) 75%); background-size: 200% 100%; animation: shimmer 1.6s infinite; margin-bottom: 10px; } .skeleton-line.short { width: 50%; } .skeleton-line.medium { width: 75%; } body.alt .skeleton-image, body.alt .skeleton-line { background: linear-gradient(90deg, #141414 25%, #1e1e1e 50%, #141414 75%); background-size: 200% 100%; } @keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* ── Pass-9 micro-interactions ──────────────────────────────────────── On-brand brass loading shimmer (a warm band sweeping a dark box, not a gray/cream gradient), modals that settle in instead of snapping, and a tactile press on primary buttons. */ .skeleton, .skeleton-image, .skeleton-line { background-color: rgba(20, 14, 9, 0.55); background-image: linear-gradient(90deg, transparent 18%, rgba(201, 169, 110, 0.20) 50%, transparent 82%); background-size: 200% 100%; background-repeat: no-repeat; animation: shimmer 1.6s infinite; } .waitlist-modal-backdrop.open .waitlist-modal { animation: scaleIn 0.3s var(--ease-craft, cubic-bezier(.2, .7, .2, 1)) both; } .cta-button:active, .waitlist-btn:active, .wl-submit:active, .manual-req button:active { transform: translateY(1px); } /* Featured tag — front-end product cards */ .featured-tag { display: inline-block; background: var(--accent-gold); color: var(--primary-color); font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 3px 8px; border-radius: 3px; margin-bottom: 6px; } body.alt .featured-tag { background: #ff006e; color: #fff; box-shadow: 0 0 10px rgba(255, 0, 110, 0.5); } /* Product Card */ .product-card { background: var(--card-bg); border-radius: 8px; overflow: hidden; border: 1px solid var(--border-color); box-shadow: var(--shadow-sm); transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base); /* 3D tilt + ambient glow — driven by JS via CSS custom properties. NOTE: do NOT use transform-style: preserve-3d — it forces overflow: visible which breaks image clipping and border-radius. The CSS perspective() function in the JS transform string creates the 3D effect without needing it. */ position: relative; will-change: transform; } /* Warm cursor-tracking glow — a radial highlight at (--glow-x, --glow-y) that intensifies as the mouse moves toward corners. Opacity zeroed at rest. */ .product-card::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient( 260px circle at var(--glow-x, 50%) var(--glow-y, 50%), rgba(201, 169, 110, var(--glow-o, 0)), transparent 68% ); pointer-events: none; z-index: 3; transition: opacity 0.4s; } .product-card:hover { transform: translateY(-10px); box-shadow: var(--shadow-hover); border-color: var(--accent-gold); } /* When JS is driving the tilt we remove the CSS-only translateY so they don't fight */ .product-card[data-tilt-wired]:hover { transform: none; } body.alt .product-card { border-color: rgba(0, 217, 255, 0.15); } body.alt .product-card:hover { box-shadow: 0 0 30px rgba(0, 217, 255, 0.3), var(--shadow-hover); border-color: var(--alt-cyan); } .product-image { width: 100%; aspect-ratio: 1 / 1; /* Match the card background so letterbox gaps from object-fit: contain (woodworking products vary widely in aspect) blend invisibly. */ background: var(--card-bg); overflow: hidden; position: relative; /* Inner padding gives the image a "framed" look — card-bg shows around the photo like a matte border (white in primary, dark in alt). */ padding: 12px; box-sizing: border-box; } .product-image img { width: 100%; height: 100%; object-fit: contain; transition: transform var(--transition-slow); } .product-card:hover .product-image img { transform: scale(1.08); } .product-image-overlay { position: absolute; inset: 0; background: rgba(44, 24, 16, 0); transition: background var(--transition-base); } .product-card:hover .product-image-overlay { background: rgba(44, 24, 16, 0.15); } body.alt .product-card:hover .product-image-overlay { background: rgba(0, 217, 255, 0.05); } .no-image { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; background: radial-gradient(circle at 50% 38%, #241b14 0%, var(--card-bg) 80%); color: var(--text-light); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; } .no-image::before { content: ''; width: 58px; height: 58px; background-color: var(--accent-gold); -webkit-mask: url('/assets/logo-mark.png') center / contain no-repeat; mask: url('/assets/logo-mark.png') center / contain no-repeat; opacity: 0.4; } .product-details { padding: 22px; } .product-details h3 { font-size: 20px; margin-bottom: 8px; font-weight: 600; letter-spacing: 0.5px; } .description { font-size: 14px; color: var(--text-light); margin-bottom: 18px; line-height: 1.6; } .product-footer { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-top: 14px; border-top: 1px solid var(--border-color); } .price { font-family: var(--font-heading); font-size: 22px; font-weight: 700; color: var(--accent-gold); letter-spacing: 0.5px; transition: color 0.5s ease; } body.alt .price { color: var(--alt-accent); text-shadow: 0 0 10px rgba(255, 0, 110, 0.4); font-family: var(--font-heading); font-size: 18px; } .paypal-button { flex: 1; } /* ============================================================ Gallery (Past Works) ============================================================ */ .gallery { padding: var(--space-xl) 20px; } .masonry-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 24px; } .gallery-item { position: relative; overflow: hidden; border-radius: 8px; cursor: pointer; aspect-ratio: 1; border: 1px solid var(--border-color); box-shadow: var(--shadow-sm); transition: transform var(--transition-base), box-shadow var(--transition-base); } .gallery-item:hover { transform: translateY(-6px) scale(1.01); box-shadow: var(--shadow-hover); } body.alt .gallery-item { border-color: rgba(0, 217, 255, 0.15); } body.alt .gallery-item:hover { box-shadow: 0 0 30px rgba(0, 217, 255, 0.35), var(--shadow-hover); border-color: rgba(0, 217, 255, 0.5); } .gallery-item img { width: 100%; height: 100%; object-fit: contain; transition: transform var(--transition-slow); } .gallery-item:hover img { transform: scale(1.1); } .gallery-overlay { position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(to top, rgba(20, 10, 5, 0.92), rgba(20, 10, 5, 0)); color: white; padding: 28px 20px 20px; transform: translateY(100%); transition: transform var(--transition-base); } .gallery-item:hover .gallery-overlay { transform: translateY(0); } body.alt .gallery-overlay { background: linear-gradient(to top, rgba(0, 0, 0, 0.95), rgba(255, 0, 110, 0.05)); } .gallery-overlay h3 { font-size: 17px; margin-bottom: 6px; font-weight: 600; letter-spacing: 0.5px; } body.alt .gallery-overlay h3 { color: var(--alt-cyan); } .gallery-overlay p { font-size: 13px; opacity: 0.85; line-height: 1.5; } /* ============================================================ Modal (Glassmorphism) ============================================================ */ .modal { display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.88); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); align-items: center; justify-content: center; animation: fadeIn 0.25s ease; } body.alt .modal { background-color: rgba(0, 0, 0, 0.92); } .modal.open { display: flex; } .modal-content { position: relative; max-width: 90%; max-height: 90vh; display: flex; flex-direction: column; align-items: center; animation: scaleIn 0.3s ease; } .modal-content img { max-width: 100%; max-height: 75vh; object-fit: contain; border-radius: 4px; box-shadow: 0 20px 80px rgba(0,0,0,0.5); } body.alt .modal-content img { box-shadow: 0 0 60px rgba(0, 217, 255, 0.15), 0 20px 80px rgba(0,0,0,0.6); } .modal-caption { color: rgba(255, 255, 255, 0.9); text-align: center; padding: 20px 16px 10px; font-family: var(--font-heading); font-size: 20px; letter-spacing: 0.5px; } body.alt .modal-caption { font-family: var(--font-heading); color: var(--alt-cyan); text-shadow: 0 0 12px rgba(0, 217, 255, 0.6); font-size: 16px; } .modal-nav { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255,255,255,0.2); color: white; font-size: 28px; padding: 12px 18px; cursor: pointer; border-radius: 4px; transition: all var(--transition-fast); backdrop-filter: blur(4px); line-height: 1; } .modal-nav:hover { background: rgba(255, 255, 255, 0.2); border-color: rgba(255,255,255,0.5); } body.alt .modal-nav:hover { border-color: var(--alt-cyan); color: var(--alt-cyan); box-shadow: 0 0 15px rgba(0, 217, 255, 0.4); } .modal-prev { left: -70px; } .modal-next { right: -70px; } .close { position: absolute; top: -44px; right: 0; color: rgba(255, 255, 255, 0.7); font-size: 32px; font-weight: 300; cursor: pointer; transition: color var(--transition-fast), transform var(--transition-fast); line-height: 1; } .close:hover { color: white; transform: rotate(90deg); } body.alt .close:hover { color: var(--alt-cyan); text-shadow: 0 0 12px var(--alt-cyan); } /* ============================================================ Empty States ============================================================ */ .empty-state { text-align: center; padding: 80px 20px; color: var(--text-light); } .empty-state-icon { font-size: 48px; margin-bottom: 20px; opacity: 0.5; } .empty-state p { font-size: 16px; letter-spacing: 0.5px; } /* ============================================================ Footer ============================================================ */ footer { position: relative; background-image: linear-gradient( to bottom, rgba(20, 8, 4, 0.92) 0%, rgba(44, 24, 16, 0.97) 100% ), url('https://images.unsplash.com/photo-1474440692490-2e83ae13ba29?auto=format&fit=crop&w=1920&q=80'); background-size: cover; background-position: center; background-attachment: fixed; color: var(--light-bg); padding: var(--space-xl) 20px var(--space-lg); margin-top: var(--space-xl); transition: background-color 0.5s ease; } body.alt footer { background-image: linear-gradient( to bottom, rgba(0, 0, 0, 0.94) 0%, rgba(5, 0, 15, 0.97) 100% ), url('https://images.unsplash.com/photo-1499856871958-5b9627545d1a?auto=format&fit=crop&w=1920&q=80'); background-attachment: fixed; border-top: 1px solid rgba(0, 217, 255, 0.15); box-shadow: inset 0 1px 0 rgba(0, 217, 255, 0.1); } .footer-content { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 40px; margin-bottom: 32px; } .footer-section h4 { font-family: var(--font-heading); font-size: 18px; font-weight: 600; margin-bottom: 18px; color: var(--accent-gold); letter-spacing: 1px; } body.alt .footer-section h4 { font-family: var(--font-heading); color: var(--alt-cyan); font-size: 14px; text-shadow: 0 0 10px rgba(0, 217, 255, 0.4); } .footer-section p, .footer-section a { font-size: 14px; color: rgba(245, 240, 232, 0.7); text-decoration: none; transition: color var(--transition-fast); line-height: 1.8; } body.alt .footer-section p, body.alt .footer-section a { color: rgba(0, 217, 255, 0.65); } .footer-section a:hover { color: var(--accent-gold); } body.alt .footer-section a:hover { color: var(--alt-accent); text-shadow: 0 0 10px rgba(255, 0, 110, 0.6); } .footer-section ul { list-style: none; } .footer-section ul li { margin-bottom: 10px; } .footer-bottom { max-width: 1200px; margin: 0 auto; text-align: center; padding-top: 24px; border-top: 1px solid rgba(245, 240, 232, 0.12); font-size: 12px; color: rgba(245, 240, 232, 0.45); letter-spacing: 1px; } body.alt .footer-bottom { border-top-color: rgba(0, 217, 255, 0.15); color: rgba(0, 217, 255, 0.4); } /* ============================================================ Scroll Animations ============================================================ */ .fade-in-up { opacity: 0; transform: translateY(28px); transition: opacity 0.7s ease, transform 0.7s ease; } .fade-in-up.visible { opacity: 1; transform: translateY(0); } /* Stagger delays for grid children */ .stagger-child:nth-child(1) { transition-delay: 0ms; } .stagger-child:nth-child(2) { transition-delay: 80ms; } .stagger-child:nth-child(3) { transition-delay: 160ms; } .stagger-child:nth-child(4) { transition-delay: 240ms; } .stagger-child:nth-child(5) { transition-delay: 320ms; } .stagger-child:nth-child(6) { transition-delay: 400ms; } .stagger-child:nth-child(7) { transition-delay: 480ms; } .stagger-child:nth-child(8) { transition-delay: 560ms; } /* ============================================================ Section Title Accent ============================================================ */ .section-title { font-size: 40px; font-weight: 600; letter-spacing: 1px; margin-bottom: var(--space-lg); text-align: center; } .section-title::after { content: ''; display: block; width: 50px; height: 2px; background: var(--accent-gold); margin: 14px auto 0; transition: background 0.5s ease; } body.alt .section-title::after { background: var(--alt-cyan); box-shadow: 0 0 8px var(--alt-cyan); } /* ============================================================ Animations ============================================================ */ @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes fadeInUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } } @keyframes scaleIn { from { opacity: 0; transform: scale(0.92); } to { opacity: 1; transform: scale(1); } } /* ============================================================ Responsive ============================================================ */ @media (max-width: 768px) { .hero { padding: 80px 20px; background-attachment: scroll; } .page-header { background-attachment: scroll; } footer { background-attachment: scroll; } .hero h1 { font-size: 38px; } body.alt .hero h1 { font-size: 28px; } .tagline { font-size: 15px; } .page-header h1 { font-size: 32px; } .about-content { grid-template-columns: 1fr; gap: var(--space-lg); } .products-grid, .masonry-gallery { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 20px; } .featured-works { grid-template-columns: 1fr; } .modal-content { max-width: 96%; } .modal-prev { left: -50px; } .modal-next { right: -50px; } .close { top: -40px; right: 4px; } .nav-menu { gap: 14px; } .nav-link { font-size: 11px; } .nav-logo { font-size: 17px; } .section-title, .about h2 { font-size: 30px; } } @media (max-width: 480px) { .hero h1 { font-size: 30px; } body.alt .hero h1 { font-size: 22px; } .products-grid, .masonry-gallery { grid-template-columns: 1fr; } .modal-prev, .modal-next { display: none; } .nav-menu { gap: 10px; } .theme-switch { padding: 5px 10px; } } /* Mobile hamburger drawer — collapses the nav behind a ☰ toggle so the injected Cart badge can never be clipped on small screens. */ @media (max-width: 768px) { .nav-toggle { display: block; } .nav-container { position: relative; } .nav-menu { display: none; position: absolute; top: calc(100% + 8px); right: 0; min-width: 210px; flex-direction: column; align-items: flex-start; gap: 2px; row-gap: 2px; background: rgba(18, 12, 8, 0.98); border: 1px solid var(--border-color, rgba(216, 178, 122, 0.16)); border-radius: 8px; padding: 10px 16px; box-shadow: 0 14px 34px rgba(0, 0, 0, 0.5); } .nav-menu.open { display: flex; } .nav-menu .nav-link { width: 100%; padding: 10px 0; } .nav-menu .theme-switch { margin-top: 6px; } } /* ============================================================ Accessibility — focus-visible & reduced motion ============================================================ */ :focus-visible { outline: 2px solid var(--accent-gold); outline-offset: 3px; border-radius: 2px; } /* Skip-to-content link (injected site-wide by render.js) */ .skip-link { position: absolute; left: -9999px; top: 0; z-index: 10000; background: var(--accent-gold); color: #1a130d; padding: 10px 16px; font-weight: 700; border-radius: 0 0 6px 0; } .skip-link:focus { left: 0; } body.alt :focus-visible { outline-color: var(--alt-cyan); box-shadow: 0 0 12px var(--alt-cyan); } a:focus-visible, button:focus-visible { outline-offset: 4px; } /* Theme keyboard hint — appears briefly when theme toggles via "T" key */ .theme-hint { position: fixed; bottom: 24px; right: 24px; background: rgba(44, 24, 16, 0.92); color: var(--accent-gold); padding: 12px 18px; border-radius: 4px; font-size: 13px; letter-spacing: 1px; text-transform: uppercase; font-family: var(--font-body); border: 1px solid var(--accent-gold); box-shadow: 0 8px 30px rgba(0,0,0,0.3); z-index: 9999; opacity: 0; pointer-events: none; transition: opacity 0.4s ease, transform 0.4s ease; transform: translateY(10px); } .theme-hint.show { opacity: 1; transform: translateY(0); } body.alt .theme-hint { background: rgba(10, 10, 10, 0.92); color: var(--alt-cyan); border-color: var(--alt-cyan); box-shadow: 0 0 25px rgba(0, 217, 255, 0.4); } /* Honor user's "reduce motion" OS setting */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } .hero, .page-header, footer { background-attachment: scroll; } .fade-in-up { opacity: 1; transform: none; } } /* ============================================================ Legal Pages ============================================================ */ .legal-page { background: var(--light-bg, #f5f0e8); padding: 60px 20px 80px; } .legal-page .container { max-width: 860px; margin: 0 auto; } .legal-draft-notice { background: rgba(201, 169, 110, 0.15); border: 1px solid var(--accent-gold, #c9a96e); border-radius: 4px; padding: 14px 20px; margin-bottom: 40px; font-size: 13px; color: var(--text-color, #2c1810); line-height: 1.6; } body.alt .legal-draft-notice { background: rgba(0, 217, 255, 0.08); border-color: var(--alt-cyan); color: var(--alt-text); } .legal-draft-notice strong { text-transform: uppercase; letter-spacing: 0.05em; } .legal-placeholder { background: rgba(201, 169, 110, 0.25); border-radius: 3px; padding: 1px 6px; font-style: italic; font-weight: 600; color: #8b4513; } body.alt .legal-placeholder { background: rgba(255, 0, 110, 0.2); color: var(--alt-accent); } .legal-page h1 { font-family: var(--font-heading); font-size: 38px; font-weight: 600; color: var(--text-color, #2c1810); margin-bottom: 8px; letter-spacing: 1px; } body.alt .legal-page h1 { font-family: var(--font-heading); color: var(--alt-cyan); text-shadow: 0 0 20px rgba(0, 217, 255, 0.4); } .legal-effective { font-size: 13px; color: var(--text-light, #8b7355); margin-bottom: 40px; letter-spacing: 0.04em; } .legal-page h2 { font-family: var(--font-heading); font-size: 22px; font-weight: 600; color: var(--text-color, #2c1810); margin: 40px 0 12px; padding-bottom: 8px; border-bottom: 1px solid rgba(201, 169, 110, 0.3); letter-spacing: 0.5px; } body.alt .legal-page h2 { font-family: var(--font-heading); font-size: 14px; color: var(--alt-cyan); border-bottom-color: rgba(0, 217, 255, 0.2); letter-spacing: 1px; text-transform: uppercase; } .legal-page h3 { font-family: var(--font-heading); font-size: 17px; font-weight: 600; color: var(--text-color, #2c1810); margin: 24px 0 8px; } body.alt .legal-page h3 { font-family: var(--font-heading); font-size: 12px; color: var(--alt-cyan); letter-spacing: 1px; text-transform: uppercase; } .legal-page p { font-size: 15px; line-height: 1.8; color: var(--text-color, #2c1810); margin-bottom: 16px; } body.alt .legal-page p { color: var(--alt-text); } .legal-page ul, .legal-page ol { padding-left: 24px; margin-bottom: 16px; } .legal-page li { font-size: 15px; line-height: 1.8; color: var(--text-color, #2c1810); margin-bottom: 6px; } body.alt .legal-page li { color: var(--alt-text); } .legal-page a { color: var(--accent-color, #8b6914); text-decoration: underline; } .legal-page a:hover { color: var(--accent-gold, #c9a96e); } .legal-toc { background: rgba(44, 24, 16, 0.04); border-left: 3px solid var(--accent-gold, #c9a96e); padding: 20px 24px; margin-bottom: 40px; border-radius: 0 4px 4px 0; } body.alt .legal-toc { background: rgba(0, 217, 255, 0.05); border-left-color: var(--alt-cyan); } .legal-toc p { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 10px; } .legal-toc ol { margin-bottom: 0; } .legal-toc li { font-size: 14px; margin-bottom: 4px; } .legal-contact-box { background: rgba(44, 24, 16, 0.04); border: 1px solid rgba(201, 169, 110, 0.3); border-radius: 6px; padding: 24px 28px; margin-top: 40px; } body.alt .legal-contact-box { background: rgba(0, 217, 255, 0.05); border-color: rgba(0, 217, 255, 0.2); } .legal-contact-box p { margin-bottom: 6px; } .legal-contact-box p:last-child { margin-bottom: 0; } /* 404 page */ .not-found-section { min-height: 60vh; display: flex; align-items: center; justify-content: center; text-align: center; padding: 80px 20px; background: var(--light-bg, #f5f0e8); } .not-found-section h1 { font-family: var(--font-heading); font-size: 100px; font-weight: 700; color: var(--accent-gold, #c9a96e); line-height: 1; margin-bottom: 16px; } body.alt .not-found-section h1 { color: var(--alt-cyan); text-shadow: 0 0 30px rgba(0, 217, 255, 0.5); } .not-found-section h2 { font-family: var(--font-heading); font-size: 28px; color: var(--text-color, #2c1810); margin-bottom: 16px; } body.alt .not-found-section h2 { font-family: var(--font-heading); font-size: 18px; color: var(--alt-text); } .not-found-section p { font-size: 16px; color: var(--text-light, #8b7355); margin-bottom: 32px; max-width: 400px; margin-left: auto; margin-right: auto; line-height: 1.7; } body.alt .not-found-section p { color: rgba(0, 217, 255, 0.65); } /* =================================================================== LAYOUT PRESETS — structural variants chosen per site via the 'layout_preset' setting, applied as body[data-layout="..."] by render.js. 'classic' = all the default styles above (no overrides). Desktop-only so the mobile responsive rules still collapse to one column. Colours/fonts stay theme-driven; only structure changes. =================================================================== */ @media (min-width: 769px) { /* ---- EDITORIAL: left-aligned nav, asymmetric shorter hero, single-column reading About, roomy 2-up shop, 3-up gallery ---- */ /* relative (not static) so the nav's z-index:100 takes effect and it paints OVER the page-header, which now slides up underneath it. Layout is unchanged vs static (in-flow, scrolls away) — only stacking is enabled. */ body[data-layout="editorial"] .navbar { position: relative; z-index: 100; } body[data-layout="editorial"] .nav-container { justify-content: space-between; } body[data-layout="editorial"] .hero { min-height: 60vh; } body[data-layout="editorial"] .hero-content { margin: 0; text-align: left; align-items: flex-start; } body[data-layout="editorial"] .about-content { grid-template-columns: 1fr; max-width: 720px; margin-left: auto; margin-right: auto; } body[data-layout="editorial"] .products-grid { grid-template-columns: repeat(2, 1fr); gap: 48px; } body[data-layout="editorial"] .masonry-gallery { grid-template-columns: repeat(3, 1fr); } body[data-layout="editorial"] .footer-content { grid-template-columns: repeat(2, 1fr); } /* ---- GALLERY: stacked/centered nav, full-bleed hero with the logo low-left, dense image grids, single centered footer. The About section is removed server-side by render.js. ---- */ body[data-layout="gallery"] .nav-container { flex-direction: column; gap: 10px; } body[data-layout="gallery"] .hero { min-height: 100vh; } body[data-layout="gallery"] .hero-content { align-items: flex-start; justify-content: flex-end; text-align: left; padding-bottom: 8vh; } body[data-layout="gallery"] .products-grid { grid-template-columns: repeat(4, 1fr); gap: 14px; } body[data-layout="gallery"] .masonry-gallery { grid-template-columns: repeat(5, 1fr); gap: 14px; } body[data-layout="gallery"] .footer-content { grid-template-columns: 1fr; text-align: center; } } /* ============================================================ Premium polish ============================================================ */ html { scroll-behavior: smooth; } /* Editorial kicker label above section headings */ .eyebrow { display: block; font-family: var(--font-heading); font-size: 12px; font-weight: 600; letter-spacing: 0.34em; text-transform: uppercase; color: var(--accent-gold); margin-bottom: 14px; } .eyebrow::after { content: ''; display: block; width: 40px; height: 1px; margin: 12px auto 0; background: linear-gradient(90deg, transparent, var(--accent-gold), transparent); } /* Hero entrance — logo rises in first, then headline, then tagline */ .hero .logo { animation: fadeInUp 1s ease both; } .hero h1 { animation-delay: 0.18s; } .hero .tagline { animation: fadeInUp 0.9s ease 0.36s both; } .hero .scroll-indicator { animation: bounce 2s ease infinite, fadeInUp 1s ease 0.7s both; } /* Product card — brass accent bar draws in on hover */ .product-card { position: relative; } .product-card::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--accent-gold), transparent); transform: scaleX(0); transition: transform var(--transition-base); z-index: 3; } .product-card:hover::after { transform: scaleX(1); } /* Slim brass hairline divider */ .section-divider { width: 100%; max-width: 1080px; height: 1px; margin: 8px auto; background: linear-gradient(90deg, transparent, var(--border-color), transparent); } /* ============================================================ Avant-garde hero — asymmetric, oversized, off the grid ============================================================ */ .hero-avant { justify-content: flex-start; align-items: center; text-align: left; overflow: hidden; } .hero-avant .hero-content { max-width: 1180px; width: 100%; margin: 0 auto; padding: 0 7vw; position: relative; z-index: 2; } /* Oversized skull mark — offset right, bleeding, behind the type */ .hero-avant .logo { position: absolute; top: 50%; right: calc(clamp(-110px, -4vw, -10px) + 50px); left: auto; transform: translateY(calc(-50% + var(--py, 0px))); width: min(64vh, 660px); height: min(64vh, 660px); margin: 0; -webkit-mask-image: url('/assets/logo-mark.png'); mask-image: url('/assets/logo-mark.png'); opacity: 0.82; z-index: 1; /* "burned into the wood" — a dark mark multiplied into the grain so the wood texture shows through it, like a scorched maker's brand. */ background-color: rgba(14, 8, 4, 0.86); mix-blend-mode: multiply; filter: none; animation: fadeIn 1.5s ease both; } /* Oversized display headline (when set); empty headline collapses */ .hero-avant h1:empty { display: none; } .hero-avant h1 { font-size: clamp(40px, 7.4vw, 112px); line-height: 0.96; letter-spacing: -0.005em; margin: 0 0 14px; max-width: 15ch; text-align: left; text-shadow: 0 3px 4px rgba(0, 0, 0, 0.75), 0 14px 24px rgba(0, 0, 0, 0.88), 0 34px 60px rgba(0, 0, 0, 0.55); } /* Tagline becomes the hero statement (big display serif) */ .hero-avant .tagline { font-family: var(--font-heading); font-size: clamp(40px, 7.2vw, 104px); line-height: 0.98; letter-spacing: 0; text-transform: none; color: var(--text-color); max-width: 13ch; text-align: left; margin: 0; opacity: 1; text-shadow: 0 3px 4px rgba(0, 0, 0, 0.75), 0 14px 24px rgba(0, 0, 0, 0.88), 0 34px 60px rgba(0, 0, 0, 0.55); } .hero-avant .tagline::after { content: ''; display: block; width: 88px; height: 2px; margin-top: 28px; background: var(--accent-gold); } /* Vertical edge label */ .hero-vlabel { position: absolute; left: 28px; top: 50%; transform: translateY(-50%); writing-mode: vertical-rl; font-family: var(--font-heading); font-size: 12px; letter-spacing: 0.42em; text-transform: uppercase; color: var(--accent-gold); opacity: 0.78; z-index: 2; } .hero-avant .scroll-indicator { left: 7vw; transform: none; } /* Editorial section index numeral — sits low at the bottom of the About section */ .about { position: relative; } .about .container { position: relative; z-index: 1; } .section-index { position: absolute; bottom: 20px; right: 6vw; transform: translateY(var(--py, 0px)); font-family: var(--font-heading); font-weight: 700; font-size: clamp(58px, 10vw, 156px); line-height: 1; color: transparent; -webkit-text-stroke: 1.5px rgba(216, 178, 122, 0.22); z-index: 0; pointer-events: none; } @media (max-width: 820px) { .section-index { font-size: 72px; right: 16px; bottom: 12px; } } /* ── Home narrative chapters — the descent through the workshop ───── */ .chapter { position: relative; padding: clamp(82px, 13vh, 158px) 0; border-top: 1px solid rgba(216, 178, 122, 0.10); overflow: hidden; } .chapter .container { max-width: 1180px; margin: 0 auto; padding: 0 6vw; } .chapter h2 { font-family: var(--font-heading); font-size: clamp(30px, 4.4vw, 56px); line-height: 1.08; letter-spacing: 0.01em; margin: 16px 0 30px; max-width: 18ch; } .chapter .chapter-body { max-width: 600px; } .chapter .chapter-body p { margin: 0; font-size: clamp(16px, 1.35vw, 19px); line-height: 1.9; color: var(--text-light); } /* alternate side — chapter reads from the right, numeral balances left */ .chapter.alt .container { display: flex; flex-direction: column; align-items: flex-end; text-align: right; } .chapter.alt .section-index { right: auto; left: 6vw; } /* the descent culminates in a single, centered call to the shop */ .home-cta { padding: clamp(38px, 7vh, 86px) 0 clamp(72px, 12vh, 142px); text-align: center; } /* eyebrow underline sits under the label text, not centred in a full-width box */ .chapter .eyebrow { width: fit-content; } /* multi-paragraph chapter bodies need spacing between paragraphs */ .chapter .chapter-body p + p { margin-top: 18px; } /* Featured Products — its own section below the about chapters */ .featured-section { position: relative; padding: clamp(72px, 11vh, 140px) 0 clamp(82px, 13vh, 158px); border-top: 1px solid rgba(216, 178, 122, 0.10); text-align: center; } .featured-section .container { max-width: 1180px; margin: 0 auto; padding: 0 6vw; } .featured-section h2 { font-family: var(--font-heading); font-size: clamp(28px, 3.6vw, 46px); line-height: 1.1; margin: 14px 0 46px; } @media (max-width: 820px) { .chapter { padding: 60px 0; } .chapter .container { padding: 0 24px; } .chapter.alt .container { align-items: flex-start; text-align: left; } .chapter.alt .section-index { left: auto; right: 16px; } } @media (max-width: 820px) { .hero-avant { justify-content: center; text-align: center; } .hero-avant .hero-content { padding: 0 24px; text-align: center; } .hero-avant .logo { position: static; transform: none; width: 190px; height: 190px; margin: 0 auto 26px; opacity: 1; filter: none; } .hero-avant h1 { max-width: none; text-align: center; font-size: clamp(38px, 12vw, 64px); } .hero-avant .tagline { max-width: none; text-align: center; margin: 0 auto; font-size: clamp(30px, 9vw, 50px); } .hero-avant .tagline::after { margin-left: auto; margin-right: auto; } .hero-vlabel { display: none; } .hero-avant .scroll-indicator { left: 50%; transform: translateX(-50%); } } /* ============================================================ Modern / artistic shop — circular framing, floating cards ============================================================ */ .shop .products-grid { grid-template-columns: repeat(auto-fit, minmax(230px, 290px)); justify-content: center; gap: 56px 40px; } .shop .product-card { background: transparent; border: none; box-shadow: none; border-radius: 0; overflow: visible; text-align: center; } .shop .product-card::after { display: none; } .shop .product-card:hover { transform: translateY(-8px); box-shadow: none; border-color: transparent; } .shop .product-image { aspect-ratio: 1 / 1; background: transparent; border: none; padding: 0; overflow: visible; -webkit-mask: url('/assets/skull-mask.png') center / contain no-repeat; mask: url('/assets/skull-mask.png') center / contain no-repeat; transition: filter .45s ease, transform .45s ease; } .shop .product-card:hover .product-image { filter: drop-shadow(0 0 18px rgba(216, 178, 122, 0.4)); transform: scale(1.03); } .shop .product-image img { border-radius: 0; width: 100%; height: 100%; object-fit: cover; } .shop .no-image { border-radius: 0; background: radial-gradient(circle at 50% 42%, #2a1f16 0%, #14100b 82%); color: transparent; } .shop .no-image::before { display: none; } .shop .product-details { padding: 26px 6px 0; } .shop .product-details h3 { font-family: var(--font-heading); font-size: 22px; letter-spacing: .01em; } .shop .product-details .description { font-size: 13.5px; max-width: 30ch; margin: 8px auto 0; } .shop .product-footer { flex-direction: column; align-items: center; gap: 12px; margin-top: 16px; } .shop .price { font-family: var(--font-heading); font-size: 20px; color: var(--accent-gold); } /* Scroll-progress seam — thin brass line advancing down the page */ .scroll-progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--accent-gold), var(--accent-color, var(--accent-gold))); transform: scaleX(var(--scroll, 0)); transform-origin: left center; z-index: 300; pointer-events: none; opacity: 0.85; } /* Reveal vocabulary — directional, crafted scroll-in motion */ :root { --ease-craft: cubic-bezier(.2, .7, .2, 1); --reveal-dur: .85s; } [data-reveal] { opacity: 0; transition: opacity var(--reveal-dur) var(--ease-craft), transform var(--reveal-dur) var(--ease-craft), filter var(--reveal-dur) var(--ease-craft); } [data-reveal="rise"] { transform: translateY(34px); } [data-reveal="left"] { transform: translateX(-42px); } [data-reveal="right"] { transform: translateX(42px); } [data-reveal="develop"] { transform: translateY(28px) scale(.965); filter: blur(11px); } [data-reveal].revealed { opacity: 1; transform: none; filter: none; } @media (prefers-reduced-motion: reduce) { [data-reveal] { opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; } } /* Home featured pieces — skull-masked to match the shop, sized up for impact */ .featured-works { grid-template-columns: repeat(auto-fit, minmax(300px, 640px)); justify-content: center; gap: 46px 40px; } .featured-item { background: transparent; border: none; box-shadow: none; border-radius: 0; overflow: visible; text-align: center; } .featured-item:hover { transform: translateY(-7px); box-shadow: none; } .featured-item img { aspect-ratio: 1 / 1; padding: 0; background: transparent; object-fit: cover; -webkit-mask: url('/assets/skull-mask.png') center / contain no-repeat; mask: url('/assets/skull-mask.png') center / contain no-repeat; transition: transform var(--transition-slow), filter .4s ease; } .featured-item:hover img { transform: scale(1.04); filter: drop-shadow(0 0 15px rgba(216, 178, 122, 0.38)); } .featured-item h3 { font-family: var(--font-heading); font-size: 23px; padding: 26px 8px 4px; } .featured-item .price { color: var(--accent-gold); font-family: var(--font-heading); font-size: 18px; } .featured-item .no-image { aspect-ratio: 1 / 1; -webkit-mask: url('/assets/skull-mask.png') center / contain no-repeat; mask: url('/assets/skull-mask.png') center / contain no-repeat; } /* Contain off-axis reveal transforms (data-reveal left/right) — no horizontal scrollbar. `clip` clips without creating a scroll container, so the sticky navbar is unaffected (unlike overflow:hidden). */ html, body { overflow-x: clip; } /* ════════════════════════════════════════════════════════════════════════ WORKSHOP DISCOVERY LAYER "Feels like the user is discovering my work and exploring my workshop." All additive — none of these override structural decisions above. ════════════════════════════════════════════════════════════════════════ */ /* ── Craft easing ── */ :root { --ease-workshop: cubic-bezier(0.19, 1, 0.22, 1); /* elastic, like a spring-loaded latch */ --ease-reveal: cubic-bezier(0.16, 1, 0.3, 1); /* fast-then-settle */ } /* ── Products grid — staggered entrance with workshop "uncover" feel ───── Cards appear like pieces being uncovered on a workbench: blur + rise. JS extends each card's delay via style.transitionDelay. */ [data-reveal="develop"] { transform: translateY(40px) scale(0.97); filter: blur(8px); } [data-reveal="develop"].revealed { transform: translateY(0) scale(1); filter: none; transition: opacity 0.75s var(--ease-reveal), transform 0.75s var(--ease-reveal), filter 0.6s var(--ease-reveal); } /* ── Product card — 3D perspective lift on hover ───────────────────────── JS (app.js _wireTilt) sets transform:perspective(900px) rotateX(Xdeg) rotateY(Ydeg) directly on mousemove; on mouseleave it removes the inline style, letting CSS take over and animate back to the default hover state. */ .product-card { transform-origin: center 60%; /* tilt pivots slightly below center — feels grounded */ } /* Raised state (hover, set by CSS when JS tilt ISN'T active) */ .product-card:not([data-tilt-wired]):hover { transform: translateY(-10px) scale(1.01); border-color: rgba(201, 169, 110, 0.6); box-shadow: 0 8px 30px rgba(0,0,0,0.35), 0 20px 60px rgba(0,0,0,0.2), 0 0 0 1px rgba(201, 169, 110, 0.15) inset; } /* ── Product card image — craft-depth zoom ─────────────────────────────── The image zooms in as if you're leaning in to examine the piece. */ .product-card:hover .product-image img { transform: scale(1.07); transition: transform 0.65s var(--ease-workshop); } /* ── Product card — craft info panel ──────────────────────────────────── Warm underline accent on title hover, price in brass */ .product-details h3 a:hover { color: var(--accent-gold); text-decoration: none; } .product-card .price { color: var(--accent-gold); font-family: var(--font-heading); font-weight: 600; letter-spacing: 0.03em; } /* ── Category badge — rubber-stamp aesthetic ───────────────────────────── The badge reads like a workshop department stamp: small caps, subtle border. */ .category-badge { font-family: var(--font-body); letter-spacing: 0.12em; border: 1px solid rgba(139,90,43,0.3); text-transform: uppercase; } /* ── Sold / pending badge on product cards ───────────────────────────────*/ .status-badge { display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; padding: 2px 8px; border-radius: 2px; margin-bottom: 6px; } .status-badge.sold { background: rgba(201,169,110,0.15); color: var(--accent-gold); } .status-badge.pending { background: rgba(160,82,45,0.15); color: var(--accent-rust); } /* ── Products grid — alternating depth (subtle z-lift on odd cards) ──────*/ .products-grid .product-card:nth-child(even) { margin-top: 18px; /* stagger rows like shelves at different depths */ } @media (max-width: 600px) { .products-grid .product-card:nth-child(even) { margin-top: 0; } } /* ── Shop sidebar — workshop area labels ───────────────────────────────── The filter buttons read like drawer labels in a parts cabinet. */ .shop-filter-btn { letter-spacing: 0.04em; position: relative; } /* Active state — a brass accent line like a workbench inlay */ .shop-filter-btn.active::before { content: ''; position: absolute; left: 0; top: 20%; height: 60%; width: 3px; border-radius: 0 2px 2px 0; background: var(--accent-gold); } /* ── Merch product page — gallery main image ─────────────────────────────*/ .merch-main-img { background: linear-gradient(135deg, #1a1108 0%, #120d08 100%); border: 1px solid rgba(201, 169, 110, 0.18); border-radius: 10px; box-shadow: 0 16px 50px rgba(0,0,0,0.45); } .merch-main-img img { padding: 12px; box-sizing: border-box; } /* ── Merch product page — info panel ────────────────────────────────────*/ .merch-info { padding-top: 8px; } .merch-title { letter-spacing: 0.01em; margin-bottom: 12px; } .merch-price { color: var(--accent-gold) !important; } /* ── Merch color swatches — larger, more tactile ────────────────────────*/ .color-swatch { width: 40px !important; height: 40px !important; box-shadow: 0 2px 8px rgba(0,0,0,0.4); } .color-swatch.active { box-shadow: 0 0 0 3px var(--light-bg), 0 0 0 5px var(--accent-gold), 0 2px 8px rgba(0,0,0,0.4); border-color: transparent !important; } /* ── Size buttons — more workshop-y feel ─────────────────────────────────*/ .size-btn { border-radius: 4px !important; font-weight: 600 !important; letter-spacing: 0.05em !important; font-size: 13px !important; } .size-btn.active { background: var(--accent-gold) !important; border-color: var(--accent-gold) !important; color: #17110a !important; box-shadow: 0 2px 8px rgba(201,169,110,0.35) !important; } /* ── Add to cart buttons — more tactile ─────────────────────────────────*/ .merch-add-btn:not(:disabled):hover { transform: translateY(-1px); box-shadow: 0 4px 16px rgba(0,0,0,0.3); } .merch-add-btn:not(:disabled):active { transform: translateY(0); } /* ── POD callout — craft note style ─────────────────────────────────────*/ .pod-note { background: rgba(201, 169, 110, 0.05); border: 1px solid rgba(201, 169, 110, 0.12); border-radius: 6px; padding: 10px 12px; margin-top: 16px !important; } /* ── Merch page skeleton (while loading) ─────────────────────────────────*/ .merch-page-wrapper .skeleton { background-color: rgba(20, 14, 9, 0.55); background-image: linear-gradient(90deg, transparent 18%, rgba(201, 169, 110, 0.15) 50%, transparent 82%); background-size: 200% 100%; background-repeat: no-repeat; animation: shimmer 1.6s infinite; border-radius: 8px; } /* ── Back link — styled like a chisel breadcrumb ─────────────────────────*/ .merch-back, .back-link { font-family: var(--font-body); font-size: 12px !important; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.7; transition: opacity 0.2s, color 0.2s; } .merch-back:hover, .back-link:hover { opacity: 1; color: var(--accent-gold) !important; } .merch-back::before, .back-link::before { content: '← '; } /* ── Workshop callout block ────────────────────────────────────────────── Used for "made to order", "one-of-a-kind", etc. anywhere on product pages. */ .workshop-note { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-left: 3px solid var(--accent-gold); background: rgba(201, 169, 110, 0.04); border-radius: 0 6px 6px 0; font-size: 13px; color: var(--text-muted); margin: 16px 0; line-height: 1.5; } .workshop-note strong { color: var(--accent-gold); } /* ── Product grid — "from the bench" eyebrow strip ────────────────────── A subtle ruled line with centered text, like a workshop divider. */ .bench-divider { display: flex; align-items: center; gap: 16px; margin: 0 0 28px; color: var(--text-light); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; font-family: var(--font-body); } .bench-divider::before, .bench-divider::after { content: ''; flex: 1; height: 1px; background: var(--border-color); } /* ── No-image placeholder — logo mark + wood grain feel ─────────────────*/ .no-image { background: radial-gradient( circle at 50% 38%, rgba(36, 27, 20, 0.9) 0%, var(--card-bg) 80% ); font-size: 10px; letter-spacing: 0.18em; } /* ── Cart button — always readable over dark bg ──────────────────────────*/ .nav-cart { color: var(--text-color) !important; } .cart-count { font-size: 10px !important; min-width: 16px !important; height: 16px !important; } /* ── Focus ring — matches workshop brass palette ─────────────────────────*/ .color-swatch:focus-visible { outline: 2px solid var(--accent-gold); outline-offset: 3px; } .size-btn:focus-visible { outline: 2px solid var(--accent-gold); outline-offset: 2px; }