/* ============================================================ RESPAWN CULTURE — Premium Redesign Dark cinematic Indian streetwear — Supreme/Off-White level UI ============================================================ */ /* Fonts are loaded via async tags in each page's — no @import here (it created a render-blocking CSS chain). */ /* ── Variables ── */ :root { --bg: #0a0a0a; --bg-2: #0e0e0e; --bg-3: #141414; --bg-4: #1a1a1a; --text: #f5f4f2; --text-muted: #b0aeab; --text-dim: #8a8885; /* ≥4.5:1 on #0a0a0a — WCAG AA */ --orange: #FF6B00; --gold: #c9a84c; --gold-light: #e0bf6a; --red: #CC2200; --border: #1a1a1a; --border-mid: #2a2a2a; --nav-height: 64px; --font-display: 'Bebas Neue', sans-serif; --font-body: 'Manrope', 'Inter', system-ui, -apple-system, sans-serif; --font-serif: 'Fraunces', 'Cormorant Garamond', Georgia, serif; --max-width: 1400px; --gutter: 32px; } /* ── Reset ── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: auto; } /* Lenis handles smooth scroll */ body { background: var(--bg); color: var(--text); font-family: var(--font-body); font-size: 15px; line-height: 1.65; letter-spacing: -0.003em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; overflow-x: hidden; } a { color: inherit; text-decoration: none; } img { display: block; max-width: 100%; } button { cursor: pointer; border: none; background: none; font-family: inherit; } ul { list-style: none; } /* ── Container ── */ .container { max-width: var(--max-width); margin: 0 auto; padding: 0 var(--gutter); } /* ── SR only ── */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); border: 0; } /* ============================================================ LOADING SCREEN ============================================================ */ #rc-loading { position: fixed; inset: 0; background: #000; z-index: 9999; display: flex; align-items: center; justify-content: center; flex-direction: column; } .rc-loading-inner { display: flex; flex-direction: column; align-items: center; gap: 24px; } .rc-loading-logo { opacity: 0; animation: loadFadeIn 0.6s ease 0.2s forwards; filter: drop-shadow(0 0 20px rgba(201,168,76,0.5)); } @keyframes loadFadeIn { to { opacity: 1; } } .rc-loading-bar { width: 200px; height: 1px; background: rgba(201,168,76,0.15); position: relative; overflow: hidden; } .rc-loading-bar-fill { position: absolute; inset: 0; background: var(--gold); transform-origin: left center; transform: scaleX(0); } .rc-loading-label { font-size: 9px; font-weight: 600; letter-spacing: 0.4em; text-transform: uppercase; color: var(--text-dim); } /* Content paints immediately UNDER the opaque loader (fast LCP); the loader overlay simply fades away on top of it. Interaction is blocked until loaded, but nothing is hidden from paint. */ body:not(.rc-loaded) > *:not(#rc-loading):not(#rc-cursor):not(#rc-cursor-follower) { pointer-events: none; } /* Loader logo — keep natural aspect ratio (fixes distorted 1024×48 render) */ .rc-loading-logo img { height: 48px; width: auto; } /* ============================================================ CUSTOM CURSOR ============================================================ */ /* Custom cursor disabled — use the normal OS cursor everywhere. */ #rc-cursor, #rc-cursor-follower { display: none !important; } /* ============================================================ NAVBAR ============================================================ */ .navbar { position: fixed; top: 0; left: 0; right: 0; height: var(--nav-height); z-index: 500; transition: background 0.4s ease, backdrop-filter 0.4s ease, border-color 0.4s ease; border-bottom: 1px solid transparent; } .navbar.scrolled { background: rgba(10,10,10,0.85); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); border-bottom-color: rgba(201,168,76,0.12); } .nav-container { max-width: var(--max-width); margin: 0 auto; padding: 0 var(--gutter); height: 100%; display: flex; align-items: center; justify-content: space-between; } .nav-left, .nav-right { display: flex; align-items: center; gap: 36px; flex: 1; } .nav-right { justify-content: flex-end; } .nav-logo { flex-shrink: 0; } .nav-logo-img { height: 32px; width: auto; object-fit: contain; filter: drop-shadow(0 0 8px rgba(201,168,76,0.35)); transition: filter 0.3s; } .nav-logo-img:hover { filter: drop-shadow(0 0 14px rgba(201,168,76,0.6)); } .nav-link { font-size: 10px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-muted); transition: color 0.2s; white-space: nowrap; position: relative; } .nav-link::after { content: ''; position: absolute; bottom: -3px; left: 0; right: 0; height: 1px; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform 0.3s ease; } .nav-link:hover { color: var(--text); } .nav-link:hover::after { transform: scaleX(1); } .nav-icon { color: var(--text-muted); padding: 6px; transition: color 0.2s; display: flex; align-items: center; min-width: 44px; min-height: 44px; justify-content: center; } .nav-icon:hover { color: var(--text); } .nav-icon svg { width: 17px; height: 17px; } .nav-hamburger { display: none; flex-direction: column; gap: 7px; padding: 8px; min-width: 44px; min-height: 44px; align-items: center; justify-content: center; z-index: 600; } .nav-hamburger span { display: block; width: 24px; height: 1.5px; background: var(--text); transition: transform 0.35s ease, opacity 0.35s ease, width 0.35s ease; transform-origin: center; } .nav-hamburger.open span:nth-child(1) { transform: rotate(45deg) translate(3px, 5px); } .nav-hamburger.open span:nth-child(2) { transform: rotate(-45deg) translate(3px, -5px); } /* ============================================================ FULL-SCREEN MOBILE MENU ============================================================ */ .mobile-menu { position: fixed; inset: 0; background: var(--bg); z-index: 499; display: flex; flex-direction: column; justify-content: center; padding: 0 var(--gutter); transform: translateX(100%); transition: transform 0.55s cubic-bezier(0.76, 0, 0.24, 1); border-left: 1px solid var(--border); } .mobile-menu.open { transform: translateX(0); } .mobile-menu-inner { display: flex; flex-direction: column; justify-content: center; height: 100%; padding: 80px 0 40px; } .mobile-menu-links { display: flex; flex-direction: column; gap: 8px; flex: 1; justify-content: center; } .mobile-menu-link { font-family: var(--font-display); font-size: clamp(42px, 9vw, 72px); letter-spacing: 0.02em; text-transform: uppercase; color: var(--text); line-height: 1.1; display: block; opacity: 0; transform: translateX(40px); transition: color 0.2s; padding: 4px 0; } .mobile-menu.open .mobile-menu-link { /* GSAP handles this */ } .mobile-menu-link:hover { color: var(--gold); } .mobile-menu-footer { border-top: 1px solid var(--border); padding-top: 24px; } .mobile-menu-footer p { font-size: 11px; color: var(--text-dim); letter-spacing: 0.1em; font-style: italic; margin-bottom: 8px; } .mobile-menu-footer a { font-size: 11px; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: var(--gold); } /* ============================================================ HERO ============================================================ */ .hero { height: 100vh; min-height: 600px; position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; background-image: url('/images/openart-gpt-image-2-edit-1_1780945924000_cef65f32.webp'); background-size: cover; background-position: center; } .hero::before { content: ''; position: absolute; inset: 0; /* cinematic vignette + darken so embers read as glowing light */ background: radial-gradient(ellipse 90% 80% at 50% 45%, rgba(0,0,0,0.30) 0%, rgba(0,0,0,0.62) 100%), linear-gradient(to bottom, rgba(10,10,10,0.35) 0%, rgba(10,10,10,0.20) 45%, rgba(10,10,10,0.75) 100%); z-index: 0; pointer-events: none; } #hero-canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; pointer-events: none; z-index: 0; } .hero-bg { position: absolute; inset: 0; z-index: 1; pointer-events: none; } .hero-bg-glow { position: absolute; border-radius: 50%; filter: blur(140px); pointer-events: none; } .hero-bg-glow--red { width: 700px; height: 700px; background: radial-gradient(circle, rgba(204,34,0,0.18) 0%, transparent 65%); bottom: -15%; left: -8%; } .hero-bg-glow--orange { width: 500px; height: 500px; background: radial-gradient(circle, rgba(255,107,0,0.12) 0%, transparent 65%); top: 5%; right: -5%; } .hero-bg-glow--gold { width: 900px; height: 400px; background: radial-gradient(ellipse, rgba(201,168,76,0.06) 0%, transparent 60%); bottom: 0; left: 50%; transform: translateX(-50%); } .hero-bg-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,0.018) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.018) 1px, transparent 1px); background-size: 72px 72px; mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, black 20%, transparent 80%); -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, black 20%, transparent 80%); } .hero-content { position: relative; z-index: 10; text-align: center; padding: calc(var(--nav-height) + 20px) var(--gutter) 0; max-width: 1000px; width: 100%; } .hero-tagline { font-family: var(--font-display); font-size: clamp(40px, 7.2vw, 104px); font-weight: 400; letter-spacing: 0.04em; line-height: 0.98; text-transform: uppercase; text-align: center; margin-bottom: 48px; /* No entrance animation: the loader overlay IS the reveal. Painting immediately keeps LCP fast (the H1 is the LCP element). */ /* Clean, premium — crisp type with a soft depth shadow + gold underglow */ color: #faf8f4; text-shadow: 0 2px 24px rgba(0, 0, 0, 0.55), 0 0 48px rgba(201, 168, 76, 0.12); } .hero-tagline .tagline-accent { display: block; font-style: italic; font-family: var(--font-serif); font-size: clamp(22px, 2.6vw, 40px); font-weight: 400; text-transform: none; letter-spacing: 0; line-height: 1.3; margin-top: 14px; /* Refined gold gradient fill */ background: linear-gradient(135deg, #e8cd7e 0%, #c9a84c 55%, #b8902f 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; filter: drop-shadow(0 1px 10px rgba(201, 168, 76, 0.25)); } .hero-eyebrow { font-size: 10px; font-weight: 600; letter-spacing: 0.35em; text-transform: uppercase; color: var(--gold); margin-bottom: 28px; display: block; opacity: 0; animation: heroFadeUp 0.8s ease 1.35s forwards; } @keyframes heroFadeUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } .hero-heading { font-family: var(--font-display); font-size: clamp(64px, 11vw, 140px); line-height: 0.92; letter-spacing: 0.01em; text-transform: uppercase; margin-bottom: 28px; display: flex; flex-direction: column; gap: 0; } .hero-line { display: block; overflow: hidden; padding-bottom: 0.05em; } .hero-line--accent { color: transparent; -webkit-text-stroke: 1.5px rgba(201,168,76,0.8); } .hero-sub { font-size: clamp(16px, 2vw, 22px); letter-spacing: 0.1em; color: var(--text-muted); margin-bottom: 48px; font-weight: 300; opacity: 0; animation: heroFadeUp 0.8s ease 1.55s forwards; } .hero-ctas { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; opacity: 0; animation: heroFadeUp 0.8s ease 1.7s forwards; } .hero-micro { margin-top: 32px; font-size: 9px; letter-spacing: 0.35em; text-transform: uppercase; color: var(--text-dim); opacity: 0; animation: heroFadeUp 0.8s ease 1.85s forwards; } /* Scroll indicator */ .hero-scroll { position: absolute; bottom: 36px; left: 50%; transform: translateX(-50%); z-index: 10; display: flex; flex-direction: column; align-items: center; gap: 10px; opacity: 0; animation: heroFadeUp 0.8s ease 2.05s forwards; } .hero-scroll span { font-size: 8px; letter-spacing: 0.4em; text-transform: uppercase; color: var(--text-dim); } .scroll-line { width: 1px; height: 48px; background: linear-gradient(to bottom, var(--gold), transparent); animation: scrollPulse 2.2s ease-in-out infinite; } @keyframes scrollPulse { 0%, 100% { opacity: 0.4; transform: scaleY(0.8); } 50% { opacity: 1; transform: scaleY(1); } } /* ============================================================ BUTTONS ============================================================ */ .btn { display: inline-flex; align-items: center; gap: 10px; padding: 15px 36px; font-size: 10px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; font-family: var(--font-body); transition: all 0.3s ease; white-space: nowrap; position: relative; overflow: hidden; min-height: 50px; } .btn-primary { border: 1px solid var(--text); color: var(--text); background: transparent; } .btn-primary::before { content: ''; position: absolute; inset: 0; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform 0.35s cubic-bezier(0.76, 0, 0.24, 1); z-index: 0; } .btn-primary:hover::before { transform: scaleX(1); } .btn-primary:hover { color: var(--bg); border-color: var(--gold); } .btn-primary > * { position: relative; z-index: 1; } .btn-outline { border: 1px solid var(--border-mid); color: var(--text-muted); background: transparent; } .btn-outline:hover { border-color: var(--text-muted); color: var(--text); background: rgba(255,255,255,0.04); } /* ============================================================ MARQUEE ============================================================ */ .marquee-wrap { overflow: hidden; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 16px 0; background: var(--bg-2); /* Edge fade */ -webkit-mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%); mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%); } .marquee-track { display: flex; width: max-content; animation: marqueeForward 36s linear infinite; } .marquee-track--reverse { animation-direction: reverse; animation-duration: 28s; } .marquee-inner { font-size: 10px; font-weight: 600; letter-spacing: 0.25em; text-transform: uppercase; color: var(--text-dim); white-space: nowrap; padding-right: 0; } .marquee-inner .dot { color: var(--gold); margin: 0 20px; } @keyframes marqueeForward { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* ============================================================ SECTION TYPOGRAPHY ============================================================ */ .section-label { font-size: 9px; font-weight: 600; letter-spacing: 0.4em; text-transform: uppercase; color: var(--gold); margin-bottom: 16px; display: block; } .section-heading { font-family: var(--font-display); font-size: clamp(40px, 6vw, 80px); letter-spacing: 0.02em; text-transform: uppercase; line-height: 0.95; } /* ============================================================ PRODUCT GRID — THE DROP ============================================================ */ .drop-section { padding: 96px 0 120px; } .drop-header { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 56px; } .view-all { font-size: 10px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-muted); display: inline-flex; align-items: center; gap: 8px; transition: color 0.25s; padding-bottom: 4px; border-bottom: 1px solid var(--border-mid); } .view-all span { transition: transform 0.25s; } .view-all:hover { color: var(--text); } .view-all:hover span { transform: translateX(4px); } .product-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .product-card { display: block; cursor: pointer; position: relative; } .product-img-wrap { aspect-ratio: 3 / 4; overflow: hidden; background: var(--bg-3); margin-bottom: 16px; position: relative; border: 1px solid var(--border); transition: border-color 0.35s ease, transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); } .product-img-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94); display: block; } .product-img-wrap--placeholder { display: flex; align-items: center; justify-content: center; background: var(--bg-3); } .product-placeholder-name { font-family: var(--font-display); font-size: clamp(28px, 6vw, 48px); color: rgba(255, 255, 255, 0.08); letter-spacing: 0.1em; text-transform: uppercase; user-select: none; pointer-events: none; } .product-hover-overlay { position: absolute; inset: 0; background: rgba(10,10,10,0.7); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.35s ease; z-index: 2; } .product-hover-overlay span { font-size: 9px; font-weight: 700; letter-spacing: 0.3em; text-transform: uppercase; color: var(--gold); border-bottom: 1px solid var(--gold); padding-bottom: 3px; } .product-card:hover .product-img-wrap { border-color: var(--gold); transform: translateY(-8px); } .product-card:hover .product-img-wrap img { transform: scale(1.05); } .product-card:hover .product-hover-overlay { opacity: 1; } .product-card:hover .product-name { color: var(--gold); transform: translateY(-2px); } .product-info { padding: 0; } .product-number { font-family: var(--font-display); font-size: 11px; letter-spacing: 0.15em; color: var(--text-dim); display: block; margin-bottom: 4px; } .product-name { font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 5px; transition: color 0.25s, transform 0.25s; display: block; } .product-fit { font-size: 10px; color: var(--text-dim); letter-spacing: 0.05em; margin-bottom: 10px; } .product-price { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 500; } .price-current { color: var(--gold); } .price-original { color: var(--text-dim); text-decoration: line-through; font-size: 11px; } .price-sale { color: #e05c5c; font-weight: 600; } .badge-sale { font-size: 8px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; background: #e05c5c; color: white; padding: 2px 7px; } /* ============================================================ CREATURES SECTION ============================================================ */ .creatures-section { background: var(--bg-2); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } .creatures-header { padding: 96px var(--gutter) 48px; } .creature-row { display: grid; grid-template-columns: 1fr 1fr; min-height: 55vh; border-top: 1px solid var(--border); } .creature-left { display: flex; align-items: center; justify-content: center; padding: 80px var(--gutter); border-right: 1px solid var(--border); background: var(--bg); position: relative; overflow: hidden; } .creature-number-bg { position: absolute; font-family: var(--font-display); font-size: clamp(140px, 20vw, 240px); letter-spacing: 0.02em; text-transform: uppercase; color: rgba(255,255,255,0.025); pointer-events: none; user-select: none; line-height: 1; left: 50%; top: 50%; transform: translate(-50%, -50%); white-space: nowrap; } .creature-name { font-family: var(--font-display); font-size: clamp(52px, 8vw, 120px); letter-spacing: 0.02em; text-transform: uppercase; line-height: 0.9; text-align: center; position: relative; z-index: 1; white-space: nowrap; /* never break a word mid-letter */ } /* Long multi-word names (e.g. Wings of Change) — fit on one line */ .creature-name--long { font-size: clamp(34px, 5vw, 80px); word-spacing: 0.32em; /* clear, even gaps between words */ } .creature-right { display: flex; flex-direction: column; justify-content: center; padding: 80px 72px; } .creature-tag { font-size: 9px; letter-spacing: 0.4em; color: var(--gold); text-transform: uppercase; margin-bottom: 24px; font-weight: 600; } .creature-desc { font-size: 15px; line-height: 1.85; color: var(--text-muted); max-width: 440px; margin-bottom: 44px; font-weight: 300; } .creature-link { font-size: 10px; font-weight: 600; letter-spacing: 0.25em; text-transform: uppercase; color: var(--text); display: inline-flex; align-items: center; gap: 12px; border-bottom: 1px solid var(--border-mid); padding-bottom: 5px; width: fit-content; transition: color 0.25s, gap 0.25s, border-color 0.25s; } .creature-link span { transition: transform 0.25s; } .creature-link:hover { color: var(--gold); border-color: var(--gold); gap: 18px; } .creature-link:hover span { transform: translateX(4px); } /* ============================================================ BRAND STORY ============================================================ */ .brand-story { padding: 130px 0; background: var(--bg); position: relative; overflow: hidden; } .brand-story::before { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 600px; height: 600px; background: radial-gradient(circle, rgba(201,168,76,0.04) 0%, transparent 60%); pointer-events: none; } .brand-story-inner { max-width: 700px; margin: 0 auto; text-align: center; } .brand-story-heading { font-family: var(--font-display); font-size: clamp(48px, 7vw, 88px); letter-spacing: 0.02em; text-transform: uppercase; line-height: 0.95; margin: 16px 0 36px; } .brand-story-body { font-size: 15px; line-height: 1.9; color: var(--text-muted); margin-bottom: 56px; font-weight: 300; } /* Stats */ .rc-stats-row { display: flex; align-items: center; justify-content: center; gap: 0; margin: 0 auto 56px; flex-wrap: wrap; } .rc-stat { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 0 36px; } .rc-stat-divider { width: 1px; height: 48px; background: var(--border-mid); flex-shrink: 0; } .rc-stat-number { font-family: var(--font-display); font-size: clamp(40px, 5.5vw, 64px); letter-spacing: 0.03em; color: var(--gold); line-height: 1; } .rc-stat-label { font-size: 8px; font-weight: 600; letter-spacing: 0.3em; text-transform: uppercase; color: var(--text-dim); } /* ============================================================ FOOTER ============================================================ */ .footer { background: var(--bg-2); padding: 60px 0 32px; position: relative; } .footer-gold-line { height: 1px; background: linear-gradient(to right, transparent, var(--gold), transparent); } .footer-top { display: grid; grid-template-columns: 1fr auto 1fr; align-items: start; gap: 48px; padding: 48px 0 40px; border-bottom: 1px solid var(--border); } .footer-logo-wrap { display: flex; flex-direction: column; gap: 12px; } .footer-logo { height: 48px; width: auto; object-fit: contain; filter: drop-shadow(0 0 8px rgba(201,168,76,0.3)); } .footer-tagline { font-size: 11px; color: var(--text-dim); letter-spacing: 0.05em; font-style: italic; line-height: 1.5; } .footer-nav { display: flex; flex-direction: column; gap: 14px; align-items: center; } .footer-nav a { font-size: 10px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-dim); transition: color 0.2s; } .footer-nav a:hover { color: var(--text); } .footer-social { display: flex; justify-content: flex-end; align-items: flex-start; } .footer-social-link { font-size: 10px; letter-spacing: 0.12em; color: var(--text-muted); transition: color 0.2s; display: flex; align-items: center; gap: 10px; text-transform: uppercase; font-weight: 600; } .footer-social-link:hover { color: var(--gold); } .footer-social-link svg { width: 18px; height: 18px; } .footer-bottom { display: flex; align-items: center; justify-content: space-between; padding-top: 24px; } .footer-copy { font-size: 10px; color: var(--text-dim); letter-spacing: 0.06em; } /* ============================================================ SCROLL REVEAL — base states (GSAP sets actual values) ============================================================ */ .scroll-reveal { transform: translateY(0); } [data-card] { transform: translateY(0); } /* ============================================================ PRODUCTS PAGE ============================================================ */ .page-header { padding: calc(var(--nav-height) + 72px) var(--gutter) 56px; border-bottom: 1px solid var(--border); } .page-header-heading { font-family: var(--font-display); font-size: clamp(56px, 8vw, 110px); letter-spacing: 0.02em; text-transform: uppercase; line-height: 0.95; margin-bottom: 16px; } .page-header-sub { font-size: 13px; color: var(--text-muted); letter-spacing: 0.08em; } .filter-bar { display: flex; align-items: center; padding: 20px 0; border-bottom: 1px solid var(--border); margin-bottom: 56px; overflow-x: auto; gap: 0; } .filter-btn { font-size: 10px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-muted); padding: 10px 20px; border: 1px solid transparent; transition: all 0.2s; white-space: nowrap; background: none; min-height: 44px; } .filter-btn:hover { color: var(--text); } .filter-btn.active { border-color: var(--border-mid); color: var(--text); background: var(--bg-3); } .products-section { padding: 0 0 120px; } /* ============================================================ PRODUCT DETAIL PAGE ============================================================ */ .product-detail { padding-top: var(--nav-height); min-height: 100vh; } .product-layout { display: grid; grid-template-columns: 3fr 2fr; min-height: calc(100vh - var(--nav-height)); } .product-gallery { position: sticky; top: var(--nav-height); height: calc(100vh - var(--nav-height)); overflow: hidden; background: var(--bg-3); } .product-gallery img { width: 100%; height: 100%; object-fit: cover; } .product-gallery-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; flex-direction: column; position: relative; } .gallery-bg-text { position: absolute; font-family: var(--font-display); font-size: clamp(80px, 12vw, 180px); letter-spacing: 0.05em; text-transform: uppercase; color: rgba(255,255,255,0.03); pointer-events: none; user-select: none; } .gallery-label { font-family: var(--font-display); font-size: clamp(32px, 4vw, 52px); letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.4); position: relative; z-index: 1; } .gallery-sublabel { font-size: 11px; letter-spacing: 0.25em; text-transform: uppercase; color: var(--gold); margin-top: 12px; position: relative; z-index: 1; } .product-info-panel { padding: 56px 56px 72px; border-left: 1px solid var(--border); overflow-y: auto; } .breadcrumb { display: flex; align-items: center; gap: 8px; margin-bottom: 40px; } .breadcrumb a, .breadcrumb span { font-size: 10px; letter-spacing: 0.1em; color: var(--text-dim); text-transform: uppercase; } .breadcrumb a:hover { color: var(--text); } .breadcrumb .sep { color: var(--text-dim); } .product-detail-name { font-family: var(--font-display); font-size: clamp(44px, 4.5vw, 72px); letter-spacing: 0.03em; text-transform: uppercase; line-height: 0.95; margin-bottom: 10px; } .product-detail-fit { font-size: 11px; color: var(--text-muted); letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 28px; } .product-detail-price { display: flex; align-items: center; gap: 12px; margin-bottom: 36px; font-size: 24px; font-weight: 500; } .product-detail-price .price-current { color: var(--gold); } .product-detail-story { font-size: 14px; line-height: 1.9; color: var(--text-muted); margin-bottom: 40px; padding-bottom: 40px; border-bottom: 1px solid var(--border); font-weight: 300; } .option-label { font-size: 9px; font-weight: 600; letter-spacing: 0.25em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 14px; display: flex; align-items: center; gap: 10px; } .option-label .selected-val { color: var(--text); font-weight: 400; letter-spacing: 0.1em; } /* Colour swatches */ .swatches { display: flex; gap: 12px; margin-bottom: 32px; flex-wrap: wrap; } .swatch { width: 32px; height: 32px; border-radius: 50%; cursor: pointer; border: 2px solid transparent; transition: border-color 0.2s, transform 0.2s; position: relative; min-width: 44px; min-height: 44px; width: 44px; height: 44px; } .swatch:hover { transform: scale(1.1); } .swatch.active { border-color: var(--text); } .swatch-ivory { background: #f5f0e8; } .swatch-ashgrey { background: #8b8b8b; } .swatch-black { background: #111111; border: 2px solid #333; } .swatch-royalblue { background: #2140a0; } .swatch-white { background: #ffffff; } .swatch-navy { background: #1a2a4a; } .swatch-teal { background: #2a7a6a; } .swatch-red { background: #8a1a1a; } .swatch-cream { background: #f0e8d0; } .swatch-brown { background: #6b3a20; } .swatch-label { position: absolute; bottom: -20px; left: 50%; transform: translateX(-50%); font-size: 8px; white-space: nowrap; color: var(--text-dim); letter-spacing: 0.05em; opacity: 0; transition: opacity 0.2s; } .swatch:hover .swatch-label { opacity: 1; } /* Size pills */ .sizes { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 36px; } .size-btn { width: 52px; height: 44px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--border-mid); font-size: 10px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); cursor: pointer; transition: all 0.2s; background: none; } .size-btn:hover { border-color: var(--text); color: var(--text); } .size-btn.active { border-color: var(--text); background: var(--text); color: var(--bg); } .btn-cart { width: 100%; padding: 18px; background: var(--text); color: var(--bg); font-size: 10px; font-weight: 700; letter-spacing: 0.25em; text-transform: uppercase; border: none; cursor: pointer; transition: background 0.3s, color 0.3s; margin-bottom: 20px; display: flex; align-items: center; justify-content: center; gap: 12px; font-family: var(--font-body); } .btn-cart:hover { background: var(--gold); } .product-fabric { font-size: 10px; color: var(--text-dim); letter-spacing: 0.1em; text-align: center; margin-bottom: 40px; } /* Creature lore */ .creature-lore { padding: 96px var(--gutter); background: var(--bg-2); border-top: 1px solid var(--border); } .creature-lore-inner { max-width: var(--max-width); margin: 0 auto; display: grid; grid-template-columns: 1fr 2fr; gap: 80px; align-items: center; } .lore-heading { font-family: var(--font-display); font-size: clamp(52px, 7vw, 96px); letter-spacing: 0.02em; text-transform: uppercase; line-height: 0.95; } .lore-text { font-size: 16px; line-height: 1.9; color: var(--text-muted); font-weight: 300; } /* ============================================================ PAGES (size-guide, contact) ============================================================ */ .page-wrap { padding-top: var(--nav-height); min-height: 100vh; } /* ============================================================ RESPONSIVE — Tablet (1200px) ============================================================ */ @media (max-width: 1200px) { .product-grid { grid-template-columns: repeat(3, 1fr); } .footer-top { grid-template-columns: 1fr 1fr; } .footer-social { grid-column: 1 / -1; justify-content: flex-start; } } /* ============================================================ RESPONSIVE — Mobile (768px) ============================================================ */ @media (max-width: 768px) { :root { --gutter: 20px; --nav-height: 60px; } /* Nav */ .nav-left .nav-link { display: none; } .nav-right .nav-icon { display: none; } .nav-hamburger { display: flex; } /* Hero */ .hero-heading { font-size: clamp(56px, 14vw, 80px); } .hero-ctas { flex-direction: column; align-items: center; } .btn { min-height: 52px; width: 100%; max-width: 320px; justify-content: center; } .hero-micro { display: none; } /* Product grid */ .product-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; } .drop-header { flex-direction: column; align-items: flex-start; gap: 16px; margin-bottom: 36px; } .drop-section { padding: 72px 0 88px; } /* Creatures */ .creatures-header { padding: 72px var(--gutter) 36px; } .creature-row { grid-template-columns: 1fr; min-height: auto; } .creature-left { padding: 56px var(--gutter); border-right: none; border-bottom: 1px solid var(--border); } .creature-right { padding: 48px var(--gutter); } .creature-desc { max-width: none; } /* Brand story */ .brand-story { padding: 96px 0; } .rc-stats-row { gap: 0; } .rc-stat { padding: 0 20px; } /* Footer */ .footer-top { grid-template-columns: 1fr; text-align: center; } .footer-logo-wrap { align-items: center; } .footer-nav { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 20px; } .footer-social { justify-content: center; } .footer-bottom { flex-direction: column; gap: 8px; text-align: center; } /* Product detail */ .product-layout { grid-template-columns: 1fr; } .product-gallery { position: relative; height: 70vw; top: 0; } .product-info-panel { padding: 36px var(--gutter) 72px; border-left: none; border-top: 1px solid var(--border); } .creature-lore-inner { grid-template-columns: 1fr; gap: 40px; } } /* ============================================================ RESPONSIVE — Small mobile (480px) ============================================================ */ @media (max-width: 480px) { :root { --gutter: 16px; --nav-height: 56px; } .hero-heading { font-size: 56px; } .hero-eyebrow { font-size: 9px; letter-spacing: 0.2em; } .hero-sub { font-size: 15px; } .hero-scroll { display: none; } .product-grid { grid-template-columns: 1fr; } .rc-stat-divider { display: none; } .rc-stats-row { gap: 24px; flex-direction: column; } .rc-stat { padding: 0; } .footer { padding: 40px 0 24px; } .footer-top { padding: 36px 0 28px; gap: 28px; } .footer-nav { gap: 14px; } .marquee-inner { font-size: 9px; letter-spacing: 0.2em; } .nav-mobile .nav-link { padding: 14px 0; min-height: 48px; display: flex; align-items: center; } .view-all { min-height: 44px; display: inline-flex; align-items: center; } .creature-link { min-height: 44px; align-items: center; } .product-gallery { height: 80vw; } .product-info-panel { padding: 28px var(--gutter) 60px; } .size-btn { min-width: 48px; min-height: 44px; height: 44px; } .filter-btn { min-height: 44px; } } /* Highborn placeholder */ .product-img-placeholder { width: 100%; aspect-ratio: 3/4; background: #111; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 32px; color: rgba(255,255,255,0.06); letter-spacing: 4px; text-transform: uppercase; } /* ============================================================ ANNOUNCEMENT BAR ============================================================ */ .announcement-bar { position: fixed; top: 0; left: 0; right: 0; height: 36px; background: linear-gradient(90deg, #1a0e00 0%, #2a1500 40%, #1a0e00 100%); border-bottom: 1px solid rgba(201,168,76,0.2); z-index: 600; overflow: hidden; display: flex; align-items: center; } .announcement-bar-track { display: flex; align-items: center; gap: 0; white-space: nowrap; animation: annMarquee 22s linear infinite; font-size: 9px; font-weight: 700; letter-spacing: 0.28em; text-transform: uppercase; color: rgba(255,255,255,0.75); } .announcement-bar-track span { padding: 0 2px; } .ann-dot { color: var(--gold); margin: 0 16px; } @keyframes annMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* Shift everything down when announcement bar is present */ .navbar { top: 36px; } .hero { padding-top: 36px; } /* ============================================================ NAVBAR — CENTER LAYOUT ============================================================ */ .nav-center { display: flex; align-items: center; gap: 36px; position: absolute; left: 50%; transform: translateX(-50%); } .nav-container { position: relative; } /* ============================================================ PRODUCT BADGES ============================================================ */ .product-badge { font-size: 8px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; padding: 2px 7px; display: inline-block; } .badge-drop { background: rgba(201,168,76,0.15); color: var(--gold); border: 1px solid rgba(201,168,76,0.3); } .badge-sale { background: #e05c5c; color: white; } /* ============================================================ FEATURE STRIP ============================================================ */ .feature-strip { background: var(--bg-3); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 0; } .feature-strip-inner { max-width: var(--max-width); margin: 0 auto; padding: 0 var(--gutter); display: flex; align-items: stretch; } .feature-item { display: flex; align-items: center; gap: 18px; flex: 1; padding: 28px 32px; } .feature-icon { font-size: 22px; flex-shrink: 0; line-height: 1; opacity: 0.7; } .feature-title { font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text); margin-bottom: 4px; } .feature-sub { font-size: 10px; color: var(--text-dim); letter-spacing: 0.05em; } .feature-divider { width: 1px; background: var(--border); flex-shrink: 0; align-self: stretch; } /* ============================================================ INSTAGRAM SECTION ============================================================ */ .instagram-section { padding: 96px 0 120px; background: var(--bg-2); border-top: 1px solid var(--border); } .instagram-header { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 48px; } .instagram-handle { font-size: 12px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); transition: color 0.2s; padding-bottom: 4px; border-bottom: 1px solid rgba(201,168,76,0.3); } .instagram-handle:hover { color: var(--gold-light); } .instagram-grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 1fr); gap: 4px; margin-bottom: 48px; } .instagram-cell { aspect-ratio: 1 / 1; background: var(--bg-4); border: 1px solid var(--border); display: block; overflow: hidden; transition: border-color 0.3s; } .instagram-cell:hover { border-color: rgba(201,168,76,0.4); } .instagram-cell-inner { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 20px; } .insta-watermark { height: 36px; width: auto; opacity: 0.12; filter: grayscale(1); pointer-events: none; } .instagram-cell:hover .insta-watermark { opacity: 0.22; } .insta-label { font-size: 8px; letter-spacing: 0.15em; color: var(--text-dim); text-transform: uppercase; text-align: center; } .instagram-subheading { font-size: 13px; color: var(--text-dim); margin-top: 8px; letter-spacing: 0.02em; } /* Insta card — enhanced placeholder cells */ .insta-card { position: relative; background: #111; border: 1px solid rgba(255,255,255,0.07); transition: border-color 0.3s, transform 0.3s; } .insta-card:hover { border-color: rgba(201,168,76,0.45); transform: scale(1.015); } .insta-card-inner { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; } .insta-card-logo { height: 32px; width: auto; opacity: 0.18; filter: drop-shadow(0 0 8px rgba(201,168,76,0.5)); transition: opacity 0.3s, filter 0.3s; pointer-events: none; } .insta-card:hover .insta-card-logo { opacity: 0.08; filter: drop-shadow(0 0 12px rgba(201,168,76,0.7)); } .insta-card-hover { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; opacity: 0; transition: opacity 0.3s; } .insta-card:hover .insta-card-hover { opacity: 1; } .insta-icon { color: var(--gold); } .insta-card-handle { font-size: 11px; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: var(--gold); } .insta-corner-icon { position: absolute; top: 10px; right: 10px; color: rgba(255,255,255,0.2); transition: color 0.3s; } .insta-card:hover .insta-corner-icon { color: rgba(201,168,76,0.6); } /* Dynamic insta card — API-fed grid */ .insta-card img { width: 100%; height: 100%; object-fit: cover; display: block; } .insta-card-inner { position: relative; width: 100%; height: 100%; overflow: hidden; } .insta-card-overlay { position: absolute; bottom: 0; left: 0; right: 0; padding: 12px; background: linear-gradient(to top, rgba(0,0,0,0.85), transparent); opacity: 0; transition: opacity 0.3s; } .insta-card:hover .insta-card-overlay { opacity: 1; } .insta-caption { font-size: 10px; color: #fff; line-height: 1.4; margin-bottom: 4px; } .insta-likes { font-size: 9px; color: var(--gold); letter-spacing: 0.1em; } .insta-reel-badge { position: absolute; top: 8px; right: 8px; background: rgba(201,168,76,0.9); color: #000; font-size: 8px; font-weight: 700; letter-spacing: 0.1em; padding: 3px 7px; border-radius: 2px; display: flex; align-items: center; gap: 4px; } .instagram-cta { display: flex; flex-direction: column; align-items: center; gap: 16px; } .insta-tag-note { font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-dim); } /* ============================================================ FOOTER — 3-COLUMN REWRITE ============================================================ */ .footer-top { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 64px; padding: 56px 0 48px; border-bottom: 1px solid var(--border); } .footer-col { display: flex; flex-direction: column; gap: 0; } .footer-col--brand { gap: 16px; } .footer-founded { font-size: 10px; color: var(--text-dim); letter-spacing: 0.06em; margin-top: 4px; } .footer-col-heading { font-size: 9px; font-weight: 700; letter-spacing: 0.35em; text-transform: uppercase; color: var(--gold); margin-bottom: 20px; } .footer-link { font-size: 11px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-dim); transition: color 0.2s; padding: 6px 0; display: block; border-bottom: 1px solid transparent; transition: color 0.2s, border-color 0.2s; } .footer-link:hover { color: var(--text); border-bottom-color: var(--border); } .footer-bottom { display: flex; align-items: center; justify-content: space-between; padding-top: 28px; gap: 16px; } /* ============================================================ RESPONSIVE — Feature strip, instagram, footer (1200px) ============================================================ */ @media (max-width: 1200px) { .footer-top { grid-template-columns: 1fr 1fr 1fr; gap: 40px; } } /* ============================================================ RESPONSIVE — Tablet (768px) additions ============================================================ */ @media (max-width: 768px) { .announcement-bar { height: 30px; } .navbar { top: 30px; } .hero { padding-top: 30px; } .announcement-bar-track { font-size: 8px; letter-spacing: 0.18em; } .ann-dot { margin: 0 10px; } .nav-center { display: none; } .feature-strip-inner { flex-wrap: wrap; } .feature-item { flex: 1 1 calc(50% - 1px); min-width: 0; padding: 20px; } .feature-divider { display: none; } .instagram-header { flex-direction: column; align-items: flex-start; gap: 12px; } .instagram-grid { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(3, 1fr); } .footer-top { grid-template-columns: 1fr 1fr; gap: 32px; } .footer-col--brand { grid-column: 1 / -1; } .footer-bottom { flex-direction: column; text-align: center; gap: 6px; } } /* ============================================================ RESPONSIVE — Small mobile (480px) additions ============================================================ */ @media (max-width: 480px) { .feature-item { flex: 1 1 100%; border-bottom: 1px solid var(--border); padding: 18px 0; } .instagram-grid { gap: 3px; } .footer-top { grid-template-columns: 1fr; } .footer-col--brand { grid-column: auto; } } /* ============================================================ PRODUCT DETAIL PAGE — Premium ============================================================ */ /* Page layout */ .product-detail-page { padding-top: var(--nav-height); min-height: 100vh; } /* Two-column layout */ .product-detail-layout { display: grid; grid-template-columns: 55% 45%; min-height: calc(100vh - var(--nav-height)); border-bottom: 1px solid var(--border); } /* GALLERY — LEFT COLUMN */ .product-gallery-panel { position: sticky; top: var(--nav-height); height: calc(100vh - var(--nav-height)); display: flex; flex-direction: column; gap: 0; background: var(--bg-3); border-right: 1px solid var(--border); overflow: hidden; } .product-gallery-main-wrap { flex: 1; overflow: hidden; position: relative; display: flex; align-items: center; justify-content: center; padding: 24px; } .product-gallery-main-wrap img { width: 100%; height: 100%; object-fit: contain; /* show the ENTIRE photo, no cropping */ display: block; transition: transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.3s ease; cursor: zoom-in; } .product-gallery-main-wrap img:hover { transform: scale(1.03); } /* Gallery zoom overlay */ .gallery-zoom-hint { position: absolute; bottom: 16px; right: 16px; font-size: 8px; letter-spacing: 0.3em; text-transform: uppercase; color: rgba(255,255,255,0.4); display: flex; align-items: center; gap: 6px; pointer-events: none; } .gallery-zoom-hint svg { width: 12px; height: 12px; } /* Thumbnail strip */ .product-gallery-thumbs { display: flex; gap: 1px; height: 88px; flex-shrink: 0; border-top: 1px solid var(--border); } .product-gallery-thumb { flex: 1; overflow: hidden; cursor: pointer; opacity: 0.4; transition: opacity 0.25s ease; position: relative; } .product-gallery-thumb:hover { opacity: 0.75; } .product-gallery-thumb.active { opacity: 1; } .product-gallery-thumb.active::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 2px; background: var(--gold); } .product-gallery-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s ease; } .product-gallery-thumb:hover img { transform: scale(1.08); } /* INFO — RIGHT COLUMN */ .product-info-panel { padding: 64px 56px; overflow-y: auto; display: flex; flex-direction: column; } /* Breadcrumb */ .product-breadcrumb { display: flex; align-items: center; gap: 10px; font-size: 9px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 40px; } .product-breadcrumb a { transition: color 0.2s; } .product-breadcrumb a:hover { color: var(--gold); } .product-breadcrumb .sep { color: var(--border-mid); } .product-breadcrumb .current { color: var(--text-muted); } /* Creature number */ .product-creature-number { font-size: 9px; font-weight: 600; letter-spacing: 0.4em; text-transform: uppercase; color: var(--gold); margin-bottom: 12px; } /* Product name */ .product-detail-title { font-family: var(--font-display); font-size: clamp(48px, 5vw, 72px); letter-spacing: 0.04em; text-transform: uppercase; line-height: 0.92; margin-bottom: 8px; } /* Subtitle */ .product-detail-subtitle { font-size: 10px; color: var(--text-dim); letter-spacing: 0.15em; text-transform: uppercase; margin-bottom: 28px; } /* Price */ .product-detail-price-row { display: flex; align-items: center; gap: 12px; margin-bottom: 28px; } .product-detail-price-main { font-family: var(--font-display); font-size: 32px; color: var(--gold); letter-spacing: 0.03em; } .product-detail-price-original { font-size: 16px; color: var(--text-dim); text-decoration: line-through; } .product-detail-price-badge { font-size: 8px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; background: var(--gold); color: var(--bg); padding: 4px 10px; } /* Story */ .product-detail-story { font-size: 13px; line-height: 1.9; color: var(--text-muted); margin-bottom: 40px; padding-bottom: 40px; border-bottom: 1px solid var(--border); font-weight: 300; letter-spacing: 0.02em; } /* Options */ .product-option-group { margin-bottom: 28px; } .product-option-label { font-size: 9px; font-weight: 600; letter-spacing: 0.3em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 14px; display: flex; align-items: center; gap: 8px; } .product-option-label .selected-option { color: var(--text); font-weight: 400; letter-spacing: 0.1em; } /* Colour swatches */ .product-swatches { display: flex; gap: 8px; flex-wrap: wrap; } .product-swatch { width: 32px; height: 32px; border-radius: 50%; cursor: pointer; border: 2px solid transparent; transition: border-color 0.2s, transform 0.2s; position: relative; } .product-swatch:hover { transform: scale(1.1); } .product-swatch.active { border-color: var(--gold); outline: 1px solid var(--gold); outline-offset: 3px; } .swatch--ivory { background: #F5F0E8; } .swatch--ash-grey { background: #8B8B8B; } .swatch--black { background: #111111; border: 1px solid #333; } .swatch--royal-blue { background: #2A52BE; } .swatch--white { background: #F8F8F8; border: 1px solid #333; } .swatch--navy { background: #1A2B4A; } .swatch--teal { background: #2B7A78; } .swatch--red { background: #CC2200; } .swatch--cream { background: #F2EDD7; } .swatch--brown { background: #5C3A1E; } .swatch--teal-blue { background: #0E7490; } /* Size buttons */ .product-sizes { display: flex; gap: 6px; flex-wrap: wrap; } .product-size-btn { min-width: 52px; height: 44px; border: 1px solid var(--border-mid); background: transparent; color: var(--text-muted); font-size: 10px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; transition: border-color 0.2s, color 0.2s, background 0.2s; font-family: var(--font-body); padding: 0 8px; } .product-size-btn:hover { border-color: var(--text-muted); color: var(--text); } .product-size-btn.active { border-color: var(--gold); color: var(--bg); background: var(--gold); } .product-size-btn.sold-out { opacity: 0.3; cursor: not-allowed; text-decoration: line-through; } /* Size guide link */ .size-guide-link { font-size: 9px; color: var(--text-dim); letter-spacing: 0.15em; text-transform: uppercase; text-decoration: underline; text-decoration-color: var(--border-mid); text-underline-offset: 4px; margin-top: 10px; display: inline-block; transition: color 0.2s; } .size-guide-link:hover { color: var(--gold); } /* CTA buttons */ .product-ctas { display: flex; flex-direction: column; gap: 10px; margin: 32px 0; } .btn-add-to-cart { width: 100%; height: 56px; background: var(--gold); color: var(--bg); font-size: 10px; font-weight: 700; letter-spacing: 0.25em; text-transform: uppercase; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 12px; font-family: var(--font-body); transition: background 0.25s, color 0.25s, transform 0.2s; text-decoration: none; position: relative; overflow: hidden; } .btn-add-to-cart::before { content: ''; position: absolute; inset: 0; background: rgba(255,255,255,0.15); transform: translateX(-100%); transition: transform 0.4s ease; } .btn-add-to-cart:hover::before { transform: translateX(0); } .btn-add-to-cart:active { transform: scale(0.98); } .btn-buy-now { width: 100%; height: 52px; background: transparent; color: var(--text); font-size: 10px; font-weight: 600; letter-spacing: 0.25em; text-transform: uppercase; border: 1px solid var(--border-mid); cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 12px; font-family: var(--font-body); transition: border-color 0.25s, color 0.25s; text-decoration: none; } .btn-buy-now:hover { border-color: var(--text-muted); color: var(--text); } /* Fabric pills */ .product-fabric-pills { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 32px; } .fabric-pill { font-size: 8px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-dim); border: 1px solid var(--border); padding: 5px 12px; } /* Accordion details */ .product-accordion { border-top: 1px solid var(--border); margin-top: 0; } .accordion-item { border-bottom: 1px solid var(--border); } .accordion-trigger { width: 100%; padding: 18px 0; display: flex; align-items: center; justify-content: space-between; font-size: 9px; font-weight: 700; letter-spacing: 0.25em; text-transform: uppercase; color: var(--text-muted); cursor: pointer; background: none; border: none; font-family: var(--font-body); text-align: left; transition: color 0.2s; } .accordion-trigger:hover { color: var(--text); } .accordion-trigger svg { width: 12px; height: 12px; transition: transform 0.3s ease; flex-shrink: 0; } .accordion-trigger[aria-expanded="true"] { color: var(--text); } .accordion-trigger[aria-expanded="true"] svg { transform: rotate(45deg); } .accordion-body { display: none; padding: 0 0 20px; } .accordion-body.open { display: block; } .accordion-body ul { display: flex; flex-direction: column; gap: 8px; } .accordion-body li { font-size: 12px; line-height: 1.7; color: var(--text-dim); letter-spacing: 0.03em; display: flex; align-items: flex-start; gap: 10px; } .accordion-body li::before { content: '—'; color: var(--gold); flex-shrink: 0; margin-top: 1px; } /* Creature lore section (below fold) */ .product-lore-section { padding: 120px 0; background: var(--bg-2); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } .product-lore-inner { max-width: 700px; margin: 0 auto; text-align: center; padding: 0 var(--gutter); } .product-lore-number { font-size: 9px; letter-spacing: 0.45em; color: var(--gold); text-transform: uppercase; font-weight: 600; margin-bottom: 20px; } .product-lore-name { font-family: var(--font-display); font-size: clamp(52px, 8vw, 96px); letter-spacing: 0.04em; text-transform: uppercase; line-height: 0.9; margin-bottom: 36px; /* Readable soft-gold gradient fill (was invisible transparent outline) */ background: linear-gradient(180deg, #e8cd7e 0%, #c9a84c 60%, #a07f2e 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; text-shadow: 0 2px 30px rgba(201, 168, 76, 0.18); } .product-lore-text { font-family: var(--font-serif); font-size: clamp(18px, 2vw, 23px); font-style: italic; line-height: 1.85; color: #d6d3ce; font-weight: 400; letter-spacing: 0; } /* You may also like */ .product-related { padding: 96px 0 120px; } /* Mobile responsive for product detail */ @media (max-width: 900px) { .product-detail-layout { grid-template-columns: 1fr; min-height: unset; } .product-gallery-panel { position: relative; top: 0; height: 65vw; min-height: 320px; } .product-info-panel { padding: 40px var(--gutter); } .product-detail-title { font-size: clamp(40px, 8vw, 56px); } } /* Products listing page — premium upgrades */ .products-page-header { background: var(--bg-2); border-bottom: 1px solid var(--border); padding: 120px var(--gutter) 80px; text-align: center; } .products-page-header .section-label { margin-bottom: 16px; display: block; } .products-page-eyebrow { font-family: var(--font-display); font-size: clamp(72px, 12vw, 140px); letter-spacing: 0.04em; text-transform: uppercase; line-height: 0.88; margin-bottom: 20px; } .products-page-sub { font-size: 12px; color: var(--text-dim); letter-spacing: 0.15em; text-transform: uppercase; max-width: 500px; margin: 0 auto; } .filter-tabs { display: flex; gap: 2px; padding: 32px var(--gutter); border-bottom: 1px solid var(--border); overflow-x: auto; -webkit-overflow-scrolling: touch; } .filter-tab { font-size: 9px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-dim); background: none; border: 1px solid var(--border); padding: 10px 20px; cursor: pointer; transition: border-color 0.2s, color 0.2s, background 0.2s; font-family: var(--font-body); white-space: nowrap; } .filter-tab:hover { color: var(--text); border-color: var(--border-mid); } .filter-tab.active { border-color: var(--gold); color: var(--gold); background: rgba(201,168,76,0.06); } .products-grid-section { padding: 64px 0 120px; } .products-grid-section .product-grid { grid-template-columns: repeat(4, 1fr); } @media (max-width: 1100px) { .products-grid-section .product-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 700px) { .products-grid-section .product-grid { grid-template-columns: repeat(2, 1fr); } .products-page-eyebrow { font-size: clamp(52px, 14vw, 80px); } } /* ============================================================ CART DRAWER — Luxury bag (Phase 1) ============================================================ */ /* Cart count badge on nav cart icon */ .nav-icon { position: relative; } .cart-count { position: absolute; top: 2px; right: 2px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 9px; background: var(--gold); color: var(--bg); font-size: 9px; font-weight: 700; letter-spacing: 0.02em; display: flex; align-items: center; justify-content: center; line-height: 1; transform: scale(0); transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); pointer-events: none; } .cart-count.show { transform: scale(1); } /* Backdrop */ .cart-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); z-index: 998; opacity: 0; visibility: hidden; transition: opacity 0.5s ease, visibility 0.5s ease; } .cart-backdrop.open { opacity: 1; visibility: visible; } /* Drawer */ .cart-drawer { position: fixed; top: 0; right: 0; height: 100%; width: 440px; max-width: 92vw; background: var(--bg-2); border-left: 1px solid rgba(201, 168, 76, 0.18); z-index: 999; transform: translateX(100%); transition: transform 0.55s cubic-bezier(0.76, 0, 0.24, 1); display: flex; flex-direction: column; box-shadow: -30px 0 80px rgba(0, 0, 0, 0.6); } .cart-drawer.open { transform: translateX(0); } /* Header */ .cart-header { display: flex; align-items: center; justify-content: space-between; padding: 28px 28px 20px; border-bottom: 1px solid var(--border); flex-shrink: 0; } .cart-title { font-family: var(--font-display); font-size: 26px; letter-spacing: 0.06em; text-transform: uppercase; display: flex; align-items: baseline; gap: 10px; } .cart-title .cart-title-count { font-family: var(--font-body); font-size: 11px; font-weight: 600; letter-spacing: 0.1em; color: var(--gold); } .cart-close { background: none; border: none; color: var(--text-muted); cursor: pointer; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; transition: color 0.2s, transform 0.3s; } .cart-close:hover { color: var(--text); transform: rotate(90deg); } .cart-close svg { width: 18px; height: 18px; } /* Free shipping progress */ .cart-shipping { padding: 18px 28px; border-bottom: 1px solid var(--border); flex-shrink: 0; } .cart-shipping-label { font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 10px; } .cart-shipping-label b { color: var(--gold); font-weight: 600; } .cart-shipping-bar { height: 3px; background: var(--bg-4); border-radius: 2px; overflow: hidden; } .cart-shipping-fill { height: 100%; width: 0%; background: linear-gradient(to right, var(--gold), var(--gold-light)); border-radius: 2px; transition: width 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94); } /* Items list */ .cart-items { flex: 1; overflow-y: auto; padding: 8px 28px; scrollbar-width: thin; scrollbar-color: var(--border-mid) transparent; } .cart-items::-webkit-scrollbar { width: 4px; } .cart-items::-webkit-scrollbar-thumb { background: var(--border-mid); } .cart-line { display: grid; grid-template-columns: 72px 1fr; gap: 16px; padding: 22px 0; border-bottom: 1px solid var(--border); } .cart-line-img { width: 72px; height: 90px; object-fit: cover; background: var(--bg-3); border: 1px solid var(--border); } .cart-line-body { display: flex; flex-direction: column; gap: 4px; } .cart-line-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; } .cart-line-name { font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; } .cart-line-variant { font-size: 10px; color: var(--text-dim); letter-spacing: 0.05em; margin-bottom: 8px; } .cart-line-remove { background: none; border: none; color: var(--text-dim); cursor: pointer; font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; transition: color 0.2s; padding: 0; flex-shrink: 0; } .cart-line-remove:hover { color: #e05c5c; } .cart-line-bottom { display: flex; align-items: center; justify-content: space-between; margin-top: auto; } .cart-qty { display: flex; align-items: center; border: 1px solid var(--border-mid); } .cart-qty button { width: 28px; height: 28px; background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 14px; display: flex; align-items: center; justify-content: center; transition: color 0.2s, background 0.2s; } .cart-qty button:hover { color: var(--text); background: var(--bg-4); } .cart-qty span { min-width: 30px; text-align: center; font-size: 11px; font-weight: 600; } .cart-line-price { font-size: 12px; font-weight: 600; color: var(--gold); letter-spacing: 0.03em; } /* Empty state */ .cart-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 40px; gap: 18px; } .cart-empty svg { width: 40px; height: 40px; color: var(--text-dim); } .cart-empty-title { font-family: var(--font-display); font-size: 24px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-muted); } .cart-empty-text { font-size: 12px; color: var(--text-dim); letter-spacing: 0.04em; line-height: 1.6; max-width: 240px; } .cart-empty-cta { margin-top: 8px; font-size: 10px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold); border-bottom: 1px solid var(--gold); padding-bottom: 4px; cursor: pointer; background: none; border-top: none; border-left: none; border-right: none; } /* Footer */ .cart-footer { padding: 24px 28px; border-top: 1px solid var(--border); flex-shrink: 0; } .cart-subtotal { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 6px; } .cart-subtotal-label { font-size: 11px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-muted); } .cart-subtotal-value { font-family: var(--font-display); font-size: 26px; letter-spacing: 0.03em; color: var(--text); } .cart-tax-note { font-size: 9px; color: var(--text-dim); letter-spacing: 0.06em; margin-bottom: 18px; } .cart-checkout { width: 100%; height: 56px; background: var(--gold); color: var(--bg); font-size: 11px; font-weight: 700; letter-spacing: 0.25em; text-transform: uppercase; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 12px; font-family: var(--font-body); position: relative; overflow: hidden; transition: transform 0.2s; } .cart-checkout::before { content: ''; position: absolute; inset: 0; background: rgba(255, 255, 255, 0.18); transform: translateX(-100%); transition: transform 0.45s ease; } .cart-checkout:hover::before { transform: translateX(0); } .cart-checkout:active { transform: scale(0.98); } .cart-checkout > * { position: relative; z-index: 1; } .cart-continue { width: 100%; text-align: center; margin-top: 14px; font-size: 10px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-dim); background: none; border: none; cursor: pointer; transition: color 0.2s; } .cart-continue:hover { color: var(--text); } @media (max-width: 480px) { .cart-header { padding: 22px 20px 16px; } .cart-shipping, .cart-items, .cart-footer { padding-left: 20px; padding-right: 20px; } } /* ============================================================ PRODUCT CARD — HOVER IMAGE SWAP (Phase 1) ============================================================ */ .product-img-wrap .alt-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94); z-index: 1; } .product-card:hover .product-img-wrap .alt-img { opacity: 1; } /* Quick-add button on grid cards */ .quick-add { position: absolute; left: 12px; right: 12px; bottom: 12px; height: 42px; background: rgba(10, 10, 10, 0.82); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid rgba(201, 168, 76, 0.4); color: var(--text); font-size: 9px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; cursor: pointer; z-index: 3; opacity: 0; transform: translateY(10px); transition: opacity 0.3s ease, transform 0.3s ease, background 0.2s, color 0.2s; display: flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--font-body); } .product-card:hover .quick-add { opacity: 1; transform: translateY(0); } .quick-add:hover { background: var(--gold); color: var(--bg); border-color: var(--gold); } .quick-add svg { width: 13px; height: 13px; } @media (pointer: coarse) { .quick-add { opacity: 1; transform: translateY(0); } } @keyframes rcShake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-6px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(4px); } } /* ============================================================ REELS — real embedded Instagram reels ============================================================ */ .reels-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-bottom: 56px; } .reel-embed { position: relative; background: #000; border: 1px solid var(--border); overflow: hidden; transition: border-color 0.35s ease, transform 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.45s ease; } .reel-embed:hover { border-color: rgba(201, 168, 76, 0.5); transform: translateY(-6px); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5); } .reel-embed iframe { width: 100%; min-height: 680px; display: block; border: 0; background: #000; } @media (max-width: 900px) { .reels-grid { grid-template-columns: 1fr; max-width: 420px; margin-left: auto; margin-right: auto; } .reel-embed iframe { min-height: 640px; } } /* ============================================================ CHECKOUT PAGE ============================================================ */ .checkout-page { padding-top: calc(var(--nav-height) + 60px); padding-bottom: 100px; min-height: 100vh; } .checkout-layout { max-width: 1080px; margin: 0 auto; padding: 0 var(--gutter); display: grid; grid-template-columns: 1.25fr 1fr; gap: 72px; align-items: start; } .checkout-eyebrow { font-size: 10px; font-weight: 600; letter-spacing: 0.35em; text-transform: uppercase; color: var(--gold); margin-bottom: 14px; } .checkout-title { font-family: var(--font-display); font-size: clamp(40px, 5vw, 60px); letter-spacing: 0.03em; text-transform: uppercase; line-height: 0.95; margin-bottom: 40px; } /* Form */ .checkout-fieldset { border: none; margin-bottom: 34px; } .checkout-legend { font-size: 10px; font-weight: 700; letter-spacing: 0.25em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 18px; padding: 0; } .field { margin-bottom: 16px; display: flex; flex-direction: column; gap: 8px; } .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .field-row .field--pin { grid-column: auto; } @media (min-width: 640px) { .checkout-fieldset .field-row:has(.field--pin) { grid-template-columns: 1fr 1fr 0.8fr; } } .field label { font-size: 10px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-dim); } .field input { height: 50px; background: var(--bg-2); border: 1px solid var(--border-mid); color: var(--text); padding: 0 16px; font-family: var(--font-body); font-size: 14px; letter-spacing: 0.01em; transition: border-color 0.2s, background 0.2s; border-radius: 0; } .field input::placeholder { color: #5c5a57; } .field input:focus { outline: none; border-color: var(--gold); background: var(--bg-3); } .checkout-error { display: none; color: #e05c5c; font-size: 12px; letter-spacing: 0.02em; margin-bottom: 16px; padding: 12px 14px; border: 1px solid rgba(224, 92, 92, 0.3); background: rgba(224, 92, 92, 0.06); } .checkout-pay-btn { width: 100%; height: 58px; background: var(--gold); color: var(--bg); font-size: 11px; font-weight: 700; letter-spacing: 0.25em; text-transform: uppercase; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 12px; font-family: var(--font-body); transition: transform 0.2s, opacity 0.2s; margin-top: 8px; } .checkout-pay-btn:hover { transform: translateY(-1px); } .checkout-pay-btn:active { transform: scale(0.99); } .checkout-pay-btn:disabled { opacity: 0.6; cursor: wait; } .checkout-pay-btn.is-loading { opacity: 0.7; } .checkout-secure { display: flex; align-items: center; gap: 8px; justify-content: center; margin-top: 18px; font-size: 10px; letter-spacing: 0.06em; color: var(--text-dim); } .checkout-secure b { color: var(--text-muted); font-weight: 600; } /* Summary */ .checkout-summary { background: var(--bg-2); border: 1px solid var(--border); padding: 32px 28px; position: sticky; top: calc(var(--nav-height) + 24px); } .checkout-summary-title { font-size: 11px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 24px; } .checkout-line { display: grid; grid-template-columns: 56px 1fr auto; gap: 14px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--border); } .checkout-line-thumb { position: relative; width: 56px; height: 70px; } .checkout-line-thumb img { width: 100%; height: 100%; object-fit: cover; border: 1px solid var(--border); } .checkout-line-qty { position: absolute; top: -8px; right: -8px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: var(--gold); color: var(--bg); font-size: 10px; font-weight: 700; display: flex; align-items: center; justify-content: center; } .checkout-line-name { font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; display: block; } .checkout-line-variant { font-size: 10px; color: var(--text-dim); letter-spacing: 0.04em; } .checkout-line-price { font-size: 12px; font-weight: 600; color: var(--gold); } .checkout-totals { margin-top: 22px; } .checkout-total-row { display: flex; justify-content: space-between; align-items: baseline; font-size: 12px; letter-spacing: 0.04em; color: var(--text-muted); padding: 7px 0; } .checkout-total-row--grand { margin-top: 8px; padding-top: 18px; border-top: 1px solid var(--border); color: var(--text); } .checkout-total-row--grand span:first-child { font-size: 11px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; } .checkout-total-row--grand span:last-child { font-family: var(--font-display); font-size: 28px; letter-spacing: 0.03em; color: var(--text); } /* Empty + success */ .checkout-empty, .checkout-success { grid-column: 1 / -1; text-align: center; padding: 60px 20px; max-width: 520px; margin: 0 auto; } .checkout-empty p, .checkout-success-text { color: var(--text-muted); font-size: 14px; line-height: 1.7; margin-bottom: 28px; } .checkout-empty-cta { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold); border-bottom: 1px solid var(--gold); padding-bottom: 5px; } .checkout-success-mark { width: 72px; height: 72px; margin: 0 auto 28px; border: 1.5px solid var(--gold); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--gold); } .checkout-success-mark svg { width: 32px; height: 32px; } .checkout-success-id { font-size: 11px; letter-spacing: 0.08em; color: var(--text-dim); margin-bottom: 28px; } @media (max-width: 860px) { .checkout-layout { grid-template-columns: 1fr; gap: 44px; } .checkout-summary { position: relative; top: 0; order: -1; } } /* ============================================================ REDUCED MOTION — respect the user's 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; } .marquee-track, .announcement-bar-track { animation: none !important; } #rc-cursor, #rc-cursor-follower { display: none !important; } .hero-tagline, .hero-eyebrow { opacity: 1 !important; } } /* ============================================================ GLOBAL POLISH — scrollbar, selection, focus, press states ============================================================ */ /* Premium dark scrollbar */ html { scrollbar-width: thin; scrollbar-color: #2e2c28 var(--bg); } body::-webkit-scrollbar, html::-webkit-scrollbar { width: 10px; } body::-webkit-scrollbar-track, html::-webkit-scrollbar-track { background: var(--bg); } body::-webkit-scrollbar-thumb, html::-webkit-scrollbar-thumb { background: #2e2c28; border-radius: 5px; border: 2px solid var(--bg); } body::-webkit-scrollbar-thumb:hover, html::-webkit-scrollbar-thumb:hover { background: rgba(201, 168, 76, 0.55); } /* Gold text selection */ ::selection { background: rgba(201, 168, 76, 0.85); color: #0a0a0a; } /* Visible keyboard focus — gold ring, only for keyboard nav */ :focus { outline: none; } :focus-visible { outline: 2px solid rgba(201, 168, 76, 0.85); outline-offset: 3px; border-radius: 2px; } .field input:focus-visible { outline: none; /* inputs already show a gold border on focus */ } /* Tactile press feedback on primary actions */ .btn:active, .quick-add:active, .product-size-btn:active, .product-swatch:active { transform: scale(0.97); } /* Image rendering — keep product shots crisp when scaled */ .product-img-wrap img, .product-gallery-main-wrap img { image-rendering: -webkit-optimize-contrast; } /* Fabric pills — subtle lift on hover */ .fabric-pill { transition: border-color 0.25s ease, color 0.25s ease; } .fabric-pill:hover { border-color: rgba(201, 168, 76, 0.45); color: var(--text-muted); } /* Accordion trigger — gold accent on hover */ .accordion-trigger:hover svg { color: var(--gold); } /* Tap highlight off (we provide our own feedback) */ * { -webkit-tap-highlight-color: transparent; } /* ============================================================ PREMIUM 3D LAYER Added in the 2026-07 upgrade. Everything here is opt-out under prefers-reduced-motion and costs nothing on touch devices. ============================================================ */ /* ── Loader: the label is now a 000–100 counter ── */ .rc-loading-label { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; } #rc-loading { /* the exit is a clip-path wipe, so the element must be clippable */ clip-path: inset(0 0 0 0); will-change: clip-path; } /* ── Section sub-headings ── */ .section-sub { margin-top: 14px; max-width: 52ch; font-size: 14px; line-height: 1.7; color: var(--text-dim); letter-spacing: 0.01em; } .creatures-header .section-sub { margin-inline: auto; } /* ── Product card: WebGL displacement canvas ── Sits exactly over the card image while hovered, then detaches. */ .product-img-wrap { position: relative; } .rc-distort-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; } /* ── PDP creature stage ── Pointer tilt plus a gold rim light that tracks it, so the garment reads as a lit object rather than a flat cutout. */ .rc-stage { --rx: 0deg; --ry: 0deg; --lx: 50%; --ly: 50%; perspective: 1100px; position: relative; } .rc-stage #gallery-main { transform: rotateX(var(--rx)) rotateY(var(--ry)); transform-style: preserve-3d; transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.22s ease; will-change: transform; } .rc-stage::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at var(--lx) var(--ly), rgba(201, 168, 76, 0.16) 0%, rgba(201, 168, 76, 0.05) 32%, transparent 62%); opacity: 0; transition: opacity 0.45s ease; z-index: 3; } .rc-stage:hover::after { opacity: 1; } /* ── Magnetic controls ── JS writes the translate; the transition only smooths the release, so it must not fight the per-frame updates during hover. (transform is intentionally NOT transitioned here.) */ .btn-primary, .btn-outline, .view-all, .creature-link { will-change: transform; } .btn-primary > span, .btn-outline > span { display: inline-block; } /* ── Ambient film grain ── One fixed layer over the whole page at very low opacity. Static (no animation) so it costs a single composited layer and nothing per frame. Adds the slight photographic tooth that flat dark backgrounds lack. */ body::after { content: ''; position: fixed; inset: -50%; pointer-events: none; z-index: 9998; opacity: 0.035; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E"); } /* ── Cross-page transitions ── Same-origin multi-page site: the browser can cross-fade navigations natively. Unsupported browsers simply navigate as before. */ @view-transition { navigation: auto; } ::view-transition-old(root) { animation: rcFadeOut 0.22s ease both; } ::view-transition-new(root) { animation: rcFadeIn 0.32s ease both; } @keyframes rcFadeOut { to { opacity: 0; } } @keyframes rcFadeIn { from { opacity: 0; } } /* ── Motion opt-out ── */ @media (prefers-reduced-motion: reduce) { .rc-stage #gallery-main { transform: none !important; } .rc-stage::after { display: none; } body::after { display: none; } ::view-transition-old(root), ::view-transition-new(root) { animation: none; } } /* ── Secondary mobile nav panel ── The policy and guide pages use `.nav-mobile` rather than the homepage's `.mobile-menu`. It previously had no rule of its own, so it rendered as plain visible links stacked over the header on every viewport. Hidden by default; the hamburger adds .open (see initMobileMenu). */ .nav-mobile { display: none; position: fixed; top: calc(var(--nav-height) + 36px); left: 0; right: 0; z-index: 998; flex-direction: column; gap: 4px; padding: 22px 24px 26px; background: rgba(10, 10, 10, 0.97); backdrop-filter: blur(14px); border-bottom: 1px solid var(--border); } .nav-mobile.open { display: flex; } .nav-mobile .nav-link { padding: 14px 0; min-height: 48px; display: flex; align-items: center; font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase; border-bottom: 1px solid var(--border); } .nav-mobile .nav-link:last-child { border-bottom: none; } /* The hamburger is the only way to reach this panel, and it is desktop-hidden. */ @media (min-width: 861px) { .nav-mobile { display: none !important; } }