/* ============================================================ SANJAY JEWELLERS — Gold Luxury Design System ============================================================ Performance: Google Fonts (Playfair Display, Montserrat) should be preloaded via in for optimal LCP and FCP. ============================================================ */ :root { --bg-color: #050505; --bg-secondary: #0a0a0a; --text-primary: #f0f0f0; --text-secondary: #999; --gold-dark: #7a6218; --gold-mid: #c9a84c; --gold-light: #e8d48b; --gold-bright: #f5e6a3; --accent-gold: #d4af37; --wishlist-active: #e74c3c; --gold-metallic: linear-gradient(135deg, var(--gold-dark) 0%, var(--gold-mid) 25%, var(--gold-bright) 50%, var(--gold-light) 75%, var(--gold-dark) 100%); --gold-shimmer: linear-gradient(90deg, transparent 0%, rgba(245, 234, 163, 0.3) 50%, transparent 100%); --border-color: #1a1a1a; --font-heading: 'Playfair Display', serif; --font-body: 'Montserrat', sans-serif; --transition-slow: all 0.6s cubic-bezier(0.23, 1, 0.32, 1); --transition-fast: all 0.3s ease; --shadow-gold: 0 4px 20px rgba(212, 175, 55, 0.15); --shadow-gold-strong: 0 8px 40px rgba(212, 175, 55, 0.25); --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --text-muted: #666; --text-dim: #777; --text-faint: #888; --text-ghost: #999; --text-white: #fff; --error-color: #e74c3c; --success-color: #4CAF50; --info-purple: #9b59b6; --bg-card: #151515; --bg-dark: #080808; --text-xs: 0.7rem; --text-sm: 0.8rem; --text-base: 1rem; --text-lg: 1.2rem; --text-xl: 1.5rem; --text-2xl: 2rem; --text-3xl: 3rem; } /* ============================================================ CUSTOM SCROLLBAR ============================================================ */ ::selection { background: var(--accent-gold); color: #0a0a0a; } ::placeholder { color: rgba(255,255,255,0.3); font-size: 0.9rem; } ::-webkit-scrollbar { width: 4px; } ::-webkit-scrollbar-track { background: var(--bg-color); } ::-webkit-scrollbar-thumb { background: var(--gold-mid, #b8942e); border-radius: 2px; } ::-webkit-scrollbar-thumb:hover { background: var(--accent-gold); } /* ============================================================ FOCUS VISIBLE — Keyboard Navigation ============================================================ */ :focus-visible { outline: 2px solid var(--accent-gold); outline-offset: 3px; box-shadow: 0 0 0 4px rgba(212, 175, 55, 0.2); border-radius: var(--radius-sm); } button:focus-visible, a:focus-visible { outline: 2px solid var(--accent-gold); outline-offset: 2px; } input:focus-visible, select:focus-visible, textarea:focus-visible { outline: none; border-color: var(--accent-gold); box-shadow: 0 0 0 2px rgba(212, 175, 55, 0.2); } .skip-link:focus { outline: 2px solid var(--accent-gold); } /* --- Reduced Motion --- */ @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; } } /* --- High Contrast Mode --- */ @media (prefers-contrast: high) { :root { --text-primary: #ffffff; --text-secondary: #cccccc; --accent-gold: #ffcc00; } button, .btn { border: 2px solid var(--accent-gold); } a { text-decoration: underline; } } /* ============================================================ RESET & BASE ============================================================ */ html { box-sizing: border-box; overflow-x: hidden; } *, *::before, *::after { box-sizing: inherit; } body { background-color: #050505; background-color: var(--bg-color); color: var(--text-primary); font-family: var(--font-body); line-height: 1.7; letter-spacing: 0.03em; overflow-x: hidden; max-width: 100vw; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } a { text-decoration: none; color: inherit; transition: var(--transition-fast); touch-action: manipulation; } ul { list-style: none; } img { max-width: 100%; height: auto; display: block; } button { touch-action: manipulation; min-height: 44px; min-width: 44px; } /* --- Luxury Custom Scrollbar --- */ ::-webkit-scrollbar { width: 6px; } ::-webkit-scrollbar-track { background: #0a0a0a; } ::-webkit-scrollbar-thumb { background: rgba(212,175,55,0.3); border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: rgba(212,175,55,0.5); } * { scrollbar-width: thin; scrollbar-color: rgba(212,175,55,0.3) #0a0a0a; } /* --- Selection Color --- */ ::selection { background: rgba(212,175,55,0.3); color: #fff; } input:not([type="checkbox"]):not([type="radio"]), select, textarea { background: transparent; border: 1px solid #333; color: #fff; -webkit-appearance: none; appearance: none; border-radius: 0; font-family: var(--font-body); font-size: 0.9rem; transition: border-color 0.3s ease, box-shadow 0.3s ease; touch-action: manipulation; caret-color: var(--accent-gold); min-height: 44px; padding: 0.75rem 1rem; } input:not([type="checkbox"]):not([type="radio"]):focus, select:focus, textarea:focus { border-color: var(--accent-gold); box-shadow: 0 0 0 2px rgba(212,175,55,0.1); outline: none; } input[type="checkbox"], input[type="radio"] { accent-color: var(--accent-gold); -webkit-appearance: none; appearance: none; width: 18px; height: 18px; border: 1px solid #555; background: transparent; cursor: pointer; position: relative; flex-shrink: 0; } input[type="checkbox"]:checked { background: var(--accent-gold); border-color: var(--accent-gold); } input[type="checkbox"]:checked::after { content: ''; position: absolute; top: 2px; left: 5px; width: 5px; height: 9px; border: solid #0a0a0a; border-width: 0 2px 2px 0; transform: rotate(45deg); } input[type="radio"] { border-radius: 50%; } input[type="radio"]:checked { border-color: var(--accent-gold); box-shadow: inset 0 0 0 3px #0a0a0a, inset 0 0 0 5px var(--accent-gold); } input:focus, select:focus, textarea:focus { border-color: var(--accent-gold); outline: none; box-shadow: 0 0 0 2px rgba(212, 175, 55, 0.2); } input::placeholder, textarea::placeholder { color: rgba(255,255,255,0.3); } select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23d4af37' d='M1 1l5 5 5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; padding-right: 2.5rem; cursor: pointer; } .skip-link { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } .skip-link:focus { position: fixed; top: 10px; left: 10px; z-index: 99999; width: auto; height: auto; padding: 10px 20px; background: #0a0a0a; color: #d4af37; clip: auto; white-space: normal; } .hero-cta { background: var(--gold-metallic); color: var(--bg-color); border: none; background-size: 200% auto; box-shadow: 0 8px 40px rgba(212,175,55,0.3); padding: 1.3rem 3.5rem; position: relative; overflow: hidden; } .hero-cta::before { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: linear-gradient(45deg, transparent, rgba(255,255,255,0.1), transparent); transition: transform 0.6s ease; transform: rotate(45deg) translateY(-100%); } .hero-cta:hover::before { transform: rotate(45deg) translateY(100%); } .hero--404 { height: 80vh; min-height: 500px; } .hero-content--404 { opacity: 1; transform: none; animation: none; } .hero-404-title { font-size: clamp(2rem, 5vw, 3rem); margin-top: 1rem; font-family: var(--font-heading); color: var(--text-primary); } .hero-404-desc { font-size: clamp(1rem, 2vw, 1.3rem); margin-bottom: 1rem; color: var(--text-secondary); } .hero-404-cta { margin-bottom: 3rem; font-size: 1rem; color: var(--text-secondary); } .gold-divider--centered { margin: 1.5rem auto 0; } .gold-divider--spaced { margin-top: 1rem; } .curated-badge-pos { position: absolute; top: 0.75rem; left: 0.75rem; z-index: 5; } .subtitle--atelier { margin-bottom: 1rem; } .recently-viewed-section { padding-top: 0; padding-bottom: 2rem; } /* ============================================================ TYPOGRAPHY — Gold Refined ============================================================ */ h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: 400; color: var(--text-primary); letter-spacing: 0.05em; line-height: 1.2; text-rendering: optimizeLegibility; } h1.gold-text, h2.gold-text, .gold-text { background: var(--gold-metallic); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; filter: drop-shadow(0 2px 8px rgba(212,175,55,0.15)); } .hero-content h1 { line-height: 1.1; background: var(--gold-metallic); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; animation: goldShimmerText 5s ease-in-out infinite; background-size: 300% auto; filter: drop-shadow(0 4px 20px rgba(212,175,55,0.15)); } @keyframes goldShimmerText { 0%, 100% { background-position: 0% center; } 33% { background-position: 50% center; } 66% { background-position: 100% center; } } h2 { font-size: 3rem; margin-bottom: 1.5rem; line-height: 1.2; } .subtitle { display: block; font-family: var(--font-body); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.3em; margin-bottom: 1.5rem; background: var(--gold-metallic); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; filter: drop-shadow(0 2px 8px rgba(212,175,55,0.1)); } .section-padding { padding: 6rem 0; } section[id] { scroll-margin-top: 80px; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } .container { max-width: 1400px; margin: 0 auto; padding: 0 3rem; } /* ============================================================ GOLD DIVIDER ACCENTS ============================================================ */ .section-divider { width: 80px; height: 1px; background: var(--gold-metallic); margin: 0 auto 3rem; } .gold-divider { width: 60px; height: 2px; background: var(--gold-metallic); margin: 2rem auto; } /* ============================================================ BUTTONS — Gold Luxury ============================================================ */ .btn { display: inline-block; padding: 1.2rem 3rem; text-transform: uppercase; font-size: 0.75rem; letter-spacing: 0.2em; border: 1px solid var(--accent-gold); cursor: pointer; transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1); background: transparent; color: var(--accent-gold); position: relative; overflow: hidden; will-change: transform; border-radius: var(--radius-sm); } .btn::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: var(--gold-shimmer); transition: left 0.6s ease; z-index: 0; } .btn:hover::before { left: 100%; } .btn:hover { box-shadow: var(--shadow-gold-strong), 0 0 70px rgba(212,175,55,0.4), 0 0 35px rgba(212,175,55,0.2); transform: translateY(-2px); } .btn:active { transform: translateY(0) scale(0.97); transition: all 0.1s ease; } .btn:disabled, .btn-primary:disabled, .btn-outline:disabled, .btn-sm:disabled, .btn-full:disabled, button:disabled, input:disabled, select:disabled, textarea:disabled { opacity: 0.4; cursor: not-allowed; pointer-events: none; filter: grayscale(0.5); } .btn:disabled:hover, .btn-primary:disabled:hover, .btn-outline:disabled:hover { transform: none; box-shadow: none; } .btn-primary { background: var(--gold-metallic); color: var(--bg-color); border: none; background-size: 200% auto; animation: goldShimmer 4s ease-in-out infinite; box-shadow: 0 8px 40px rgba(212,175,55,0.3); } .btn-primary::before { display: none; } .btn-primary:hover { background: linear-gradient(135deg, var(--gold-bright) 0%, var(--gold-light) 50%, var(--gold-mid) 100%); color: var(--bg-color); box-shadow: 0 30px 100px rgba(212,175,55,0.6), 0 0 80px rgba(212,175,55,0.3), 0 0 140px rgba(212,175,55,0.1); transform: translateY(-3px); } .btn-primary:active { transform: translateY(0) scale(0.97); } .btn-outline { background: transparent; color: var(--accent-gold); } .btn-outline:hover { background: rgba(212, 175, 55, 0.08); box-shadow: 0 0 25px rgba(212,175,55,0.1); border-color: var(--gold-bright); } /* ============================================================ NAVIGATION — Gold Accents ============================================================ */ .navbar { position: fixed; top: 0; left: 0; right: 0; padding: 2rem 0; z-index: 1000; transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1); background: linear-gradient(to bottom, rgba(10,10,10,0.98) 0%, rgba(10,10,10,0) 100%); padding-top: calc(2rem + env(safe-area-inset-top, 0px)); } .navbar.scrolled { background: rgba(10, 10, 10, 0.95); padding: 1rem 0; padding-top: calc(1rem + env(safe-area-inset-top, 0px)); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-bottom: 1px solid rgba(212, 175, 55, 0.12); box-shadow: 0 4px 20px rgba(0,0,0,0.3); } .navbar-scrolled { background: rgba(10, 10, 10, 0.95) !important; backdrop-filter: blur(20px) !important; -webkit-backdrop-filter: blur(20px) !important; } .nav-container { display: flex; justify-content: space-between; align-items: center; overflow: hidden; } .logo a { font-family: var(--font-heading); font-size: 1.8rem; letter-spacing: 0.1em; background: var(--gold-metallic); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; padding: 0.5rem 0; display: inline-block; } .nav-links { display: flex; gap: 4rem; } .nav-links a { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.15em; color: var(--text-secondary); position: relative; } .nav-links a.active, .nav-links a:hover { color: var(--accent-gold); } .nav-links a::after { content: ''; position: absolute; bottom: -5px; left: 50%; width: 0; height: 1px; background: var(--gold-metallic); transition: var(--transition-fast); transform: translateX(-50%); } .nav-links a:hover::after { width: 100%; } .nav-icons { display: flex; gap: 2rem; color: var(--text-primary); } .nav-icons a:hover { color: var(--accent-gold); transform: translateY(-1px); } .nav-icons button { background: none; border: none; -webkit-appearance: none; appearance: none; color: inherit; cursor: pointer; padding: 0; font-size: inherit; line-height: inherit; } .nav-icons button:hover { color: var(--accent-gold); transform: translateY(-1px); } /* Nav icon wrappers */ .search-toggle { display: inline-flex; align-items: center; justify-content: center; } .wishlist-icon-wrapper, .cart-icon-wrapper { position: relative; display: inline-flex; align-items: center; justify-content: center; padding: 4px; } .wishlist-count { position: absolute; top: -4px; right: -6px; background: var(--accent-gold); color: var(--bg-color); font-size: 0.55rem; min-width: 16px; height: 16px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 600; pointer-events: none; line-height: 1; padding: 0 3px; } .nav-icons .cart-count { position: absolute; top: -4px; right: -6px; background: var(--accent-gold); color: var(--bg-color); font-size: 0.55rem; min-width: 16px; height: 16px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 600; pointer-events: none; line-height: 1; padding: 0 3px; } /* Floating bottom nav (mobile only) */ .bottom-nav { position: fixed; bottom: 0; left: 0; right: 0; z-index: 1000; background: rgba(6, 6, 6, 0.88); backdrop-filter: blur(24px) saturate(1.2); -webkit-backdrop-filter: blur(24px) saturate(1.2); border-top: 1px solid rgba(212, 175, 55, 0.1); display: none; justify-content: space-around; align-items: center; padding: 0.4rem 0 calc(0.4rem + env(safe-area-inset-bottom, 0px)); } .bottom-nav-item { display: flex; flex-direction: column; align-items: center; justify-content: center; background: none; border: none; cursor: pointer; font-family: inherit; -webkit-appearance: none; appearance: none; margin: 0; gap: 0.15rem; color: var(--text-secondary); font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.08em; transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1); position: relative; min-width: 44px; min-height: 44px; padding: 0.25rem 0.5rem; } .bottom-nav-item i { font-size: 1.15rem; transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1); } .bottom-nav-item.active { color: var(--accent-gold); border-top: 2px solid var(--accent-gold); position: relative; } .bottom-nav-item.active::before { content: ''; position: absolute; top: -2px; left: 50%; transform: translateX(-50%); width: 24px; height: 2px; background: var(--accent-gold); box-shadow: 0 0 12px rgba(212,175,55,0.6); } .bottom-nav-item.active { animation: bottomNavActive 0.35s ease; } @keyframes bottomNavActive { from { border-top-color: transparent; } to { border-top-color: var(--accent-gold); } } .bottom-nav-item.active i { color: var(--accent-gold); transform: scale(1.08); filter: drop-shadow(0 2px 8px rgba(212,175,55,0.3)); } .bottom-nav-item .cart-count { position: absolute; top: -4px; right: -10px; background: var(--accent-gold); color: var(--bg-color); font-size: 0.5rem; width: 16px; height: 16px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 600; letter-spacing: 0; } .hamburger { display: none; cursor: pointer; padding: 8px; background: none; border: none; -webkit-appearance: none; appearance: none; align-items: center; justify-content: center; color: var(--accent-gold); min-width: 44px; min-height: 44px; position: relative; z-index: 1002; } .hamburger-line { display: block; width: 22px; height: 2px; background: var(--accent-gold); border-radius: 2px; transition: all 0.4s cubic-bezier(0.68, -0.6, 0.32, 1.6); position: absolute; left: 50%; transform: translateX(-50%); } .hamburger-line:nth-child(1) { transform: translateX(-50%) translateY(-7px); } .hamburger-line:nth-child(2) { transform: translateX(-50%) translateY(0); } .hamburger-line:nth-child(3) { transform: translateX(-50%) translateY(7px); } .hamburger.active .hamburger-line:nth-child(1) { transform: translateX(-50%) translateY(0) rotate(45deg); } .hamburger.active .hamburger-line:nth-child(2) { transform: translateX(-50%) scaleX(0); opacity: 0; } .hamburger.active .hamburger-line:nth-child(3) { transform: translateX(-50%) translateY(0) rotate(-45deg); } /* ============================================================ HERO — Cinematic Gold ============================================================ */ .hero { height: 100vh; height: 100dvh; position: relative; display: flex; align-items: center; justify-content: center; text-align: center; overflow: hidden; contain: paint; } .hero::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 400px; background: linear-gradient(to top, var(--bg-color) 15%, transparent); z-index: 2; } .hero::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: radial-gradient(ellipse at 50% 30%, rgba(212,175,55,0.28) 0%, transparent 30%), radial-gradient(ellipse at 20% 80%, rgba(212,175,55,0.15) 0%, transparent 20%), radial-gradient(ellipse at 80% 20%, rgba(212,175,55,0.12) 0%, transparent 20%); z-index: 1; pointer-events: none; animation: heroGlowPulse 4s ease-in-out infinite alternate; } @keyframes heroGlowPulse { 0% { opacity: 0.4; } 100% { opacity: 1; } } .hero-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url('https://images.unsplash.com/photo-1601121141461-9d6647bca1ed?ixlib=rb-4.0.3&auto=format&fit=crop&w=1200&q=80') center/cover no-repeat; z-index: 0; filter: brightness(0.15) saturate(1.6) contrast(1.2) sepia(0.05); transform: scale(1.1); animation: zoomEffect 45s infinite alternate ease-in-out; will-change: transform; } .hero-bg::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: radial-gradient(ellipse at center 40%, rgba(212, 175, 55, 0.2) 0%, transparent 40%), radial-gradient(ellipse at 30% 70%, rgba(212, 175, 55, 0.08) 0%, transparent 30%), linear-gradient(to bottom, rgba(5,5,5,0.6) 0%, transparent 15%, transparent 85%, rgba(5,5,5,0.8) 100%); z-index: 1; pointer-events: none; } @keyframes zoomEffect { from { transform: scale(1.1); } to { transform: scale(1.35); } } .scroll-indicator { position: absolute; bottom: 3rem; left: 50%; transform: translateX(-50%); z-index: 4; display: none; color: var(--gold-mid); font-size: 1.5rem; animation: scrollBounce 2.5s ease-in-out infinite; opacity: 0.8; } .scroll-indicator::after { content: ''; position: absolute; bottom: -15px; left: 50%; transform: translateX(-50%); width: 1px; height: 50px; background: linear-gradient(to bottom, var(--gold-mid), transparent); opacity: 0.4; } @keyframes scrollBounce { 0%, 100% { transform: translateX(-50%) translateY(0); opacity: 0.8; } 50% { transform: translateX(-50%) translateY(12px); opacity: 1; } } .hero-content { max-width: 900px; padding: 0 2rem; position: relative; z-index: 3; opacity: 0; transform: translateY(60px); animation: heroReveal 2s cubic-bezier(0.23, 1, 0.32, 1) forwards 0.5s; will-change: opacity, transform; } @keyframes heroReveal { 0% { opacity: 0; transform: translateY(30px); } 100% { opacity: 1; transform: translateY(0); } } .hero-content .subtitle { animation: heroSubtitle 1.2s ease forwards 1s; opacity: 0; margin-bottom: 1.5rem; font-size: 0.75rem; letter-spacing: 0.35em; } .hero-content h1 { margin-bottom: 1.5rem; font-size: clamp(4rem, 8vw, 7rem); background: var(--gold-metallic); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; animation: heroTitle 1.8s cubic-bezier(0.23, 1, 0.32, 1) forwards 0.7s, goldShimmerText 6s ease-in-out infinite; background-size: 300% auto; filter: drop-shadow(0 8px 50px rgba(212,175,55,0.35)); opacity: 0; } .hero-content p { animation: heroSubtitle 1.2s ease forwards 1.3s; opacity: 0; font-size: clamp(1rem, 1.5vw, 1.2rem); color: var(--text-secondary); margin-bottom: 3rem; font-weight: 300; line-height: 1.8; max-width: 550px; margin-left: auto; margin-right: auto; } .hero-content .hero-cta { animation: heroCta 1.2s cubic-bezier(0.23, 1, 0.32, 1) forwards 1.6s; opacity: 0; font-size: 0.85rem; padding: 1.5rem 3rem; letter-spacing: 0.3em; font-weight: 500; border-radius: var(--radius-sm); position: relative; overflow: hidden; } .hero-content .hero-cta::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent); transition: left 0.6s ease; } .hero-content .hero-cta:hover::before { left: 100%; } .hero-content .hero-cta:hover { transform: translateY(-3px); box-shadow: 0 25px 100px rgba(212,175,55,0.65), 0 0 100px rgba(212,175,55,0.35), 0 0 180px rgba(212,175,55,0.15); } @keyframes heroTitle { 0% { opacity: 0; transform: translateY(20px) scale(0.985); } 100% { opacity: 1; transform: translateY(0) scale(1); } } @keyframes heroSubtitle { 0% { opacity: 0; transform: translateY(20px); } 100% { opacity: 1; transform: translateY(0); } } @keyframes heroCta { 0% { opacity: 0; transform: translateY(15px) scale(0.97); } 100% { opacity: 1; transform: translateY(0) scale(1); } } .hero-content .gold-line { width: 60px; height: 1px; background: var(--gold-mid); margin: 1.5rem auto 2rem; opacity: 0.5; } .hero-content .btn-primary { position: relative; overflow: hidden; background: var(--gold-metallic); background-size: 200% auto; animation: goldShimmer 4s ease-in-out infinite; } @keyframes goldShimmer { 0%, 100% { background-position: 0% center; } 50% { background-position: 100% center; } } /* ============================================================ GOLD DUST PARTICLES (CSS-only) ============================================================ */ .gold-dust { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; overflow: hidden; z-index: 0; } .gold-dust span { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: var(--gold-bright); opacity: 0; animation: floatParticle 8s infinite; box-shadow: 0 0 18px rgba(212, 175, 55, 1), 0 0 36px rgba(212, 175, 55, 0.8), 0 0 72px rgba(212, 175, 55, 0.5), 0 0 120px rgba(212, 175, 55, 0.2); } .gold-dust span:nth-child(1) { left: 10%; top: 20%; animation-delay: 0s; animation-duration: 6s; } .gold-dust span:nth-child(2) { left: 30%; top: 60%; animation-delay: 1.2s; animation-duration: 8s; width: 5px; height: 5px; } .gold-dust span:nth-child(3) { left: 50%; top: 30%; animation-delay: 2.5s; animation-duration: 7s; } .gold-dust span:nth-child(4) { left: 70%; top: 70%; animation-delay: 0.6s; animation-duration: 9s; width: 7px; height: 7px; } .gold-dust span:nth-child(5) { left: 85%; top: 40%; animation-delay: 3.5s; animation-duration: 6.5s; } .gold-dust span:nth-child(6) { left: 20%; top: 80%; animation-delay: 1.8s; animation-duration: 7.5s; } .gold-dust span:nth-child(7) { left: 60%; top: 10%; animation-delay: 3s; animation-duration: 8.5s; width: 5px; height: 5px; } .gold-dust span:nth-child(8) { left: 90%; top: 50%; animation-delay: 0.9s; animation-duration: 5.5s; } @keyframes floatParticle { 0% { opacity: 0; transform: translateY(0) scale(0); } 10% { opacity: 0.8; transform: translateY(-10px) scale(1); } 50% { opacity: 1; } 90% { opacity: 0.8; } 100% { opacity: 0; transform: translateY(-150px) scale(0.5); } } /* ============================================================ FEATURED COLLECTIONS ============================================================ */ .categories { background-color: var(--bg-color); position: relative; } .section-header { text-align: center; margin-bottom: 5rem; } .section-header h2 { position: relative; display: inline-block; font-size: clamp(2.5rem, 4.5vw, 4rem); background: var(--gold-metallic); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; filter: drop-shadow(0 4px 16px rgba(212,175,55,0.2)); } .section-header h2::after { content: ''; display: block; width: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--gold-mid), transparent); margin: 0.8rem auto 0; animation: goldLineGrow 1.5s cubic-bezier(0.23, 1, 0.32, 1) forwards 0.3s; } .category-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; } .category-card { position: relative; height: 480px; overflow: hidden; cursor: pointer; border: 1px solid transparent; transition: var(--transition-slow); } .category-card:hover { border-color: rgba(212, 175, 55, 0.3); transform: translateY(-2px); box-shadow: 0 8px 25px rgba(0,0,0,0.3); } .category-image { width: 100%; height: 100%; background-size: cover; background-position: center; transition: transform 0.8s ease; filter: grayscale(20%); } .category-card:hover .category-image { transform: scale(1.05); filter: grayscale(0%); } .category-content { position: absolute; bottom: 0; left: 0; width: 100%; padding: 3rem; background: linear-gradient(to top, rgba(0,0,0,0.95), transparent); z-index: 2; } .category-content h3 { font-size: clamp(1.2rem, 3vw, 2rem); margin-bottom: 1rem; color: var(--text-primary); } .link-underline { color: var(--accent-gold); text-transform: uppercase; font-size: 0.7rem; letter-spacing: 0.2em; border-bottom: 1px solid transparent; padding-bottom: 5px; transition: var(--transition-fast); } .category-card:hover .link-underline { border-color: var(--accent-gold); } /* ============================================================ SPOTLIGHT ============================================================ */ .spotlight { background-color: var(--bg-secondary); position: relative; } .spotlight-container { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; } .spotlight-image { height: 600px; overflow: hidden; border-radius: var(--radius-md); border: 1px solid rgba(212,175,55,0.1); } .spotlight-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s cubic-bezier(0.23, 1, 0.32, 1); } .spotlight-image:hover img { transform: scale(1.04); } .spotlight-image { height: 700px; background-image: url('https://images.unsplash.com/photo-1515562141207-7a88fb7ce338?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80'); background-size: cover; background-position: center; position: relative; overflow: hidden; } .spotlight-image::before { content: ''; position: absolute; top: -20px; left: -20px; width: 100%; height: 100%; border: 1px solid var(--gold-mid); z-index: 1; opacity: 0.5; transition: var(--transition-slow); } .spotlight-image:hover::before { top: -10px; left: -10px; opacity: 1; } .spotlight-text p { color: var(--text-secondary); margin-bottom: 3rem; font-size: 1.1rem; } /* ============================================================ NAVBAR SOLID ============================================================ */ .navbar.navbar-solid { background: var(--bg-color); border-bottom: 1px solid rgba(212, 175, 55, 0.1); padding: 1.5rem 0; } .product-detail-container, .cart-container, .checkout-wrap { padding-top: 160px; } .checkout-wrap { max-width: 800px; margin: 0 auto; min-height: 60vh; } /* ============================================================ PAGE HEADERS ============================================================ */ .page-header { padding: 8rem 0 6rem; text-align: center; background: linear-gradient(180deg, #0d0d0d 0%, var(--bg-color) 100%); position: relative; } .page-header::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 100px; height: 1px; background: var(--gold-metallic); } /* ============================================================ SCROLL REVEAL ANIMATIONS ============================================================ */ .reveal { opacity: 0; transform: translateY(30px); pointer-events: none; transition: opacity 0.8s ease, transform 0.8s ease; } .reveal.active { opacity: 1; transform: translateY(0); pointer-events: auto; } .reveal-delay-1 { transition-delay: 0.1s; } .reveal-delay-2 { transition-delay: 0.2s; } .reveal-delay-3 { transition-delay: 0.3s; } .reveal-delay-4 { transition-delay: 0.4s; } /* ============================================================ MOBILE FILTER BOTTOM SHEET ============================================================ */ .filter-sheet-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 3000; display: none; opacity: 0; transition: opacity 0.3s ease; } .filter-sheet-overlay.active { display: block; opacity: 1; } .filter-sheet { position: fixed; bottom: 0; left: 0; right: 0; z-index: 3001; background: var(--bg-secondary); border-radius: 16px 16px 0 0; padding: 1.5rem; max-height: 80dvh; overflow-y: auto; transform: translateY(100%); transition: transform 0.35s cubic-bezier(0.23, 1, 0.32, 1); border-top: 1px solid rgba(212, 175, 55, 0.1); } .filter-sheet.active { transform: translateY(0); } .filter-sheet-handle { width: 36px; height: 4px; border-radius: 2px; background: #444; margin: 0 auto 1.25rem; cursor: pointer; } .filter-sheet h3 { font-size: 1.1rem; margin-bottom: 1rem; color: var(--accent-gold); } .filter-sheet .filter-group { margin-bottom: 1.25rem; } .filter-sheet .filter-group h4 { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-secondary); margin-bottom: 0.6rem; } .filter-sheet .filter-group label { display: flex; align-items: center; gap: 0.6rem; padding: 0.5rem 0; font-size: 0.9rem; color: var(--text-primary); cursor: pointer; } .filter-sheet .filter-group input[type="checkbox"], .filter-sheet .filter-group input[type="radio"] { accent-color: var(--accent-gold); width: 18px; height: 18px; } .filter-sheet .apply-filters { width: 100%; margin-top: 0.5rem; } /* ============================================================ STICKY ADD-TO-CART BAR (Mobile) ============================================================ */ .sticky-cart-bar { position: fixed; bottom: 0; left: 0; right: 0; z-index: 1001; background: rgba(10, 10, 10, 0.95); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-top: 1px solid rgba(212, 175, 55, 0.12); display: none; align-items: center; padding: 0.75rem 1.5rem; transform: translateY(100%); transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1); box-shadow: 0 -4px 20px rgba(0,0,0,0.3); padding-bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px)); } @media (max-width: 768px) { .sticky-cart-bar { display: flex; } } .sticky-cart-bar.visible { transform: translateY(0); } .sticky-cart-bar .sticky-price { font-size: 1.1rem; font-weight: 500; background: var(--gold-metallic); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; white-space: nowrap; } .sticky-cart-bar .sticky-qty { display: flex; align-items: center; gap: 0.25rem; margin-left: auto; } .sticky-cart-bar .sticky-qty button { width: 44px; height: 44px; border: 1px solid #333; background: transparent; color: var(--text-primary); border-radius: var(--radius-sm); cursor: pointer; font-size: 1.1rem; display: flex; align-items: center; justify-content: center; transition: all 0.3s ease; } .sticky-cart-bar .sticky-qty button:hover { border-color: var(--accent-gold); color: var(--accent-gold); } .sticky-cart-bar .sticky-qty span { width: 40px; text-align: center; font-size: 1rem; } .sticky-cart-bar .sticky-add-btn { background: var(--accent-gold); color: #0a0a0a; border: none; padding: 0.7rem 1.25rem; border-radius: var(--radius-sm); font-weight: 600; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; cursor: pointer; white-space: nowrap; min-width: 120px; min-height: 44px; transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1); } .sticky-cart-bar .sticky-add-btn:hover { background: var(--gold-bright); transform: translateY(-1px); box-shadow: 0 4px 15px rgba(212,175,55,0.3); } /* ============================================================ RECENTLY VIEWED ============================================================ */ .recently-viewed { margin-top: 2rem; } .recently-viewed h3 { font-size: 1rem; color: var(--accent-gold); margin-bottom: 1rem; text-transform: uppercase; letter-spacing: 0.1em; } /* ============================================================ CURATED ADD TO CART BUTTON ============================================================ */ .curated-add-btn { display: inline-block; margin-top: 0.4rem; padding: 0.5rem 0.8rem; font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.08em; background: transparent; color: var(--accent-gold); border: 1px solid var(--accent-gold); border-radius: var(--radius-sm); cursor: pointer; transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1); min-height: 44px; } .curated-add-btn:hover { background: var(--accent-gold); color: #0a0a0a; transform: translateY(-1px); box-shadow: 0 4px 15px rgba(212,175,55,0.2); } .curated-add-btn:active { transform: translateY(0) scale(0.97); } .curated-add-btn:focus-visible { outline: 2px solid var(--accent-gold); outline-offset: 2px; } /* ============================================================ TOAST MOBILE POSITION ============================================================ */ @media (max-width: 768px) { #toast-container { bottom: 5rem !important; right: 1rem; left: 1rem; } #toast-container .toast { min-width: auto; max-width: 100%; text-align: center; } } /* ============================================================ WISHLIST BUTTON ON CURATED CARDS ============================================================ */ .curated-card { position: relative; } .curated-card .wishlist-btn { position: absolute; top: 0.5rem; right: 0.5rem; z-index: 5; width: 44px; height: 44px; border-radius: 50%; background: rgba(0,0,0,0.5); border: none; color: #fff; font-size: 1rem; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); } .curated-card .wishlist-btn:hover { background: rgba(212,175,55,0.2); transform: scale(1.05); } .curated-card .wishlist-btn.active { color: var(--wishlist-active); background: rgba(231,76,60,0.15); } .curated-card .wishlist-btn:active { transform: scale(0.9); } /* ============================================================ STICKY CART BAR PRODUCT FOOTER ============================================================ */ body.has-sticky-cart { padding-bottom: 130px; } /* ============================================================ EDITORIAL CARD IN GRID ============================================================ */ .filter-section { border-bottom: 1px solid rgba(212, 175, 55, 0.1); padding: 2rem 0; margin-bottom: 4rem; } .filters { display: flex; justify-content: center; gap: 3rem; } .filters li { cursor: pointer; text-transform: uppercase; font-size: 0.8rem; letter-spacing: 0.1em; color: var(--text-secondary); transition: var(--transition-fast); position: relative; padding-bottom: 5px; } .filters li::after { content: ''; position: absolute; bottom: 0; left: 50%; width: 0; height: 1px; background: var(--gold-metallic); transition: var(--transition-fast); transform: translateX(-50%); } .filters li.active, .filters li:hover { color: var(--accent-gold); } .filters li.active::after, .filters li:hover::after { width: 100%; } .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 4rem 2rem; } .grid--related { gap: 2rem; } .mixed-grid { grid-auto-flow: dense; } .product-card { display: block; border: 1px solid rgba(212, 175, 55, 0.03); padding: 0; transition: all 0.7s cubic-bezier(0.23, 1, 0.32, 1); background: linear-gradient(160deg, rgba(255,255,255,0.012), rgba(255,255,255,0.004)); position: relative; overflow: hidden; transform-origin: center center; border-radius: var(--radius-md); } .product-card::before { content: ''; position: absolute; top: 0; left: -100%; width: 300%; height: 100%; background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.06), transparent); transition: left 0.8s ease; z-index: 1; } .product-card:hover::before { left: 100%; } .product-card:hover { border-color: rgba(212, 175, 55, 0.7); transform: translateY(-4px); box-shadow: 0 20px 60px rgba(0,0,0,0.6), 0 0 80px rgba(212,175,55,0.15); } .product-card:active { transform: translateY(-2px); transition-duration: 0.15s; } .product-image { position: relative; aspect-ratio: 1/1; overflow: hidden; margin-bottom: 1.5rem; background-color: var(--bg-card); border-radius: var(--radius-md) var(--radius-md) 0 0; } .product-image img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s cubic-bezier(0.23, 1, 0.32, 1), filter 0.5s ease; filter: brightness(0.9); } .product-card:hover .product-image img { transform: scale(1.05); } .overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 2; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 1rem; opacity: 0; pointer-events: none; transition: opacity 0.5s cubic-bezier(0.23, 1, 0.32, 1); background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.2) 25%, transparent 45%, transparent 55%, rgba(0,0,0,0.15) 75%, rgba(0,0,0,0.4) 100%); } .product-card:hover .overlay { opacity: 1; pointer-events: auto; } .overlay .btn-icon { pointer-events: auto; } .btn-icon { width: 44px; height: 44px; border-radius: 50%; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; background: rgba(10,10,10,0.8); color: var(--text-primary); border: 1px solid rgba(212, 175, 55, 0.3); transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1); backdrop-filter: blur(5px); } .btn-icon:hover { background: var(--accent-gold); color: var(--bg-color); transform: scale(1.05); box-shadow: var(--shadow-gold); } .btn-sm { padding: 0.8rem 1.5rem; font-size: 0.7rem; background: var(--gold-metallic); color: var(--bg-color); border: none; border-radius: var(--radius-sm); } .btn-sm:hover { box-shadow: var(--shadow-gold-strong); } .product-info { padding: 1.5rem; text-align: center; transition: background 0.3s ease; } .product-card:hover .product-info { background: rgba(212, 175, 55, 0.02); } .product-info h3 { font-family: var(--font-heading); font-size: 1.05rem; font-weight: 400; margin-bottom: 0.5rem; letter-spacing: 0.03em; transition: color 0.3s ease; color: var(--text-primary); } .product-card:hover .product-info h3 { color: var(--gold-light); } .product-category { display: inline-block; font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.15em; color: var(--text-secondary); margin-bottom: 0.5rem; } .price { background: var(--gold-metallic); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; font-size: 0.9rem; font-weight: 500; line-height: 1.4; } /* ============================================================ ABOUT PAGE ============================================================ */ .story-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: center; } .story-text p { margin-bottom: 1.5rem; color: var(--text-secondary); font-size: 1rem; line-height: 1.8; } .story-image { position: relative; border-radius: var(--radius-md); overflow: hidden; } .story-image::after { content: ''; position: absolute; top: 20px; left: 20px; width: 100%; height: 100%; border: 1px solid var(--gold-mid); z-index: 0; opacity: 0.3; border-radius: var(--radius-md); } .story-image img { width: 100%; height: auto; aspect-ratio: 4 / 3; display: block; border-radius: var(--radius-md); } /* ============================================================ CONTACT PAGE ============================================================ */ .contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6rem; } .info-item { margin-top: 3rem; } .info-item h4 { font-family: var(--font-body); font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 0.5rem; background: var(--gold-metallic); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .info-item p { color: var(--text-secondary); font-size: 1rem; line-height: 1.8; } .contact-form .form-group { margin-bottom: 1.5rem; } .contact-form input, .contact-form textarea, .contact-form select { width: 100%; padding: 1.2rem; box-sizing: border-box; background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.1); color: var(--text-primary); font-family: var(--font-body); outline: none; transition: all 0.3s ease; border-radius: var(--radius-sm); } .contact-form input:focus, .contact-form textarea:focus, .contact-form select:focus { border-color: var(--accent-gold); background: rgba(212, 175, 55, 0.05); box-shadow: 0 0 20px rgba(212, 175, 55, 0.1); } /* ============================================================ E-COMMERCE — Product Detail ============================================================ */ .product-detail-container { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3rem; padding-top: 4rem; } .detail-gallery { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; align-content: start; min-width: 0; } .detail-info { min-width: 0; } .main-image { aspect-ratio: 3/4; max-height: 550px; background-color: var(--bg-dark); overflow: hidden; cursor: crosshair; border: 1px solid rgba(212, 175, 55, 0.06); transition: all 0.5s ease; border-radius: var(--radius-md); } .main-image:hover { border-color: rgba(212, 175, 55, 0.35); box-shadow: 0 0 50px rgba(212,175,55,0.1); } .main-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.1s ease; border-radius: var(--radius-md); } /* ============================================================ THUMBNAIL GALLERY — Product Detail ============================================================ */ .thumbnail-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.75rem; margin-top: 0.75rem; max-width: 100%; overflow: hidden; } .thumbnail-img { width: 100%; aspect-ratio: 1/1; object-fit: cover; border: 2px solid transparent; border-radius: var(--radius-md); cursor: pointer; opacity: 0.5; transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1); } .thumbnail-img:hover { opacity: 0.8; border-color: rgba(212, 175, 55, 0.4); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); } .thumbnail-img.active { opacity: 1; border-color: var(--accent-gold); box-shadow: 0 0 12px rgba(212, 175, 55, 0.25); } .main-image { width: 100%; } .detail-info h1 { font-size: clamp(2.5rem, 4vw, 4rem); margin-bottom: 1rem; line-height: 1.2; } .detail-price { font-size: 2.2rem; margin-bottom: 2rem; display: block; font-family: var(--font-body); font-weight: 600; color: var(--accent-gold); filter: drop-shadow(0 3px 12px rgba(212,175,55,0.25)); } .detail-price.price--loaded { background: var(--gold-metallic); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .detail-description { color: var(--text-secondary); margin-bottom: 3rem; font-size: 1rem; } .quantity-selector { display: flex; align-items: center; gap: 1rem; margin-bottom: 2rem; } .qty-btn { background: transparent; border: 1px solid rgba(212, 175, 55, 0.3); color: var(--text-primary); width: 44px; height: 44px; cursor: pointer; transition: var(--transition-fast); } .qty-btn:hover { background: var(--accent-gold); color: var(--bg-color); border-color: var(--accent-gold); } .qty-input { background: transparent; border: 1px solid var(--border-color); color: var(--text-primary); width: 60px; height: 44px; text-align: center; font-size: 1rem; } .btn-full { width: 100%; } .action-buttons { display: flex; gap: 1rem; align-items: center; } .trust-signals { margin-top: 3rem; border-top: 1px solid rgba(212, 175, 55, 0.1); padding-top: 2rem; } .trust-item { display: flex; align-items: flex-start; gap: 1.25rem; margin-bottom: 1.5rem; padding: 1.5rem; border: 1px solid rgba(212,175,55,0.08); border-radius: var(--radius-md); background: rgba(212,175,55,0.02); transition: all 0.3s ease; } .trust-item:hover { border-color: rgba(212,175,55,0.2); background: rgba(212,175,55,0.04); } .trust-item i { color: var(--accent-gold); font-size: 1.5rem; margin-top: 2px; filter: drop-shadow(0 2px 8px rgba(212,175,55,0.3)); } .trust-item h2, .trust-item h4 { font-size: 0.9rem; margin-bottom: 0.3rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-primary); font-family: var(--font-body); } .trust-item p { font-size: 0.9rem; color: var(--text-secondary); line-height: 1.7; } /* ============================================================ CART / VAULT ============================================================ */ .cart-table { width: 100%; border-collapse: collapse; margin-bottom: 3rem; } .cart-table th { text-align: left; padding: 1rem; border-bottom: 1px solid rgba(212, 175, 55, 0.2); color: var(--accent-gold); text-transform: uppercase; font-size: 0.8rem; letter-spacing: 0.1em; } .cart-table td { padding: 2rem 1rem; border-bottom: 1px solid #222; vertical-align: middle; } .cart-item-info { display: flex; align-items: center; gap: 1.5rem; } .cart-item-img { width: 80px; height: 80px; object-fit: cover; border: 1px solid rgba(212, 175, 55, 0.1); border-radius: var(--radius-md); } .cart-summary { background: linear-gradient(160deg, var(--bg-secondary), #080808); padding: 3rem; max-width: 400px; margin-left: auto; border: 1px solid rgba(212, 175, 55, 0.12); border-top: 2px solid var(--accent-gold); border-radius: var(--radius-md); box-shadow: 0 12px 40px rgba(0,0,0,0.4), 0 0 30px rgba(212,175,55,0.05); } .cart-summary h2 { margin-bottom: 2rem; font-size: clamp(1.2rem, 2vw, 1.5rem); font-family: var(--font-heading); } .cart-summary .btn { width: 100%; text-align: center; margin-top: 2rem; } .summary-row { display: flex; justify-content: space-between; margin-bottom: 1rem; color: var(--text-secondary); } .summary-total { display: flex; justify-content: space-between; margin-top: 2rem; padding-top: 2rem; border-top: 1px solid rgba(212, 175, 55, 0.2); font-size: 1.5rem; font-family: var(--font-heading); background: var(--gold-metallic); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } #cart-content { display: grid !important; grid-template-columns: 1fr min(400px, 35%) !important; gap: 2.5rem; align-items: start; } #cart-content .cart-table { min-width: 0; width: auto; } /* ============================================================ CHECKOUT ============================================================ */ .checkout-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 4rem; } .checkout-steps { display:flex; justify-content:center; gap:2rem; margin-bottom:3rem; flex-wrap:wrap; padding:1.5rem; border:1px solid rgba(212,175,55,0.1); border-radius:var(--radius-md); background:rgba(212,175,55,0.02); } .checkout-step { display:flex; align-items:center; gap:0.5rem; color:var(--text-muted); font-size:0.85rem; text-transform:uppercase; letter-spacing:0.1em; transition:color 0.3s ease; } .checkout-step.active { color:var(--accent-gold); font-weight:500; } .step-circle { display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:50%; border:1px solid currentColor; font-size:0.85rem; font-weight:500; transition:all 0.3s ease; } .checkout-step.active .step-circle { background:var(--accent-gold); color:#0a0a0a; border-color:var(--accent-gold); font-weight:700; box-shadow:0 0 12px rgba(212,175,55,0.3); } .step-connector { color:var(--text-secondary); font-size:0.7rem; } .checkout-form { background: linear-gradient(160deg, var(--bg-secondary), #080808); padding: 3rem; border: 1px solid rgba(212,175,55,0.1); border-radius: var(--radius-lg); box-shadow: 0 12px 40px rgba(0,0,0,0.3); } .checkout-form fieldset { border: 1px solid rgba(212, 175, 55, 0.12); border-radius: 8px; padding: 2rem; margin-bottom: 2rem; background: rgba(255,255,255,0.015); transition: border-color 0.3s ease, box-shadow 0.3s ease; } .checkout-form fieldset:focus-within { border-color: rgba(212, 175, 55, 0.3); box-shadow: 0 0 20px rgba(212,175,55,0.04); } .checkout-form legend { font-family: var(--font-heading); font-size: 1.1rem; color: var(--accent-gold); padding: 0 1rem; letter-spacing: 0.05em; } .checkout-form fieldset legend { font-family: var(--font-heading); font-size: 1.1rem; color: var(--accent-gold); padding: 0 0.75rem; letter-spacing: 0.05em; } .checkout-form h3 { margin-bottom: 1.5rem; color: var(--accent-gold); font-family: var(--font-heading); font-size: 1.2rem; margin-top: 2.5rem; } .checkout-form h3:first-of-type { margin-top: 0; } .checkout-form .form-group { margin-bottom: 1.25rem; } .checkout-form .form-group label { display: block; margin-bottom: 0.5rem; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--text-secondary); } .checkout-form .form-group input, .checkout-form .form-group select, .checkout-form .form-group textarea { width: 100%; padding: 0.85rem 1rem; background: transparent; border: 1px solid rgba(255,255,255,0.1); color: #fff; font-size: 1rem; transition: border-color 0.3s ease, box-shadow 0.3s ease; } .checkout-form .form-group input:focus, .checkout-form .form-group select:focus, .checkout-form .form-group textarea:focus { border-color: var(--accent-gold); box-shadow: 0 0 0 3px rgba(212,175,55,0.08); } .payment-methods-grid, .checkout-form .payment-methods-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem; margin-bottom: 1.5rem; } .checkout-form .payment-option { padding: 1.25rem 1rem; border: 1px solid rgba(255,255,255,0.08); border-radius: 8px; text-align: center; cursor: pointer; color: var(--text-secondary); transition: all 0.3s ease; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.08em; } .checkout-form .payment-option i { display: block; font-size: 1.3rem; margin-bottom: 0.5rem; } .checkout-form .payment-option.selected { border-color: var(--accent-gold); background: rgba(212,175,55,0.08); color: var(--accent-gold); box-shadow: 0 0 20px rgba(212,175,55,0.1); } .checkout-form .payment-option.selected i { color: var(--accent-gold); } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; } .checkout-label, .payment-label { display: block; margin-bottom: 0.5rem; font-size: 0.85rem; color: var(--text-secondary); } .payment-section { background: rgba(212,175,55,0.05); padding: 1.5rem; border: 1px solid var(--border-color); margin-bottom: 1.5rem; border-radius: 4px; } .payment-section p { margin: 0; } .payment-section h4 { color: var(--accent-gold); margin-bottom: 0.5rem; } .payment-section p { font-size: 0.9rem; color: var(--text-secondary); } .payment-icon-lock { color: var(--accent-gold); margin-right: 0.5rem; } .card-icon-position { position: absolute; right: 1rem; top: 50%; transform: translateY(-50%); color: var(--accent-gold); } .relative-wrap { position: relative; } .currency-prefix { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); color: var(--accent-gold); } .payment-secure-note { text-align: center; margin-top: 1.5rem; color: var(--text-secondary); font-size: 0.8rem; } .payment-note { font-size: 0.85rem; color: var(--text-secondary); } .back-link { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--accent-gold); font-size: 0.85rem; margin-bottom: 2rem; transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1); } .back-link:hover { color: var(--gold-bright); transform: translateX(-2px); } .back-link i { transition: transform 0.3s ease; } .back-link:hover i { transform: translateX(-2px); } .btn-submit-top { margin-top: 2rem; } .payment-desc { max-width: 600px; margin: 0 auto; } .conf-success-icon { width: 120px; height: 120px; border-radius: 50%; background: var(--gold-metallic); color: var(--bg-color); display: flex; align-items: center; justify-content: center; font-size: 3rem; margin: 0 auto 2rem; animation: successPop 1s cubic-bezier(0.23, 1, 0.32, 1); box-shadow: 0 15px 60px rgba(212, 175, 55, 0.5), 0 0 80px rgba(212,175,55,0.2), 0 0 120px rgba(212,175,55,0.1); } .conf-hero { min-height: 60vh; padding-top: 100px; } .conf-hero-content { opacity: 1; transform: none; } .conf-title { font-size: 1.5rem; color: var(--accent-gold); } .conf-text { max-width: 600px; margin: 0 auto; } .conf-text + .conf-text { margin-top: 1rem; } .conf-text-note { max-width: 600px; margin: 0 auto 1.5rem; font-size: 0.9rem; color: var(--text-secondary); } .conf-text-note strong { color: var(--accent-gold); } .conf-actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; } .conf-summary-wrap { max-width: 700px; margin: 0 auto; } .conf-total { text-align: right; font-size: 1.3rem; border-top: 1px solid var(--border-color); padding-top: 1.5rem; margin-top: 1rem; } .conf-total strong { color: var(--accent-gold); } .conf-total-amount { color: var(--accent-gold); font-size: clamp(1.3rem, 3vw, 1.75rem); font-weight: 600; } .conf-details { margin-top: 2rem; } .order-item { display: flex; align-items: center; gap: 1.25rem; padding: 1.25rem 0; border-bottom: 1px solid rgba(212,175,55,0.1); } .order-item-img { width: 70px; height: 70px; object-fit: cover; border-radius: var(--radius-md); } .order-item-info { flex: 1; } .order-item-name { font-family: var(--font-heading); font-size: 1.05rem; margin-bottom: 0.3rem; } .order-item-qty { font-size: 0.85rem; color: var(--text-secondary); } .order-item-price { color: var(--accent-gold); font-weight: 500; font-size: 1.05rem; } .conf-order-label { color: var(--accent-gold); font-weight: 500; } .detail-wishlist-btn { width: 50px; height: 50px; border: 1px solid var(--border-color); display: flex; align-items: center; justify-content: center; font-size: 1.2rem; } .trust-badges { display: flex; gap: 1.5rem; margin-top: 2rem; padding: 1.5rem; border: 1px solid rgba(212,175,55,0.12); border-radius: var(--radius-md); background: rgba(212,175,55,0.02); } .trust-badge { text-align: center; flex: 1; transition: all 0.3s ease; } .trust-badge:hover { background: rgba(212,175,55,0.04); border-radius: var(--radius-sm); } .trust-badge i { color: var(--accent-gold); font-size: 1.3rem; margin-bottom: 0.4rem; display: block; } .trust-badge span { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-secondary); } .product-specs { margin-top: 3rem; border-top: 1px solid rgba(212,175,55,0.1); padding-top: 2rem; } .spec-list { list-style: none; padding: 0; } .spec-list li { margin-bottom: 0.75rem; font-size: 0.95rem; padding: 0.75rem 0; border-bottom: 1px solid rgba(255,255,255,0.05); display: flex; justify-content: space-between; } .spec-list li strong { color: var(--text-primary); font-weight: 500; } .spec-list li span { color: var(--text-secondary); } /* ============================================================ FORM VALIDATION ============================================================ */ .input-error { border-color: var(--error-color) !important; box-shadow: 0 0 0 2px rgba(231, 76, 60, 0.2); animation: inputErrorShake 0.4s ease; } @keyframes inputErrorShake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-4px); } 50% { transform: translateX(4px); } 75% { transform: translateX(-2px); } } /* ============================================================ NEWSLETTER FEEDBACK ============================================================ */ .newsletter-form .form-feedback { display: block; margin-top: 0.5rem; font-size: 0.8rem; color: var(--accent-gold); } /* ============================================================ PAGE TRANSITION ============================================================ */ body { animation: pageEnter 0.8s cubic-bezier(0.23, 1, 0.32, 1); } @keyframes pageEnter { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } body.loaded { opacity: 1; } /* ============================================================ PAGE LOADING OVERLAY ============================================================ */ .page-loading-overlay { position: fixed; inset: 0; z-index: 99998; background: rgba(5, 5, 5, 0.92); display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0s 0.3s; } .page-loading-overlay.active { opacity: 1; visibility: visible; transition: opacity 0.3s ease, visibility 0s 0s; } .loading-spinner { width: 48px; height: 48px; border: 3px solid rgba(212, 175, 55, 0.15); border-top-color: var(--accent-gold); border-radius: 50%; animation: loadingSpin 0.8s linear infinite; box-shadow: 0 0 20px rgba(212, 175, 55, 0.2); } @keyframes loadingSpin { to { transform: rotate(360deg); } } /* ============================================================ PAYMENT METHODS GRID ============================================================ */ .payment-methods-grid { display: flex; gap: 1rem; flex-wrap: wrap; } /* ============================================================ HOMEPAGE — Editorial Premium (Research-Backed) ============================================================ */ /* --- Hero refinements --- */ .hero-content h1 { font-size: clamp(2.8rem, 5.5vw, 5rem); letter-spacing: 0.08em; } .hero-content p { font-size: 0.95rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-secondary); margin-bottom: 2.5rem; max-width: 500px; margin-left: auto; margin-right: auto; font-weight: 300; } /* --- Atelier Statement --- */ .atelier-statement { padding: 8rem 0; text-align: center; background: linear-gradient(180deg, var(--bg-color) 0%, rgba(212,175,55,0.04) 50%, var(--bg-color) 100%); position: relative; } .atelier-statement .container { max-width: 720px; } .statement-line { width: 120px; height: 1px; background: linear-gradient(90deg, transparent, var(--gold-mid), transparent); margin: 0 auto; opacity: 0.8; } .atelier-statement p { font-family: var(--font-heading); font-size: 1.6rem; line-height: 2; color: var(--text-primary); margin: 4rem 0; font-style: italic; position: relative; font-weight: 300; letter-spacing: 0.02em; } /* --- Named Collections Editorial --- */ .nc-section { padding: 0; } .nc-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 350px 350px; gap: 3px; background: rgba(212,175,55,0.08); } .nc-tile { position: relative; overflow: hidden; cursor: pointer; display: block; } .nc-tile::after { content: ''; position: absolute; inset: 0; border: 1px solid transparent; transition: border-color 0.6s ease, box-shadow 0.6s ease; z-index: 3; pointer-events: none; } .nc-tile:hover::after { border-color: rgba(212, 175, 55, 0.3); box-shadow: inset 0 0 40px rgba(212, 175, 55, 0.05); } .nc-tile-large { grid-row: span 2; } .nc-bg { position: absolute; inset: 0; background-size: cover; background-position: center; transition: transform 1.2s cubic-bezier(0.23, 1, 0.32, 1); filter: brightness(0.35); } .nc-tile:hover .nc-bg { transform: scale(1.08); } .nc-overlay { position: absolute; bottom: 0; left: 0; right: 0; padding: 3rem; background: linear-gradient(to top, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.5) 50%, transparent 100%); transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1); } .nc-tile:hover .nc-overlay { padding-bottom: 4rem; } .nc-name { font-family: var(--font-heading); font-size: 2rem; color: var(--gold-light); display: block; margin-bottom: 0.5rem; transition: all 0.4s ease; } .nc-tile:hover .nc-name { color: var(--gold-bright); text-shadow: 0 0 20px rgba(212,175,55,0.3); } .nc-sub { font-size: 0.75rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--text-secondary); margin: 0; opacity: 0; transform: translateY(8px); transition: all 0.4s ease 0.1s; } .nc-tile:hover .nc-sub { opacity: 1; transform: translateY(0); } /* --- Curated Selection --- */ .curated-section { padding: 8rem 0; background: linear-gradient(180deg, var(--bg-color) 0%, var(--bg-secondary) 8%, var(--bg-secondary) 92%, var(--bg-color) 100%); } .curated-header { margin-bottom: 4rem; text-align: center; } .curated-header h2 { font-size: clamp(1.8rem, 3vw, 2.5rem); margin-bottom: 0.5rem; position: relative; display: inline-block; } .curated-header h2::after { content: ''; display: block; width: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--gold-mid), transparent); margin: 0.6rem auto 0; animation: goldLineGrow 1.5s cubic-bezier(0.23, 1, 0.32, 1) forwards 0.3s; } @keyframes goldLineGrow { to { width: 48px; } } .curated-subtitle { font-size: 0.85rem; color: var(--text-secondary); font-weight: 300; letter-spacing: 0.05em; } .curated-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; background: rgba(212,175,55,0.08); max-width: 1100px; margin: 0 auto; border-radius: var(--radius-lg); overflow: hidden; } .curated-card { display: block; background: var(--bg-secondary); overflow: hidden; transition: background 0.5s cubic-bezier(0.23, 1, 0.32, 1), transform 0.5s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 0.5s cubic-bezier(0.23, 1, 0.32, 1), border-color 0.5s ease; position: relative; border-radius: var(--radius-md); } .curated-card::after { content: ''; position: absolute; inset: 0; border: 1px solid transparent; transition: border-color 0.5s ease; z-index: 2; pointer-events: none; } .curated-card:hover::after { border-color: rgba(212, 175, 55, 0.2); } .curated-card:hover { background: #0c0c0c; transform: translateY(-4px); box-shadow: 0 20px 60px rgba(0,0,0,0.5), 0 0 80px rgba(212,175,55,0.1); border-color: rgba(212, 175, 55, 0.5); } .curated-card:active { transform: translateY(-2px); transition-duration: 0.15s; } .curated-img { aspect-ratio: 1/1; overflow: hidden; border: 1px solid rgba(212, 175, 55, 0.08); position: relative; } .curated-img img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s cubic-bezier(0.23, 1, 0.32, 1), filter 0.6s ease; filter: brightness(0.85); } .curated-card:hover .curated-img img { transform: scale(1.05); } .curated-body { padding: 2rem 2.5rem 2.5rem; } .curated-badge { display: inline-block; font-size: 0.65rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold-mid); border: 1px solid rgba(212,175,55,0.2); padding: 0.35rem 0.8rem; margin-bottom: 1rem; border-radius: var(--radius-sm); } .curated-body h3 { font-family: var(--font-heading); font-size: 1.3rem; font-weight: 400; color: var(--text-primary); margin-bottom: 0.75rem; line-height: 1.3; } .curated-body p { font-size: 0.9rem; color: var(--text-secondary); line-height: 1.7; margin-bottom: 1.25rem; } .curated-price { font-size: 1.1rem; font-weight: 500; background: var(--gold-metallic); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; display: block; margin-bottom: 0.75rem; } .curated-link { font-size: 0.75rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--text-secondary); border-bottom: 1px solid rgba(212,175,55,0.2); padding-bottom: 2px; transition: all 0.3s ease; display: inline-block; } .curated-card:hover .curated-link { color: var(--gold-bright); border-color: var(--gold-bright); transform: translateX(2px); } .curated-cta { text-align: center; margin-top: 3rem; } .curated-cta a { font-size: 0.8rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold-mid); border-bottom: 1px solid rgba(212,175,55,0.2); padding-bottom: 3px; transition: var(--transition-fast); } .curated-cta a:hover { color: var(--gold-bright); border-color: var(--gold-bright); } /* --- Craftsmanship Section --- */ .craft-section { padding: 8rem 0; background: linear-gradient(180deg, var(--bg-color) 0%, rgba(212,175,55,0.04) 50%, var(--bg-color) 100%); } .craft-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 4rem; align-items: center; } .craft-image { overflow: hidden; } .craft-image img { width: 100%; height: 520px; object-fit: cover; display: block; transition: transform 0.8s cubic-bezier(0.23, 1, 0.32, 1), filter 0.5s ease; filter: brightness(0.9); } .craft-image:hover img { transform: scale(1.03); filter: brightness(1); } .craft-text h2 { font-size: clamp(1.8rem, 3vw, 2.5rem); margin-bottom: 1.5rem; } .craft-text p { color: var(--text-secondary); line-height: 2; font-size: 0.95rem; margin-bottom: 2rem; } .craft-signature { display: flex; align-items: center; gap: 1.25rem; padding-top: 1.5rem; border-top: 1px solid rgba(212,175,55,0.12); } .cs-line { width: 40px; height: 1px; background: var(--gold-metallic); flex-shrink: 0; } .craft-signature span { font-family: var(--font-heading); font-style: italic; font-size: 0.95rem; color: var(--gold-light); letter-spacing: 0.05em; } /* --- Voices --- */ .voices-section { padding: 8rem 0; background: linear-gradient(180deg, var(--bg-color) 0%, var(--bg-secondary) 8%, var(--bg-secondary) 92%, var(--bg-color) 100%); } .voices-header { margin-bottom: 3.5rem; } .voices-header h2 { font-size: clamp(1.8rem, 3vw, 2.5rem); margin-bottom: 0; } .voices-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; max-width: 1050px; margin: 0 auto; } .voice-card { text-align: center; padding: 3rem 2.5rem; background: linear-gradient(160deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01)); border: 1px solid rgba(212, 175, 55, 0.05); border-radius: var(--radius-lg); transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1); position: relative; overflow: hidden; } .voice-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--gold-mid), transparent); opacity: 0; transition: opacity 0.6s ease; } .voice-card:hover { border-color: rgba(212, 175, 55, 0.8); transform: translateY(-3px); box-shadow: 0 20px 50px rgba(0,0,0,0.5), 0 0 60px rgba(212,175,55,0.12); background: linear-gradient(160deg, rgba(255,255,255,0.1), rgba(255,255,255,0.04)); } .voice-card:hover::before { opacity: 1; } .voice-text { font-family: var(--font-heading); font-size: 1rem; font-style: italic; line-height: 1.8; color: var(--text-secondary); margin-bottom: 1.5rem; position: relative; } .voice-text::before { content: '\201C'; display: block; font-size: 2.5rem; line-height: 1; background: var(--gold-metallic); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; margin-bottom: 0.75rem; opacity: 0.5; } .voice-name { font-size: 0.75rem; letter-spacing: 0.15em; color: var(--gold-mid); text-transform: uppercase; font-weight: 500; } .voice-verified { font-size: 0.62rem; letter-spacing: 0.12em; color: var(--text-faint); font-weight: 400; font-style: italic; text-transform: none; } /* --- Journal Section --- */ .journal-section { padding: 8rem 0; } .journal-header { margin-bottom: 3rem; } .journal-header h2 { font-size: clamp(1.8rem, 3vw, 2.5rem); margin-bottom: 0; position: relative; display: inline-block; } .journal-header h2::after { content: ''; display: block; width: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--gold-mid), transparent); margin: 0.6rem auto 0; animation: goldLineGrow 1.5s cubic-bezier(0.23, 1, 0.32, 1) forwards 0.3s; } .journal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; max-width: 1000px; margin: 0 auto; } .journal-entry { overflow: hidden; background: var(--bg-color); border: 1px solid rgba(255,255,255,0.04); transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1); cursor: pointer; border-radius: var(--radius-md); } .journal-entry:hover { border-color: rgba(212,175,55,0.2); transform: translateY(-2px); box-shadow: 0 8px 25px rgba(0,0,0,0.3); } .journal-img { aspect-ratio: 16/10; background-size: cover; background-position: center; transition: transform 0.8s cubic-bezier(0.23, 1, 0.32, 1), filter 0.5s ease; filter: brightness(0.85); } .journal-entry:hover .journal-img { transform: scale(1.03); filter: brightness(1); } .journal-body { padding: 1.75rem; } .journal-meta { font-size: 0.6rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold-mid); display: block; margin-bottom: 0.6rem; } .journal-body h3 { font-family: var(--font-heading); font-size: 1.15rem; font-weight: 400; color: var(--text-primary); margin-bottom: 0.6rem; } .journal-body p { font-size: 0.85rem; color: var(--text-secondary); line-height: 1.7; margin: 0; } /* --- Final CTA --- */ .final-cta { padding: 8rem 0; text-align: center; background: linear-gradient(180deg, var(--bg-color) 0%, var(--bg-secondary) 35%, var(--bg-secondary) 65%, var(--bg-color) 100%); position: relative; overflow: hidden; } .final-cta::before { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 600px; height: 600px; background: radial-gradient(circle, rgba(212,175,55,0.12) 0%, transparent 65%); pointer-events: none; } .final-cta::after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 400px; height: 400px; background: radial-gradient(circle, rgba(212,175,55,0.08) 0%, transparent 70%); pointer-events: none; } .final-cta p { font-family: var(--font-heading); font-size: clamp(1.3rem, 2.5vw, 1.8rem); color: var(--text-primary); letter-spacing: 0.03em; font-weight: 300; } .final-cta a { color: var(--accent-gold); border-bottom: 1px solid rgba(212,175,55,0.25); padding: 0.5rem 0; transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1); font-weight: 400; display: inline-block; } .final-cta a:hover { color: var(--gold-bright); border-color: var(--gold-bright); transform: translateY(-1px); } /* ============================================================ TOAST — Gold Luxury ============================================================ */ .toast { padding: 1rem 1.5rem; border-radius: var(--radius-md); font-size: 0.9rem; pointer-events: auto; min-width: 240px; max-width: 400px; animation: toastIn 0.6s cubic-bezier(0.23, 1, 0.32, 1), toastOut 0.6s cubic-bezier(0.23, 1, 0.32, 1) 2.5s forwards; border-left: 3px solid var(--accent-gold); box-shadow: 0 8px 30px rgba(0,0,0,0.5), 0 0 20px rgba(212,175,55,0.05); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); } .toast-success { border-left-color: #4CAF50; background: rgba(76, 175, 80, 0.1); color: #e8f5e9; } .toast-error { border-left-color: #e74c3c; background: rgba(231, 76, 60, 0.1); color: #fce4ec; } .toast-info { border-left-color: var(--accent-gold); background: rgba(212, 175, 55, 0.1); color: #fff8e1; } @keyframes toastIn { 0% { opacity: 0; transform: translateX(100%) scale(0.95); } 100% { opacity: 1; transform: translateX(0) scale(1); } } @keyframes toastOut { 0% { opacity: 1; transform: translateX(0) scale(1); } 100% { opacity: 0; transform: translateX(100%) scale(0.95); } } /* ============================================================ SKELETON LOADING — Luxurious Shimmer ============================================================ */ .skeleton { background: linear-gradient(90deg, #0a0a0a 25%, #1a1a1a 50%, #0a0a0a 75%); background-size: 200% 100%; animation: shimmer 2s infinite ease-in-out; border-radius: var(--radius-sm); } @keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* ============================================================ GOLD BORDER GLOW — Utility ============================================================ */ .gold-border-glow { position: relative; } .gold-border-glow::before { content: ''; position: absolute; inset: -1px; border-radius: inherit; background: linear-gradient(135deg, rgba(212,175,55,0.3), transparent, rgba(212,175,55,0.3)); z-index: -1; opacity: 0; transition: opacity 0.5s ease; } .gold-border-glow:hover::before { opacity: 1; } /* ============================================================ NOISE TEXTURE OVERLAY — Subtle Grain ============================================================ */ body::after { content: ''; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E"); pointer-events: none; z-index: 0; opacity: 0.3; } /* ============================================================ FOOTER — Premium Dark Design System ============================================================ */ .footer { background: linear-gradient(180deg, #020202 0%, #010101 50%, #000000 100%); border-top: 1px solid rgba(212, 175, 55, 0.15); padding-top: 6rem; padding-bottom: 2rem; position: relative; contain: layout style; content-visibility: auto; contain-intrinsic-size: 500px; } .footer::before { content: ''; position: absolute; top: -1px; left: 50%; transform: translateX(-50%); width: 70%; max-width: 500px; height: 1px; background: linear-gradient(90deg, transparent, rgba(212,175,55,0.9), transparent); } .footer-content { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.5fr; gap: 4rem; margin-bottom: 4rem; } .footer-logo { font-family: var(--font-heading); font-size: 1.8rem; margin-bottom: 1.25rem; letter-spacing: 2px; background: var(--gold-metallic); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .footer-column p { color: var(--text-ghost); line-height: 1.8; margin-bottom: 1.5rem; font-size: 0.9rem; } .footer-column h4 { color: var(--accent-gold); font-size: 0.9rem; margin-bottom: 1.5rem; letter-spacing: 0.15em; text-transform: uppercase; font-weight: 500; } .footer-column ul { list-style: none; padding: 0; } .footer-column ul li { margin-bottom: 0.6rem; } .footer-column ul li a { color: var(--text-ghost); transition: all 0.3s ease; font-size: 0.9rem; text-decoration: none; display: inline-block; position: relative; padding: 0.7rem 0; } .footer-column ul li a::after { content: ''; display: block; width: 0; height: 1px; background: var(--accent-gold); transition: width 0.4s cubic-bezier(0.23, 1, 0.32, 1); } .footer-column ul li a:hover { color: var(--accent-gold); padding-left: 0.5rem; } .footer-column ul li a:hover::after { width: 100%; } .social-links { display: flex; gap: 1rem; margin-top: 1.5rem; } .social-links a { color: var(--text-ghost); font-size: 1.1rem; transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1); width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; border: 1px solid #333; border-radius: 50%; position: relative; overflow: hidden; } .social-links a::before { content: ''; position: absolute; inset: 0; background: var(--gold-metallic); opacity: 0; transition: opacity 0.4s ease; border-radius: 50%; } .social-links a:hover { color: var(--bg-color); border-color: var(--accent-gold); transform: translateY(-3px); box-shadow: 0 12px 35px rgba(212,175,55,0.4), 0 0 50px rgba(212,175,55,0.15); } .social-links a:hover::before { opacity: 1; } .social-links a i { position: relative; z-index: 1; } .newsletter-form { position: relative; margin-top: 1rem; } .newsletter-form input { width: 100%; padding: 12px 0; background: transparent; border: none; border-bottom: 1px solid rgba(255,255,255,0.15); color: #fff; font-family: var(--font-body); font-size: 0.9rem; transition: border-color 0.3s ease; } .newsletter-form input:focus { border-bottom-color: var(--accent-gold); } .newsletter-form input::placeholder { color: var(--text-dim); } .newsletter-form button { position: absolute; right: 0; top: 50%; transform: translateY(-50%); background: none; border: 1px solid var(--accent-gold); color: var(--accent-gold); text-transform: uppercase; font-size: 0.65rem; letter-spacing: 0.1em; cursor: pointer; font-weight: 500; padding: 0.4rem 0.8rem; border-radius: var(--radius-sm); transition: all 0.3s ease; } .newsletter-form button:hover { background: var(--accent-gold); color: #0a0a0a; } .newsletter-form button:active { transform: translateY(-50%) scale(0.96); } .copyright { border-top: 1px solid rgba(255,255,255,0.05); padding-top: 1.5rem; display: flex; justify-content: space-between; align-items: center; color: var(--text-faint); font-size: 0.8rem; } .payment-methods { display: flex; gap: 0.75rem; font-size: 1.3rem; color: var(--text-muted); } .footer-trust { display: flex; gap: 1.1rem; flex-wrap: wrap; justify-content: flex-end; align-items: center; } .footer-trust span { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.72rem; letter-spacing: 0.06em; color: var(--text-muted); text-transform: uppercase; } .footer-trust i { color: var(--gold-mid); font-size: 0.8rem; } .payment-option { border: 2px solid var(--border-color); padding: 1.25rem; text-align: center; cursor: pointer; transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1); border-radius: var(--radius-md); background: transparent; } .payment-option:hover { border-color: rgba(212,175,55,0.3); background: rgba(212,175,55,0.03); transform: translateY(-2px); } .payment-option.selected { border-color: var(--accent-gold); background: rgba(212,175,55,0.06); color: var(--accent-gold); box-shadow: 0 0 20px rgba(212,175,55,0.1); } .payment-option i { font-size: 1.5rem; margin-bottom: 0.5rem; display: block; color: var(--text-secondary); transition: color 0.3s ease; } .payment-option.selected i { color: var(--accent-gold); } /* ============================================================ BASE UTILITY CLASSES (used across pages) ============================================================ */ /* --- Site Header --- */ .site-header { position: relative; } /* --- Value Item (about.html, bespoke.html) --- */ .value-item { text-align: center; padding: 2rem; background: var(--bg-secondary); border: 1px solid rgba(212,175,55,0.08); border-radius: var(--radius-lg); transition: all 0.4s ease; } .value-item:hover { transform: translateY(-2px); border-color: rgba(212,175,55,0.2); box-shadow: 0 12px 40px rgba(0,0,0,0.4); } /* --- Quick View Modal --- */ .modal-image { flex: 1; min-height: 300px; background: #111; border-radius: var(--radius-md); overflow: hidden; } .modal-image img { width: 100%; height: 100%; object-fit: cover; } .modal-info { flex: 1; padding: 1rem 0; } /* --- Search Overlay --- */ .search-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(5,5,5,0.97); z-index: 2100; display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity 0.4s ease; } .search-overlay.active { opacity: 1; pointer-events: auto; } .search-close { position: absolute; top: 1.5rem; right: 1.5rem; background: none; border: none; color: var(--text-secondary); font-size: 1.5rem; cursor: pointer; z-index: 2; transition: color 0.3s ease; } .search-close:hover { color: var(--accent-gold); } .search-container { width: 100%; max-width: 600px; padding: 0 1.5rem; } .search-input { width: 100%; padding: 1rem 0; background: transparent; border: none; border-bottom: 1px solid rgba(212,175,55,0.2); color: #fff; font-size: 1.5rem; font-family: var(--font-heading); outline: none; transition: border-color 0.3s ease; } .search-input:focus { border-bottom-color: var(--accent-gold); } .search-results { margin-top: 2rem; max-height: 400px; overflow-y: auto; } .search-result-item { display: flex; align-items: center; gap: 1rem; padding: 0.75rem 0; border-bottom: 1px solid rgba(255,255,255,0.05); cursor: pointer; text-decoration: none; color: var(--text-primary); transition: all 0.3s ease; } .search-result-item:hover { padding-left: 0.5rem; color: var(--accent-gold); } .search-result-item img { width: 50px; height: 50px; object-fit: cover; border-radius: var(--radius-sm); } .search-result-item .search-result-name { font-size: 0.95rem; } .search-result-item .search-result-price { font-size: 0.8rem; color: var(--accent-gold); margin-top: 0.2rem; } /* --- Filter Bar --- */ .filter-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; } .filter-bar { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; } .filter-groups { display: flex; gap: 0.75rem; flex-wrap: wrap; } .filter-btn { background: none; border: 1px solid rgba(212,175,55,0.2); color: var(--text-secondary); padding: 0.5rem 1rem; border-radius: var(--radius-sm); cursor: pointer; font-size: 0.8rem; font-family: var(--font-body); transition: all 0.3s ease; white-space: nowrap; } .filter-btn:hover, .filter-btn.active { border-color: var(--accent-gold); color: var(--accent-gold); background: rgba(212,175,55,0.05); } .filter-toggle { display: none; } .sort-select { background: var(--bg-secondary); border: 1px solid rgba(212,175,55,0.15); color: var(--text-primary); padding: 0.5rem 1rem; border-radius: var(--radius-sm); font-size: 0.8rem; font-family: var(--font-body); cursor: pointer; } .sort-label { font-size: 0.8rem; color: var(--text-secondary); } .active-filters-count { font-size: 0.75rem; color: var(--accent-gold); margin-left: 0.5rem; } .load-more-container { text-align: center; padding: 2rem 0; } .load-more-text { font-size: 0.85rem; color: var(--text-secondary); } /* --- Cart --- */ .cart-remove-btn { background: none; border: none; color: var(--text-secondary); font-size: 1rem; cursor: pointer; padding: 0.5rem; transition: color 0.3s ease; } .cart-remove-btn:hover { color: var(--error-color); } /* --- Link Button --- */ .btn-link { color: var(--accent-gold); text-decoration: none; font-weight: 500; transition: all 0.3s ease; } .btn-link:hover { color: var(--gold-bright); text-decoration: underline; } /* --- Ring Size Grid --- */ .ring-size-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; max-width: 400px; } /* --- Sticky Filters --- */ .sticky-filters { position: sticky; top: 80px; z-index: 10; padding: 1rem 0; } /* --- Scroll Animations (desktop base) --- */ .animate-on-scroll { opacity: 0; transform: translateY(20px); pointer-events: none; transition: opacity 0.8s cubic-bezier(0.23, 1, 0.32, 1), transform 0.8s cubic-bezier(0.23, 1, 0.32, 1); } .animate-on-scroll.revealed { opacity: 1; transform: translateY(0); pointer-events: auto; } .badge { display: inline-block; padding: 0.3rem 0.6rem; font-size: 0.65rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; border-radius: var(--radius-sm); line-height: 1; } .values-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; } .breadcrumb { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; font-size: 0.8rem; color: var(--text-secondary); margin-bottom: 2rem; } .breadcrumb a { color: var(--text-secondary); text-decoration: none; transition: color 0.3s ease; } .breadcrumb a:hover { color: var(--accent-gold); } .breadcrumb span { color: var(--accent-gold); } .accordion-content { display: none; padding: 1rem 0; border-top: 1px solid rgba(212,175,55,0.1); } .accordion-content.active { display: block; } .accordion-item { border-bottom: 1px solid rgba(212,175,55,0.08); } .accordion-header { cursor: pointer; display: flex; justify-content: space-between; align-items: center; padding: 1rem 0; font-weight: 500; color: var(--text-primary); transition: color 0.3s ease; } .accordion-header:hover { color: var(--accent-gold); } .accordion-header h2 { font-size: 1.1rem; margin-bottom: 0; font-family: var(--font-body); font-weight: 500; } .editorial-card { position: relative; border-radius: var(--radius-lg); overflow: hidden; min-height: 400px; display: flex; align-items: flex-end; } .editorial-bg { position: absolute; inset: 0; background-size: cover; background-position: center; } .editorial-content { position: relative; z-index: 1; padding: 2.5rem; color: #fff; } .editorial-content h3 { font-family: var(--font-heading); font-size: 1.8rem; margin-bottom: 0.5rem; color: var(--accent-gold); } .img-front { position: relative; z-index: 1; transition: opacity 0.5s ease; pointer-events: none; } .img-back { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.5s ease; } .product-card:hover .img-front { opacity: 0; } .product-card:hover .img-back { opacity: 1; } .recent-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; } .modal-body { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; padding: 2rem; } .modal-close { position: absolute; top: 1rem; right: 1rem; background: none; border: none; color: var(--text-secondary); font-size: 1.2rem; cursor: pointer; z-index: 2; transition: color 0.3s ease; } .modal-close:hover { color: var(--accent-gold); } .view-full-details { display: inline-block; margin-top: 1rem; color: var(--accent-gold); font-size: 0.85rem; text-decoration: none; transition: all 0.3s ease; } .view-full-details:hover { color: var(--gold-bright); transform: translateX(2px); } .load-more-link { color: var(--accent-gold); text-decoration: none; transition: all 0.3s ease; } .load-more-link:hover { color: var(--gold-bright); text-decoration: underline; } .ring-size-card { border: 1px solid rgba(212,175,55,0.1); border-radius: var(--radius-md); padding: 1.5rem; text-align: center; cursor: pointer; transition: all 0.3s ease; } .ring-size-card:hover, .ring-size-card.active { border-color: var(--accent-gold); background: rgba(212,175,55,0.05); } .journal-card { display: flex; flex-direction: column; border: 1px solid rgba(212,175,55,0.08); border-radius: var(--radius-lg); overflow: hidden; transition: all 0.4s ease; background: var(--bg-secondary); text-decoration: none; color: inherit; height: 100%; } .journal-card:hover { transform: translateY(-2px); border-color: rgba(212,175,55,0.2); box-shadow: 0 12px 40px rgba(0,0,0,0.4); } .journal-image-wrap { width: 100%; aspect-ratio: 16 / 9; overflow: hidden; background: #141414; flex-shrink: 0; } .journal-image { width: 100%; height: 100%; aspect-ratio: 16 / 9; object-fit: cover; object-position: center; display: block; background: #141414; transition: transform 0.6s ease; } .journal-card:hover .journal-image { transform: scale(1.04); } .journal-card-body { padding: 1.25rem 1.35rem 1.5rem; display: flex; flex-direction: column; flex: 1; gap: 0.35rem; } .journal-card .journal-meta { font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(212, 175, 55, 0.7); margin-bottom: 0.15rem; } .journal-title { font-family: var(--font-heading); font-size: 1.15rem; margin: 0 0 0.35rem; color: var(--text-primary); line-height: 1.35; } .journal-excerpt { color: var(--text-secondary); font-size: 0.9rem; line-height: 1.6; margin: 0 0 0.75rem; flex: 1; } .journal-card .link-underline { margin-top: auto; font-size: 0.8rem; color: var(--accent-gold); } .blog-hero-img { width: 100%; height: 100%; min-height: 240px; max-height: 420px; object-fit: cover; object-position: center; display: block; border-radius: 4px; } #blog-image-wrap { background: #111; border-radius: 4px; overflow: hidden; } .wishlist-empty-state, .cart-empty-state { text-align: center; padding: 4rem 2rem; color: var(--text-secondary); } .wishlist-empty-state i, .cart-empty-state i { font-size: 3rem; color: var(--accent-gold); margin-bottom: 1.5rem; opacity: 0.5; } .filter-dropdown { position: relative; } .dropdown-menu { position: absolute; top: 100%; left: 0; z-index: 10; background: var(--bg-secondary); border: 1px solid rgba(212,175,55,0.1); border-radius: var(--radius-md); padding: 0.5rem; min-width: 180px; display: none; } .filter-dropdown.active .dropdown-menu { display: block; } .filter-badge { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.25rem 0.5rem; background: rgba(212,175,55,0.1); border-radius: var(--radius-sm); font-size: 0.75rem; color: var(--accent-gold); } .clear-filters-btn { background: none; border: 1px solid rgba(212,175,55,0.2); color: var(--text-secondary); padding: 0.4rem 0.8rem; border-radius: var(--radius-sm); cursor: pointer; font-size: 0.8rem; transition: all 0.3s ease; } .clear-filters-btn:hover { border-color: var(--accent-gold); color: var(--accent-gold); } .sticky-qty-num { min-width: 20px; text-align: center; font-weight: 600; } .sticky-minus, .sticky-plus { background: none; border: 1px solid rgba(212,175,55,0.2); color: var(--text-primary); width: 44px; height: 44px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.3s ease; } .sticky-minus:hover, .sticky-plus:hover { border-color: var(--accent-gold); background: rgba(212,175,55,0.1); } .cart-item-name { font-weight: 500; color: var(--text-primary); margin-bottom: 0.25rem; } .cart-item-ref { font-size: 0.75rem; color: var(--text-secondary); } .cart-qty-selector { display: flex; align-items: center; gap: 0.5rem; } .cart-qty-btn { background: none; border: 1px solid rgba(212,175,55,0.2); color: var(--text-primary); width: 44px; height: 44px; border-radius: 50%; cursor: pointer; transition: all 0.3s ease; } .cart-qty-btn:hover { border-color: var(--accent-gold); } .cart-qty-input { width: 30px; text-align: center; background: none; border: none; color: var(--text-primary); font-size: 0.9rem; } .cart-total-cell { font-weight: 600; color: var(--accent-gold); font-size: 1.1rem; } .order-sidebar { background: var(--bg-secondary); border: 1px solid rgba(212,175,55,0.1); border-radius: var(--radius-lg); padding: 2rem; position: sticky; top: 120px; } .skeleton--title, .skeleton--price { background: linear-gradient(90deg, #1a1a1a 25%, #2a2a2a 50%, #1a1a1a 75%); background-size: 200% 100%; animation: shimmer 1.5s ease-in-out infinite; border-radius: var(--radius-sm); } .skeleton--title { height: 1.5rem; width: 60%; margin-bottom: 0.75rem; } .skeleton--price { height: 1.2rem; width: 40%; } .contact-section { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; padding: 4rem 0; } .contact-info { padding-right: 2rem; } .contact-form-wrapper { background: var(--bg-secondary); border: 1px solid rgba(212,175,55,0.1); border-radius: var(--radius-lg); padding: 2.5rem; } .contact-hours { margin-top: 2rem; padding-top: 2rem; border-top: 1px solid rgba(212,175,55,0.08); } .hours-row { display: flex; justify-content: space-between; padding: 0.5rem 0; color: var(--text-secondary); font-size: 0.9rem; } .char-count { text-align: right; font-size: 0.75rem; color: var(--text-secondary); margin-top: 0.25rem; } .legal-container { max-width: 800px; margin: 0 auto; padding: 4rem 0; } .legal-content { line-height: 1.9; color: var(--text-secondary); } .legal-content h2 { font-family: var(--font-heading); color: var(--accent-gold); margin: 2rem 0 1rem; } .legal-content p { margin-bottom: 1rem; } .appointment-container { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; } .appointment-desc { color: var(--text-secondary); line-height: 1.8; margin-bottom: 2rem; } .appointment-select, .date-input { width: 100%; padding: 0.75rem 1rem; background: var(--bg-secondary); border: 1px solid rgba(212,175,55,0.15); border-radius: var(--radius-md); color: var(--text-primary); font-family: var(--font-body); } .appointment-select:focus, .date-input:focus { border-color: var(--accent-gold); outline: none; } .about-address { font-style: normal; color: var(--text-secondary); line-height: 1.8; margin-bottom: 1.5rem; } .bg-darker { background: var(--bg-secondary); } .values-grid--about, .values-grid--auto { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; } .spotlight-text--padded { padding: 2rem 0; } .hero--bespoke { min-height: 70vh; } .btn--spaced { margin-top: 2rem; } .service-checklist { list-style: none; padding: 0; } .service-checklist li { padding: 0.5rem 0; color: var(--text-secondary); } .service-checklist li::before { content: '✦'; color: var(--accent-gold); margin-right: 0.75rem; } .services-link { color: var(--accent-gold); text-decoration: none; font-weight: 500; } .services-link:hover { text-decoration: underline; } .services-note { font-size: 0.85rem; color: var(--text-secondary); margin-top: 2rem; text-align: center; } .blog-post-section { max-width: 800px; margin: 0 auto; padding: 4rem 0; } .post-nav { display: flex; justify-content: space-between; gap: 2rem; margin-top: 4rem; padding-top: 2rem; border-top: 1px solid rgba(212,175,55,0.1); } .post-nav-link { flex: 1; text-decoration: none; padding: 1.5rem; border: 1px solid rgba(212,175,55,0.08); border-radius: var(--radius-md); transition: all 0.3s ease; } .post-nav-link:hover { border-color: rgba(212,175,55,0.2); background: rgba(212,175,55,0.02); } .post-nav-label { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--accent-gold); } .post-nav-title { font-size: 0.9rem; color: var(--text-primary); margin-top: 0.25rem; display: block; } #toast-container .toast { min-width: 280px; max-width: 400px; padding: 0.9rem 1.25rem; border-radius: var(--radius-md); font-size: 0.9rem; box-shadow: 0 8px 30px rgba(0,0,0,0.5); pointer-events: auto; animation: toastIn 0.3s ease forwards; } .faq-item { border-bottom: 1px solid rgba(212,175,55,0.08); } .faq-question { display: flex; justify-content: space-between; align-items: center; padding: 1.25rem 0; cursor: pointer; font-weight: 500; color: var(--text-primary); transition: color 0.3s ease; font-size: 1.05rem; } .faq-question:hover { color: var(--accent-gold); } .faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.5s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.4s ease, padding 0.4s ease; opacity: 0; padding: 0; color: var(--text-secondary); line-height: 1.8; font-size: 0.95rem; } .faq-item.active .faq-answer { max-height: 500px; opacity: 1; padding: 0.5rem 0 1.25rem; } .faq-section-title { font-family: var(--font-heading); color: var(--accent-gold); font-size: 1.1rem; margin: 2.5rem 0 1rem; letter-spacing: 0.05em; } .faq-heading { font-size: clamp(1.8rem, 4vw, 2.5rem); text-align: center; margin-bottom: 3rem; background: var(--gold-metallic); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .faq-container { max-width: 800px; margin: 0 auto; } /* ============================================================ RESPONSIVE — Complete Mobile System ============================================================ */ /* --- Tablet (<=992px) --- */ @media (max-width: 992px) { .container { padding: 0 2rem; } .nav-links { gap: 2rem; } .nav-links a { font-size: 0.85rem; letter-spacing: 0.12em; padding: 0.4rem 0.5rem; white-space: nowrap; } .values-grid { grid-template-columns: repeat(2, 1fr); } .footer-content { grid-template-columns: 1fr 1fr; gap: 3rem; } .nc-grid { grid-template-columns: 1fr 1fr; grid-template-rows: auto; } .nc-tile { aspect-ratio: 16/9; min-height: 240px; } .nc-tile-large { grid-row: span 1; aspect-ratio: 16/9; } .curated-grid { grid-template-columns: 1fr; max-width: 600px; } .craft-grid { grid-template-columns: 1fr; gap: 2rem; } .craft-image img { height: 350px; } .voices-grid { grid-template-columns: 1fr; max-width: 500px; gap: 0.5rem; } .journal-grid { grid-template-columns: 1fr; max-width: 500px; } .category-grid { grid-template-columns: repeat(2, 1fr); } .category-card { height: 400px; } h1 { font-size: 3.5rem; } .hero-content h1 { font-size: 3.5rem; } } /* --- Mobile (<=768px) --- */ @media (max-width: 768px) { body { padding-bottom: calc(3.75rem + env(safe-area-inset-bottom, 0px)); } .bottom-nav { display: flex; border-top: 1px solid rgba(212, 175, 55, 0.1); } /* Typography */ h1 { font-size: 2.8rem; line-height: 1.15; } h2 { font-size: 2.5rem; line-height: 1.3; } .hero-content h1 { font-size: 2.8rem; } p { font-size: 0.9rem; line-height: 1.8; } .subtitle { font-size: 0.7rem; margin-bottom: 1rem; letter-spacing: 0.2em; } .container { padding: 0 1.25rem; } main, .product-detail-container, .detail-gallery, .main-image { max-width: 100%; overflow: hidden; } .section-padding { padding: 4rem 0; } .section-header { margin-bottom: 3rem; } .gold-divider { width: 40px; margin: 1.5rem 0; } /* Navigation */ .navbar { padding: 0.75rem 0; background: rgba(10,10,10,0.97); } .nav-container { display: flex; justify-content: space-between; align-items: center; overflow: hidden; } .logo { overflow: hidden; flex: 1 1 auto; min-width: 0; padding: 0 0.5rem; text-align: center; } .logo a { font-size: 0.85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; } .nav-links { display: none; } .nav-icons { gap: 0.4rem; margin-left: auto; flex-shrink: 0; } .nav-icons .cart-count { top: -2px; right: -2px; min-width: 14px; height: 14px; font-size: 0.5rem; padding: 0 2px; } .hamburger { display: flex; flex-shrink: 0; position: relative; z-index: 1001; } /* Mobile Menu */ .nav-links { position: fixed; top: 0; left: 0; width: 100%; max-width: 100vw; height: 100dvh; box-sizing: border-box; overflow-y: auto; overflow-x: hidden; background: rgba(3,3,3,0.98); flex-direction: column; justify-content: center; align-items: center; gap: 2.5rem; z-index: 1001; opacity: 0; visibility: hidden; display: flex; transform: translateY(-100%); transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.3s ease, visibility 0s 0.6s; backdrop-filter: blur(50px); -webkit-backdrop-filter: blur(50px); } .nav-links.active { opacity: 1; visibility: visible; transform: translateY(0); transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.3s ease, visibility 0s 0s; } .nav-links a { font-family: var(--font-heading); font-size: 1.6rem; letter-spacing: 0.2em; opacity: 0; transform: translateY(24px); padding: 0.6rem 2rem; transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.23, 1, 0.32, 1), color 0.3s ease; position: relative; } .nav-links.active { opacity: 1; visibility: visible; transform: translateY(0); transition: transform 0.55s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.3s ease, visibility 0s 0s; } .nav-links a { font-size: 1.4rem; letter-spacing: 0.18em; opacity: 0; transform: translateY(18px); padding: 0.5rem 2rem; transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.23, 1, 0.32, 1); position: relative; } .nav-links a::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 0; height: 1px; background: var(--gold-mid); transition: width 0.4s ease; } .nav-links.active a { opacity: 1; transform: translateY(0); } .nav-links a:nth-child(1) { transition-delay: 0.05s; } .nav-links a:nth-child(2) { transition-delay: 0.1s; } .nav-links a:nth-child(3) { transition-delay: 0.15s; } .nav-links a:nth-child(4) { transition-delay: 0.2s; } .nav-links a:nth-child(5) { transition-delay: 0.25s; } .nav-links a:nth-child(6) { transition-delay: 0.3s; } /* Hero */ .hero { height: 85dvh; min-height: 500px; } .hero-content { max-width: 100%; padding: 0 1.25rem; } .hero-content .btn, .contact-form .btn, .checkout-form .btn { width: 100%; text-align: center; box-sizing: border-box; } .hero-bg { filter: brightness(0.3); } .hero-bg::after { background: radial-gradient(ellipse at center 40%, rgba(212, 175, 55, 0.05) 0%, transparent 70%); } /* Page Header */ .page-header { padding: 7rem 0 3.5rem; } .page-header h1 { font-size: 2.2rem; } /* Homepage Sections */ .atelier-statement { padding: 3.5rem 0; } .atelier-statement p { font-size: 0.95rem; margin: 2rem 0; } .nc-grid { grid-template-columns: 1fr 1fr; } .nc-tile { min-height: 180px; aspect-ratio: 4/3; } .nc-tile-large { grid-column: span 2; aspect-ratio: 16/7; } .nc-overlay { padding: 1.5rem; } .nc-name { font-size: 1.1rem; } .nc-sub { font-size: 0.6rem; } .curated-section { padding: 3.5rem 0; } .curated-header { margin-bottom: 2rem; } .curated-grid { max-width: 100%; } .curated-img { aspect-ratio: 1/1; } .curated-body { padding: 1.25rem; } .curated-body h3 { font-size: 1rem; } .curated-body p { font-size: 0.8rem; margin-bottom: 0.75rem; } .curated-price { font-size: 0.9rem; } .craft-section { padding: 3.5rem 0; } .craft-grid { grid-template-columns: 1fr; gap: 1.5rem; } .craft-image img { height: 280px; } .craft-text h2 { font-size: 1.8rem; } .craft-text p { font-size: 0.9rem; line-height: 1.8; } .voices-section { padding: 3.5rem 0; } .voices-grid { max-width: 100%; gap: 0; } .voice-card { padding: 1.5rem 1rem; } .voice-text { font-size: 0.9rem; } .voice-text::before { font-size: 1.8rem; } .journal-section { padding: 3.5rem 0; } .journal-grid { max-width: 100%; gap: 1.5rem; } .journal-body { padding: 1.25rem; } .journal-body h3 { font-size: 1rem; } .journal-img { aspect-ratio: 16/9; } .final-cta { padding: 3.5rem 0; } .final-cta p { font-size: 1.2rem; } /* Product Grid */ .grid { gap: 2rem 1rem; } /* Collections Page */ .product-detail-container, .cart-container, .checkout-wrap { padding-top: 130px; } .product-image { aspect-ratio: 1/1; } .category-card { height: 320px; } .category-grid { grid-template-columns: 1fr; } .sticky-filters { top: 60px; padding: 0.75rem 0; } /* Product Detail */ .product-detail-container { grid-template-columns: minmax(0, 1fr); gap: 2rem; padding-top: 2rem; } .main-image { max-height: 400px; } .thumbnail-grid { gap: 0.5rem; } .detail-info h1 { font-size: 2rem; } .detail-price { font-size: 1.3rem; } .action-buttons { flex-direction: column; gap: 0.75rem; align-items: stretch; } .action-buttons .btn-icon { align-self: center; } /* Cart / Checkout */ #cart-content { grid-template-columns: 1fr !important; gap: 1.5rem; } .cart-table thead { display: none; } .cart-table tr { display: block; margin-bottom: 1.5rem; border-bottom: 1px solid var(--border-color); padding-bottom: 1rem; } .cart-table td { display: flex; justify-content: space-between; align-items: center; padding: 0.5rem 0; border: none; text-align: right; } .cart-table td::before { content: attr(data-label); color: var(--text-secondary); text-transform: uppercase; font-size: 0.75rem; letter-spacing: 0.05em; } .cart-item-info { flex-direction: row; text-align: left; justify-content: flex-start; width: 100%; } .cart-item-img { width: 60px; height: 60px; } .cart-summary { padding: 1.5rem; margin-top: 1.5rem; max-width: 100%; } .checkout-grid { grid-template-columns: 1fr; gap: 2rem; } .form-row { grid-template-columns: 1fr; gap: 1rem; } /* Filters */ .filters { gap: 1rem; flex-wrap: wrap; justify-content: flex-start; } .filter-groups { display: none; } .filter-bar { flex-wrap: wrap; gap: 0.5rem; align-items: center; } .filter-actions { flex-wrap: wrap; align-items: center; gap: 0.5rem; } .filter-toggle { font-size: 0.7rem; padding: 0.4rem 0.8rem; } .sort-select { font-size: 0.75rem; padding: 0.4rem 0.6rem; } /* Modal */ .modal-content { flex-direction: column; height: 90dvh; max-width: 95%; } .modal-image { height: 35%; } .modal-info { height: 65%; padding: 1.5rem; } .modal-info h1 { font-size: 1.5rem; } .search-input { font-size: 1.8rem; } /* Values / Services */ .values-grid { grid-template-columns: 1fr; gap: 1rem; } .value-item { padding: 1.5rem; } .services-grid { grid-template-columns: 1fr; gap: 1.5rem; } .service-card { padding: 2rem 1.5rem; } /* Spotlight */ .spotlight-container { grid-template-columns: 1fr; gap: 2rem; } .spotlight-image { height: 300px; } /* About */ .story-grid { grid-template-columns: 1fr; gap: 2rem; } /* Contact */ .contact-grid { grid-template-columns: 1fr; gap: 2rem; } /* Testimonials */ .testimonial-text { font-size: 1.3rem; } /* FAQ */ .faq-question { font-size: 1rem; } /* Editorial */ .editorial-card { grid-column: span 1; min-height: 250px; } .editorial-content h3 { font-size: 1.8rem; } /* Newsletter */ .newsletter-form button { position: relative; top: 0; right: auto; margin-top: 0.75rem; width: 100%; text-align: center; padding: 0.75rem 0; border-bottom: 1px solid transparent; } .newsletter-form button:hover { border-bottom-color: var(--accent-gold); } /* Footer */ .footer-content { grid-template-columns: 1fr 1fr; gap: 2rem; } .footer { padding-top: 3.5rem; } .footer-logo { font-size: 1.5rem; } .copyright { flex-direction: column; gap: 1rem; text-align: center; font-size: 0.8rem; } .payment-methods, .footer-trust { justify-content: center; } .payment-methods-grid { flex-direction: column; } /* Utility */ input, select, textarea { font-size: 16px !important; } .btn { padding: 1rem 2.5rem; font-size: 0.7rem; } #scroll-top-btn { width: 38px; height: 38px; font-size: 1rem; bottom: 4.5rem; left: 1rem; } .toast { font-size: 0.8rem; min-width: 200px; } } /* --- Small Mobile (<=576px) — luxury refinement --- */ @media (max-width: 576px) { .container { padding: 0 1.25rem; } main, .product-detail-container, .detail-gallery, .main-image { max-width: 100%; overflow: hidden; } .section-padding { padding: 3rem 0; } .atelier-statement, .craft-section, .journal-section { background: var(--bg-secondary, #111111); } /* Typography */ h1 { font-size: 2rem; line-height: 1.15; } h2 { font-size: 2rem; line-height: 1.25; } .hero-content h1 { font-size: 2rem; } p { font-size: 0.9rem; line-height: 1.7; } .subtitle { font-size: 0.65rem; margin-bottom: 0.85rem; letter-spacing: 0.18em; } /* Nav */ .navbar { padding: 0.5rem 0; background: rgba(10,10,10,0.97); } .logo a { font-size: 0.8rem; overflow: hidden; text-overflow: ellipsis; display: block; white-space: nowrap; } .nav-icons a, .nav-icons button { font-size: 0.9rem; padding: 0.3rem; min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; } .hamburger { font-size: 1.2rem; min-width: 44px; min-height: 44px; position: relative; z-index: 1001; } .nav-links a { font-size: 1.2rem; padding: 0.5rem 1.25rem; } .nav-links { gap: 1.75rem; } /* Hero */ .hero { min-height: 85dvh; } .hero-content h1 { font-size: 2.5rem; } .hero-content p { font-size: 0.85rem; max-width: 320px; } .hero-content .btn { width: 100%; font-size: 0.85rem; min-height: 48px; } .hero-bg { filter: brightness(0.3); } .hero-bg::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(135deg, rgba(10,10,10,0.85) 0%, rgba(20,18,14,0.5) 50%, rgba(10,10,10,0.7) 100%), radial-gradient(ellipse at center 30%, rgba(212,175,55,0.12) 0%, transparent 60%); z-index: 2; } .scroll-indicator { display: block; font-size: 1.8rem; opacity: 1; } /* Page Header */ .page-header { padding: 4.5rem 0 1.5rem; } .page-header h1 { font-size: 1.6rem; } /* NC Grid — 2-col tiles */ .nc-grid { grid-template-columns: 1fr 1fr; gap: 0.125rem; } .nc-tile-large { grid-column: span 2; aspect-ratio: 16/7; } .nc-tile { min-height: 100px; position: relative; } .nc-tile:active::after, .nc-tile-large:active::after { content: ''; position: absolute; inset: 0; border: 1px solid rgba(212,175,55,0.25); z-index: 3; } .nc-overlay { padding: 0.75rem; } .nc-name { font-size: 1rem; } .nc-sub { font-size: 0.62rem; } /* Atelier */ .atelier-statement { padding: 2rem 0; text-align: center; } .atelier-statement p { font-size: 1.05rem; margin: 0.75rem auto; max-width: 88%; line-height: 1.75; font-style: italic; color: var(--accent-gold); } /* Curated — 2-col grid, descriptions visible */ .curated-section { padding: 2rem 0; } .curated-header { text-align: center; margin-bottom: 1.25rem; } .curated-header h2 { font-size: 1.4rem; letter-spacing: 0.04em; display: inline-block; position: relative; } .curated-header h2::after { content: ''; display: block; width: 40px; height: 1.5px; background: var(--accent-gold); margin: 0.4rem auto 0; opacity: 0.6; } .curated-subtitle { font-size: 0.7rem; margin-top: 0.4rem; letter-spacing: 0.05em; color: var(--accent-gold); opacity: 0.5; } .curated-grid { grid-template-columns: 1fr 1fr; max-width: 100%; gap: 0.5rem; } .curated-card { background: #141414; border: 1px solid rgba(212,175,55,0.15); border-radius: 8px; overflow: hidden; position: relative; transition: border-color 0.3s ease, box-shadow 0.3s ease; } .curated-card::before { content: ''; position: absolute; top: 0; left: 10%; width: 80%; height: 1.5px; background: linear-gradient(90deg, transparent, rgba(212,175,55,0.35), transparent); z-index: 2; } .curated-card:active { border-color: rgba(212,175,55,0.4); box-shadow: 0 0 16px rgba(212,175,55,0.1); } .curated-img { aspect-ratio: 1/1; overflow: hidden; } .curated-img img { transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1); } .curated-card:active .curated-img img { transform: scale(1.04); } .curated-img { aspect-ratio: 1/1; } .curated-body { padding: 0.5rem 0.6rem 0.6rem; } .curated-badge { font-size: 0.5rem; padding: 0.15rem 0.4rem; margin-bottom: 0.35rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-gold); border: 1px solid rgba(212,175,55,0.15); border-radius: 2px; display: inline-block; } .curated-body h3 { font-size: 0.9rem; margin-bottom: 0.2rem; font-weight: 500; } .curated-body p { font-size: 0.72rem; line-height: 1.45; color: var(--text-secondary); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 0.35rem; } .curated-price { font-size: 0.85rem; margin-bottom: 0; display: block; } .curated-link { font-size: 0.65rem; display: inline-block; margin-right: 0.5rem; } .curated-add-btn { font-size: 0.6rem; padding: 0.25rem 0.55rem; margin-top: 0.3rem; border-radius: 3px; } .curated-cta { display: block; text-align: center; margin: 1.25rem auto 0; max-width: 220px; padding: 0.6rem 1rem; font-size: 0.75rem; border: 1px solid var(--accent-gold); color: var(--accent-gold); border-radius: 4px; } /* Craft */ .craft-section { padding: 2rem 0; border-top: 1px solid rgba(212,175,55,0.1); } .craft-image img { height: 200px; border-radius: 4px; } .craft-text { padding: 1rem 0 0; } .craft-text h2 { font-size: 1.3rem; margin-bottom: 0.5rem; } .craft-text p { font-size: 0.85rem; line-height: 1.6; margin-bottom: 0.5rem; color: var(--text-secondary); } .craft-signature span { font-size: 0.7rem; letter-spacing: 0.06em; } /* Voices */ .voices-section { padding: 2rem 0; border-top: 1px solid rgba(212,175,55,0.1); } .voices-grid { gap: 0.5rem; } .voice-card { padding: 0.85rem 0.75rem; background: #141414; border: 1px solid rgba(212,175,55,0.12); border-radius: 8px; } .voice-text { font-size: 0.85rem; line-height: 1.6; font-style: italic; color: var(--text-secondary); } .voice-text::before { content: '\201C'; font-size: 1.4rem; display: block; margin-bottom: 0.25rem; color: var(--accent-gold); font-style: normal; } .voice-name { font-size: 0.6rem; letter-spacing: 0.06em; color: var(--accent-gold); } /* Journal — 2-col grid, descriptions visible */ .journal-section { padding: 2rem 0; } .journal-header { text-align: center; margin-bottom: 1rem; } .journal-header h2 { display: inline-block; position: relative; } .journal-header h2::after { content: ''; display: block; width: 32px; height: 1.5px; background: var(--accent-gold); margin: 0.35rem auto 0; opacity: 0.5; } .journal-grid { grid-template-columns: 1fr; max-width: 500px; gap: 1.5rem; } .journal-entry { background: #141414; border: 1px solid rgba(212,175,55,0.12); border-radius: 8px; overflow: hidden; } .journal-body { padding: 0.4rem 0.55rem 0.55rem; } .journal-meta { font-size: 0.6rem; margin-bottom: 0.15rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-gold); opacity: 0.6; } .journal-body h3 { font-size: 0.85rem; margin-bottom: 0.2rem; font-weight: 500; } .journal-body p { font-size: 0.7rem; line-height: 1.4; color: var(--text-secondary); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 0.25rem; } .journal-img { aspect-ratio: 16/9; } /* Final CTA */ .final-cta { padding: 2rem 0; text-align: center; } .final-cta p { font-size: 1rem; } /* Product Grid */ .grid { gap: 1.5rem 0.75rem; } /* Collections Page */ .product-detail-container, .cart-container, .checkout-wrap { padding-top: 110px; } .product-image { aspect-ratio: 1/1; } .category-card { height: 280px; } .category-grid { grid-template-columns: 1fr; } .ring-size-card { padding: 1.5rem; } .ring-size-card h3 { font-size: 1.4rem; } .ring-size-card p { font-size: 0.75rem; } .sticky-filters { top: 56px; padding: 0.6rem 0; } .filters { gap: 0.75rem; } .filter-bar { gap: 0.5rem; max-width: 100%; } .filter-actions { flex-wrap: wrap; gap: 0.4rem; max-width: 100%; overflow-x: hidden; } .filter-toggle { font-size: 0; padding: 0.4rem 0.5rem; flex-shrink: 0; } .filter-toggle i { font-size: 0.85rem; margin: 0; } .sort-label { display: none; } .sort-select { width: auto; min-width: 40px; flex: 0 1 auto; font-size: 0.65rem; padding: 0.25rem 0.35rem; } /* Product Detail */ .product-detail-container { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; padding-top: 1.5rem; } .main-image { max-height: 320px; } .detail-info h1 { font-size: 1.8rem; } .detail-price { font-size: 1.35rem; } .detail-description { font-size: 0.95rem; } .action-buttons { flex-direction: column; gap: 0.5rem; align-items: stretch; } .action-buttons .btn-icon { align-self: center; } /* Cart / Checkout */ #cart-content { grid-template-columns: 1fr !important; gap: 1.25rem; } .cart-table thead { display: none; } .cart-table tr { display: block; margin-bottom: 1.25rem; border-bottom: 1px solid var(--border-color); padding-bottom: 0.75rem; } .cart-table td { display: flex; justify-content: space-between; align-items: center; padding: 0.4rem 0; border: none; text-align: right; } .cart-table td::before { content: attr(data-label); } .cart-item-img { width: 60px; height: 60px; } .cart-summary { padding: 1.25rem; margin-top: 1.25rem; max-width: 100%; } .summary-total { font-size: 1.4rem; } .checkout-grid { grid-template-columns: 1fr; gap: 1.5rem; } .form-row { grid-template-columns: 1fr; gap: 0.75rem; } /* Modal */ .modal-content { flex-direction: column; height: 90dvh; max-width: 96%; } .modal-image { height: 30%; } .modal-info { height: 70%; padding: 1.25rem; } .modal-info h1 { font-size: 1.5rem; } .search-input { font-size: 1.6rem; } /* Values / Services */ .values-grid { grid-template-columns: 1fr; gap: 0.75rem; } .value-item { padding: 1rem; } .services-grid { grid-template-columns: 1fr; gap: 1rem; } .service-card { padding: 1.25rem; } /* Contact */ .contact-grid { grid-template-columns: 1fr; gap: 1.5rem; } /* Testimonials */ .testimonial-text { font-size: 1.3rem; } /* FAQ */ .faq-question { font-size: 1rem; } .faq-answer { font-size: 0.9rem; } /* Editorial */ .editorial-card { grid-column: span 1; min-height: 220px; } .editorial-content h3 { font-size: 1.6rem; } /* Newsletter */ .newsletter-form button { position: relative; top: 0; right: auto; margin-top: 0.5rem; width: 100%; text-align: center; padding: 0.6rem 0; border-bottom: 1px solid transparent; } .newsletter-form button:hover { border-bottom-color: var(--accent-gold); } /* Footer — all columns */ .footer-content { grid-template-columns: 1fr 1fr; gap: 1.5rem; overflow: hidden; } .footer { padding-top: 1.5rem; padding-bottom: 4rem; overflow: hidden; } .footer-logo { font-size: 1.15rem; margin-bottom: 0.25rem; } .footer-column h4 { font-size: 0.8rem; margin-bottom: 0.5rem; letter-spacing: 0.05em; } .footer-column ul li { margin-bottom: 0.25rem; } .footer-column ul li a { font-size: 0.75rem; transition: color 0.2s; } .footer-column ul li a:active { color: var(--accent-gold); } .social-links { gap: 0.85rem; margin-top: 0.35rem; } .social-links a { font-size: 1rem; } .newsletter-form input { padding: 12px 0; font-size: 16px; } .copyright { flex-direction: column; gap: 0.35rem; text-align: center; font-size: 0.7rem; padding-top: 0.75rem; } .payment-methods, .footer-trust { justify-content: center; font-size: 1rem; gap: 0.5rem; } /* Utility */ .btn { padding: 0.9rem 1.75rem; font-size: 0.75rem; min-height: 48px; } #scroll-top-btn { width: 38px; height: 38px; font-size: 1rem; bottom: 4.5rem; left: 1rem; } } /* --- Mid Mobile (<=430px) — 2-col product grid, tighter spacing --- */ @media (max-width: 430px) { .grid { gap: 1rem 0.5rem; } .product-card { border-width: 0.5px; } .product-image { aspect-ratio: 1/1; margin-bottom: 0; } .product-image img { object-fit: cover; } .product-info { padding: 0.6rem 0.4rem; text-align: center; } .product-info .product-category { font-size: 0.62rem; margin-bottom: 0.15rem; } .product-info h3 { font-size: 0.7rem; margin-bottom: 0.2rem; } .product-info .price { font-size: 0.75rem; } .badge { font-size: 0.6rem; padding: 0.2rem 0.5rem; top: 0.5rem; left: 0.5rem; } .btn-icon { width: 44px; height: 44px; font-size: 0.75rem; } .editorial-card { grid-column: span 1; min-height: 180px; } .editorial-content { padding: 1rem; } .editorial-content h3 { font-size: 1.1rem; margin-bottom: 0.3rem; } .editorial-content p { font-size: 0.7rem; } .editorial-content .subtitle { font-size: 0.62rem; margin-bottom: 0.3rem; } .filter-section { padding: 0.75rem 0; margin-bottom: 1.5rem; } .filter-bar { gap: 0.35rem; } .filter-actions { gap: 0.35rem; } .active-filters-count { font-size: 0.6rem; } .filter-toggle { font-size: 0; padding: 0.3rem 0.5rem; min-width: 44px; min-height: 44px; } .filter-toggle i { font-size: 0.8rem; margin: 0; } .load-more-container { margin-top: 2rem; } .load-more-text { font-size: 0.65rem; } .filter-sheet .filter-group label { font-size: 0.75rem; padding: 0.4rem 0; min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; gap: 0.5rem; } .filter-sheet .filter-group input[type="checkbox"], .filter-sheet .filter-group input[type="radio"] { width: 16px; height: 16px; } /* Footer single column on tiny screens */ .footer-content { grid-template-columns: 1fr; gap: 1.25rem; } .footer-column { max-width: 100%; overflow: hidden; } /* Appointment heading */ .appointment-container h2 { font-size: 1.5rem; word-break: break-word; overflow-wrap: break-word; } /* Thumbnail grid constraint */ .thumbnail-grid { max-width: 100%; overflow: hidden; } } /* --- Tiny Mobile (<=400px) — luxury scaled --- */ @media (max-width: 400px) { .container { padding: 0 0.75rem; } main, .product-detail-container, .detail-gallery, .main-image { max-width: 100%; overflow: hidden; } .section-padding { padding: 1.25rem 0; } .atelier-statement, .craft-section, .journal-section { background: var(--bg-secondary, #111111); } /* Typography */ h1 { font-size: 1.5rem; line-height: 1.15; } h2 { font-size: 1.75rem; line-height: 1.25; } .hero-content h1 { font-size: 1.8rem; letter-spacing: 0.02em; } p { font-size: 0.8rem; line-height: 1.6; } .subtitle { font-size: 0.62rem; margin-bottom: 0.6rem; letter-spacing: 0.15em; } /* Nav */ .navbar { padding: 0.35rem 0; } .logo a { font-size: 0.7rem; overflow: hidden; text-overflow: ellipsis; display: block; white-space: nowrap; } .nav-icons { gap: 0.4rem; } .nav-icons a, .nav-icons button { font-size: 0.9rem; padding: 0.3rem; } .hamburger { min-width: 44px; min-height: 44px; font-size: 1.1rem; position: relative; z-index: 1001; } /* Hero */ .hero { min-height: 85dvh; } .hero-bg { filter: brightness(0.25); } .hero-bg::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(135deg, rgba(10,10,10,0.85) 0%, rgba(20,18,14,0.5) 50%, rgba(10,10,10,0.7) 100%), radial-gradient(ellipse at center 30%, rgba(212,175,55,0.1) 0%, transparent 60%); z-index: 2; } .hero-content h1 { font-size: 1.6rem; margin-bottom: 0.25rem; } .hero-content p { font-size: 0.75rem; margin-bottom: 1rem; max-width: 260px; } .hero-content .btn { font-size: 0.7rem; min-height: 44px; padding: 0.6rem 1rem; } .scroll-indicator { display: block; font-size: 1.5rem; opacity: 1; } /* Page Header */ .page-header { padding: 3.5rem 0 1rem; } .page-header h1 { font-size: 1.3rem; } /* NC Grid */ .nc-grid { grid-template-columns: 1fr 1fr; gap: 0.5rem; } .nc-tile-large { grid-column: span 2; aspect-ratio: 16/7; } .nc-tile { min-height: 80px; position: relative; } .nc-tile:active::after, .nc-tile-large:active::after { content: ''; position: absolute; inset: 0; border: 1px solid rgba(212,175,55,0.25); z-index: 3; } .nc-overlay { padding: 0.5rem; } .nc-name { font-size: 0.85rem; } .nc-sub { font-size: 0.62rem; } /* Atelier */ .atelier-statement { padding: 1.25rem 0; } .atelier-statement p { font-size: 0.85rem; margin: 0.5rem auto; line-height: 1.6; max-width: 90%; } /* Curated — 2-col grid, descriptions hidden (too small) */ .curated-section { padding: 1.25rem 0; } .curated-header { margin-bottom: 0.75rem; } .curated-header h2 { font-size: 1.15rem; display: inline-block; position: relative; } .curated-header h2::after { content: ''; display: block; width: 32px; height: 1.5px; background: var(--accent-gold); margin: 0.3rem auto 0; opacity: 0.5; } .curated-subtitle { font-size: 0.6rem; margin-top: 0.3rem; letter-spacing: 0.04em; color: var(--accent-gold); opacity: 0.5; } .curated-grid { grid-template-columns: 1fr 1fr; max-width: 100%; gap: 0.35rem; } .curated-card { background: #141414; border: 1px solid rgba(212,175,55,0.15); border-radius: 8px; overflow: hidden; position: relative; } .curated-card::before { content: ''; position: absolute; top: 0; left: 10%; width: 80%; height: 1.5px; background: linear-gradient(90deg, transparent, rgba(212,175,55,0.3), transparent); z-index: 2; } .curated-card:active { border-color: rgba(212,175,55,0.4); } .curated-img { overflow: hidden; aspect-ratio: 1/1; } .curated-img img { transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1); } .curated-card:active .curated-img img { transform: scale(1.04); } .curated-img { aspect-ratio: 1/1; } .curated-body { padding: 0.35rem 0.45rem 0.5rem; } .curated-badge { font-size: 0.58rem; padding: 0.1rem 0.3rem; margin-bottom: 0.25rem; letter-spacing: 0.08em; border: 1px solid rgba(212,175,55,0.15); border-radius: 2px; display: inline-block; color: var(--accent-gold); } .curated-body h3 { font-size: 0.78rem; margin-bottom: 0.1rem; font-weight: 500; } .curated-body p { display: none; } .curated-price { font-size: 0.72rem; margin-bottom: 0; display: block; } .curated-link { font-size: 0.65rem; } .curated-add-btn { font-size: 0.68rem; padding: 0.25rem 0.5rem; margin-top: 0.2rem; } .curated-cta { margin: 0.75rem auto 0; max-width: 180px; padding: 0.45rem 0.75rem; font-size: 0.65rem; border: 1px solid var(--accent-gold); color: var(--accent-gold); border-radius: 4px; text-align: center; display: block; } /* Craft */ .craft-section { padding: 1.25rem 0; border-top: 1px solid rgba(212,175,55,0.1); } .craft-image img { height: 150px; } .craft-text { padding: 0.75rem 0 0; } .craft-text h2 { font-size: 1.05rem; margin-bottom: 0.35rem; } .craft-text p { font-size: 0.75rem; line-height: 1.5; margin-bottom: 0.35rem; } /* Voices */ .voices-section { padding: 1.25rem 0; border-top: 1px solid rgba(212,175,55,0.1); } .voices-grid { gap: 0.35rem; } .voice-card { padding: 0.6rem 0.5rem; background: #141414; border: 1px solid rgba(212,175,55,0.12); border-radius: 8px; } .voice-text { font-size: 0.75rem; line-height: 1.5; font-style: italic; } .voice-text::before { font-size: 1rem; margin-bottom: 0.15rem; color: var(--accent-gold); display: block; content: '\201C'; } .voice-name { font-size: 0.65rem; letter-spacing: 0.05em; color: var(--accent-gold); } /* Journal — 2-col grid, descriptions hidden */ .journal-section { padding: 1.25rem 0; } .journal-grid { grid-template-columns: 1fr; max-width: 400px; gap: 1rem; } .journal-entry { background: #141414; border: 1px solid rgba(212,175,55,0.12); border-radius: 8px; overflow: hidden; } .journal-body { padding: 0.3rem 0.4rem 0.45rem; } .journal-meta { font-size: 0.6rem; margin-bottom: 0.1rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent-gold); opacity: 0.6; } .journal-body h3 { font-size: 0.75rem; margin-bottom: 0; font-weight: 500; } .journal-body p { display: none; } .journal-img { aspect-ratio: 16/9; } /* Final CTA */ .final-cta { padding: 1.25rem 0; } .final-cta p { font-size: 0.85rem; } /* Product Grid */ .grid { gap: 0.75rem; grid-template-columns: repeat(2, 1fr); } /* Collections */ .product-image { aspect-ratio: 1/1; margin-bottom: 0; } .product-image img { object-fit: cover; } .category-card { height: 180px; } .ring-size-card { padding: 1rem; } .ring-size-card h3 { font-size: 1.2rem; } .sticky-filters { top: 42px; padding: 0.3rem 0; } .sort-select { font-size: 0.65rem; padding: 0.3rem 0.4rem; } /* Product Detail */ .product-detail-container, .cart-container, .checkout-wrap { padding-top: 1.5rem; } .product-detail-container { gap: 0.75rem; overflow: hidden; } .main-image { max-height: 240px; } .thumbnail-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.4rem; } .detail-info h1 { font-size: 1.4rem; } .detail-price { font-size: 1rem; } .detail-description { font-size: 0.8rem; } /* Sticky cart bar */ .sticky-cart-bar { padding: 0.3rem 0.5rem; } .sticky-cart-bar .sticky-price { font-size: 0.9rem; } .sticky-cart-bar .sticky-add-btn { padding: 0.4rem 0.75rem; font-size: 0.65rem; } /* Cart */ .cart-item-img { width: 40px; height: 40px; } .cart-summary { padding: 0.75rem; } .summary-total { font-size: 1.1rem; } .checkout-steps { gap: 0.5rem; font-size: 0.7rem; } .order-summary-card { grid-template-columns: 1fr; gap: 0.75rem; padding: 1rem; } /* Modal */ .modal-content { height: 96dvh; max-width: 99%; } .modal-image { height: 25%; } .modal-info { padding: 0.75rem; } .modal-info h1 { font-size: 1.2rem; } .search-input { font-size: 1.3rem; } /* Testimonials */ .testimonial-text { font-size: 1rem; } /* FAQ */ .faq-question { font-size: 0.85rem; padding: 0.5rem 0; } .faq-answer { font-size: 0.75rem; } /* Values / Services */ .value-item { padding: 0.5rem; } .service-card { padding: 0.75rem; } /* Footer — single column */ .footer { padding: 0 0 4rem; overflow: hidden; } .footer-content { grid-template-columns: 1fr; gap: 1.25rem; overflow: hidden; } .footer-logo { font-size: 1.1rem; margin-bottom: 0.15rem; } .footer-column h4 { font-size: 0.75rem; margin-bottom: 0.5rem; letter-spacing: 0.08em; } .footer-column ul li { margin-bottom: 0.25rem; } .footer-column ul li a { font-size: 0.75rem; } .footer-column p { font-size: 0.75rem; margin-bottom: 0.75rem; } .social-links { gap: 0.6rem; margin-top: 0.5rem; } .social-links a { font-size: 0.85rem; width: 44px; height: 44px; } .newsletter-form { display: flex; flex-direction: column; gap: 0.5rem; } .newsletter-form input { font-size: 15px; padding: 8px 0; } .newsletter-form button { position: relative; top: 0; right: auto; width: 100%; text-align: center; font-size: 0.6rem; padding: 0.3rem 0.6rem; min-height: 44px; transform: none; } .copyright { flex-direction: column; gap: 0.25rem; text-align: center; font-size: 0.6rem; padding-top: 0.75rem; } .payment-methods { font-size: 0.85rem; gap: 0.35rem; justify-content: center; } /* Collections page — fine-tune for tiny screens */ .page-header { padding: 3.5rem 0 1rem; } .page-header h1 { font-size: 1.4rem; } .page-header::after { width: 50px; } .product-image { margin-bottom: 0.25rem; } .price { font-size: 0.65rem; } .product-category { font-size: 0.6rem; } .badge { top: 0.35rem; left: 0.35rem; padding: 0.12rem 0.35rem; font-size: 0.55rem; } .btn-icon { width: 44px; height: 44px; font-size: 0.75rem; } .btn-link { font-size: 0.6rem; margin-top: 0.5rem; } .filter-section { padding: 0.5rem 0; margin-bottom: 0.75rem; } .filter-bar { gap: 0.25rem; } .filter-actions { gap: 0.25rem; } .filter-toggle { font-size: 0; padding: 0.25rem 0.4rem; min-width: 44px; min-height: 44px; } .filter-toggle i { font-size: 0.75rem; margin: 0; } /* Utility */ .btn { padding: 0.6rem 0.8rem; font-size: 0.65rem; min-height: 44px; } .reveal { transition-duration: 0.5s; } } /* ============================================================ MOBILE ENHANCEMENTS — Touch & Interaction Polish ============================================================ */ .modal-overlay { position: fixed; inset: 0; z-index: 2200; background: rgba(2, 2, 2, 0.88); backdrop-filter: blur(50px) saturate(1.2); -webkit-backdrop-filter: blur(50px) saturate(1.2); display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity 0.4s ease; } .modal-overlay.active { opacity: 1; pointer-events: auto; } .modal-content { background: var(--bg-secondary); border: 1px solid rgba(212,175,55,0.12); box-shadow: 0 50px 150px rgba(0,0,0,0.9), 0 0 200px rgba(212,175,55,0.08), 0 0 100px rgba(212,175,55,0.04); transition: box-shadow 0.5s ease, transform 0.5s cubic-bezier(0.23, 1, 0.32, 1); border-radius: var(--radius-lg); overflow: hidden; } .modal-content:hover { box-shadow: 0 60px 180px rgba(0,0,0,0.95), 0 0 250px rgba(212,175,55,0.12), 0 0 120px rgba(212,175,55,0.06); } @media (max-width: 768px) { .search-overlay.active { display: flex; } /* Bottom Nav — Premium glass morphism */ .bottom-nav { background: rgba(6, 6, 6, 0.88); backdrop-filter: blur(24px) saturate(1.2); -webkit-backdrop-filter: blur(24px) saturate(1.2); border-top: 1px solid rgba(212, 175, 55, 0.08); padding-top: 0.4rem; padding-bottom: env(safe-area-inset-bottom, 0px); } .bottom-nav-item.active { border-top: 2px solid var(--accent-gold); position: relative; } .bottom-nav-item.active::before { content: ''; position: absolute; top: -2px; left: 50%; transform: translateX(-50%); width: 24px; height: 2px; background: var(--accent-gold); box-shadow: 0 0 12px rgba(212,175,55,0.6); } .bottom-nav-item:active { transform: scale(0.92); transition: transform 0.1s ease; } /* Product Cards — Mobile touch feedback */ .product-card:active { transform: scale(0.98); transition: transform 0.15s ease; } .product-card:active .product-image img { transform: scale(1.02); filter: brightness(1); } /* Better touch targets for all interactive elements */ .filter-btn { min-height: 44px; padding: 0.5rem 1rem; } .sort-select { min-height: 44px; padding: 0.5rem 0.75rem; } /* Mobile Search — Full screen immersion */ .search-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(1, 1, 1, 0.99); z-index: 2100; display: none; justify-content: center; align-items: center; flex-direction: column; opacity: 0; transform: scale(1.02); transition: opacity 0.5s cubic-bezier(0.23, 1, 0.32, 1), transform 0.5s cubic-bezier(0.23, 1, 0.32, 1); backdrop-filter: blur(80px); -webkit-backdrop-filter: blur(80px); } .search-input { font-size: 1.5rem; text-align: left; padding: 1rem 0; border-bottom-width: 1px; } .search-results { gap: 0.75rem; padding: 0 1rem; } .search-result-item { border-radius: 6px; overflow: hidden; } .search-result-item a { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem; } .search-result-item img { width: 60px; height: 60px; border-radius: 4px; margin-bottom: 0; flex-shrink: 0; } /* Mobile Modal — Full screen experience */ .modal-overlay { position: fixed; inset: 0; z-index: 2200; background: rgba(2, 2, 2, 0.92); backdrop-filter: blur(50px) saturate(1.2); -webkit-backdrop-filter: blur(50px) saturate(1.2); display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity 0.4s ease; } .modal-overlay.active { opacity: 1; pointer-events: auto; } .modal-content { height: 92dvh; max-width: 100%; border-radius: 0; border: none; box-shadow: 0 50px 150px rgba(0,0,0,0.9), 0 0 200px rgba(212,175,55,0.08), 0 0 100px rgba(212,175,55,0.04); } .modal-image { height: 40%; } .modal-info { height: 60%; padding: 1.25rem; overflow-y: auto; -webkit-overflow-scrolling: touch; } /* Cart — Better mobile layout */ .cart-item-info { gap: 0.75rem; } .cart-item-img { border-radius: 6px; object-fit: cover; } .cart-remove-btn { min-width: 44px; min-height: 44px; display: flex; align-items: center; justify-content: center; } /* Checkout — Mobile form polish */ .checkout-form input, .checkout-form textarea { font-size: 16px !important; padding: 0.875rem 1rem; border-radius: 6px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.1); } .checkout-form input:focus, .checkout-form textarea:focus { border-color: var(--accent-gold); box-shadow: 0 0 0 3px rgba(212,175,55,0.1); } .payment-option:active { transform: scale(0.98); } .btn-submit-top { min-height: 52px; font-size: 0.8rem; border-radius: 8px; } /* Toast — Mobile position & style */ #toast-container { bottom: 4.5rem !important; left: 1rem; right: 1rem; z-index: 9999; } .toast { border-radius: 8px; padding: 0.875rem 1.25rem; font-size: 0.85rem; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } /* Scroll to top — Above bottom nav */ #scroll-top-btn { bottom: 5rem; left: 1rem; width: 42px; height: 42px; border-radius: 50%; box-shadow: 0 4px 20px rgba(212,175,55,0.2); } /* Product Detail — Better mobile gallery */ .main-image { border-radius: 0; cursor: default; } .detail-info h1 { font-size: 1.8rem; line-height: 1.3; } .detail-description { font-size: 0.85rem; line-height: 1.7; color: var(--text-secondary); } .trust-badges { gap: 0.5rem; } .trust-badge { padding: 0.5rem 0.75rem; font-size: 0.7rem; border-radius: 6px; background: rgba(255,255,255,0.02); } /* Accordion — Better mobile touch */ .accordion-header { min-height: 48px; padding: 1rem 0; } /* Sticky cart bar — Enhanced mobile */ .sticky-cart-bar { background: rgba(6, 6, 6, 0.92); backdrop-filter: blur(24px) saturate(1.2); -webkit-backdrop-filter: blur(24px) saturate(1.2); border-top: 1px solid rgba(212, 175, 55, 0.1); padding-bottom: env(safe-area-inset-bottom, 0px); } .sticky-add-btn { border-radius: 8px; font-weight: 600; } /* Newsletter — Mobile polish */ .newsletter-form { gap: 0; } .newsletter-form input { padding: 0.875rem 0; border-radius: 0; border-bottom: 1px solid rgba(255,255,255,0.15); background: transparent; } .newsletter-form button { margin-top: 0.75rem; padding: 0.75rem 1rem; border-radius: 6px; min-height: 44px; } .footer-column ul li a { min-height: 44px; display: inline-flex; align-items: center; } /* Page transitions — Staggered fade in for mobile */ .animate-on-scroll { opacity: 0; transform: translateY(20px); } .animate-on-scroll.revealed { opacity: 1; transform: translateY(0); } } @media (max-width: 400px) { /* Tiny mobile — Extra polish */ .curated-card:active { transform: scale(0.97); transition: transform 0.15s ease; } .voice-card:active { transform: scale(0.97); } .journal-entry:active { transform: scale(0.98); } .recent-item:active { transform: scale(0.97); } .search-result-item:active { transform: scale(0.98); } /* Better safe area handling */ .bottom-nav { padding-bottom: env(safe-area-inset-bottom, 0px); } .sticky-cart-bar { padding-bottom: env(safe-area-inset-bottom, 0px); } } .blog-body { line-height: 1.9; color: var(--text-secondary); font-size: 1.1rem; } .blog-body p { margin-bottom: 1.75rem; } .blog-body strong { color: var(--text-primary); font-weight: 500; } .blog-body h2, .blog-body h3 { font-family: var(--font-heading); color: var(--text-primary); margin: 2rem 0 1rem; background: var(--gold-metallic); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .page-title { font-size: clamp(2rem, 3vw, 2.5rem); margin-bottom: 2rem; background: var(--gold-metallic); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; filter: drop-shadow(0 2px 8px rgba(212,175,55,0.1)); } .order-summary-card { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; padding: 1.5rem; border: 1px solid rgba(212,175,55,0.1); } .card-label { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--accent-gold); margin-bottom: 0.25rem; } .concierge-msg { text-align: center; padding: 2rem; border: 1px solid rgba(212,175,55,0.15); border-radius: var(--radius-lg); background: linear-gradient(145deg, rgba(212,175,55,0.04), rgba(212,175,55,0.01)); } .concierge-msg i { font-size: 2rem; color: var(--accent-gold); margin-bottom: 1rem; display: block; filter: drop-shadow(0 2px 8px rgba(212,175,55,0.3)); } .concierge-msg p { color: var(--text-secondary); line-height: 1.8; font-size: 0.95rem; } /* === Single Boutique Concierge box (replaces fake payment options) === */ .concierge-box { text-align: center; padding: 2.5rem 1.75rem; border: 1px solid rgba(212,175,55,0.18); border-radius: var(--radius-lg); background: linear-gradient(155deg, rgba(212,175,55,0.06), rgba(212,175,55,0.01)); position: relative; overflow: hidden; } .concierge-box::before { content: ""; position: absolute; top: -50%; right: -20%; width: 70%; height: 200%; background: radial-gradient(circle, rgba(212,175,55,0.08), transparent 65%); pointer-events: none; } .concierge-icon { font-size: 2.2rem; color: var(--accent-gold); margin-bottom: 1rem; display: block; filter: drop-shadow(0 2px 10px rgba(212,175,55,0.35)); } .concierge-title { font-family: var(--font-heading); font-size: 1.3rem; color: var(--text-primary); margin-bottom: 0.65rem; letter-spacing: 0.02em; } .concierge-desc { color: var(--text-secondary); line-height: 1.75; font-size: 0.92rem; max-width: 420px; margin: 0 auto 1.5rem; } .concierge-list { list-style: none; margin: 0; padding: 1.25rem 0 0; border-top: 1px solid rgba(212,175,55,0.12); display: grid; gap: 0.6rem; text-align: left; max-width: 360px; margin-left: auto; margin-right: auto; } .concierge-list li { display: flex; align-items: center; gap: 0.7rem; color: var(--text-secondary); font-size: 0.85rem; } .concierge-list li i { color: var(--accent-gold); font-size: 0.75rem; flex-shrink: 0; } .checkout-summary { position: sticky; top: 120px; } .step-connector { display: flex; align-items: center; color: var(--text-secondary); } .step-chevron { font-size: 0.7rem; } .badge.new { background: var(--accent-gold); color: var(--bg-color); } .badge.trending { background: var(--error-color); color: var(--text-white); } .badge.limited { background: var(--info-purple); color: var(--text-white); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* ============================================================ PRINT STYLES — Enhanced ============================================================ */ @media print { @page { margin: 1cm; } .bottom-nav, .site-header, .footer, #scroll-top-btn, .sticky-cart-bar, .newsletter-section, .filter-section, .filter-sheet, .filter-sheet-overlay, .btn, .wishlist-btn, .quick-view-btn, .overlay, .hamburger, .search-overlay, .search-close, .hero-bg, .gold-dust, .scroll-indicator { display: none !important; } body { background: white; color: black; font-size: 12pt; line-height: 1.5; } .container { max-width: 100%; padding: 0; } a { color: black; text-decoration: underline; } a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.8em; color: #666; } .hero { height: auto; min-height: 0; background: none; } .hero-content { opacity: 1; transform: none; animation: none; } .product-card, .curated-card, .journal-card, .voice-card, .value-item, .service-card, .category-card { page-break-inside: avoid; } section { page-break-inside: avoid; } .cart-table { width: 100%; border-collapse: collapse; } .cart-table th { background: #eee; border: 1px solid #ccc; padding: 8px; text-align: left; font-size: 10pt; } .cart-table td { border: 1px solid #ccc; padding: 8px; font-size: 10pt; } .cart-item-img { width: 60px; height: 60px; border: 1px solid #ddd; } .conf-success-icon { color: #333; border-color: #333; } .order-item { border: 1px solid #ddd; padding: 8px; margin-bottom: 8px; page-break-inside: avoid; } .order-item img { width: 60px; height: 60px; } .conf-total-amount { font-weight: bold; } .order-summary-card { border: 1px solid #ddd; padding: 12px; page-break-inside: avoid; } .card-label { color: #666; font-size: 10pt; } h1, h2, h3 { color: black; } .gold-text, .subtitle { -webkit-text-fill-color: black; background: none; } .post-nav { page-break-inside: avoid; } } /* ============================================================ MISSING CLASS DEFINITIONS (from deep audit) ============================================================ */ .about-story { padding: 4rem 0; } .about-story .story-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; } .about-story .story-text h2 { font-family: var(--font-heading); font-size: 1.8rem; margin-bottom: 1rem; background: var(--gold-metallic); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .about-story .story-text p { color: var(--text-secondary); line-height: 1.8; margin-bottom: 1rem; } .about-story .story-image img { width: 100%; border-radius: var(--radius-md); } .about-story .story-image figcaption { font-size: 0.8rem; color: var(--text-secondary); margin-top: 0.5rem; font-style: italic; } .add-from-wishlist { display: inline-block; padding: 0.5rem 1rem; font-size: 0.75rem; background: transparent; border: 1px solid var(--accent-gold); color: var(--accent-gold); cursor: pointer; transition: all 0.3s ease; border-radius: var(--radius-sm); } .add-from-wishlist:hover { background: var(--accent-gold); color: var(--bg-color); } .breadcrumb .current { color: var(--text-secondary); font-size: 0.85rem; } .dark-theme { background: var(--bg-color); color: var(--text-primary); } .editorial-card.large { grid-row: span 2; } .post-nav-next { text-align: right; } .post-nav-prev { text-align: left; } .post-nav-label { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-secondary); } .post-nav-title { font-family: var(--font-heading); font-size: 1rem; color: var(--text-primary); } .product-grid { padding: 2rem 0; } .breadcrumb .sep { color: var(--text-secondary); margin: 0 0.5rem; font-size: 0.85rem; } .values { padding: 4rem 0; } .img-fallback { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; color: var(--text-secondary); font-size: 2rem; opacity: 0.3; } .recent-item { display: flex; gap: 1rem; padding: 1rem; border: 1px solid rgba(212,175,55,0.08); border-radius: var(--radius-md); cursor: pointer; transition: all 0.3s ease; } .recent-item:hover { border-color: rgba(212,175,55,0.2); background: rgba(212,175,55,0.02); } .recent-img { width: 80px; height: 80px; border-radius: var(--radius-sm); overflow: hidden; flex-shrink: 0; } .recent-img img { width: 100%; height: 100%; object-fit: cover; } .recent-info { display: flex; flex-direction: column; justify-content: center; gap: 0.25rem; } .recent-info h4 { font-size: 0.85rem; color: var(--text-primary); margin: 0; } .recent-info .price { font-size: 0.8rem; color: var(--accent-gold); } /* ========================================== NEW FEATURES CSS ========================================== */ /* --- Cookie Consent Banner --- */ #cookie-consent { position: fixed; bottom: 0; left: 0; right: 0; z-index: 999; background: rgba(12, 12, 12, 0.97); border-top: 1px solid rgba(212,175,55,0.15); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); transform: translateY(100%); transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1); padding: 1.25rem 1.5rem; pointer-events: auto; } #cookie-consent.visible { transform: translateY(0); } .cookie-inner { max-width: 1200px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; } .cookie-text { flex: 1; min-width: 250px; } .cookie-text p { margin: 0; font-size: 0.85rem; color: var(--text-secondary); line-height: 1.6; } .cookie-text strong { color: var(--accent-gold); } .cookie-actions { display: flex; gap: 0.5rem; align-items: center; flex-shrink: 0; } .cookie-btn { padding: 0.6rem 1.25rem; border-radius: 4px; font-size: 0.8rem; font-weight: 500; font-family: var(--font-body); cursor: pointer; transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1); white-space: nowrap; letter-spacing: 0.03em; } .cookie-accept { background: var(--accent-gold); color: #0a0a0a; border: 1px solid var(--accent-gold); } .cookie-accept:hover { background: #c5a028; border-color: #c5a028; } .cookie-reject { background: transparent; color: var(--text-secondary); border: 1px solid var(--border-color); } .cookie-reject:hover { border-color: var(--accent-gold); color: var(--accent-gold); } .cookie-settings { background: transparent; color: var(--text-dim); border: none; padding: 0.6rem; min-width: 44px; min-height: 44px; display: flex; align-items: center; justify-content: center; } .cookie-settings:hover { color: var(--accent-gold); } @media (max-width: 576px) { .cookie-inner { flex-direction: column; text-align: center; } .cookie-actions { justify-content: center; width: 100%; } } /* --- Breadcrumb --- */ .breadcrumb { padding: 1rem 0; font-size: 0.8rem; color: var(--text-dim); max-width: 1200px; margin: 0 auto; padding-left: 1.25rem; padding-right: 1.25rem; } .breadcrumb a { color: var(--text-secondary); text-decoration: none; transition: color 0.3s ease; } .breadcrumb a:hover { color: var(--accent-gold); } .bc-sep { margin: 0 0.4rem; color: var(--text-ghost); } .bc-current { color: var(--text-dim); } /* --- Review Stars --- */ .review-stars { display: inline-flex; align-items: center; gap: 2px; } .review-stars .fa-star, .review-stars .fa-star-half-alt, .review-stars .far.fa-star { font-size: 0.75rem; color: var(--accent-gold); } .review-stars .far.fa-star { color: rgba(212,175,55,0.3); } .review-count { font-size: 0.7rem; color: var(--text-dim); margin-left: 0.35rem; } .card-review-row { display: flex; align-items: center; margin-top: 0.3rem; } .pdp-stars { margin: 0.5rem 0; } .pdp-stars .review-stars { gap: 3px; } .pdp-stars .review-stars .fa-star, .pdp-stars .review-stars .fa-star-half-alt, .pdp-stars .review-stars .far.fa-star { font-size: 0.85rem; } .pdp-stars .review-count { font-size: 0.8rem; } /* --- Stock Badge --- */ .stock-badge { position: absolute; top: 0.75rem; left: 0.75rem; z-index: 5; padding: 0.25rem 0.6rem; border-radius: 2px; font-size: 0.55rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; font-family: var(--font-body); background: rgba(10,10,10,0.7); color: var(--text-secondary); border: 1px solid rgba(255,255,255,0.08); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } .stock-low { color: var(--accent-gold); border-color: rgba(212,175,55,0.15); } .stock-ok { color: var(--text-secondary); } .stock-mto { color: var(--text-dim); font-style: italic; } .stock-info { margin-top: 0.5rem; } .stock-label { font-size: 0.8rem; font-weight: 500; } .stock-label.stock-low { color: var(--accent-gold); } .stock-label.stock-ok { color: var(--text-secondary); } .stock-label.stock-mto { color: var(--text-dim); } /* --- Share Button --- */ .share-btn { background: transparent; color: var(--text-secondary); border: 1px solid var(--border-color); } .share-btn:hover { border-color: var(--accent-gold); color: var(--accent-gold); background: rgba(212,175,55,0.05); } .share-overlay { position: fixed; inset: 0; z-index: 9999; background: rgba(0,0,0,0.6); display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } .share-overlay.active { opacity: 1; visibility: visible; } .share-modal { background: #141414; border: 1px solid rgba(212,175,55,0.12); border-radius: var(--radius-md); padding: 2rem; width: 90%; max-width: 400px; transform: scale(0.95); transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1); } .share-overlay.active .share-modal { transform: scale(1); } .share-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; } .share-header h3 { margin: 0; font-size: 1.1rem; color: var(--text-primary); } .share-close { background: none; border: none; color: var(--text-dim); cursor: pointer; font-size: 1.1rem; min-width: 44px; min-height: 44px; display: flex; align-items: center; justify-content: center; transition: color 0.3s ease; } .share-close:hover { color: var(--accent-gold); } .share-options { display: flex; flex-direction: column; gap: 0.75rem; } .share-option { display: flex; align-items: center; gap: 0.75rem; padding: 0.85rem 1rem; border: 1px solid rgba(212,175,55,0.1); border-radius: 6px; color: var(--text-primary); text-decoration: none; font-size: 0.9rem; cursor: pointer; background: none; width: 100%; font-family: var(--font-body); transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1); } .share-option:hover { border-color: var(--accent-gold); background: rgba(212,175,55,0.05); } .share-option i { width: 20px; text-align: center; font-size: 1rem; } .share-option:nth-child(1) i { color: #25d366; } .share-option:nth-child(2) i { color: #ea4335; } .share-option:nth-child(3) i { color: var(--accent-gold); } /* --- Product Inquiry --- */ .inquiry-wrap { text-align: center; } .inquiry-form-container { max-height: 0; overflow: hidden; opacity: 0; transition: max-height 0.5s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.4s cubic-bezier(0.23, 1, 0.32, 1), padding 0.4s cubic-bezier(0.23, 1, 0.32, 1); margin-top: 0; } .inquiry-form-container.visible { max-height: 400px; opacity: 1; margin-top: 1.5rem; } .inquiry-form { max-width: 560px; margin: 0 auto; display: flex; flex-direction: column; gap: 0.75rem; } .inquiry-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; } .inquiry-form input, .inquiry-form textarea { width: 100%; padding: 0.75rem 1rem; background: rgba(255,255,255,0.03); border: 1px solid rgba(212,175,55,0.12); border-radius: 4px; color: var(--text-primary); font-family: var(--font-body); font-size: 0.85rem; transition: border-color 0.3s ease; outline: none; resize: vertical; box-sizing: border-box; } .inquiry-form input:focus, .inquiry-form textarea:focus { border-color: var(--accent-gold); } .inquiry-form input::placeholder, .inquiry-form textarea::placeholder { color: var(--text-dim); } @media (max-width: 576px) { .inquiry-row { grid-template-columns: 1fr; } } /* --- Add to Cart Fly Animation (fly clone is inline-styled by JS) --- */ /* --- Save for Later --- */ .saved-for-later { margin-top: 3rem; border-top: 1px solid rgba(212,175,55,0.08); padding-top: 2rem; } .saved-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; } .saved-item { display: flex; gap: 1rem; padding: 1rem; border: 1px solid rgba(212,175,55,0.08); border-radius: var(--radius-md); background: rgba(255,255,255,0.01); transition: border-color 0.3s ease; } .saved-item:hover { border-color: rgba(212,175,55,0.2); } .saved-img { width: 80px; height: 80px; border-radius: var(--radius-sm); overflow: hidden; flex-shrink: 0; } .saved-img img { width: 100%; height: 100%; object-fit: cover; } .saved-info { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 0.25rem; } .saved-info h4 { margin: 0; font-size: 0.85rem; color: var(--text-primary); } .saved-info .price { font-size: 0.85rem; color: var(--accent-gold); font-weight: 500; } .saved-actions { display: flex; gap: 0.5rem; margin-top: 0.5rem; align-items: center; } .saved-move-btn { background: transparent; border: 1px solid var(--accent-gold); color: var(--accent-gold); padding: 0.4rem 0.8rem; border-radius: 3px; font-size: 0.75rem; font-weight: 500; cursor: pointer; font-family: var(--font-body); transition: all 0.3s ease; min-height: 36px; } .saved-move-btn:hover { background: var(--accent-gold); color: #0a0a0a; } .saved-remove-btn { background: transparent; border: none; color: var(--text-dim); cursor: pointer; min-width: 36px; min-height: 36px; display: flex; align-items: center; justify-content: center; border-radius: 3px; transition: all 0.3s ease; } .saved-remove-btn:hover { color: #f87171; background: rgba(248,113,113,0.08); } .cart-save-later-btn { display: inline-block; margin-top: 0.5rem; background: none; border: none; padding: 0; color: var(--accent-gold); font-size: 0.72rem; letter-spacing: 0.04em; text-transform: uppercase; cursor: pointer; font-family: var(--font-body); opacity: 0.85; transition: opacity 0.25s ease, color 0.25s ease; } .cart-save-later-btn:hover { opacity: 1; color: #f5e6a3; text-decoration: underline; } /* --- Empty State Enhancements --- */ .cart-empty-state, .wishlist-empty, .search-empty-state { text-align: center; padding: 4rem 2rem; max-width: 480px; margin: 0 auto; } .cart-empty-state i, .wishlist-empty i, .search-empty-state i { font-size: 3rem; color: rgba(212,175,55,0.2); margin-bottom: 1.5rem; display: block; } .cart-empty-state h2, .wishlist-empty h2, .search-empty-state h2 { font-size: 1.4rem; color: var(--text-primary); margin-bottom: 0.75rem; } .cart-empty-state p, .wishlist-empty p, .search-empty-state p { color: var(--text-secondary); margin-bottom: 1.5rem; font-size: 0.9rem; } /* --- Skeleton Loading States --- */ .cart-skeleton { display: flex; gap: 1rem; padding: 1rem; border-bottom: 1px solid rgba(212,175,55,0.08); } /* --- Search Autocomplete Enhancements --- */ .search-overlay .search-container { position: relative; } .search-overlay .search-results { padding: 0 1rem; } .search-overlay .search-results .search-empty-msg { text-align: center; padding: 2rem; color: var(--text-dim); font-size: 0.9rem; } .search-kbd { position: absolute; right: 1rem; top: 50%; transform: translateY(-50%); background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); border-radius: 4px; padding: 0.15rem 0.5rem; font-size: 0.65rem; color: var(--text-dim); font-family: var(--font-body); pointer-events: none; } .search-suggestions { padding: 1.5rem 1rem 0.5rem; } .search-suggestions-label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-dim); margin-bottom: 0.75rem; } .search-tags { display: flex; flex-wrap: wrap; gap: 0.5rem; } .search-tag { padding: 0.4rem 0.85rem; border-radius: 20px; border: 1px solid rgba(212,175,55,0.12); background: transparent; color: var(--text-secondary); font-size: 0.78rem; cursor: pointer; font-family: var(--font-body); transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1); } .search-tag:hover { border-color: var(--accent-gold); color: var(--accent-gold); background: rgba(212,175,55,0.05); } .search-result-item { padding: 0.75rem !important; border-radius: 6px !important; transition: background 0.2s ease !important; } .search-result-item:hover { background: rgba(212,175,55,0.06) !important; } /* --- Product Card Add-to-Cart Button Animation --- */ .product-card .overlay .btn-sm, .curated-add-btn { position: relative; overflow: hidden; } .product-card .overlay .btn-sm::after, .curated-add-btn::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent); transform: translateX(-100%); transition: transform 0.5s ease; } .product-card .overlay .btn-sm:hover::after, .curated-add-btn:hover::after { transform: translateX(100%); } /* --- Trust Badges Improved --- */ .trust-badges { display: flex; gap: 1.5rem; justify-content: center; padding: 1rem 0; margin: 1rem 0; border-top: 1px solid rgba(212,175,55,0.08); border-bottom: 1px solid rgba(212,175,55,0.08); } .trust-badge { display: flex; align-items: center; gap: 0.5rem; font-size: 0.75rem; color: var(--text-secondary); } .trust-badge i { color: var(--accent-gold); font-size: 0.85rem; } /* --- Action Buttons Improved --- */ .action-buttons { display: flex; gap: 0.75rem; align-items: stretch; margin: 1.5rem 0; } .action-buttons .btn { flex: 1; } .action-buttons .btn-icon { width: 48px; height: 48px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; } /* --- Quick View Button Pulse --- */ .quick-view-btn { position: relative; } .quick-view-btn::before { content: ''; position: absolute; inset: -4px; border-radius: inherit; border: 1px solid rgba(212,175,55,0.2); opacity: 0; transition: opacity 0.3s ease; } .quick-view-btn:hover::before { opacity: 1; } /* --- Loading Overlay --- */ .page-loading-overlay { position: fixed; inset: 0; z-index: 99999; background: #0a0a0a; display: flex; align-items: center; justify-content: center; transition: opacity 0.6s cubic-bezier(0.23, 1, 0.32, 1); } .page-loading-overlay.hidden { opacity: 0; pointer-events: none; } .loading-spinner { width: 40px; height: 40px; border: 2px solid rgba(212,175,55,0.15); border-top-color: var(--accent-gold); border-radius: 50%; animation: spin 0.8s linear infinite; } /* --- Newsletter Form Improved --- */ .newsletter-form { display: flex; gap: 0.5rem; margin-top: 1rem; } .newsletter-form input { flex: 1; padding: 0.65rem 1rem; background: rgba(255,255,255,0.03); border: 1px solid rgba(212,175,55,0.12); border-radius: 4px; color: var(--text-primary); font-family: var(--font-body); font-size: 0.8rem; outline: none; transition: border-color 0.3s ease; } .newsletter-form input:focus { border-color: var(--accent-gold); } .newsletter-form button { padding: 0.65rem 1.25rem; background: var(--accent-gold); color: #0a0a0a; border: none; border-radius: 4px; font-weight: 500; font-family: var(--font-body); font-size: 0.8rem; cursor: pointer; transition: background 0.3s ease; white-space: nowrap; } .newsletter-form button:hover { background: #c5a028; } /* --- Announcement Bar --- */ .announcement-bar { background: linear-gradient(90deg, rgba(212,175,55,0.08), rgba(212,175,55,0.15), rgba(212,175,55,0.08)); border-bottom: 1px solid rgba(212,175,55,0.1); overflow: hidden; max-height: 40px; transition: max-height 0.4s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.4s ease; position: relative; z-index: 1002; } @media (max-width: 768px) { .announcement-bar { display: none; } .live-chat-btn { bottom: 5rem; right: 1rem; width: 48px; height: 48px; font-size: 1.1rem; } .live-chat-panel { right: 0.75rem; width: calc(100vw - 1.5rem); max-height: 400px; } } .announcement-inner { display: flex; align-items: center; justify-content: center; padding: 0.5rem 2rem; position: relative; gap: 1rem; } .announcement-text { font-size: 0.7rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--accent-gold); font-family: var(--font-body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .announcement-close { position: absolute; right: 1rem; top: 50%; transform: translateY(-50%); background: none; border: none; color: var(--text-dim); cursor: pointer; padding: 4px; font-size: 0.7rem; transition: color 0.3s ease; min-width: 28px; min-height: 28px; display: flex; align-items: center; justify-content: center; } .announcement-close:hover { color: var(--accent-gold); } /* --- Lightbox --- */ .lightbox-overlay { position: fixed; inset: 0; z-index: 10000; background: rgba(0,0,0,0.95); display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .lightbox-overlay.active { opacity: 1; visibility: visible; } .lightbox-content { position: relative; max-width: 90vw; max-height: 90vh; transform: scale(0.9); transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1); } .lightbox-overlay.active .lightbox-content { transform: scale(1); } .lightbox-img { max-width: 90vw; max-height: 85vh; object-fit: contain; border-radius: 4px; } .lightbox-close { position: absolute; top: -40px; right: 0; background: none; border: none; color: #fff; font-size: 1.5rem; cursor: pointer; padding: 8px; transition: color 0.3s ease; min-width: 44px; min-height: 44px; display: flex; align-items: center; justify-content: center; } .lightbox-close:hover { color: var(--accent-gold); } .lightbox-prev, .lightbox-next { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2); color: #fff; width: 44px; height: 44px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.3s ease; font-size: 1rem; } .lightbox-prev { left: 1rem; } .lightbox-next { right: 1rem; } .lightbox-prev:hover, .lightbox-next:hover { background: rgba(212,175,55,0.3); border-color: var(--accent-gold); } @media (min-width: 769px) { .lightbox-prev { left: -60px; } .lightbox-next { right: -60px; } } /* --- Live Chat Widget --- */ .live-chat-btn { position: fixed; bottom: 5.5rem; right: 1.5rem; z-index: 5000; width: 56px; height: 56px; border-radius: 50%; background: linear-gradient(135deg, var(--accent-gold), #c5a028); color: #0a0a0a; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 1.3rem; box-shadow: 0 4px 20px rgba(212,175,55,0.3); transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1); } .live-chat-btn:hover { transform: scale(1.1); box-shadow: 0 6px 30px rgba(212,175,55,0.4); } .live-chat-btn.active { background: #333; color: #fff; } .chat-pulse { position: absolute; width: 100%; height: 100%; border-radius: 50%; border: 2px solid var(--accent-gold); animation: chatPulse 2s ease-out infinite; } @keyframes chatPulse { 0% { transform: scale(1); opacity: 0.6; } 100% { transform: scale(1.8); opacity: 0; } } .live-chat-panel { position: fixed; bottom: 8rem; right: 1.5rem; z-index: 5001; width: 340px; max-height: 480px; background: #111; border: 1px solid rgba(212,175,55,0.12); border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; opacity: 0; visibility: hidden; transform: translateY(20px) scale(0.95); transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1); box-shadow: 0 20px 60px rgba(0,0,0,0.5); } .live-chat-panel.active { opacity: 1; visibility: visible; transform: translateY(0) scale(1); } .chat-header { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.25rem; background: linear-gradient(135deg, rgba(212,175,55,0.1), rgba(212,175,55,0.05)); border-bottom: 1px solid rgba(212,175,55,0.1); } .chat-header span { font-family: var(--font-heading); font-size: 0.9rem; color: var(--accent-gold); letter-spacing: 0.05em; } .chat-close { background: none; border: none; color: var(--text-dim); cursor: pointer; padding: 4px; font-size: 0.9rem; min-width: 32px; min-height: 32px; display: flex; align-items: center; justify-content: center; } .chat-close:hover { color: var(--accent-gold); } .chat-body { flex: 1; overflow-y: auto; padding: 1rem; display: flex; flex-direction: column; gap: 0.75rem; max-height: 300px; } .chat-message { max-width: 85%; padding: 0.7rem 1rem; border-radius: 12px; font-size: 0.8rem; line-height: 1.5; } .chat-message.bot { background: rgba(212,175,55,0.08); color: var(--text-secondary); align-self: flex-start; border-bottom-left-radius: 2px; } .chat-message.user { background: var(--accent-gold); color: #0a0a0a; align-self: flex-end; border-bottom-right-radius: 2px; } .chat-quick-replies { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.5rem; } .chat-quick-reply { padding: 0.35rem 0.75rem; border: 1px solid rgba(212,175,55,0.2); border-radius: 20px; background: transparent; color: var(--accent-gold); font-size: 0.7rem; cursor: pointer; transition: all 0.3s ease; font-family: var(--font-body); min-height: 32px; } .chat-quick-reply:hover { background: rgba(212,175,55,0.1); border-color: var(--accent-gold); } .chat-input-area { display: flex; gap: 0.5rem; padding: 0.75rem 1rem; border-top: 1px solid rgba(212,175,55,0.08); } .chat-input-area input { flex: 1; background: rgba(255,255,255,0.05); border: 1px solid rgba(212,175,55,0.12); border-radius: 20px; padding: 0.5rem 1rem; color: #fff; font-size: 0.8rem; outline: none; } .chat-input-area input:focus { border-color: var(--accent-gold); } .chat-send { background: var(--accent-gold); border: none; color: #0a0a0a; width: 36px; height: 36px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 0.8rem; transition: transform 0.3s ease; flex-shrink: 0; } .chat-send:hover { transform: scale(1.1); } /* --- Price Range Filter --- */ .price-range-filter { margin: 1rem 0; } .price-range-labels { display: flex; justify-content: space-between; font-size: 0.75rem; color: var(--text-dim); margin-bottom: 0.5rem; } .price-range-slider { width: 100%; height: 4px; -webkit-appearance: none; appearance: none; background: rgba(212,175,55,0.15); border-radius: 2px; outline: none; cursor: pointer; } .price-range-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%; background: var(--accent-gold); cursor: pointer; box-shadow: 0 2px 8px rgba(212,175,55,0.3); } .price-range-slider::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; border: none; background: var(--accent-gold); cursor: pointer; box-shadow: 0 2px 8px rgba(212,175,55,0.3); } .price-range-current { text-align: center; font-size: 0.8rem; color: var(--text-secondary); margin-top: 0.5rem; } .price-range-current span { color: var(--accent-gold); font-weight: 600; } /* --- 404 Page Animations --- */ .hero--404 { background: radial-gradient(ellipse at 50% 50%, rgba(212,175,55,0.06) 0%, transparent 60%); } .hero-content--404 h1 { font-size: 8rem; font-weight: 700; background: linear-gradient(135deg, var(--accent-gold), #f5e6a3, var(--accent-gold)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; animation: float404 3s ease-in-out infinite, shimmer404 2s ease-in-out infinite alternate; text-shadow: none; filter: drop-shadow(0 0 30px rgba(212,175,55,0.3)); } @keyframes float404 { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } @keyframes shimmer404 { 0% { filter: drop-shadow(0 0 20px rgba(212,175,55,0.2)); } 100% { filter: drop-shadow(0 0 40px rgba(212,175,55,0.4)); } } .hero-404-title { font-size: 1.2rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--text-secondary); animation: fadeInUp 0.8s cubic-bezier(0.23, 1, 0.32, 1) 0.3s both; } .hero-404-desc { font-size: 0.9rem; color: var(--text-dim); margin-top: 0.5rem; animation: fadeInUp 0.8s cubic-bezier(0.23, 1, 0.32, 1) 0.5s both; } .hero-404-cta { font-size: 0.85rem; color: var(--text-dim); margin-top: 1rem; animation: fadeInUp 0.8s cubic-bezier(0.23, 1, 0.32, 1) 0.7s both; } .hero--404 .btn { animation: fadeInUp 0.8s cubic-bezier(0.23, 1, 0.32, 1) 0.9s both; } @keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } /* --- Product Card Hover Overlay Enhancement --- */ .product-card .overlay { transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1); } .product-card:hover .overlay { background: rgba(0,0,0,0.5); } /* --- Navbar Scroll Enhancement --- */ .navbar-scrolled { backdrop-filter: blur(12px) saturate(1.2) !important; -webkit-backdrop-filter: blur(12px) saturate(1.2) !important; background: rgba(5,5,5,0.92) !important; border-bottom: 1px solid rgba(212,175,55,0.08); } /* --- Button Ripple Effect --- */ /* --- Product Badges (Subtle) --- */ .product-badge { position: absolute; top: 0.75rem; right: 0.75rem; z-index: 5; padding: 0.25rem 0.6rem; border-radius: 2px; font-size: 0.55rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; font-family: var(--font-body); line-height: 1.3; background: rgba(10,10,10,0.7); color: var(--accent-gold); border: 1px solid rgba(212,175,55,0.15); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } /* --- Delivery Estimate --- */ .delivery-estimate { display: flex; align-items: center; gap: 0.5rem; font-size: 0.8rem; color: var(--text-secondary); margin-top: 0.75rem; padding: 0.6rem 0.8rem; background: rgba(212,175,55,0.04); border: 1px solid rgba(212,175,55,0.08); border-radius: 4px; } .delivery-estimate i { color: var(--accent-gold); } .delivery-estimate strong { color: var(--text-primary); } /* --- Social Proof --- */ .social-proof-text { font-size: 0.75rem; color: var(--text-dim); margin-top: 0.5rem; display: flex; align-items: center; gap: 0.4rem; } .social-proof-text::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #4ade80; animation: pulse 2s ease-in-out infinite; } /* --- Size Guide Modal --- */ .size-guide-overlay { position: fixed; inset: 0; z-index: 9999; background: rgba(0,0,0,0.6); display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } .size-guide-overlay.active { opacity: 1; visibility: visible; } .size-guide-modal { background: #141414; border: 1px solid rgba(212,175,55,0.12); border-radius: var(--radius-md); padding: 2rem; width: 90%; max-width: 600px; max-height: 80vh; overflow-y: auto; transform: scale(0.95); transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1); } .size-guide-overlay.active .size-guide-modal { transform: scale(1); } .size-table { width: 100%; border-collapse: collapse; font-size: 0.8rem; margin: 1rem 0; } .size-table th { text-align: left; padding: 0.5rem; color: var(--accent-gold); border-bottom: 1px solid rgba(212,175,55,0.15); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; } .size-table td { padding: 0.4rem 0.5rem; border-bottom: 1px solid rgba(255,255,255,0.04); color: var(--text-secondary); } .size-table tr:hover td { background: rgba(212,175,55,0.03); } .size-tip { font-size: 0.78rem; color: var(--text-dim); margin-top: 1rem; padding: 0.75rem; background: rgba(212,175,55,0.03); border-radius: 4px; border-left: 2px solid var(--accent-gold); } .size-tip i { color: var(--accent-gold); margin-right: 0.4rem; } .size-guide-btn-inline { margin-top: 0.75rem; font-size: 0.75rem; } /* --- Quick Add Button --- */ .quick-add-btn { width: 100%; margin-top: 0.5rem; padding: 0.5rem !important; font-size: 0.72rem !important; letter-spacing: 0.05em; pointer-events: auto; position: relative; z-index: 3; } /* --- Gift Message --- */ .gift-section { margin: 1rem 0; } .gift-toggle-label { display: flex; align-items: center; gap: 0.6rem; cursor: pointer; font-size: 0.85rem; color: var(--text-secondary); } .gift-checkbox { display: none; } .gift-checkbox-custom { width: 18px; height: 18px; border: 1px solid rgba(212,175,55,0.2); border-radius: 3px; display: flex; align-items: center; justify-content: center; transition: all 0.3s ease; flex-shrink: 0; } .gift-checkbox:checked + .gift-checkbox-custom { background: var(--accent-gold); border-color: var(--accent-gold); } .gift-checkbox:checked + .gift-checkbox-custom::after { content: '\f00c'; font-family: 'Font Awesome 6 Free'; font-weight: 900; font-size: 0.6rem; color: #0a0a0a; } .gift-form textarea { width: 100%; padding: 0.75rem; margin-top: 0.75rem; background: rgba(255,255,255,0.03); border: 1px solid rgba(212,175,55,0.12); border-radius: 4px; color: var(--text-primary); font-family: var(--font-body); font-size: 0.85rem; resize: vertical; outline: none; transition: border-color 0.3s ease; box-sizing: border-box; } .gift-form textarea:focus { border-color: var(--accent-gold); } .gift-form textarea::placeholder { color: var(--text-dim); } /* --- Back in Stock --- */ .back-in-stock { margin-top: 1rem; } .back-in-stock p { font-size: 0.85rem; color: var(--text-secondary); margin-bottom: 0.75rem; } /* --- Pulse Animation for Social Proof --- */ @keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(1.5); } } /* --- Recently Viewed Scroll Buttons --- */ .recent-grid { display: flex; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 0.5rem; } .recent-grid::-webkit-scrollbar { display: none; } .recent-item { scroll-snap-align: start; flex-shrink: 0; min-width: 200px; max-width: 240px; } /* --- Testimonial Carousel Touch --- */ .testimonial-slider { touch-action: pan-y; } /* --- Product Detail Enhancements --- */ .pdp-stars .review-stars .fa-star, .pdp-stars .review-stars .fa-star-half-alt { color: #d4af37; } .pdp-stars .review-stars .far.fa-star { color: rgba(212,175,55,0.3); } .zoom-lens { will-change: left, top; } /* --- Bottom Nav Active Enhancement --- */ .bottom-nav-item.active::after { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 20px; height: 2px; background: var(--accent-gold); border-radius: 1px; } /* --- Print Styles for Confirmation --- */ @media print { #cookie-consent, .bottom-nav, #scroll-top-btn, .search-overlay, .share-overlay { display: none !important; } body { background: #fff; color: #000; } } /* --- Enhanced Focus States for Accessibility --- */ a:focus-visible, button:focus-visible { outline: 2px solid var(--accent-gold); outline-offset: 3px; box-shadow: 0 0 0 4px rgba(212, 175, 55, 0.2); } /* --- Final Visual Polish --- */ .product-card { transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1); } .product-card:hover { transform: translateY(-6px); box-shadow: 0 25px 50px rgba(0,0,0,0.5), 0 0 0 1px rgba(212,175,55,0.2); } .btn-primary { transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1); } .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 40px rgba(212,175,55,0.4); } .btn-primary:active { transform: translateY(0) scale(0.98); } .hero-cta { transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1); } .hero-cta:hover { transform: translateY(-3px); box-shadow: 0 15px 50px rgba(212,175,55,0.5); } .nav-links a { transition: color 0.3s ease, transform 0.3s ease; } .nav-links a:hover { transform: translateY(-1px); } .nc-tile { transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1); } .nc-tile:hover { transform: translateY(-4px); box-shadow: 0 20px 40px rgba(0,0,0,0.4); } .nc-tile:hover .nc-bg { transform: scale(1.05); } .nc-bg { transition: transform 0.8s cubic-bezier(0.23, 1, 0.32, 1); } /* --- Smooth Hover Transitions --- */ .btn, .btn-primary, .btn-secondary { transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1); } /* --- Final Visual Polish: Card & Button Refinements --- */ .product-card:hover .overlay .btn-sm { transform: translateY(0); } .product-card .overlay .btn-sm { transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1); } .wishlist-btn:hover { transform: scale(1.1); } .wishlist-btn.active { color: var(--accent-gold); } .product-card .product-image::after { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(212,175,55,0.05) 0%, transparent 50%); pointer-events: none; z-index: 1; } /* --- Smooth page transitions --- */ main { animation: fadeInUp 0.6s cubic-bezier(0.23, 1, 0.32, 1) both; } @keyframes fadeInUp { from { opacity: 0.6; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } /* --- Better accordion interaction --- */ .accordion-header { transition: background 0.3s ease; } .accordion-header:hover { background: rgba(212,175,55,0.03); } /* --- Trust badges hover --- */ .trust-badge { transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1); } .trust-badge:hover { border-color: rgba(212,175,55,0.3); background: rgba(212,175,55,0.03); } /* --- Cookie consent polish --- */ #cookie-consent .cookie-btn { transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1); } #cookie-consent .cookie-btn:hover { transform: translateY(-1px); } #cookie-consent .cookie-decline { transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1); } #cookie-consent .cookie-decline:hover { background: rgba(255,255,255,0.05); } /* --- Hamburger bars animation polish --- */ .hamburger span { transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1); } .hamburger.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); } .hamburger.active span:nth-child(2) { opacity: 0; transform: scaleX(0); } .hamburger.active span:nth-child(3) { transform: rotate(-45deg) translate(6px, -6px); } /* --- Smooth image load (do NOT dim all images — breaks LCP/mobile) --- */ img { background-color: rgba(212, 175, 55, 0.05); } img.loaded { opacity: 1; } /* --- Mobile Touch Improvements --- */ @media (hover: none) and (pointer: coarse) { a, button, .product-card, .nc-tile { -webkit-tap-highlight-color: transparent; } .btn, .btn-primary { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; } .nav-links a, .footer a, .bottom-nav-item { min-height: 44px; display: flex; align-items: center; justify-content: center; } /* Always-visible product actions (hover does not work on phones) */ .product-card .overlay { opacity: 1 !important; pointer-events: none; background: linear-gradient(to top, rgba(0,0,0,0.55) 0%, transparent 45%) !important; justify-content: flex-end; align-items: flex-end; flex-direction: row; padding: 0.55rem; gap: 0.35rem; } .product-card .overlay .btn-icon, .product-card .overlay .quick-add-btn, .product-card .overlay .btn-sm { pointer-events: auto; } .product-card .overlay .btn-icon { width: 40px; height: 40px; min-width: 40px; min-height: 40px; background: rgba(10,10,10,0.82); border-color: rgba(212,175,55,0.35); } .product-card .overlay .quick-add-btn, .product-card .overlay .btn-sm { margin-left: auto; font-size: 0.62rem; padding: 0.45rem 0.7rem; min-height: 40px; border-radius: 4px; } } /* --- Safe Area Insets for iPhone Notch --- */ @supports (padding-top: env(safe-area-inset-top)) { .site-header { padding-top: env(safe-area-inset-top); } .bottom-nav { padding-bottom: calc(0.4rem + env(safe-area-inset-bottom)); } } /* --- WhatsApp Floating Button --- */ .whatsapp-float { position: fixed; bottom: 9.5rem; right: 1.5rem; z-index: 5001; width: 56px; height: 56px; border-radius: 50%; background: #25D366; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 1.7rem; box-shadow: 0 4px 20px rgba(37, 211, 102, 0.4); transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1); animation: whatsappPulse 2.5s ease-in-out infinite; } .whatsapp-float:hover { transform: scale(1.1); box-shadow: 0 6px 30px rgba(37, 211, 102, 0.6); } .whatsapp-float i { line-height: 1; } .whatsapp-tooltip { position: absolute; right: 70px; top: 50%; transform: translateY(-50%) scale(0.9); background: rgba(10, 10, 10, 0.95); color: var(--text-primary); padding: 0.4rem 0.85rem; border-radius: 6px; font-size: 0.75rem; white-space: nowrap; opacity: 0; visibility: hidden; transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1); pointer-events: none; border: 1px solid rgba(212, 175, 55, 0.15); font-family: var(--font-body); } .whatsapp-float:hover .whatsapp-tooltip { opacity: 1; visibility: visible; transform: translateY(-50%) scale(1); } @keyframes whatsappPulse { 0%, 100% { box-shadow: 0 4px 20px rgba(37, 211, 102, 0.4); } 50% { box-shadow: 0 4px 20px rgba(37, 211, 102, 0.4), 0 0 0 12px rgba(37, 211, 102, 0); } } @media (max-width: 768px) { .whatsapp-float { bottom: calc(4.75rem + env(safe-area-inset-bottom, 0px)); right: 0.85rem; width: 48px; height: 48px; font-size: 1.4rem; } .whatsapp-tooltip { display: none; } /* Sticky PDP bar sits ABOVE bottom nav (not on top of it) */ .sticky-cart-bar { bottom: calc(3.5rem + env(safe-area-inset-bottom, 0px)) !important; padding-bottom: 0.65rem !important; z-index: 1002; } body.has-sticky-cart { padding-bottom: calc(8.5rem + env(safe-area-inset-bottom, 0px)) !important; } body.has-sticky-cart .whatsapp-float { bottom: calc(9rem + env(safe-area-inset-bottom, 0px)); } body.has-sticky-cart #scroll-top-btn { bottom: calc(9.5rem + env(safe-area-inset-bottom, 0px)); } /* Cookie banner above bottom nav */ #cookie-consent { bottom: calc(3.5rem + env(safe-area-inset-bottom, 0px)); z-index: 1100; padding: 1rem; } #cookie-consent .cookie-btn { min-height: 44px; flex: 1; } /* Hide fake live-chat on phones — WhatsApp is the real channel */ .live-chat-btn, .live-chat-panel { display: none !important; } /* Toasts clear of bottom nav */ #toast-container { bottom: calc(4.5rem + env(safe-area-inset-bottom, 0px)) !important; left: 0.75rem !important; right: 0.75rem !important; } /* Scroll-top clear of bottom nav */ #scroll-top-btn { bottom: calc(4.75rem + env(safe-area-inset-bottom, 0px)) !important; left: 0.85rem !important; } /* Checkout steps — compact on phones */ .checkout-steps { gap: 0.5rem !important; padding: 0.85rem 0.5rem !important; margin-bottom: 1.5rem !important; } .checkout-step { font-size: 0.65rem !important; letter-spacing: 0.04em !important; } .step-circle { width: 22px !important; height: 22px !important; font-size: 0.7rem !important; } .step-connector, .step-chevron { font-size: 0.55rem !important; } /* Cart mobile row polish */ .cart-table td[data-label="Creation"] { display: block; text-align: left; } .cart-table td[data-label="Creation"]::before { display: none; } .cart-item-info { width: 100%; } .cart-save-later-btn { display: block; margin-top: 0.35rem; min-height: 36px; } /* Forms full-width comfortable taps */ .checkout-form, .contact-form, .appointment-form { padding-left: 1.25rem !important; padding-right: 1.25rem !important; } .checkout-form { padding: 1.5rem 1.25rem !important; } .form-group label, .checkout-label, .payment-label { display: block; margin-bottom: 0.35rem; font-size: 0.75rem; } /* Fixed header clearance — breadcrumb OR page-header, not both stacked huge */ .breadcrumb { padding-top: calc(4.75rem + env(safe-area-inset-top, 0px)); padding-bottom: 0.5rem; font-size: 0.72rem; overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; } .page-header { padding-top: calc(5rem + env(safe-area-inset-top, 0px)); } /* When breadcrumb already clears the header, page-header should not re-add huge top pad */ .breadcrumb + .page-header, .breadcrumb ~ .page-header { padding-top: 1rem !important; } main > .breadcrumb:first-child + .product-detail-container, main > .breadcrumb:first-child ~ .product-detail-container { padding-top: 0.75rem !important; } /* Product detail container top spacing */ .product-detail-container { padding-top: calc(5rem + env(safe-area-inset-top, 0px)) !important; padding-bottom: 2rem; } main > .breadcrumb ~ .product-detail-container { padding-top: 0.75rem !important; } /* Filter sheet above chrome */ #filter-sheet, .filter-sheet { z-index: 1200; padding-bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px)); } #filter-sheet-overlay, .filter-sheet-overlay { z-index: 1190; } /* Search overlay full bleed */ .search-overlay { z-index: 3000 !important; height: 100dvh !important; padding: env(safe-area-inset-top, 0) 0 env(safe-area-inset-bottom, 0); } .search-input { font-size: 1.25rem !important; } /* Mobile menu above everything except close hamburger */ .nav-links { z-index: 2000 !important; padding: env(safe-area-inset-top, 0) 1rem calc(2rem + env(safe-area-inset-bottom, 0)); } .hamburger { z-index: 2001 !important; } /* Footer columns stack on very small */ .footer-content { grid-template-columns: 1fr !important; gap: 1.75rem !important; } .footer-trust { flex-wrap: wrap; gap: 0.75rem; } /* Prevent horizontal scroll from decorative blobs */ .hero, .page-header, main, .section-padding, .footer { max-width: 100vw; overflow-x: clip; } /* Mixed collections grid tighter */ .grid.mixed-grid, .grid { gap: 1.25rem 0.75rem !important; } /* Sticky filter bar under header */ .sticky-filters, .filter-bar { top: calc(3.25rem + env(safe-area-inset-top, 0px)); z-index: 50; } } @media (max-width: 400px) { .whatsapp-float { width: 44px; height: 44px; font-size: 1.25rem; right: 0.65rem; } .sticky-cart-bar .sticky-price { font-size: 0.85rem !important; } .sticky-cart-bar .sticky-add-btn { min-width: 96px !important; padding: 0.5rem 0.65rem !important; font-size: 0.62rem !important; } .logo a { font-size: 0.72rem !important; } .bottom-nav-item span { font-size: 0.5rem; } } @media (prefers-reduced-motion: reduce) { .whatsapp-float { animation: none; } } /* ============================================================ LAUNCH HARDENING — Desktop polish for floating chrome ============================================================ */ @media (min-width: 769px) { .bottom-nav { display: none !important; } body { padding-bottom: 0; } body.has-sticky-cart { padding-bottom: 0; } .sticky-cart-bar { display: none !important; } } /* ============================================================ LIVE RATES — Gold / Silver board + ticker ============================================================ */ .rates-ticker { background: linear-gradient(90deg, #0a0a0a, #12100a, #0a0a0a); border-bottom: 1px solid rgba(212,175,55,0.12); overflow: hidden; white-space: nowrap; height: 36px; display: flex; align-items: center; z-index: 90; } .rates-ticker-track { display: inline-flex; gap: 2.5rem; animation: ratesTicker 40s linear infinite; padding-left: 100%; } .rates-ticker-track span { font-size: 0.72rem; color: #bbb; letter-spacing: 0.04em; } .rates-ticker-track strong { color: #d4af37; font-weight: 500; margin-right: 0.25rem; } @keyframes ratesTicker { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { .rates-ticker-track { animation: none; padding-left: 1rem; } } .rates-board { background: linear-gradient(160deg, #0e0e0e, #080808); border: 1px solid rgba(212,175,55,0.14); border-radius: 12px; padding: 1.5rem; margin-bottom: 2rem; } .rates-board-header { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.75rem; margin-bottom: 1.25rem; align-items: baseline; } .rates-board-title { font-family: var(--font-heading); font-size: 1.25rem; color: var(--accent-gold); display: flex; align-items: center; gap: 0.5rem; } .rates-board-meta { display: flex; flex-wrap: wrap; gap: 0.75rem; font-size: 0.75rem; color: var(--text-dim); } .rates-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.85rem; } @media (max-width: 900px) { .rates-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 480px) { .rates-grid { grid-template-columns: 1fr 1fr; gap: 0.6rem; } } .rates-card { background: rgba(255,255,255,0.02); border: 1px solid rgba(212,175,55,0.1); border-radius: 10px; padding: 1rem; transition: border-color 0.3s ease; } .rates-card:hover { border-color: rgba(212,175,55,0.28); } .rates-card-label { font-size: 0.8rem; color: var(--text-primary); font-weight: 500; } .rates-card-sub { font-size: 0.65rem; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.08em; margin: 0.2rem 0 0.65rem; } .rates-card-inr { font-family: var(--font-heading); font-size: 1.35rem; background: var(--gold-metallic); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; line-height: 1.2; } .rates-card-usd { font-size: 0.78rem; color: var(--text-secondary); margin-top: 0.35rem; } .rates-card-usd span { color: var(--text-dim); } .rates-card-usd--live { color: var(--accent-gold); font-size: 0.82rem; margin-top: 0.45rem; padding-top: 0.45rem; border-top: 1px dashed rgba(212,175,55,0.25); } .rates-card-usd--live i { font-size: 0.7rem; opacity: 0.8; margin-right: 2px; } .rates-board-footer { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid rgba(212,175,55,0.08); font-size: 0.78rem; color: var(--text-dim); } .rates-board-footer strong { color: var(--accent-gold); } .rates-refresh-btn { margin-left: auto; background: transparent; border: 1px solid rgba(212,175,55,0.3); color: var(--accent-gold); padding: 0.45rem 0.85rem; border-radius: 6px; cursor: pointer; font-size: 0.75rem; font-family: var(--font-body); min-height: 40px; display: inline-flex; align-items: center; gap: 0.4rem; } .rates-refresh-btn:hover { background: rgba(212,175,55,0.1); } .rates-refresh-btn:disabled { opacity: 0.6; cursor: wait; } .rates-explain { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin: 2rem 0; } @media (max-width: 768px) { .rates-explain { grid-template-columns: 1fr; } } .rates-explain-card { background: rgba(212,175,55,0.03); border: 1px solid rgba(212,175,55,0.1); border-radius: 10px; padding: 1.25rem; } .rates-explain-card h3 { font-family: var(--font-heading); font-size: 1.05rem; color: var(--accent-gold); margin: 0 0 0.5rem; } .rates-explain-card p { margin: 0; font-size: 0.88rem; color: var(--text-secondary); line-height: 1.7; } .rates-cta { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; margin-top: 1.5rem; } .price-breakdown { margin: 1.25rem 0 1.5rem; padding: 1rem 1.15rem; border: 1px solid rgba(212,175,55,0.12); border-radius: 10px; background: rgba(255,255,255,0.02); } .price-breakdown-grid { display: flex; flex-direction: column; gap: 0.45rem; } .price-breakdown-grid > div { display: flex; justify-content: space-between; gap: 1rem; font-size: 0.85rem; color: var(--text-secondary); } .price-breakdown-grid strong { color: var(--text-primary); font-weight: 500; } .price-breakdown-total { margin-top: 0.35rem; padding-top: 0.55rem; border-top: 1px solid rgba(212,175,55,0.15); font-size: 0.95rem !important; } .price-breakdown-total strong { color: var(--accent-gold) !important; font-size: 1.05rem; } .price-breakdown-usd { font-size: 0.8rem !important; } .price-breakdown-toggle { background: none; border: none; color: var(--accent-gold); font-size: 0.75rem; cursor: pointer; padding: 0.35rem 0; font-family: var(--font-body); text-decoration: underline; min-height: auto; min-width: auto; } .rates-home-section { padding: 3rem 0 1rem; } .product-meta-line { display: block; font-size: 0.72rem; color: var(--text-dim); margin: 0.2rem 0 0.35rem; letter-spacing: 0.02em; } .detail-price-usd { margin-bottom: 0.5rem !important; } .rates-board--loading { opacity: 0.85; } .rates-board--loading .rates-card-inr { filter: blur(0.5px); } .stock-badge { position: absolute; bottom: 0.5rem; left: 0.5rem; z-index: 4; font-size: 0.55rem; letter-spacing: 0.06em; text-transform: uppercase; padding: 0.25rem 0.45rem; border-radius: 3px; background: rgba(10,10,10,0.75); color: #ccc; border: 1px solid rgba(255,255,255,0.08); } .stock-badge.stock-low { color: #fbbf24; border-color: rgba(251,191,36,0.35); } .stock-badge.stock-mto { color: #93c5fd; } .stock-badge.stock-ok { color: #86efac; } .card-review-row { display: flex; align-items: center; gap: 0.35rem; margin-top: 0.35rem; } .card-review-row .review-stars { color: #d4af37; font-size: 0.7rem; gap: 1px; } .card-review-row .review-count { font-size: 0.7rem; color: var(--text-dim); } @media (max-width: 768px) { .rates-ticker { height: 30px; } .rates-ticker-track span { font-size: 0.65rem; } .rates-home-section { padding: 2rem 0 0.5rem; } .rates-card-inr { font-size: 1.1rem; } } /* ============================================================ UI BUGFIXES — header, cart, payment, collections filter ============================================================ */ /* Fixed header stack: ticker + nav as one unit */ .header-stack { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; background: rgba(8, 8, 8, 0.97); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid rgba(212, 175, 55, 0.1); } .header-stack .navbar { position: relative !important; top: auto !important; left: auto !important; right: auto !important; background: transparent !important; border-bottom: none !important; box-shadow: none !important; padding: 0.85rem 0 !important; padding-top: 0.85rem !important; } .header-stack .navbar.scrolled, .header-stack .navbar.navbar-scrolled, .header-stack .navbar.navbar-solid { background: transparent !important; padding: 0.85rem 0 !important; } .header-stack .rates-ticker { position: relative; z-index: 1; height: 32px; border-bottom: 1px solid rgba(212, 175, 55, 0.08); background: #0a0a0a; } /* Push page content below fixed header */ body { padding-top: 0; } .site-header { min-height: 0; } body:not([data-page=""]) { /* header-stack ~ 32px ticker + ~64px nav */ } main#main-content, .page-header, .hero, .breadcrumb { /* ensure content clears fixed header */ } main#main-content { padding-top: 0; } body .hero { padding-top: 0; margin-top: 0; } /* Offset fixed header for in-flow pages */ .site-header + main, .site-header ~ main, body > main { padding-top: 6.5rem; } body[data-page="index"] > main, body[data-page="index"] .site-header + main { padding-top: 0; } body[data-page="index"] .hero, body[data-page="index"] .hero.hero--cinematic { /* Full-bleed under fixed nav — content pads itself */ padding-top: 0 !important; box-sizing: border-box; height: 100vh !important; height: 100dvh !important; min-height: 100vh !important; min-height: 100dvh !important; } .page-header { padding-top: 7.5rem !important; } .breadcrumb { padding-top: 6.75rem !important; } .breadcrumb + .page-header, .breadcrumb ~ .page-header { padding-top: 1rem !important; } main > .breadcrumb:first-child ~ .product-detail-container, .product-detail-container { padding-top: 1.25rem !important; } body[data-page="product-detail"] main { padding-top: 6.5rem; } body[data-page="collections"] main, body[data-page="cart"] main, body[data-page="checkout"] main, body[data-page="payment"] main, body[data-page="wishlist"] main { padding-top: 6.5rem; } body[data-page="collections"] .page-header, body[data-page="cart"] .page-header { padding-top: 1.5rem !important; } body[data-page="collections"] .breadcrumb { padding-top: 0.75rem !important; margin-bottom: 0.5rem; } /* Logo — clean two-line block, no weird wrap with nav */ .logo a { display: flex !important; flex-direction: column; line-height: 1.05; white-space: normal !important; padding: 0 !important; font-size: 1.15rem !important; letter-spacing: 0.06em; max-width: 110px; } .logo-name { display: block; white-space: nowrap; } .nav-container { overflow: visible !important; gap: 1rem; flex-wrap: nowrap; } .nav-links { gap: 1.35rem !important; flex-wrap: nowrap !important; flex: 1 1 auto; justify-content: center; min-width: 0; } .nav-links a { white-space: nowrap !important; font-size: 0.72rem !important; letter-spacing: 0.12em !important; padding: 0.35rem 0 !important; line-height: 1.2; } .nav-icons { gap: 1rem !important; flex-shrink: 0; } /* Hide count badges at 0 */ .wishlist-count, .nav-icons .cart-count, .bottom-nav .cart-count { opacity: 0 !important; visibility: hidden !important; transform: scale(0.5); transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s; } .wishlist-count.visible, .nav-icons .cart-count.visible, .bottom-nav .cart-count.visible { opacity: 1 !important; visibility: visible !important; transform: scale(1); } /* Cart qty — use span so value always visible */ .cart-qty-selector { display: inline-flex !important; align-items: center; gap: 0.35rem; justify-content: center; } .cart-qty-value { display: inline-flex; align-items: center; justify-content: center; min-width: 2.25rem; height: 2.25rem; padding: 0 0.35rem; color: #f0f0f0 !important; font-size: 1rem !important; font-weight: 500; font-family: var(--font-body); border: 1px solid rgba(212, 175, 55, 0.2); border-radius: 4px; background: rgba(255, 255, 255, 0.03); line-height: 1; } .cart-qty-input { width: 2.5rem !important; min-width: 2.5rem !important; min-height: 2.25rem !important; height: 2.25rem !important; padding: 0 !important; margin: 0 !important; color: #f0f0f0 !important; -webkit-text-fill-color: #f0f0f0 !important; font-size: 1rem !important; opacity: 1 !important; border: 1px solid rgba(212, 175, 55, 0.2) !important; border-radius: 4px !important; background: rgba(255, 255, 255, 0.03) !important; text-align: center !important; line-height: 2.25rem !important; box-sizing: border-box !important; appearance: none !important; -webkit-appearance: none !important; } .cart-item-text { display: flex; flex-direction: column; align-items: flex-start; gap: 0.35rem; min-width: 0; } .cart-item-ref { display: block; font-size: 0.75rem; color: var(--text-secondary); } .cart-save-later-btn { display: inline-block !important; margin-top: 0.15rem !important; padding: 0 !important; background: none !important; border: none !important; color: var(--accent-gold) !important; font-size: 0.68rem !important; letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer; font-family: var(--font-body); min-height: auto !important; min-width: auto !important; text-align: left; width: auto; } .cart-save-later-btn:hover { text-decoration: underline; color: #f5e6a3 !important; } /* Payment — no native blue progress */ .checkout-wrap progress, payment progress, progress { display: none !important; } .payment-steps.checkout-steps, .checkout-steps { display: flex !important; flex-wrap: nowrap !important; align-items: center; justify-content: center; gap: 0.75rem !important; padding: 1rem 1.25rem !important; margin-bottom: 2rem !important; } .payment-steps .checkout-step, .checkout-steps .checkout-step { white-space: nowrap; font-size: 0.75rem !important; } .payment-steps .step-connector, .checkout-steps .step-connector { width: 28px; height: 1px; background: rgba(212, 175, 55, 0.35); flex-shrink: 0; display: block; } @media (max-width: 576px) { .payment-steps.checkout-steps { gap: 0.4rem !important; padding: 0.85rem 0.5rem !important; } .payment-steps .checkout-step { font-size: 0.65rem !important; } .payment-steps .step-connector { width: 14px; } } /* Collections sticky filters — opaque bar, never overlay products */ .filter-section.sticky-filters { position: sticky; top: 6.5rem; /* below header-stack */ z-index: 40; background: rgba(5, 5, 5, 0.97) !important; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid rgba(212, 175, 55, 0.1); padding: 0.85rem 0 1rem !important; margin-bottom: 1.5rem; } .price-range-filter { margin: 0.75rem 0 0 !important; padding: 0.75rem 1rem; background: rgba(255, 255, 255, 0.02); border: 1px solid rgba(212, 175, 55, 0.1); border-radius: 8px; max-width: 420px; position: relative; z-index: 1; } .price-range-slider { position: relative !important; z-index: 1; display: block; width: 100%; margin: 0.5rem 0; } /* Product grid clears filter bar */ #catalog-grid.grid, .grid.mixed-grid { position: relative; z-index: 1; isolation: isolate; } .product-card { position: relative; z-index: 1; background: var(--bg-color); } .product-image { overflow: hidden !important; background: #111 !important; } .product-image img { object-fit: cover !important; width: 100% !important; height: 100% !important; } /* Hide legacy announcement if any cached */ .announcement-bar { display: none !important; } /* Desktop nav: keep single row from ~1100px */ @media (max-width: 1100px) and (min-width: 769px) { .nav-links { gap: 0.85rem !important; } .nav-links a { font-size: 0.65rem !important; letter-spacing: 0.08em !important; } .logo a { font-size: 1rem !important; max-width: 90px; } .nav-icons { gap: 0.65rem !important; } } @media (max-width: 768px) { .header-stack .navbar { padding: 0.65rem 0 !important; } body > main, .site-header ~ main { padding-top: 5.75rem; } body[data-page="index"] .hero, body[data-page="index"] .hero.hero--cinematic { padding-top: 0 !important; height: 100svh !important; min-height: 100svh !important; } .filter-section.sticky-filters { top: 5.5rem; } .page-header { padding-top: 1.25rem !important; } } /* Stock badge — corner chip, not a full-height black bar */ .stock-badge { position: absolute !important; top: 0.5rem !important; left: 0.5rem !important; bottom: auto !important; right: auto !important; z-index: 5 !important; max-width: calc(100% - 1rem); pointer-events: none; } /* Don't let stock badge stretch */ .product-image .stock-badge { width: auto !important; height: auto !important; } body[data-page="payment"] .live-chat-btn, body[data-page="payment"] .live-chat-panel, body[data-page="checkout"] .live-chat-btn, body[data-page="checkout"] .live-chat-panel, body[data-page="cart"] .live-chat-btn, body[data-page="cart"] .live-chat-panel { display: none !important; } /* Cookie banner above bottom chrome, not huge */ #cookie-consent { z-index: 900 !important; } body[data-page="payment"] #cookie-consent, body[data-page="collections"] #cookie-consent { bottom: 0 !important; } /* Ensure product cards don't show clipped black strips from broken overlays */ .product-card .overlay { max-height: 100%; } .product-image { aspect-ratio: 1 / 1 !important; } @media (min-width: 769px) { .nav-links li a { display: inline-block; } } /* ============================================================ SLIM SINGLE-ROW HEADER + FILTER / STOCK FIXES (final) ============================================================ */ .header-stack, .header-stack--slim { position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; z-index: 1000 !important; background: rgba(8, 8, 8, 0.98) !important; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid rgba(212, 175, 55, 0.12); height: auto !important; min-height: 0 !important; } /* ticker restored — see FINAL DELIVERY slim ticker rules at end of file */ .header-stack .rates-ticker:not(.rates-ticker--slim):not([data-rates-ticker]) { /* legacy */ } .header-stack .navbar, .header-stack--slim .navbar, .navbar-compact { position: relative !important; top: auto !important; padding: 0.65rem 0 !important; background: transparent !important; border: none !important; box-shadow: none !important; min-height: 56px; display: flex; align-items: center; } .navbar-compact .nav-container, .header-stack .nav-container { display: flex !important; flex-wrap: nowrap !important; align-items: center !important; gap: 1rem; overflow: visible !important; width: 100%; } /* Single-line logo */ .logo { flex: 0 0 auto; min-width: 0; max-width: none !important; padding: 0 !important; text-align: left !important; } .logo a, .logo-link { display: inline-block !important; flex-direction: row !important; white-space: nowrap !important; font-family: var(--font-heading) !important; font-size: 1.25rem !important; letter-spacing: 0.04em !important; line-height: 1.2 !important; max-width: none !important; padding: 0 !important; background: var(--gold-metallic); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .logo-name { display: inline !important; } /* Single-line nav — never wrap labels */ .nav-links { display: flex !important; flex-wrap: nowrap !important; align-items: center !important; gap: 1.1rem !important; flex: 1 1 auto; justify-content: center; margin: 0; padding: 0; min-width: 0; } .nav-links li { flex: 0 0 auto; list-style: none; } .nav-links a { display: inline-block !important; white-space: nowrap !important; font-size: 0.7rem !important; letter-spacing: 0.1em !important; line-height: 1.2 !important; padding: 0.4rem 0 !important; text-transform: uppercase; } .nav-icons { flex: 0 0 auto; display: flex !important; flex-wrap: nowrap !important; gap: 0.85rem !important; align-items: center; } /* Compact page offset under slim header (~56–64px) */ body > main, .site-header ~ main, .site-header + main { padding-top: 4.25rem !important; } body[data-page="index"] > main, body[data-page="index"] .site-header + main { padding-top: 0 !important; } body[data-page="index"] .hero, body[data-page="index"] .hero.hero--cinematic { padding-top: 0 !important; } .page-header { padding-top: 5rem !important; padding-bottom: 1.5rem !important; } .breadcrumb { padding-top: 4.75rem !important; margin-bottom: 0.5rem !important; } .breadcrumb + .page-header, .breadcrumb ~ .page-header { padding-top: 0.75rem !important; } body[data-page="collections"] main, body[data-page="cart"] main, body[data-page="checkout"] main, body[data-page="payment"] main, body[data-page="wishlist"] main, body[data-page="rates"] main, body[data-page="product-detail"] main { padding-top: 4.25rem !important; } body[data-page="collections"] .page-header, body[data-page="rates"] .page-header, body[data-page="cart"] .page-header { padding-top: 1.25rem !important; } body[data-page="collections"] .breadcrumb, body[data-page="rates"] .breadcrumb { padding-top: 0.5rem !important; } .rates-home-section { padding-top: 2rem !important; } /* Filters: never sticky, never cover grid */ .filter-section, .filter-section.sticky-filters, .filter-section--static { position: relative !important; top: auto !important; z-index: 5 !important; background: transparent !important; border: none !important; margin: 0 0 1.5rem !important; padding: 0.5rem 0 1rem !important; backdrop-filter: none !important; } .price-range-filter { position: relative !important; z-index: 1 !important; max-width: 360px; margin: 1rem 0 0.25rem !important; padding: 0.85rem 1rem !important; background: rgba(20, 20, 20, 0.95) !important; border: 1px solid rgba(212, 175, 55, 0.15) !important; border-radius: 8px; clear: both; } .price-range-slider { position: static !important; width: 100% !important; display: block !important; margin: 0.5rem 0 !important; z-index: auto !important; } /* Product grid above any leftover chrome */ #catalog-grid, .grid.mixed-grid { position: relative !important; z-index: 2 !important; margin-top: 0.5rem; clear: both; } .product-card { z-index: 2 !important; overflow: hidden; background: #0a0a0a; } .product-image { position: relative !important; overflow: hidden !important; aspect-ratio: 1 / 1 !important; background: #141414 !important; isolation: isolate; } .product-image img { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; object-fit: cover !important; opacity: 1 !important; z-index: 0 !important; } /* Tiny stock chip — never a tall black panel */ .stock-badge { position: absolute !important; top: 10px !important; left: 10px !important; right: auto !important; bottom: auto !important; z-index: 3 !important; display: inline-block !important; width: auto !important; height: auto !important; max-width: 70% !important; padding: 4px 8px !important; margin: 0 !important; font-size: 0.58rem !important; line-height: 1.2 !important; letter-spacing: 0.06em; text-transform: uppercase; border-radius: 3px !important; background: rgba(10, 10, 10, 0.82) !important; color: #f5e6a3 !important; border: 1px solid rgba(212, 175, 55, 0.35) !important; pointer-events: none; white-space: nowrap; box-shadow: 0 2px 8px rgba(0,0,0,0.35); } .product-card .overlay { z-index: 2 !important; } /* Desktop: keep full nav on one line down to ~1000px */ @media (max-width: 1100px) and (min-width: 769px) { .nav-links { gap: 0.65rem !important; } .nav-links a { font-size: 0.62rem !important; letter-spacing: 0.06em !important; } .logo a, .logo-link { font-size: 1.05rem !important; } .container.nav-container { padding-left: 1rem; padding-right: 1rem; } } @media (max-width: 768px) { .nav-links { display: none !important; } /* hamburger menu */ .nav-links.active { display: flex !important; flex-direction: column !important; flex-wrap: nowrap !important; } .nav-links.active a { font-size: 1.25rem !important; white-space: nowrap !important; } .logo a, .logo-link { font-size: 1.05rem !important; } body > main, .site-header ~ main { padding-top: 3.75rem !important; } body[data-page="index"] .hero, body[data-page="index"] .hero.hero--cinematic { padding-top: 0 !important; } } /* Touch overlay: only corner actions, no full-card black wash */ @media (hover: none) and (pointer: coarse) { .product-card .overlay { background: transparent !important; opacity: 1 !important; justify-content: flex-start !important; align-items: flex-start !important; padding: 0.5rem !important; pointer-events: none !important; } .product-card .overlay .btn-icon, .product-card .overlay .quick-add-btn, .product-card .overlay .btn-sm { pointer-events: auto !important; box-shadow: 0 2px 10px rgba(0,0,0,0.45); } .product-card .overlay .quick-add-btn, .product-card .overlay .btn-sm { position: absolute; right: 0.5rem; bottom: 0.5rem; margin-left: 0 !important; } .product-card .overlay .wishlist-btn { position: absolute; top: 0.5rem; right: 0.5rem; } .product-card .overlay .quick-view-btn { position: absolute; top: 0.5rem; right: 3rem; } } /* ============================================================ FULL-VIEWPORT CINEMATIC HERO (world-class first screen) Fixes: clipped wordmark descenders + invisible primary CTA ============================================================ */ .hero.hero--cinematic { height: 100vh !important; height: 100dvh !important; min-height: 100vh !important; min-height: 100dvh !important; max-height: none !important; padding-top: 0 !important; box-sizing: border-box; align-items: center; justify-content: center; position: relative; /* Do NOT clip Playfair descenders (y, J) or CTAs */ overflow: visible !important; contain: none !important; } /* Soft bottom fade only — pointer-events none so nothing eats clicks */ .hero--cinematic::after { height: 22vh !important; max-height: 180px !important; background: linear-gradient( to top, var(--bg-color) 0%, rgba(10, 10, 10, 0.4) 45%, transparent 100% ) !important; pointer-events: none !important; z-index: 1 !important; /* below content (z-index 3) */ } .hero--cinematic .hero-bg { filter: brightness(0.24) saturate(1.45) contrast(1.18) sepia(0.05) !important; transform: scale(1.08); animation: zoomEffect 50s infinite alternate ease-in-out; overflow: hidden; z-index: 0; } .hero--cinematic .hero-bg::after { background: radial-gradient(ellipse at 50% 42%, rgba(212, 175, 55, 0.16) 0%, transparent 52%), radial-gradient(ellipse at 18% 78%, rgba(212, 175, 55, 0.08) 0%, transparent 28%), linear-gradient( to bottom, rgba(5, 5, 5, 0.72) 0%, transparent 22%, transparent 62%, rgba(5, 5, 5, 0.88) 100% ) !important; } /* Kill entrance opacity:0 forever — primary CTA was invisible because .btn-primary goldShimmer overwrote heroCta animation, leaving opacity:0 */ .hero-content.hero-content--cinematic, .hero-content--cinematic .subtitle, .hero-content--cinematic h1, .hero-content--cinematic p, .hero-content--cinematic .hero-cta, .hero-content--cinematic .hero-cta-secondary, .hero-content--cinematic .hero-actions, .hero-content--cinematic .btn-primary, .hero-content--cinematic .btn { opacity: 1 !important; transform: none !important; animation: none !important; visibility: visible !important; } .hero-content--cinematic { max-width: 960px !important; width: 100%; padding: 6.5rem 1.75rem 5.5rem !important; z-index: 5 !important; position: relative; overflow: visible !important; } .hero-content--cinematic .subtitle { margin-bottom: 1.15rem !important; letter-spacing: 0.32em !important; font-size: 0.74rem !important; display: block; } /* Wordmark: room for descenders under background-clip text */ .hero-content--cinematic h1 { font-size: clamp(2.9rem, 7vw, 5.75rem) !important; margin: 0 auto 0.35rem !important; padding: 0.08em 0.12em 0.22em !important; /* critical: y / J tails */ line-height: 1.22 !important; letter-spacing: 0.01em; overflow: visible !important; /* Solid gold first — clip can clip glyphs in some engines */ color: #e8d48b !important; background: linear-gradient( 120deg, #8a7340 0%, #f0e0a8 28%, #d4af37 50%, #f5e6c0 72%, #a6893d 100% ) !important; background-size: 200% auto !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; /* drop-shadow on clipped text often crops; use softer glow */ filter: drop-shadow(0 4px 28px rgba(212, 175, 55, 0.28)) !important; text-shadow: none !important; box-decoration-break: clone; -webkit-box-decoration-break: clone; } .hero-divider { width: 56px !important; margin: 0.15rem auto 1.25rem !important; height: 1px; background: linear-gradient(90deg, transparent, var(--accent-gold), transparent); flex-shrink: 0; } .hero-content--cinematic p { margin: 0 auto 2.1rem !important; font-size: clamp(0.95rem, 1.5vw, 1.12rem) !important; max-width: 520px !important; line-height: 1.75 !important; text-transform: none; letter-spacing: 0.03em; color: rgba(232, 228, 220, 0.88) !important; opacity: 1 !important; } .hero-actions { display: flex !important; flex-wrap: wrap; gap: 0.95rem; justify-content: center; align-items: center; width: 100%; position: relative; z-index: 6; } /* Primary CTA — always visible gold pill */ .hero-content--cinematic .hero-cta, .hero-content--cinematic a.btn-primary.hero-cta { display: inline-flex !important; align-items: center; justify-content: center; padding: 1.1rem 2.5rem !important; font-size: 0.76rem !important; letter-spacing: 0.2em !important; min-height: 52px; margin: 0 !important; opacity: 1 !important; visibility: visible !important; color: #0a0a0a !important; -webkit-text-fill-color: #0a0a0a !important; background: linear-gradient(135deg, #c9a227 0%, #f0e0a8 45%, #d4af37 100%) !important; background-size: 100% 100% !important; border: none !important; box-shadow: 0 10px 36px rgba(212, 175, 55, 0.35); text-decoration: none !important; animation: none !important; /* never let goldShimmer kill opacity */ } .hero-content--cinematic .hero-cta:hover { transform: translateY(-2px) !important; box-shadow: 0 14px 48px rgba(212, 175, 55, 0.5); } .hero-cta-secondary, .hero-content--cinematic .hero-cta-secondary { display: inline-flex !important; align-items: center; justify-content: center; padding: 1.1rem 2rem !important; font-size: 0.76rem !important; letter-spacing: 0.18em !important; min-height: 52px; border: 1px solid rgba(212, 175, 55, 0.55) !important; color: var(--accent-gold) !important; -webkit-text-fill-color: var(--accent-gold) !important; background: rgba(10, 10, 10, 0.35) !important; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); opacity: 1 !important; text-decoration: none !important; } .hero-cta-secondary:hover { background: rgba(212, 175, 55, 0.1) !important; border-color: rgba(212, 175, 55, 0.8) !important; } .hero--cinematic .scroll-indicator { display: flex !important; align-items: center; justify-content: center; bottom: 1.75rem !important; font-size: 1.1rem !important; opacity: 0.65; color: var(--gold-mid); text-decoration: none; width: 44px; height: 44px; z-index: 6; } .hero--cinematic .scroll-indicator::after { display: none; } .hero--cinematic .scroll-indicator:hover { opacity: 1; color: var(--accent-gold); } @media (max-width: 768px) { .hero.hero--cinematic { height: 100svh !important; min-height: 100svh !important; min-height: -webkit-fill-available; overflow: hidden !important; /* only mobile: keep bg from spill */ } .hero-content--cinematic { padding: 5.5rem 1.2rem 4.25rem !important; overflow: visible !important; } .hero-content--cinematic h1 { font-size: clamp(2.35rem, 10.5vw, 3.25rem) !important; line-height: 1.25 !important; padding: 0.1em 0.08em 0.25em !important; } .hero-content--cinematic p { margin-bottom: 1.75rem !important; font-size: 0.95rem !important; } .hero-actions { flex-direction: column; width: 100%; max-width: 300px; margin: 0 auto; } .hero-actions .btn { width: 100%; } .hero-content--cinematic .hero-cta, .hero-cta-secondary { padding: 1rem 1.5rem !important; font-size: 0.72rem !important; } .hero--cinematic .scroll-indicator { bottom: 1.25rem !important; } } @media (min-width: 769px) and (max-height: 700px) { .hero-content--cinematic h1 { font-size: clamp(2.4rem, 5.5vw, 3.6rem) !important; } .hero-content--cinematic p { margin-bottom: 1.35rem !important; } .hero-content--cinematic { padding-top: 5rem !important; padding-bottom: 3.25rem !important; } } /* Rates home compact */ .rates-home-section--compact { padding: 2.5rem 0 1.5rem !important; } .rates-home-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; flex-wrap: wrap; } .rates-home-head .subtitle { display: block; margin-bottom: 0.35rem; } .rates-home-head h2 { margin: 0; font-size: clamp(1.5rem, 3vw, 2rem); } .rates-home-link { color: var(--accent-gold); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; display: inline-flex; align-items: center; gap: 0.4rem; } .rates-home-link:hover { color: #f5e6a3; } .rates-home-section--compact .rates-board { margin-bottom: 0 !important; } .rates-home-section--compact .section-header { display: none; } /* --- Collections compact page --- */ .collections-main { padding-top: 4.25rem !important; } .collections-top { padding-top: 0.75rem; padding-bottom: 0; } .breadcrumb--inline, .collections-main .breadcrumb { padding-top: 0.35rem !important; margin-bottom: 0.35rem !important; font-size: 0.75rem !important; } .page-header--compact, .collections-main .page-header { padding: 0.35rem 0 1rem !important; margin: 0 !important; text-align: center; } .page-header--compact .subtitle { margin-bottom: 0.4rem !important; font-size: 0.68rem !important; } .page-header--compact h1 { font-size: clamp(1.75rem, 4vw, 2.35rem) !important; margin: 0 0 0.35rem !important; line-height: 1.15 !important; } .page-header--compact::after { width: 40px; margin: 0.65rem auto 0; } .filter-section--toolbar { position: relative !important; margin: 0 0 1.25rem !important; padding: 0 !important; background: transparent !important; } .filter-bar--toolbar { display: flex !important; flex-wrap: wrap !important; align-items: center !important; justify-content: space-between !important; gap: 0.75rem 1rem !important; padding: 0.75rem 1rem !important; background: rgba(16, 16, 16, 0.9); border: 1px solid rgba(212, 175, 55, 0.12); border-radius: 10px; } .filter-bar--toolbar .filter-groups { display: flex !important; flex-wrap: wrap; gap: 0.5rem; align-items: center; } .filter-bar--toolbar .filter-btn { padding: 0.5rem 0.85rem !important; font-size: 0.72rem !important; min-height: 40px; border-radius: 6px; background: rgba(255,255,255,0.03); border: 1px solid rgba(212,175,55,0.15); } .filter-bar--toolbar .filter-actions { display: flex !important; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; } .filter-bar--toolbar .sort-select { min-height: 40px; padding: 0.4rem 0.75rem; font-size: 0.75rem; border-radius: 6px; background: rgba(255,255,255,0.03); border: 1px solid rgba(212,175,55,0.15); color: var(--text-primary); } /* Price range: full width under toolbar, compact */ .price-range-filter--inline, .collections-main .price-range-filter { display: flex !important; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.25rem; max-width: none !important; width: 100% !important; margin: 0.65rem 0 0 !important; padding: 0.65rem 1rem !important; background: rgba(16, 16, 16, 0.75) !important; border: 1px solid rgba(212, 175, 55, 0.1) !important; border-radius: 8px; box-sizing: border-box; } .price-range-filter--inline .price-range-labels { display: none; /* cleaner: show only current value + slider */ } .price-range-filter--inline .price-range-slider { flex: 1 1 200px; min-width: 160px; max-width: 420px; margin: 0 !important; } .price-range-filter--inline .price-range-current { margin: 0 !important; font-size: 0.78rem !important; white-space: nowrap; order: -1; } /* Product grid tighter under filters */ .collections-main .product-grid.section-padding, .collections-main .section-padding.product-grid { padding-top: 1.25rem !important; padding-bottom: 3rem !important; } .collections-main #catalog-grid { margin-top: 0 !important; gap: 1.5rem 1.15rem !important; } @media (max-width: 768px) { .filter-bar--toolbar { padding: 0.65rem; } .price-range-filter--inline .price-range-slider { max-width: none; } .collections-main { padding-top: 3.75rem !important; } } .collections-grid-section { padding: 0.5rem 0 3.5rem !important; opacity: 1 !important; transform: none !important; pointer-events: auto !important; } .collections-grid-section.animate-on-scroll { opacity: 1 !important; transform: none !important; pointer-events: auto !important; } .collections-main .page-header::after { content: ''; display: block; width: 36px; height: 1px; margin: 0.75rem auto 0; background: linear-gradient(90deg, transparent, var(--accent-gold), transparent); } /* Price range labels small on the right of slider row */ .price-range-filter--inline .price-range-labels { display: flex !important; gap: 0.75rem; font-size: 0.65rem; color: var(--text-dim); margin: 0 !important; width: auto; } .price-range-filter--inline .price-range-current strong { color: var(--accent-gold); font-weight: 600; } /* Kill leftover huge page-header rules fighting compact */ body[data-page="collections"] .page-header { padding-top: 0.25rem !important; padding-bottom: 0.5rem !important; } body[data-page="collections"] main.collections-main { padding-top: 4.15rem !important; } body[data-page="index"] .hero.hero--cinematic { padding-top: 0 !important; } /* ============================================================ FINAL DELIVERY — slim rates ticker + site-wide polish ============================================================ */ /* Slim gold rates ticker (restored, optimized) */ .header-stack--slim .rates-ticker, .rates-ticker.rates-ticker--slim, .header-stack [data-rates-ticker] { display: flex !important; align-items: center !important; height: 26px !important; min-height: 26px !important; max-height: 26px !important; overflow: hidden !important; background: #070707 !important; border-bottom: 1px solid rgba(212, 175, 55, 0.1) !important; position: relative !important; z-index: 2 !important; } .rates-ticker--slim .rates-ticker-track, .header-stack--slim .rates-ticker-track { display: inline-flex !important; align-items: center; gap: 1.75rem !important; animation: ratesTicker 55s linear infinite !important; padding-left: 100% !important; will-change: transform; } .rates-ticker--slim .rates-ticker-track span, .header-stack--slim .rates-ticker-track span { font-size: 0.62rem !important; letter-spacing: 0.06em !important; color: #a8a8a8 !important; line-height: 26px !important; white-space: nowrap; } .rates-ticker--slim .rates-ticker-track strong, .header-stack--slim .rates-ticker-track strong { color: #d4af37 !important; font-weight: 500 !important; margin-right: 0.2rem; } @media (prefers-reduced-motion: reduce) { .rates-ticker--slim .rates-ticker-track { animation: none !important; padding-left: 1rem !important; } } /* Header total height ≈ 26px ticker + ~52px nav */ .header-stack--slim .navbar, .header-stack--slim .navbar-compact { min-height: 52px !important; padding: 0.55rem 0 !important; } .header-stack--slim .logo a, .header-stack--slim .logo-link { font-size: 1.15rem !important; } /* Content offset for ticker + nav (~78px) */ body > main, .site-header ~ main, .site-header + main, body[data-page="collections"] main, body[data-page="cart"] main, body[data-page="checkout"] main, body[data-page="payment"] main, body[data-page="wishlist"] main, body[data-page="rates"] main, body[data-page="product-detail"] main, body[data-page="about"] main, body[data-page="services"] main, body[data-page="bespoke"] main, body[data-page="journal"] main, body[data-page="contact"] main, body[data-page="faq"] main, body[data-page="appointment"] main, body[data-page="legal"] main, body[data-page="confirmation"] main, .collections-main { padding-top: 5rem !important; } body[data-page="index"] > main, body[data-page="index"] .site-header + main { padding-top: 0 !important; } body[data-page="index"] .hero.hero--compact, body[data-page="index"] .hero.hero--cinematic, body[data-page="index"] .hero { padding-top: 0 !important; height: 100vh !important; height: 100dvh !important; min-height: 100vh !important; min-height: 100dvh !important; max-height: none !important; } body[data-page="collections"] .page-header, body[data-page="rates"] .page-header, body[data-page="about"] .page-header, body[data-page="services"] .page-header, body[data-page="contact"] .page-header, body[data-page="faq"] .page-header, body[data-page="journal"] .page-header, body[data-page="bespoke"] .page-header, body[data-page="appointment"] .page-header, body[data-page="legal"] .page-header, body[data-page="wishlist"] .page-header, body[data-page="cart"] .page-header { padding-top: 1rem !important; padding-bottom: 1.25rem !important; } body[data-page="collections"] .breadcrumb, body[data-page="product-detail"] .breadcrumb, body[data-page="cart"] .breadcrumb, body[data-page="wishlist"] .breadcrumb { padding-top: 0.5rem !important; } /* Global polish: consistent containers, forms, footer spacing */ .page-header h1 { font-size: clamp(1.85rem, 4vw, 2.6rem); line-height: 1.15; } .section-padding { padding: 3.5rem 0; } .footer { margin-top: 2rem; border-top: 1px solid rgba(212, 175, 55, 0.08); } .checkout-wrap, .cart-container { padding-bottom: 3rem; } /* Hide zero badges cleanly */ .wishlist-count:not(.visible), .cart-count:not(.visible) { display: none !important; } /* Cookie bar refined */ #cookie-consent { border-top: 1px solid rgba(212,175,55,0.15); background: rgba(10,10,10,0.97) !important; } #cookie-consent .cookie-inner { max-width: 1100px; gap: 1rem; } /* WhatsApp only float on most pages — chat already hidden mobile */ .whatsapp-float { bottom: 1.5rem; right: 1.25rem; } @media (max-width: 768px) { .whatsapp-float { bottom: calc(4.5rem + env(safe-area-inset-bottom, 0px)); right: 0.85rem; } body > main, .collections-main { padding-top: 4.5rem !important; } body[data-page="index"] > main, body[data-page="index"] .site-header + main { padding-top: 0 !important; } body[data-page="index"] .hero.hero--compact, body[data-page="index"] .hero.hero--cinematic, body[data-page="index"] .hero { padding-top: 0 !important; height: 100svh !important; min-height: 100svh !important; } .header-stack--slim .rates-ticker { height: 24px !important; min-height: 24px !important; max-height: 24px !important; } .rates-ticker--slim .rates-ticker-track span { font-size: 0.58rem !important; line-height: 24px !important; } } /* 404 / confirmation / legal readability */ .conf-hero, .hero--404 { min-height: 60vh; padding-top: 5rem; } .legal-container, .faq-container, .blog-post-section { padding-top: 1rem; } /* Ensure rates board not crushed */ .rates-board { margin-top: 0.5rem; } .rates-card-inr { font-size: clamp(1.05rem, 2.5vw, 1.35rem) !important; } /* Product detail clear of header */ body[data-page="product-detail"] .product-detail-container { padding-top: 0.5rem !important; } body[data-page="product-detail"] main { padding-bottom: 2rem; } /* Payment/checkout forms polish */ .checkout-form, .contact-form, .appointment-form { max-width: 100%; } .checkout-form input, .contact-form input, .appointment-form input, .checkout-form select, .contact-form select, .appointment-form select, .checkout-form textarea, .contact-form textarea { width: 100%; box-sizing: border-box; } /* Journal cards consistent */ .journal-grid, .journal-section .grid { gap: 1.5rem; } /* ============================================================ PREMIUM HEADER — glass, slightly taller, luxury feel ============================================================ */ .header-stack--slim { position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; z-index: 1000 !important; background: transparent !important; border-bottom: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } /* Ultra-thin rates ribbon */ .header-stack--slim .rates-ticker, .rates-ticker.rates-ticker--slim, .header-stack [data-rates-ticker] { display: flex !important; align-items: center !important; height: 28px !important; min-height: 28px !important; max-height: 28px !important; background: rgba(6, 6, 6, 0.92) !important; border-bottom: 1px solid rgba(212, 175, 55, 0.12) !important; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } .rates-ticker--slim .rates-ticker-track span { font-size: 0.64rem !important; line-height: 28px !important; letter-spacing: 0.08em !important; } /* Premium glass nav — slightly taller, translucent */ .header-stack--slim .navbar, .header-stack--slim .navbar-compact, .navbar-compact { position: relative !important; min-height: 72px !important; padding: 1.05rem 0 !important; background: linear-gradient( to bottom, rgba(10, 10, 10, 0.72) 0%, rgba(10, 10, 10, 0.45) 55%, rgba(10, 10, 10, 0.22) 100% ) !important; backdrop-filter: blur(18px) saturate(1.15) !important; -webkit-backdrop-filter: blur(18px) saturate(1.15) !important; border-bottom: 1px solid rgba(212, 175, 55, 0.14) !important; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25) !important; transition: background 0.35s ease, box-shadow 0.35s ease, padding 0.35s ease !important; } /* Stronger glass when scrolled / solid pages */ .header-stack--slim .navbar.scrolled, .header-stack--slim .navbar.navbar-scrolled, .header-stack--slim .navbar.navbar-solid, .header-stack--slim.is-scrolled .navbar { background: rgba(8, 8, 8, 0.88) !important; backdrop-filter: blur(22px) saturate(1.2) !important; -webkit-backdrop-filter: blur(22px) saturate(1.2) !important; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.45) !important; border-bottom-color: rgba(212, 175, 55, 0.18) !important; padding: 0.9rem 0 !important; min-height: 64px !important; } .header-stack--slim .logo a, .header-stack--slim .logo-link { font-size: 1.35rem !important; letter-spacing: 0.06em !important; font-weight: 400 !important; } .header-stack--slim .nav-links { gap: 1.5rem !important; } .header-stack--slim .nav-links a { font-size: 0.72rem !important; letter-spacing: 0.14em !important; color: rgba(240, 240, 240, 0.78) !important; transition: color 0.25s ease !important; } .header-stack--slim .nav-links a:hover, .header-stack--slim .nav-links a.active { color: #e8d48b !important; } .header-stack--slim .nav-icons { gap: 1.15rem !important; color: rgba(245, 245, 245, 0.9); } .header-stack--slim .nav-icons a:hover, .header-stack--slim .nav-icons button:hover { color: #d4af37 !important; } /* Content clearance for premium header (~28 + 72) */ body > main, .site-header ~ main, .collections-main, body[data-page="collections"] main, body[data-page="cart"] main, body[data-page="checkout"] main, body[data-page="payment"] main, body[data-page="wishlist"] main, body[data-page="rates"] main, body[data-page="product-detail"] main, body[data-page="about"] main, body[data-page="services"] main, body[data-page="bespoke"] main, body[data-page="journal"] main, body[data-page="contact"] main, body[data-page="faq"] main, body[data-page="appointment"] main, body[data-page="legal"] main, body[data-page="confirmation"] main { padding-top: 6.25rem !important; } body[data-page="index"] > main, body[data-page="index"] .site-header + main { padding-top: 0 !important; } body[data-page="index"] .hero.hero--compact, body[data-page="index"] .hero.hero--cinematic, body[data-page="index"] .hero { padding-top: 0 !important; height: 100vh !important; height: 100dvh !important; min-height: 100vh !important; min-height: 100dvh !important; max-height: none !important; } body[data-page="collections"] .page-header--compact, body[data-page="collections"] .page-header { padding-top: 0.75rem !important; } /* Homepage: rates after products — breathing room */ .rates-home-section--compact { padding: 3.5rem 0 2.5rem !important; border-top: 1px solid rgba(212, 175, 55, 0.08); background: linear-gradient(180deg, rgba(212,175,55,0.03) 0%, transparent 40%); } @media (max-width: 1100px) and (min-width: 769px) { .header-stack--slim .nav-links { gap: 0.85rem !important; } .header-stack--slim .nav-links a { font-size: 0.64rem !important; letter-spacing: 0.08em !important; } .header-stack--slim .logo-link { font-size: 1.15rem !important; } } @media (max-width: 768px) { .header-stack--slim .navbar-compact { min-height: 58px !important; padding: 0.75rem 0 !important; } body > main, .collections-main { padding-top: 5.5rem !important; } body[data-page="index"] > main, body[data-page="index"] .site-header + main { padding-top: 0 !important; } body[data-page="index"] .hero.hero--compact, body[data-page="index"] .hero.hero--cinematic, body[data-page="index"] .hero { padding-top: 0 !important; height: 100svh !important; min-height: 100svh !important; } } /* Simple 24K + Silver rates board */ .rates-grid--two { grid-template-columns: repeat(2, 1fr) !important; gap: 1rem !important; } @media (max-width: 600px) { .rates-grid--two { grid-template-columns: 1fr !important; } } .rates-card--hero { padding: 1.35rem 1.25rem !important; } .rates-card--hero .rates-card-inr { font-size: clamp(1.5rem, 4vw, 2rem) !important; margin: 0.5rem 0 0.35rem; } .rates-board--simple .rates-board-title { font-size: 1.15rem; } .journal-feed-loading, .journal-feed-empty { color: var(--text-dim); font-size: 0.9rem; padding: 1rem 0 2rem; grid-column: 1 / -1; } .journal-card--news .journal-meta { color: rgba(212, 175, 55, 0.75); } .footer-tagline { color: var(--accent-gold); } /* Bullion category subtle badge space */ .product-card[data-category="Gold Bars"] .product-category, .product-card[data-category="Gold Coins"] .product-category, .product-card[data-category="Silver Bars"] .product-category, .product-card[data-category="Silver Coins"] .product-category { color: #e8d48b; } /* ── Rose Drop Edit + catalog polish ── */ .badge.exact { background: rgba(96, 165, 250, 0.92); color: #0a0a0a; font-weight: 600; letter-spacing: 0.04em; } .badge.cutout { background: rgba(212, 175, 55, 0.95); color: #0a0a0a; font-weight: 600; letter-spacing: 0.04em; } .badge.bestseller { background: rgba(232, 212, 139, 0.95); color: #0a0a0a; } /* Single-image cards: never blank the photo on hover */ .product-card:hover .img-front.img-single, .product-card .img-front.img-single { opacity: 1 !important; } .product-card:hover .img-front.img-single { transform: scale(1.04); } .product-collection-line { display: block; font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(212, 175, 55, 0.75); margin: 0.15rem 0 0.2rem; } .product-pair-link { display: inline-block; margin-top: 0.45rem; font-size: 0.72rem; color: var(--accent-gold); text-decoration: none; letter-spacing: 0.02em; border-bottom: 1px solid rgba(212, 175, 55, 0.35); transition: color 0.2s, border-color 0.2s; } .product-pair-link:hover { color: #f5e6a3; border-color: #f5e6a3; } .product-card--cutout .product-image { background: #0c0c0e !important; } .product-card--cutout .product-image img { object-fit: contain !important; padding: 0.5rem; background: radial-gradient(ellipse at center, #1a1a1c 0%, #0c0c0e 70%); } .product-card--exact .product-image img { object-fit: cover !important; } /* Collections intro for Rose Drop */ .collections-note { max-width: 640px; margin: 0.5rem auto 0; text-align: center; color: var(--text-secondary); font-size: 0.88rem; line-height: 1.55; } .collections-note strong { color: #e8d48b; font-weight: 500; } /* Journal owner posts */ .journal-card .journal-meta { letter-spacing: 0.04em; } .journal-image-wrap { aspect-ratio: 16 / 10; overflow: hidden; background: #111; } .journal-image-wrap .journal-image { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.45s ease; } .journal-card:hover .journal-image { transform: scale(1.04); } /* Product detail local images */ .product-gallery img, .main-image img, .pd-main-image img { background: #0e0e0e; } /* Mobile catalog cards */ @media (max-width: 640px) { .product-pair-link { font-size: 0.68rem; } .product-collection-line { font-size: 0.62rem; } .badge.exact, .badge.cutout { font-size: 0.55rem; padding: 0.25rem 0.45rem; } } /* ── SJ Monogram logo mark (nav + footer) ── */ .logo-mark, .footer-logo-mark { display: inline-block; vertical-align: middle; flex-shrink: 0; filter: drop-shadow(0 1px 6px rgba(212, 175, 55, 0.25)); } .logo-mark { width: 37px; height: 28px; margin-right: 0.5rem; } .logo-mark + .logo-name { vertical-align: middle; } .footer-logo-mark { width: 53px; height: 40px; margin-right: 0.65rem; } .footer-logo { display: flex; align-items: center; } @media (max-width: 768px) { .logo-mark { width: 29px; height: 22px; margin-right: 0.4rem; } .footer-logo-mark { width: 43px; height: 32px; margin-right: 0.5rem; } } /* ── QR Code save-card block (Contact page) ── */ .qr-save-block { text-align: center; margin-top: 1.5rem; } .qr-save-block p { margin-bottom: 0.9rem; } .qr-teaser { display: inline-flex; flex-direction: column; align-items: center; gap: 0.6rem; text-decoration: none; transition: transform 0.2s; } .qr-teaser:hover { transform: scale(1.03); } .qr-teaser img { width: 140px; height: 140px; border-radius: 16px; border: 1px solid rgba(212, 175, 55, 0.3); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4); } .qr-caption { font-size: 0.72rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--gold); font-weight: 500; display: flex; align-items: center; gap: 0.45rem; } .qr-caption i { font-size: 0.65rem; } /* ============================================================ MOBILE HEADER FIT (2026 fix) — phone nav must fit 100% width Root cause: .logo-link wordmark (font-size 1.25rem !important, max-width:none !important) + 44px icon buttons + hamburger totalled ~115% of viewport; nav-container had overflow:visible !important so the cart icon rendered past the right edge. Fix: bounded logo name (vw-based cap + ellipsis), tighter gaps, container clips again as a safety net. ============================================================ */ @media (max-width: 768px) { .nav-container { gap: 0.6rem !important; padding-left: 0.75rem !important; padding-right: 0.75rem !important; overflow: hidden !important; } .logo { min-width: 0 !important; flex: 0 1 auto !important; } .logo a, .logo-link { min-width: 0 !important; flex: 0 1 auto !important; overflow: hidden !important; max-width: 46vw !important; } .logo-name { display: inline-block !important; vertical-align: middle !important; font-size: 0.92rem !important; letter-spacing: 0.03em !important; max-width: calc(100vw - 300px) !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; } .nav-icons { gap: 0.5rem !important; margin-left: auto !important; } .nav-icons a, .nav-icons button { flex: 0 0 auto; } } @media (max-width: 430px) { .nav-container { gap: 0.5rem !important; } .logo-mark { width: 26px; height: 20px; margin-right: 0.35rem !important; } .logo-name { font-size: 0.82rem !important; max-width: calc(100vw - 285px) !important; } .nav-icons { gap: 0.4rem !important; } } /* Very small phones (iPhone SE / Galaxy A series, 320-360px): monogram only — hide the wordmark so the row always fits. */ @media (max-width: 360px) { .logo-name { display: none !important; } .logo-mark { margin-right: 0 !important; } } /* ============================================================ MOBILE OVERFLOW SAFETY NET (2026-08-13) — belt & suspenders Applies at phone widths only; desktop untouched. ============================================================ */ @media (max-width: 768px) { /* 1. Grids: never let a track exceed the viewport */ .grid { grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)) !important; } .grid > * { min-width: 0 !important; max-width: 100% !important; } /* 2. Filter bar: wrap instead of clipping (was overflow-x:hidden) */ .filter-actions { overflow-x: visible !important; flex-wrap: wrap !important; } .filter-actions > * { min-width: 0 !important; } .price-range-filter--inline { flex-wrap: wrap !important; row-gap: 0.5rem !important; } .price-range-filter--inline .price-range-slider { width: 100% !important; max-width: 100% !important; min-width: 0 !important; } /* 3. Text: long words/prices can always break instead of pushing layout */ h1, h2, h3, h4, p, .price, .product-name, .sticky-price { overflow-wrap: break-word !important; } /* 4. Sections and media bounded */ main, section, footer, .container, .page-header, .breadcrumb { max-width: 100% !important; min-width: 0 !important; } img, svg, video, iframe, canvas { max-width: 100% !important; } /* 5. Sticky add-to-cart bar: shrink gracefully, price may ellipsize */ .sticky-cart-bar { gap: 0.5rem; } .sticky-cart-bar .sticky-price { min-width: 0 !important; overflow: hidden !important; text-overflow: ellipsis !important; max-width: 40vw !important; } /* 6. Product detail gallery & tables */ .detail-gallery, .main-image, .thumbnail-grid { max-width: 100% !important; min-width: 0 !important; } /* Product detail grids: minmax(0,1fr) so image intrinsic width can never inflate the track */ .product-detail-container, .detail-gallery, #cart-content { grid-template-columns: minmax(0, 1fr) !important; } .thumbnail-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } .detail-gallery > *, .detail-info > * { min-width: 0 !important; max-width: 100% !important; } .main-image img, .thumbnail-img { max-width: 100% !important; } .cart-table { display: block !important; overflow-x: auto !important; max-width: 100% !important; } /* 7. Flex rows: allow children to shrink */ .nav-container > *, .filter-bar > *, .breadcrumb > * { min-width: 0; } } @media (max-width: 430px) { .grid { grid-template-columns: repeat(auto-fill, minmax(min(160px, 100%), 1fr)) !important; } } /* Hero background zoom must stay inside its section */ .hero { overflow: hidden !important; }