/* * JR Granites — Monument Inventory Stylesheet * ============================================= * Design system: Luxury/refined aesthetic with warm earth tones * Font stack: Cormorant Garamond (headings) + Source Sans 3 (body) * Theme: Light/dark via [data-theme] attribute on , toggled by JS * Layout: Sidebar + product grid, responsive via native CSS Grid * Animations: CSS @keyframes triggered by JS class toggles + IntersectionObserver * * Conventions: * - CSS custom properties for ALL colors, spacing, and animation tokens * - Transitions use --transition-{fast|base|slow} tokens for consistency * - Section comments with === markers delineate major blocks * - .open and .visible classes toggle overlay/panel states (never inline styles) * - Animations GPU-accelerated via will-change on animated elements */ :root { --bg-body: #f7f2eb; --bg-card: #fff; --bg-sidebar: #faf6f0; --bg-header: #faf6f0; --bg-hero: linear-gradient(135deg,#2c1810,#1a0f0a); --bg-input: #fff; --bg-overlay: rgba(40,30,22,.5); --bg-tag: rgba(166,35,14,.08); --surface-bg: #faf6f0; --border-color: #d4c8b8; --text-primary: #2c2416; --text-secondary: #6b5e4f; --text-muted: #5e554a; --text-heading: #2c2416; --text-inverse: #f5f0ea; --border-light: #e8e0d6; --border-medium: #d4c8b8; --border-strong: #c0b0a0; --accent: #A6230E; --accent-hover: #551006; --accent-light: rgba(166,35,14,.08); --accent-glow: rgba(166,35,14,.2); --shadow-sm: 0 1px 3px rgba(0,0,0,.06); --shadow-hover: 0 3px 12px rgba(0,0,0,.08); --shadow-card: 0 4px 16px rgba(0,0,0,.06); --shadow-card-hover: 0 8px 28px rgba(0,0,0,.1); --shadow-heavy: 0 16px 48px rgba(0,0,0,.1), 0 4px 12px rgba(0,0,0,.06); --shadow-accent: 0 4px 16px rgba(166,35,14,.25); --shadow-overlay: 0 8px 40px rgba(0,0,0,.1); --shadow-thumb: 0 2px 8px rgba(0,0,0,.12); --shadow-modal: 0 8px 32px rgba(0,0,0,.2); --shadow-toast: 0 8px 24px rgba(0,0,0,.25); --shadow-logo: drop-shadow(0 0 2px rgba(160,140,120,.3)); --shadow-logo-hover: drop-shadow(0 0 6px rgba(160,140,120,.5)); --shadow-text: 0 2px 6px rgba(0,0,0,.3); --shadow-text-sm: 0 1px 3px rgba(0,0,0,.2); --shadow-text-lg: 0 2px 10px rgba(0,0,0,.3); --radius-lg: 12px; --radius-xl: 16px; --font-body: 'Source Sans 3',sans-serif; --font-heading: 'Cormorant Garamond',serif; /* * Animation timing tokens — use these everywhere for consistency: * --transition-fast: Hover states, micro-interactions (color shifts) * --transition-base: Panel reveals, scroll reveals, layout shifts * --transition-slow: Modal overlays, hero effects, dramatic reveals * * The "slow" token uses an overshoot cubic-bezier for a weighty, * deliberate feel — appropriate for a monument/granite brand. */ --transition-fast: .15s ease; --transition-base: .25s ease; --transition-slow: .4s cubic-bezier(.34,1.56,.64,1); --stock-ok-bg: #e8f5e9; --stock-ok-text: #2e7d32; --stock-low-bg: #fff3e0; --stock-low-text: #e65100; --stock-out-bg: #f5f5f5; --stock-out-text: #777; --stock-coming-bg: #e3f2fd; --stock-coming-text: #1565c0; --stars: #c4956a; --wishlist-active: #c0392b; --toast-bg: rgba(44,24,16,.95); --bg-glass: rgba(255,255,255,.88); --bg-glass-border: rgba(0,0,0,.08); } [data-theme="dark"] { --bg-body: #0d0907; --bg-card: #14110e; --bg-sidebar: #12100c; --bg-header: #100d0a; --bg-hero: linear-gradient(135deg,#070301,#0d0805); --bg-input: #1a1612; --bg-tag: rgba(192,66,46,.12); --bg-overlay: rgba(0,0,0,.85); --surface-bg: #100c09; --border-color: #2a2420; --text-primary: #c8c0b8; --text-secondary: #8a8075; --text-muted: #9a9085; --text-heading: #c8c0b8; --text-inverse: #d8d0c8; --border-light: #1e1a16; --border-medium: #2a2420; --border-strong: #3a322c; --accent: #c0422e; --accent-hover: #d04f3a; --accent-light: rgba(192,66,46,.12); --accent-glow: rgba(192,66,46,.3); --shadow-sm: 0 1px 3px rgba(0,0,0,.2); --shadow-hover: 0 3px 12px rgba(0,0,0,.25); --shadow-card: 0 4px 16px rgba(0,0,0,.25); --shadow-card-hover: 0 8px 28px rgba(0,0,0,.35); --shadow-heavy: 0 16px 48px rgba(0,0,0,.3), 0 4px 12px rgba(0,0,0,.2); --shadow-accent: 0 4px 16px rgba(192,66,46,.4); --shadow-overlay: 0 8px 40px rgba(0,0,0,.3); --shadow-thumb: 0 2px 8px rgba(0,0,0,.25); --shadow-modal: 0 8px 32px rgba(0,0,0,.45); --shadow-toast: 0 8px 24px rgba(0,0,0,.5); --shadow-logo: drop-shadow(0 0 2px rgba(100,80,60,.5)); --shadow-logo-hover: drop-shadow(0 0 6px rgba(100,80,60,.7)); --shadow-text: 0 2px 6px rgba(0,0,0,.5); --shadow-text-sm: 0 1px 3px rgba(0,0,0,.4); --shadow-text-lg: 0 2px 10px rgba(0,0,0,.5); --stock-ok-bg: #1b3a1b; --stock-ok-text: #6fbf6f; --stock-low-bg: #3a2a10; --stock-low-text: #e6a040; --stock-out-bg: #2a2420; --stock-out-text: #8a7e70; --stock-coming-bg: #102a3a; --stock-coming-text: #60a0d0; --stars: #c4956a; --wishlist-active: #e06a5a; --toast-bg: rgba(20,14,10,.96); --bg-glass: rgba(36,32,26,.85); --bg-glass-border: rgba(255,255,255,.08); } * { box-sizing: border-box; margin: 0; padding: 0; } *:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; } ::selection { background: var(--accent-light); color: var(--text-primary); } html { scroll-behavior: smooth; } body { font-family: var(--font-body); font-size: 15px; line-height: 1.7; color: var(--text-secondary); background: var(--bg-body); transition: background var(--transition-base), color var(--transition-base); overflow-x: hidden; } /* ===== ATMOSPHERIC OVERLAYS ===== */ /* * Grain/noise texture — inline SVG data-URI via feTurbulence filter. * Provides subtle analog "film grain" grit over the entire page. * Using overlay mix-blend-mode so it adapts to content underneath. * Opacity halves in dark mode for a cleaner look. * Performance: GPU-composited (fixed position + small repeating 400px tile). */ body::after { content: ""; position: fixed; inset: 0; z-index: 99999; pointer-events: none; mix-blend-mode: overlay; opacity: .35; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='400' height='400' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E"); background-size: 400px 400px; transition: opacity .5s; } [data-theme="dark"] body::after { opacity: .2; } /* ===== WOW ENTRANCE ANIMATIONS ===== */ /* * Reusable entrance animations — all use `both` fill-mode so elements * stay invisible until their animation fires (avoids FOUC). * Delays create a staggered cascade: title → hero → cards → badges. * * Usage pattern: * .my-element { animation: fadeSlideUp .5s ease both; animation-delay: .2s; } * * Available: fadeSlide{Up,Down,Left,Right}, scaleIn, heroGlow */ @keyframes fadeSlideUp { 0% { opacity: 0; transform: translateY(24px); } 100% { opacity: 1; transform: translateY(0); } } @keyframes fadeSlideDown { 0% { opacity: 0; transform: translateY(-16px); } 100% { opacity: 1; transform: translateY(0); } } @keyframes fadeSlideLeft { 0% { opacity: 0; transform: translateX(-30px); } 100% { opacity: 1; transform: translateX(0); } } @keyframes fadeSlideRight { 0% { opacity: 0; transform: translateX(30px); } 100% { opacity: 1; transform: translateX(0); } } @keyframes scaleIn { 0% { opacity: 0; transform: scale(.92); } 100% { opacity: 1; transform: scale(1); } } @keyframes heroGlow { 0%, 100% { opacity: .6; } 50% { opacity: 1; } } /* Landing page entrance — each section staggers in */ .page-title-wrap { animation: fadeSlideDown .5s ease both; } .hero-section { animation: scaleIn .7s cubic-bezier(.2,.9,.1,1) both; animation-delay: .1s; } .type-landing { animation: fadeSlideUp .6s ease both; animation-delay: .25s; } .type-landing .type-card { animation: fadeSlideUp .5s ease both; } .type-landing .type-card:nth-child(1) { animation-delay: .3s; } .type-landing .type-card:nth-child(2) { animation-delay: .38s; } .type-landing .type-card:nth-child(3) { animation-delay: .46s; } .type-landing .type-card:nth-child(4) { animation-delay: .54s; } .type-landing .type-card:nth-child(5) { animation-delay: .62s; } .type-landing .type-card:nth-child(n+6) { animation-delay: .7s; } .testimonials-section { animation: fadeSlideUp .5s ease both; animation-delay: .6s; } .site-footer { animation: fadeSlideUp .4s ease both; animation-delay: .7s; } /* * Scroll reveal — triggered by IntersectionObserver in monument-inventory.js. * Add .reveal, .reveal-left, or .reveal-right to any element to fade+slide it * into view when it enters the viewport. The JS adds .visible class once. * * Pro tip: Add `will-change: transform, opacity` to .reveal elements that * appear above the fold for jank-free animation on low-end devices. */ .reveal { opacity: 0; transform: translateY(30px); transition: opacity .7s cubic-bezier(.2,.9,.1,1), transform .7s cubic-bezier(.2,.9,.1,1); } .reveal.visible { opacity: 1; transform: translateY(0); } .reveal-left { opacity: 0; transform: translateX(-30px); transition: opacity .7s ease, transform .7s ease; } .reveal-left.visible { opacity: 1; transform: translateX(0); } .reveal-right { opacity: 0; transform: translateX(30px); transition: opacity .7s ease, transform .7s ease; } .reveal-right.visible { opacity: 1; transform: translateX(0); } /* ===== MICRO-INTERACTIONS ===== */ /* * Hover/active micro-interactions give the UI a tactile, weighty feel. * Pattern: each component defines its own hover transition + optional ::after * pseudo-element for fill effects. * * Key techniques: * - Button fill sweep (scaleX transform-origin trick) * - Card image zoom via nested img transform (GPU-composited) * - Icon wiggle via quick @keyframes on hover * - Navigation slide via translateX on breadcrumb links */ .btn-jrg { position: relative; overflow: hidden; transition: background .3s, transform .2s, box-shadow .3s; } .btn-jrg::after { content: ''; position: absolute; inset: 0; background: rgba(255,255,255,.12); transform: scaleX(0); transform-origin: right; transition: transform .4s cubic-bezier(.34,1.56,.64,1); } .btn-jrg:hover::after { transform: scaleX(1); transform-origin: left; } .btn-jrg:active { transform: scale(.97); } .theme-toggle { transition: transform .5s ease, color .2s, background .2s; } .theme-toggle:active { transform: rotate(360deg); } .product-card { transition: transform .4s cubic-bezier(.2,.9,.1,1), box-shadow .4s ease, border-color .3s, background var(--transition-base), color var(--transition-fast); } .product-card:hover { transform: translateY(-6px); } .product-card .card-img img { transition: transform .5s cubic-bezier(.2,.9,.1,1); } .product-card:hover .card-img img { transform: scale(1.08); } .breadcrumb-nav a { transition: color .2s, transform .2s; display: inline-block; } .breadcrumb-nav a:hover { transform: translateX(2px); } .footer-socials a i { transition: transform .3s ease; } .footer-socials a:hover i { animation: iconWiggle .4s ease; } @keyframes iconWiggle { 0%, 100% { transform: rotate(0deg); } 25% { transform: rotate(-8deg); } 75% { transform: rotate(8deg); } } .filter-section h3 { transition: background .2s, padding-left .2s; } .filter-section h3:hover { padding-left: 4px; } .pagination-wrap button { transition: transform .2s, background .2s, box-shadow .2s; } .pagination-wrap button:hover { transform: translateY(-1px); } .pagination-wrap button:active { transform: translateY(0) scale(.95); } .logo img { transition: transform .4s ease, filter .4s ease; } .logo:hover img { transform: scale(1.03); filter: var(--shadow-logo-hover); } @media (max-width: 768px) { .hero-section { background-attachment: scroll; } } .container { max-width: 1200px; padding: 0 24px; margin: 0 auto; } /* * Cross-theme transitions — every themed element gets a smooth light↔dark switch. * This single long selector avoids repeating `transition` on every element. * The `color` transition is intentionally faster (fast) than background/border * so text re-colors before the container, reducing jarring mid-transition contrast. * Gotcha: If you add a new themed component, include it here OR give it its own transition. */ .product-card, .type-card, .swatch, .filter-search input, .top-bar select, .view-toggle button, .pagination-wrap button, .skeleton-card, .qv-panel, .collection-panel, .compare-table-wrap, .glossary-panel, .compare-bar, .fbt-item, .qty-ctrl button, .qty-ctrl .qty-num, .site-header, .nav-bar, .inv-sidebar, .mobile-filter-bar, .mobile-filter-toggle, .pagination-wrap button, .skeleton-card .sk-img, .skeleton-card .sk-line { transition: background var(--transition-base), border-color var(--transition-base), color var(--transition-fast), box-shadow var(--transition-base); } /* Theme toggle */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; border: none; background: transparent; color: var(--text-muted); cursor: pointer; font-size: 18px; transition: color .2s, background .2s; } .theme-toggle:hover { color: var(--accent); background: var(--accent-light); } /* Hero */ .hero-section { background: linear-gradient(rgba(30,22,14,.55),rgba(20,14,8,.55)), url('background.jpg') center/cover no-repeat; background-attachment: fixed; border-radius: var(--radius-xl); padding: 56px 44px; margin-bottom: 36px; color: var(--text-inverse); position: relative; overflow: hidden; } .hero-section::before { content: ''; position: absolute; top: -40%; left: -10%; width: 120%; height: 180%; background: radial-gradient(ellipse at 30% 50%, rgba(220,190,160,.1) 0%, transparent 60%); pointer-events: none; z-index: 1; } .hero-section::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(60deg,transparent,transparent 3px,rgba(255,255,255,.03) 3px,rgba(255,255,255,.03) 5px); pointer-events: none; z-index: 1; animation: heroGlow 4s ease-in-out infinite; } .hero-section h1, .hero-section h2 { font-family: var(--font-heading); font-size: 34px; font-weight: 600; margin-bottom: 10px; color: var(--text-inverse); position: relative; z-index: 2; letter-spacing: .3px; } .hero-section p { font-size: 16px; opacity: .85; max-width: 580px; position: relative; z-index: 2; line-height: 1.8; color: var(--text-inverse); } /* Card stagger reveal — only on initial load, not pagination/sort */ .product-grid.initial .product-card { animation: cardFadeIn .5s ease both; } .product-grid.initial .product-card:nth-child(1) { animation-delay: .02s; } .product-grid.initial .product-card:nth-child(2) { animation-delay: .04s; } .product-grid.initial .product-card:nth-child(3) { animation-delay: .06s; } .product-grid.initial .product-card:nth-child(4) { animation-delay: .08s; } .product-grid.initial .product-card:nth-child(5) { animation-delay: .1s; } .product-grid.initial .product-card:nth-child(6) { animation-delay: .12s; } .product-grid.initial .product-card:nth-child(7) { animation-delay: .14s; } .product-grid.initial .product-card:nth-child(8) { animation-delay: .16s; } .product-grid.initial .product-card:nth-child(n+9) { animation-delay: .18s; } @keyframes cardFadeIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } /* Header */ .site-header { background: var(--bg-header); border-bottom: 1px solid var(--border-light); transition: background var(--transition-base), border-color var(--transition-base); } .header-top { display: flex; justify-content: flex-end; padding: 8px 0; gap: 6px; } .header-top a { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; color: var(--text-secondary); font-size: 18px; line-height: 1; border-radius: 50%; transition: color .2s, background .2s; text-decoration: none; } .header-top a:hover { color: var(--accent); background: var(--accent-light); } @media (max-width: 767px) { .header-top a { width: 36px; height: 36px; font-size: 18px; } } .header-main { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; flex-wrap: wrap; } .logo { max-width: 200px; } .logo img { display: block; max-height: 42px; width: auto; filter: var(--shadow-logo); } @media (max-width: 767px) { .logo { max-width: 140px; } .logo img { max-height: 32px; } } .logo.logo-text { display: inline-flex; align-items: baseline; gap: 3px; font-family: var(--font-heading); letter-spacing: -0.6px; text-transform: uppercase; font-weight: 800; font-size: 24px; line-height: 1; } .logo-text .logo-jr { color: var(--text-heading); font-size: 24px; } .logo-text .logo-granites { color: var(--accent); font-size: 24px; } @media (max-width: 767px) { .logo-text { max-width: 160px; font-size: 20px; } .logo-text .logo-jr, .logo-text .logo-granites { font-size: 20px; } } .nav-bar { border-bottom: 1px solid var(--border-light); transition: border-color var(--transition-base); position: relative; z-index: 100; } .navbar { margin-bottom: 0; min-height: 0; } .navbar-nav { float: right; } .navbar-nav > li { border-left: 1px solid var(--border-medium); } .navbar-nav > li > a { padding: 0 20px; line-height: 38px; color: var(--text-muted); font-size: 14px; font-weight: 400; } .navbar-nav > li > a:hover, .navbar-nav > li > a:focus { background: none; color: var(--accent); } .navbar-nav > li.active > a { color: var(--accent); font-weight: 500; position: relative; padding-bottom: 4px; } .navbar-nav > li.active > a::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 2px; background: var(--accent); transform: scaleX(1); transition: transform .3s cubic-bezier(.34,1.56,.64,1); } .navbar-nav > li:not(.active) > a:hover::after, .navbar-nav > li:not(.active) > a:focus::after { transform: scaleX(0.8); } .navbar-nav > li > a::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 2px; background: transparent; transform: scaleX(0); transition: transform .3s cubic-bezier(.34,1.56,.64,1); } .navbar-nav > li:first-child { border-left: none; } .navbar-toggle { border: none; margin: 0; padding: 8px; border-radius: 0; float: left; } .navbar-toggle .icon-bar { background: var(--text-muted); } .navbar-nav > li.dropdown:hover > .dropdown-menu { display: block; } @media (hover: none) { .navbar-nav > li.dropdown:hover > .dropdown-menu { display: none; } } .navbar-nav > li > a:focus-visible, .navbar-nav > li.dropdown > a:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; background: var(--accent-light); color: var(--accent); } .dropdown-menu { background: var(--bg-card); border: 1px solid var(--border-light); border-radius: 4px; box-shadow: var(--shadow-card); } .dropdown-menu > li > a { padding: 6px 20px; color: var(--text-secondary); font-size: 14px; font-family: var(--font-body); } .dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus { background: var(--accent-light); color: var(--accent); } .dropdown-menu > .active > a, .dropdown-menu > .active > a:hover, .dropdown-menu > .active > a:focus { background: var(--accent); color: #fff; } .dropdown-menu .divider { background: var(--border-light); } /* Breadcrumbs */ .breadcrumb-nav { padding: 16px 0 4px; font-size: 13px; color: var(--text-muted); } .breadcrumb-nav a { color: var(--text-muted); text-decoration: none; } .breadcrumb-nav a:hover { color: var(--accent); text-decoration: underline; } .breadcrumb-nav .sep { margin: 0 8px; color: var(--border-medium); } .breadcrumb-nav .current { color: var(--text-secondary); font-weight: 500; } .page-title-wrap { padding: 14px 0 10px; } .page-title-wrap h1 { font-family: var(--font-heading); font-weight: 500; font-size: 34px; margin: 0; color: var(--text-primary); } .page-title-border { height: 2px; background: linear-gradient(90deg,var(--accent),var(--accent-light),transparent); width: 80px; margin-top: 6px; border-radius: 2px; } .page-title-border { border-bottom: 1px solid var(--border-medium); height: 6px; } .btn-jrg { display: inline-flex; align-items: center; gap: 8px; border-radius: 4px; border: 1px solid var(--text-muted); padding: 8px 18px; color: var(--text-muted); background: transparent; font-size: 13px; font-weight: 500; cursor: pointer; transition: color .2s, background .2s, border-color .2s; } .btn-jrg:hover, .btn-jrg:focus { color: #fff; background: var(--accent); border-color: var(--accent); text-decoration: none; } .btn-jrg-primary { background: var(--accent); color: #fff; border-color: var(--accent); } .btn-jrg-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: #fff; } .btn-jrg:disabled, .btn-jrg-primary:disabled { opacity: .4; cursor: not-allowed; pointer-events: none; } .btn-jrg-sm { padding: 6px 14px; font-size: 12px; } .btn-jrg-xs { padding: 4px 10px; font-size: 11px; } .collection-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 24px; padding: 0 7px; border-radius: 12px; background: var(--accent); color: #fff; font-size: 12px; font-weight: 600; margin-left: 8px; } /* Top Bar */ .top-bar { display: flex; justify-content: flex-end; align-items: center; margin: 16px 0 8px; gap: 12px; flex-wrap: wrap; position: sticky; top: 0; z-index: 50; background: var(--bg-body); padding: 8px 0; } .browse-type-link { margin-right: auto; font-size: 13px; } .browse-type-link a { color: var(--text-muted); text-decoration: none; display: inline-flex; align-items: center; gap: 5px; } .browse-type-link a:hover { color: var(--accent); } .browse-type-link .fa { font-size: 12px; } .inv-stats { font-size: 14px; color: var(--text-muted); flex: 1; } .top-bar select { padding: 7px 12px; border: 1px solid var(--border-light); border-radius: 4px; font-size: 13px; font-family: var(--font-body); background: var(--bg-input); color: var(--text-secondary); } .view-toggle { display: inline-flex; gap: 4px; } .view-toggle button { padding: 5px 8px; border: 1px solid var(--border-light); border-radius: 3px; background: var(--bg-input); cursor: pointer; color: var(--text-muted); font-size: 14px; line-height: 1; } .view-toggle button.active { background: var(--accent); color: #fff; border-color: var(--accent); } /* Active filter tags */ .active-tags { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; min-height: 0; } .active-tags:empty { display: none; } .tag { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 14px; font-size: 13px; background: var(--accent-light); color: var(--accent); border: 1px solid var(--accent-glow); } .tag .tag-x { cursor: pointer; font-size: 15px; line-height: 1; margin-left: 2px; color: var(--accent); opacity: .6; transition: opacity .2s; } .tag .tag-x:hover { opacity: 1; } .tag-clear { background: none; border: none; font-size: 13px; color: var(--text-muted); cursor: pointer; text-decoration: underline; padding: 4px 4px; } .tag-clear:hover { color: var(--accent); } /* Layout */ .inv-layout { display: flex; gap: 32px; align-items: flex-start; } .inv-sidebar { width: 270px; flex-shrink: 0; position: sticky; top: 0; background: var(--bg-sidebar, #faf6f0); max-height: 100vh; overflow-y: auto; -webkit-overflow-scrolling: touch; will-change: transform; padding-right: 8px; transition: background var(--transition-base); } .inv-content { flex: 1; min-width: 0; } /* Sidebar */ .filter-section { margin-bottom: 24px; } .sidebar-clear-top { margin-bottom: 8px; padding: 0 4px; } .sidebar-clear-all { font-size: 13px; color: var(--accent); cursor: pointer; display: flex; align-items: center; gap: 4px; transition: opacity .15s; } .sidebar-clear-all:hover { opacity: .8; } .filter-header-clear { font-size: 13px; color: var(--accent); cursor: pointer; background: var(--accent-light); border: 1px solid var(--accent); font-family: var(--font-body); font-weight: 500; padding: 6px 14px; border-radius: 20px; transition: all .2s; display: inline-flex; align-items: center; gap: 6px; } .filter-header-clear:hover { color: white; background: var(--accent); border-color: var(--accent); } .filter-section h3 { font-size: 15px; font-family: var(--font-heading); font-weight: 600; color: var(--text-primary); letter-spacing: .2px; margin-bottom: 10px; padding: 8px 10px; background: var(--bg-input); border-radius: 6px; display: flex; align-items: center; justify-content: space-between; cursor: pointer; transition: background .2s; user-select: none; } .filter-section h3:hover { background: var(--accent-light); } .filter-section h3 .toggle-icon { color: var(--text-muted); font-size: 10px; transition: transform .2s, color .2s; pointer-events: none; } .filter-clear { margin-left: auto; font-family: var(--font-body); font-size: 11px; font-weight: 400; color: var(--text-muted); cursor: pointer; padding: 2px 6px; border-radius: 3px; transition: color .15s, background .15s; user-select: none; } .filter-clear:hover { color: var(--accent); background: var(--accent-light); } .swatch-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .swatch { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border: 1px solid var(--border-light); border-radius: 5px; cursor: pointer; transition: border-color .15s, background .15s; font-size: 13px; color: var(--text-secondary); background: var(--bg-card); } .swatch:hover { border-color: var(--border-strong); background: var(--bg-input); } .swatch.active { border-color: var(--accent); background: var(--accent-light); color: var(--accent); font-weight: 600; } .swatch-dot { width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0; border: 1px solid var(--border-medium); } .swatch-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .filter-checkboxes { display: flex; flex-direction: column; gap: 8px; padding-right: 4px; } .filter-checkbox { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--text-secondary); cursor: pointer; } .filter-checkbox input { margin: 0; accent-color: var(--accent); } .filter-checkbox input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .filter-checkbox:hover { color: var(--text-primary); } .filter-search input { width: 100%; padding: 8px 12px; border: 1px solid var(--border-medium); border-radius: 4px; font-size: 13px; font-family: var(--font-body); background: var(--bg-input); color: var(--text-secondary); } .filter-search input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 4px var(--accent-glow); } .filter-reset { margin-top: 8px; } .filter-reset a { font-size: 13px; color: var(--accent); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 20px; background: var(--accent-light); border: 1px solid var(--accent); transition: all .2s; text-decoration: none; font-weight: 500; } .filter-reset a:hover { color: white; background: var(--accent); border-color: var(--accent); text-decoration: none; } .filter-reset a .fa { font-size: 12px; } .show-more-btn { background: none; border: none; color: var(--accent); cursor: pointer; font-size: 13px; padding: 6px 0; font-family: var(--font-body); } .filter-glossary-link { font-size: 12px; color: var(--accent); } .compare-desc { font-size: 12px; color: var(--text-muted); margin-bottom: 6px; } .show-more-btn:hover { text-decoration: underline; } .filter-search-mb { margin-bottom: 8px; } .filter-search-mb-sm { margin-bottom: 6px; } .filter-mt-sm { margin-top: 8px; } .btn-block { width: 100%; justify-content: center; } .mob-label { font-size: 13px; display: flex; align-items: center; gap: 4px; } .pd-stars-mb { margin-bottom: 14px; } .icon-accent { color: var(--accent); } .icon-muted { color: var(--text-muted); } .btn-xs-font { font-size: 11px; } .hidden { display: none; } .card-stock-row { margin-bottom: 8px; } .card-star-row { margin-bottom: 6px; } .cart-item-info-layout { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .recent-item-card { position: relative; border: 1px solid var(--border-light); border-radius: 4px; overflow: hidden; cursor: pointer; transition: box-shadow .2s; } .recent-item-card:hover { box-shadow: var(--shadow-card); } .recent-item-img { height: 60px; display: flex; align-items: center; justify-content: center; font-size: 10px; color: rgba(255,255,255,.7); position: relative; overflow: hidden; } .recent-item-name { padding: 6px 8px; font-size: 12px; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .compare-item-sub { font-weight: 400; font-size: 12px; color: var(--text-muted); } .recent-item-close { position: absolute; top: 2px; right: 2px; background: var(--bg-overlay); border: none; color: var(--text-inverse); border-radius: 50%; width: 18px; height: 18px; font-size: 12px; line-height: 18px; cursor: pointer; z-index: 2; padding: 0; } .stars-count { font-size: 11px; color: var(--text-muted); } .stars-wrap { white-space: nowrap; color: var(--stars); letter-spacing: 1px; } .preorder-btn { padding: 6px 10px; font-size: 11px; border-radius: 4px; border: 1px solid var(--border-medium); background: transparent; color: var(--text-muted); cursor: not-allowed; font-family: var(--font-body); } .inv-error { grid-column: 1/-1; text-align: center; padding: 80px 24px; color: var(--text-muted); } .inv-error i { font-size: 36px; margin-bottom: 12px; display: block; } .inv-error h3 { font-size: 18px; font-weight: 400; color: var(--text-secondary); margin-bottom: 8px; } .inv-error p { font-size: 14px; } .reload-link { background: none; border: none; color: var(--accent); cursor: pointer; font-size: 14px; font-family: var(--font-body); text-decoration: underline; padding: 0; } .reload-link:hover { color: var(--accent-hover); } .filter-collapsible { max-height: 2000px; overflow: hidden; transition: max-height .35s ease; } .filter-collapsible.collapsed { max-height: 0; } .mobile-filter-bar { display: none; background: var(--bg-input); border: 1px solid var(--border-light); border-radius: 6px; padding: 14px; margin-bottom: 20px; flex-wrap: wrap; gap: 10px; } .mobile-filter-bar select, .mobile-filter-bar input { padding: 8px 12px; border: 1px solid var(--border-medium); border-radius: 4px; font-size: 14px; font-family: var(--font-body); flex: 1; min-width: 100px; } .mobile-filter-toggle { display: none; width: 100%; text-align: center; padding: 10px; background: var(--bg-input); border: 1px solid var(--border-light); border-radius: 5px; margin-bottom: 16px; cursor: pointer; font-size: 14px; color: var(--text-secondary); font-family: var(--font-body); } .mobile-filter-toggle:hover { background: var(--border-light); } /* Product Grid */ .product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 20px; scroll-margin-top: 24px; } /* * ===== LIST VIEW — Premium Catalog Layout ===== * * Reimagined as a spacious, scannable product catalog. * Each row is a proper card (white bg + border on off-white body) * with generous spacing — matching the luxury aesthetic. * Key design decisions: * - Rows are 120px min-height with generous whitespace * - Image is 120×100 — readable product context at a glance * - Color name uses Cormorant Garamond (heading font) for visual hierarchy * - Finish + Size + Stars all visible (not hidden like before) * - Add button right-aligned as the action anchor * - Cards separated by 8px gap (not touching borders) * - Hover shows accent border + subtle shadow * - Wishlist heart visible (top-right), compare bottom-right */ .product-grid.list-view { grid-template-columns: 1fr; gap: 8px; } .product-grid.list-view .product-card { flex-direction: row; align-items: stretch; gap: 0; padding: 0; border-radius: 8px; max-width: none; min-height: 110px; background: var(--bg-card); border: 1px solid var(--border-medium); box-shadow: var(--shadow-sm); transition: box-shadow .3s ease, border-color .3s ease, background .3s ease; position: relative; overflow: hidden; } .product-grid.list-view .product-card:hover { border-color: var(--accent); box-shadow: var(--shadow-hover); background: var(--bg-input); } .product-grid.list-view .product-card:hover .card-product-img { transform: none; } /* Dark gradient overlay is too heavy on small list images — remove it */ .product-grid.list-view .product-card .card-img::after { display: none; } /* List-view image: wider to balance the card layout */ .product-grid.list-view .product-card .card-img { width: 170px; height: 100px; flex-shrink: 0; border-radius: 6px; margin: 10px 14px 10px 14px; align-self: center; } .product-grid.list-view .product-card .card-body { flex-direction: row; flex-wrap: wrap; align-content: center; padding: 6px 14px 6px 0; gap: 2px 14px; flex: 1; min-width: 0; } /* Row 1: Color + Type side by side */ .product-grid.list-view .product-card .card-color { font-family: var(--font-heading); font-size: 17px; font-weight: 600; color: var(--text-heading); margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 60%; } .product-grid.list-view .product-card .card-type { font-size: 12px; color: var(--text-muted); margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 35%; text-transform: uppercase; letter-spacing: .4px; } /* Row 2: Details full width */ .product-grid.list-view .product-card .card-details { flex: 1 1 100%; display: flex; flex-direction: row; align-items: center; gap: 18px; } .product-grid.list-view .product-card .finish-info, .product-grid.list-view .product-card .size-info { font-size: 12px; color: var(--text-secondary); white-space: nowrap; } .product-grid.list-view .product-card .finish-info .fa, .product-grid.list-view .product-card .finish-help { display: inline-block; font-size: 11px; color: var(--text-muted); margin-left: 2px; } /* Row 3: Stock + Stars */ .product-grid.list-view .product-card .card-stock-row { margin: 0; } .product-grid.list-view .product-card .card-star-row { display: inline-flex !important; align-items: center; gap: 3px; margin: 0; } .product-grid.list-view .product-card .card-star-row .stars-count { font-size: 10px; color: var(--text-muted); } /* Row 4: Footer full width — Add button right-aligned */ .product-grid.list-view .product-card .card-footer { flex: 1 1 100%; margin: 0; padding: 0; border: none; display: flex; justify-content: flex-end; align-items: center; } .product-grid.list-view .product-card .btn-add { flex-shrink: 0; } .product-grid.list-view .product-card .btn-add button { padding: 6px 14px; font-size: 12px; } .product-grid.list-view .product-card .wishlist-btn { display: inline-flex; position: absolute; top: 8px; left: 8px; z-index: 2; width: 28px; height: 28px; font-size: 14px; } .product-grid.list-view .product-card .compare-check { position: absolute; bottom: 8px; left: 8px; z-index: 2; font-size: 12px; } .product-grid.list-view .product-card .compare-check label { display: flex; align-items: center; gap: 4px; color: var(--text-muted); cursor: pointer; } .product-grid.list-view .product-card .compare-check input { accent-color: var(--accent); } .product-card { background: var(--bg-card); border: 1px solid var(--border-light); border-radius: 12px; overflow: hidden; transition: box-shadow .4s cubic-bezier(.25,.46,.45,.94), transform .4s cubic-bezier(.25,.46,.45,.94), border-color .3s ease; display: flex; flex-direction: column; cursor: pointer; position: relative; min-width: 0; outline: none; } .product-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } .product-grid .product-card { max-width: none; } .product-card:hover { box-shadow: var(--shadow-heavy); transform: translateY(-6px); border-color: var(--accent); } .product-card .card-img { height: 180px; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 500; text-align: center; line-height: 1.5; position: relative; overflow: hidden; } .product-card .card-img::after { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, transparent 60%, rgba(0,0,0,.4)); pointer-events: none; } .card-product-img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; border-radius: 0; z-index: 0; transition: transform .5s cubic-bezier(.25,.46,.45,.94); } .product-card:hover .card-product-img { transform: scale(1.08); } .pd-main-img .card-product-img { border-radius: 10px; } .pd-thumb .card-product-img { border-radius: 3px; } .recent-item-img .card-product-img { border-radius: 4px; } .fbt-img .card-product-img { border-radius: 4px; } .product-card .card-body { padding: 16px 16px 14px; flex: 1; display: flex; flex-direction: column; } .product-card .card-color { font-size: 17px; font-weight: 600; color: var(--text-heading); margin-bottom: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .product-card .card-type { font-size: 12px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .6px; margin-bottom: 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .product-card .card-details { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-bottom: 8px; font-size: 14px; color: var(--text-secondary); overflow: hidden; } .product-card .card-details span { display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .size-select-wrap { display: inline-flex; align-items: center; gap: 3px; } .size-select { font-family: var(--font-body); font-size: 14px; padding: 3px 8px; border: 1.5px solid var(--border-medium); border-radius: 6px; background: var(--bg-input); color: var(--text-primary); min-width: 120px; cursor: pointer; outline: none; font-weight: 500; } .size-select:focus { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-light); } .pd-size-select { font-family: var(--font-body); font-size: 17px; padding: 10px 14px; border: 1.5px solid var(--border-medium); border-radius: 8px; background: var(--bg-input); color: var(--text-primary); min-width: 200px; cursor: pointer; outline: none; transition: border-color .2s; font-weight: 500; } .pd-size-select:hover { border-color: var(--border-strong); } .pd-size-select:focus { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-light); } .product-card .card-details .fa { color: var(--text-muted); font-size: 13px; width: 14px; text-align: center; } .product-card .card-details .label-text { color: var(--text-muted); font-size: 13px; } .finish-info { display: inline-flex; align-items: center; gap: 4px; } .finish-info .finish-help { display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px; border-radius: 50%; background: var(--border-medium); color: var(--text-secondary); font-size: 9px; font-weight: 700; cursor: pointer; transition: background .2s; } .finish-info .finish-help:hover { background: var(--accent); color: #fff; } .product-card .card-footer { margin-top: auto; padding-top: 10px; border-top: 1px solid var(--border-light); display: flex; justify-content: flex-end; align-items: center; gap: 6px; } .wishlist-btn { position: absolute; top: 8px; left: 8px; z-index: 2; background: var(--bg-glass); border: 1px solid var(--border-light); border-radius: 50%; cursor: pointer; font-size: 16px; padding: 6px; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; color: var(--text-muted); transition: color .2s, transform .2s, background .2s, border-color .2s; line-height: 1; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); box-shadow: var(--shadow-sm); } .wishlist-btn:hover { transform: scale(1.15); background: var(--bg-card); border-color: var(--accent); color: var(--accent); } .wishlist-btn.active { color: var(--wishlist-active); border-color: var(--wishlist-active); } .product-card .compare-check { position: absolute; top: 8px; right: 8px; z-index: 2; opacity: 0; transition: opacity .25s, transform .25s; } .product-card:hover .compare-check { opacity: 1; } .product-card .compare-check:hover { transform: scale(1.05); } .product-card .compare-check label { display: flex; align-items: center; gap: 4px; font-size: 11px; color: var(--text-secondary); background: var(--bg-glass); padding: 3px 7px; border-radius: 4px; cursor: pointer; border: 1px solid var(--bg-glass-border); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } .product-card .compare-check input { margin: 0; } .stock-badge { display: inline-block; padding: 4px 10px; border-radius: 4px; font-size: 12px; font-weight: 500; line-height: 1; } .stock-badge.ok { background: var(--stock-ok-bg); color: var(--stock-ok-text); animation: stockPulse 3s ease-in-out infinite; } .stock-badge.low { background: var(--stock-low-bg); color: var(--stock-low-text); } .stock-badge.out { background: var(--stock-out-bg); color: var(--stock-out-text); } .stock-badge.coming { background: var(--stock-coming-bg); color: var(--stock-coming-text); } @keyframes stockPulse { 0%, 100% { opacity: 1; } 50% { opacity: .7; } } /* Card cart button with quantity */ .btn-add { display: flex; align-items: center; gap: 4px; } .btn-add button { padding: 8px 18px; font-size: 13px; border-radius: 8px; border: none; background: var(--accent); color: #fff; cursor: pointer; transition: background .25s, transform .2s, box-shadow .25s; font-family: var(--font-body); font-weight: 600; white-space: nowrap; letter-spacing: .3px; position: relative; overflow: hidden; } .btn-add button::after { content: ''; position: absolute; top: -50%; left: -60%; width: 40%; height: 200%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.15), transparent); transform: skewX(-20deg); transition: left .5s ease; } .btn-add button:hover::after { left: 120%; } .btn-add button:hover { background: var(--accent-hover); transform: scale(1.04); box-shadow: var(--shadow-accent); } .btn-add button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .btn-add button[disabled]:hover { background: transparent; transform: none; box-shadow: none; } .btn-add button[disabled]::after { display: none; } .btn-add button i { margin-right: 4px; } .btn-add button.in-cart { background: var(--accent); opacity: .85; } .qty-ctrl { display: inline-flex; align-items: center; gap: 0; background: var(--bg-input); border-radius: 8px; border: 1px solid var(--border-light); overflow: hidden; } .qty-ctrl button { padding: 6px 12px; border: none; background: transparent; color: var(--text-secondary); cursor: pointer; font-size: 16px; line-height: 1; font-family: var(--font-body); font-weight: 500; transition: background .15s, color .15s; min-width: 32px; } .qty-ctrl button:hover { background: var(--accent-light); color: var(--accent); } .qty-ctrl button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; } .qty-ctrl .qty-num { padding: 6px 8px; border: none; border-left: 1px solid var(--border-light); border-right: 1px solid var(--border-light); font-size: 14px; font-weight: 600; color: var(--text-primary); min-width: 32px; text-align: center; background: var(--bg-card); } .qty-ctrl .qty-num.qty-input { -moz-appearance: textfield; min-width: 50px; outline: none; } .qty-ctrl .qty-num.qty-input::-webkit-outer-spin-button, .qty-ctrl .qty-num.qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .qty-ctrl .qty-num.qty-input:focus { border-color: var(--accent); } /* Pagination */ .pagination-wrap { display: flex; justify-content: center; align-items: center; gap: 6px; margin-top: 32px; flex-wrap: wrap; } .pagination-wrap .page-info { font-size: 14px; color: var(--text-muted); margin: 0 16px; } .pagination-wrap button { padding: 8px 16px; border: 1px solid var(--border-light); border-radius: 5px; background: var(--bg-card); cursor: pointer; font-size: 14px; color: var(--text-secondary); font-family: var(--font-body); transition: background .2s, border-color .2s; } .pagination-wrap button:hover { background: var(--bg-input); border-color: var(--border-medium); } .pagination-wrap button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; } .pagination-wrap button.active { background: var(--accent); color: #fff; border-color: var(--accent); } .pagination-wrap button:disabled { opacity: .4; cursor: not-allowed; } /* Back to top */ .back-top { position: fixed; bottom: 80px; right: 24px; z-index: 9999; width: 40px; height: 40px; border-radius: 50%; background: var(--accent); color: #fff; border: none; cursor: pointer; font-size: 18px; box-shadow: var(--shadow-card); opacity: 0; transform: translateY(20px); transition: opacity .3s, transform .3s; pointer-events: none; } .back-top.visible { opacity: 1; transform: translateY(0); pointer-events: auto; } .back-top:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } .back-top:hover { background: var(--accent-hover); } /* Skeleton */ .skeleton-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 20px; margin-bottom: 24px; } .skeleton-card { background: var(--bg-card); border: 1px solid var(--border-light); border-radius: 10px; overflow: hidden; } .skeleton-card .sk-img { height: 140px; background: linear-gradient(90deg, var(--border-light) 25%, var(--bg-input) 50%, var(--border-light) 75%); background-size: 200% 100%; background-position: 200% 0; animation: shimmer 1.5s infinite; } .skeleton-card .sk-body { padding: 14px; } .skeleton-card .sk-line { height: 14px; border-radius: 4px; background: linear-gradient(90deg, var(--border-light) 25%, var(--bg-input) 50%, var(--border-light) 75%); background-size: 200% 100%; background-position: 200% 0; animation: shimmer 1.5s infinite; margin-bottom: 8px; } .skeleton-card .sk-line:first-child { width: 60%; } .skeleton-card .sk-line:nth-child(2) { width: 40%; } .skeleton-card .sk-line:nth-child(3) { width: 80%; } .skeleton-card .sk-line:last-child { width: 45%; margin-bottom: 0; } @keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } } .skeleton-card .sk-img, .skeleton-card .sk-line { will-change: background-position; } /* Quick View */ .qv-overlay { display: none; position: fixed; inset: 0; background: var(--bg-overlay); z-index: 10000; align-items: center; justify-content: center; padding: 20px; } .qv-overlay.open { display: flex; animation: overlayFade .35s ease both; } .qv-panel { background: var(--bg-card); border-radius: 10px; max-width: 720px; width: 100%; max-height: 85vh; overflow-y: auto; padding: 36px; position: relative; } .qv-overlay.open .qv-panel { animation: qvFade .35s cubic-bezier(.2,.9,.1,1) both; } @keyframes overlayFade { from { opacity: 0; } to { opacity: 1; } } @keyframes qvFade { from { opacity: 0; transform: scale(.96) translateY(10px); } to { opacity: 1; transform: scale(1) translateY(0); } } /* Image Lightbox */ .img-lightbox { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.9); z-index: 10003; align-items: center; justify-content: center; padding: 40px; } .img-lightbox.open { display: flex; animation: overlayFade .35s ease both; } .img-lightbox-img { max-width: 92vw; max-height: 88vh; width: auto; height: auto; object-fit: contain; border-radius: 8px; box-shadow: var(--shadow-overlay); background: var(--bg-card); } .img-lightbox-close { position: absolute; top: 18px; right: 22px; width: 48px; height: 48px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.25); border-radius: 50%; color: #fff; font-size: 26px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .25s ease, transform .25s ease; } .img-lightbox-close:hover { background: rgba(255,255,255,.25); transform: rotate(90deg); } .img-lightbox-close:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .qv-close { position: absolute; top: 16px; right: 16px; background: none; border: none; font-size: 22px; color: var(--text-muted); cursor: pointer; } .qv-close:hover { color: var(--text-primary); } .qv-close:focus-visible { outline: 2px solid var(--accent); } .qv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; } .qv-img { height: 240px; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 14px; color: rgba(255,255,255,.7); text-shadow: var(--shadow-text-sm); position: relative; overflow: hidden; } .qv-info h2 { font-family: var(--font-heading); font-size: 22px; font-weight: 600; color: var(--text-primary); margin-bottom: 2px; } .qv-info .qv-type { font-size: 13px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .4px; margin-bottom: 12px; } .qv-specs { list-style: none; padding: 0; margin: 0 0 16px; } .qv-specs li { padding: 6px 0; border-bottom: 1px solid var(--border-light); font-size: 14px; color: var(--text-secondary); display: flex; justify-content: space-between; } .qv-specs li span:first-child { color: var(--text-muted); } .qv-specs li span:last-child { font-weight: 500; } .qv-qty-wrap { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; } .qv-qty-wrap label { font-size: 14px; color: var(--text-secondary); } .qv-qty-wrap .qty-ctrl button { padding: 6px 12px; font-size: 14px; } .qv-qty-wrap .qty-ctrl .qty-num { padding: 6px 14px; font-size: 14px; min-width: 32px; } /* Compare */ .compare-overlay { display: none; position: fixed; inset: 0; background: var(--bg-overlay); z-index: 10001; align-items: center; justify-content: center; padding: 20px; } .compare-overlay.open { display: flex; animation: overlayFade .35s ease both; } .compare-table-wrap { background: var(--bg-card); border-radius: 10px; max-width: 1000px; width: 100%; max-height: 80vh; overflow: auto; padding: 32px; } .compare-table-wrap h2 { font-weight: 300; font-size: 24px; margin-bottom: 20px; font-family: var(--font-heading); } .compare-table { width: 100%; border-collapse: collapse; } .compare-table th, .compare-table td { padding: 14px 18px; border: 1px solid var(--border-light); text-align: center; font-size: 14px; } .compare-table th { background: var(--bg-input); font-weight: 600; color: var(--text-secondary); text-align: right; width: 130px; } .compare-table .highlight { color: var(--accent); font-weight: 600; } .compare-close { float: right; background: none; border: none; font-size: 24px; color: var(--text-muted); cursor: pointer; padding: 4px; } .compare-close:focus-visible { outline: 2px solid var(--accent); } /* Glossary */ .glossary-modal { display: none; position: fixed; inset: 0; background: var(--bg-overlay); z-index: 10002; align-items: center; justify-content: center; padding: 20px; } .glossary-modal.open { display: flex; animation: overlayFade .35s ease both; } .glossary-panel { background: var(--bg-card); border-radius: 10px; max-width: 540px; width: 100%; padding: 32px; max-height: 80vh; overflow-y: auto; } .glossary-panel h2 { font-weight: 300; font-size: 24px; margin-bottom: 20px; font-family: var(--font-heading); } .glossary-panel table { width: 100%; border-collapse: collapse; } .glossary-panel th, .glossary-panel td { padding: 10px 14px; border-bottom: 1px solid var(--border-light); text-align: left; font-size: 14px; } .glossary-panel th { font-weight: 600; color: var(--text-secondary); text-transform: uppercase; font-size: 12px; letter-spacing: .5px; } .glossary-close { float: right; background: none; border: none; font-size: 24px; color: var(--text-muted); cursor: pointer; padding: 4px; } .glossary-close:focus-visible { outline: 2px solid var(--accent); } /* Compare bar (bottom) */ .compare-bar { display: none; position: fixed; bottom: 0; left: 0; right: 0; background: var(--bg-card); border-top: 2px solid var(--accent); padding: 14px 24px; z-index: 9998; box-shadow: var(--shadow-modal); align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; } .compare-bar.visible { display: flex; animation: compareSlideUp .4s cubic-bezier(.2,.9,.1,1) both; } @keyframes compareSlideUp { from { transform: translateY(100%); } to { transform: translateY(0); } } .compare-bar .count { font-size: 15px; color: var(--text-primary); font-weight: 500; } .compare-bar .count strong { color: var(--accent); } .compare-bar-close { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 18px; padding: 6px; } /* Collection Panel */ .collection-overlay { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: var(--bg-overlay); z-index: 9999; justify-content: flex-end; } .collection-overlay.open { display: flex; animation: overlayFade .4s ease both; } .collection-panel { width: 540px; max-width: 100%; background: var(--bg-card); display: flex; flex-direction: column; box-shadow: var(--shadow-modal); animation: slideIn .4s cubic-bezier(.2,.9,.1,1) both; } @keyframes slideIn { from { transform: translateX(100%); opacity: .5; } to { transform: translateX(0); opacity: 1; } } .collection-header { display: flex; justify-content: space-between; align-items: center; padding: 24px; border-bottom: 1px solid var(--border-light); } .collection-header h2 { font-weight: 300; font-size: 24px; margin: 0; font-family: var(--font-heading); } .collection-close { background: none; border: none; font-size: 24px; color: var(--text-muted); cursor: pointer; padding: 4px; line-height: 1; } .collection-close:focus-visible { outline: 2px solid var(--accent); } .collection-close:hover { color: var(--text-primary); } .collection-body { flex: 1; overflow-y: auto; padding: 12px 24px 20px; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; } .collection-empty { text-align: center; padding: 80px 24px; color: var(--text-muted); } .collection-empty .fa { font-size: 52px; margin-bottom: 16px; color: var(--border-light); } .collection-empty .fa-heart { color: var(--accent); } .collection-empty .sub { font-size: 13px; margin-top: 4px; color: var(--text-secondary); } .collection-empty p { font-size: 16px; } .cart-item { display: flex; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--border-light); align-items: flex-start; } .cart-item-info { flex: 1; min-width: 0; } .cart-item-info h4 { font-size: 15px; font-weight: 500; margin: 0 0 6px; color: var(--text-primary); } .cart-item-info p { font-size: 13px; color: var(--text-muted); margin: 0 0 8px; } .cart-item-qty { display: flex; align-items: center; gap: 6px; } .cart-item-qty .qty-ctrl button { padding: 4px 10px; font-size: 12px; } .cart-item-qty .qty-ctrl .qty-num { padding: 4px 10px; font-size: 12px; min-width: 24px; } .cart-item-remove { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 18px; padding: 6px; } .cart-item-remove:focus-visible { outline: 2px solid var(--accent); } .cart-item-remove:hover { color: var(--accent); } .collection-footer { padding: 24px; border-top: 1px solid var(--border-light); display: flex; flex-direction: column; gap: 12px; } .collection-footer textarea { width: 100%; min-height: 80px; padding: 12px; border: 1px solid var(--border-light); border-radius: 4px; font-size: 14px; font-family: var(--font-body); resize: vertical; color: var(--text-secondary); } .collection-footer textarea:focus { outline: none; border-color: var(--accent); } .collection-footer .cart-total-row { display: flex; justify-content: space-between; align-items: center; font-size: 17px; padding: 6px 0; } .collection-footer .cart-total-row .total-label { font-weight: 500; color: var(--text-primary); } .collection-footer .cart-total-row .cart-total-items { font-weight: 600; color: var(--text-primary); } .collection-footer .btn-row { display: flex; gap: 12px; justify-content: flex-end; } .collection-footer .note { font-size: 13px; color: var(--text-muted); } .collection-footer .compare-order-row { margin-top: 4px; padding-top: 12px; border-top: 1px solid var(--border-light); } .toast { position: fixed; top: 20px; left: 50%; transform: translateX(-50%) translateY(-80px); padding: 14px 28px; max-width: 90vw; background: var(--toast-bg); color: #fff; border-radius: 8px; font-size: 15px; font-weight: 500; z-index: 99999; box-shadow: var(--shadow-toast); cursor: default; transition: transform .4s cubic-bezier(.34,1.56,.64,1), opacity .3s ease; pointer-events: none; white-space: nowrap; } .toast.show { transform: translateX(-50%) translateY(0); opacity: 1; pointer-events: auto; } @media (max-width: 600px) { .toast { top: 12px; padding: 12px 20px; font-size: 14px; white-space: normal; } } .no-results { text-align: center; padding: 80px 24px; color: var(--text-muted); } .no-results > .fa { font-size: 36px; color: var(--border-medium); margin-bottom: 8px; } .no-results h3 { font-family: var(--font-heading); font-size: 20px; font-weight: 500; color: var(--text-secondary); margin-bottom: 12px; } .no-results .btn-jrg { margin-top: 16px; } .noscript-msg { padding: 40px; text-align: center; color: var(--text-muted); } .noscript-msg h2 { font-family: var(--font-heading); } .notice { text-align: center; font-size: 13px; color: var(--text-muted); margin-top: 32px; padding: 0 16px; } .notice a { color: var(--accent); } /* Product Detail View */ .product-detail { display: none; position: relative; } .product-detail.open { display: block; background: var(--bg-card); border: 1px solid var(--border-medium); border-radius: 12px; padding: 32px; box-shadow: var(--shadow-overlay); animation: overlayRise .5s cubic-bezier(.16,1,.3,1); } @keyframes overlayRise { 0% { opacity: 0; transform: translateY(28px) scale(.97); box-shadow: 0 2px 8px rgba(0,0,0,.04); } 100% { opacity: 1; transform: translateY(0) scale(1); box-shadow: var(--shadow-overlay); } } .product-detail.open::before { content: ''; position: absolute; top: 0; left: 12px; right: 12px; height: 3px; background: linear-gradient(90deg,var(--accent),transparent); border-radius: 3px 3px 0 0; opacity: 0; animation: overlayBar .5s .15s ease forwards; } @keyframes overlayBar { 0% { opacity: 0; transform: scaleX(.8); } 100% { opacity: 1; transform: scaleX(1); } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .inv-layout:not([style*="display: none"]) { animation: fadeIn .35s ease; } .inv-layout, .product-grid { transition: opacity .3s ease; } .pd-back { display: inline-flex; align-items: center; gap: 6px; color: var(--accent); cursor: pointer; font-size: 14px; font-weight: 500; border: none; background: none; font-family: var(--font-body); padding: 6px 0; margin-bottom: 20px; border-bottom: 1px solid transparent; transition: border-color .2s; } .pd-back:hover { border-bottom-color: var(--accent); } .pd-layout { display: grid; grid-template-columns: minmax(280px, 480px) 1fr; gap: 48px; min-width: 0; width: 100%; max-width: 100%; } .pd-gallery { min-width: 0; width: 100%; max-width: 480px; } .pd-main-img { width: 100%; max-width: 100%; height: 420px; border-radius: 10px; position: relative; overflow: hidden; contain: layout paint style; background-size: cover; background-repeat: no-repeat; background-position: center; } .pd-main-img:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .pd-thumbs { display: flex; gap: 10px; margin-top: 12px; } .pd-thumb { width: 76px; height: 64px; border-radius: 5px; cursor: pointer; border: 2px solid transparent; overflow: hidden; display: flex; align-items: center; justify-content: center; transition: border-color .3s ease, transform .3s ease, box-shadow .3s ease; } .pd-thumb:hover { border-color: var(--accent); transform: scale(1.04); box-shadow: var(--shadow-thumb); } .pd-thumb.active { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-glow); } .pd-thumb span { font-size: 10px; color: rgba(255,255,255,.7); text-shadow: var(--shadow-text-sm); text-align: center; } .fbt-grid { display: flex; gap: 16px; overflow-x: auto; padding-bottom: 12px; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: var(--border-medium) transparent; } .fbt-grid::-webkit-scrollbar { height: 4px; } .fbt-grid::-webkit-scrollbar-thumb { background: var(--border-medium); border-radius: 2px; } .fbt-item { flex-shrink: 0; width: 170px; border: 1px solid var(--border-light); border-radius: 8px; overflow: hidden; background: var(--bg-card); } .fbt-item .fbt-img { height: 90px; display: flex; align-items: center; justify-content: center; font-size: 11px; color: rgba(255,255,255,.7); position: relative; overflow: hidden; } .fbt-item .fbt-body { padding: 10px; } .fbt-item .fbt-name { font-size: 13px; font-weight: 500; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 4px; } .fbt-item .fbt-add { font-size: 12px; padding: 4px 10px; } .pd-info h1 { font-family: var(--font-heading); font-size: 30px; font-weight: 600; color: var(--text-heading); margin-bottom: 6px; } .pd-type { font-size: 15px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 20px; } .pd-specs { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 28px; } .pd-spec { padding: 14px 0; border-bottom: 1px solid var(--border-light); } .pd-spec:first-child { grid-column: 1 / -1; } .pd-spec-label { display: block; font-size: 12px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 4px; } .pd-spec-value { font-size: 17px; color: var(--text-primary); font-weight: 500; } .pd-qty { display: flex; align-items: center; gap: 14px; margin-bottom: 24px; } .pd-qty label { font-size: 16px; color: var(--text-secondary); font-weight: 500; } .pd-cart-btn { width: 100%; justify-content: center; padding: 16px; font-size: 17px; } .pd-note { font-size: 13px; color: var(--text-muted); margin-top: 20px; } .share-print-area { display: flex; gap: 8px; margin-top: 12px; } .share-print-area .btn-jrg { flex: 1; justify-content: center; } .pd-fbt { margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--border-light); } .pd-fbt h3 { font-size: 18px; font-weight: 500; color: var(--text-primary); margin-bottom: 16px; font-family: var(--font-heading); } .pd-review-count { font-size: 13px; color: var(--text-muted); } .recent-section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; } .recent-section-header h3 { font-size: 16px; font-weight: 500; color: var(--text-heading); margin: 0; font-family: var(--font-heading); } .recent-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; } .qv-cart-btn { width: 100%; justify-content: center; font-size: 14px; padding: 10px; } @media (max-width: 767px) { .header-main { flex-direction: column; align-items: flex-start; } .logo { max-width: 160px; } .collection-panel { width: 100%; } .top-bar { flex-direction: column; align-items: stretch; } .inv-stats { text-align: center; } .product-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; } .product-card .card-img { height: 110px; } .product-card .card-body { padding: 12px; } .hero-section { padding: 32px 20px; } .hero-section h1, .hero-section h2 { font-size: 24px; } .hero-section p { font-size: 14px; max-width: 100%; } .qv-grid { grid-template-columns: 1fr; } .swatch-grid { grid-template-columns: 1fr 1fr; } .back-top { right: 12px; bottom: 70px; width: 36px; height: 36px; font-size: 16px; } .filter-section { margin-bottom: 18px; } .type-cards { gap: 14px; } .type-card { padding: 24px 14px; } .type-landing .landing-subtitle { font-size: 20px; } .inv-layout { gap: 20px; } .pd-layout { grid-template-columns: 1fr; gap: 28px; } .pd-main-img { height: 280px; } .pd-info h1 { font-size: 24px; } .pd-specs { gap: 14px; } .pd-thumb { width: 64px; height: 54px; } .fbt-item { width: 150px; } .testimonial-grid { grid-template-columns: 1fr; } } @media print { .site-header, .nav-bar, .inv-sidebar, .top-bar, .mobile-filter-toggle, .back-top, .compare-bar, .collection-overlay, .qv-overlay, .compare-overlay, .glossary-modal, .toast, .notice, .pd-back, .pd-qty, .pd-cart-btn, .wishlist-btn, .compare-check, .recent-section, .share-print-area { display: none !important; } .product-detail { display: block !important; } .pd-layout { grid-template-columns: 1fr; } .pd-main-img { height: 200px; break-inside: avoid; } body { font-size: 12px; color: #000; background: #fff; } a { color: #000; text-decoration: none; } } /* Type Selection Landing */ .type-landing { display: block; padding: 28px 0 56px; } .type-landing .landing-subtitle { font-size: 26px; color: var(--text-heading); margin-bottom: 36px; text-align: center; font-family: var(--font-heading); font-weight: 600; letter-spacing: .4px; } .type-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 24px; max-width: 900px; margin: 0 auto 36px; } .type-card { background: var(--bg-card); border: 1px solid var(--border-light); border-radius: 12px; padding: 34px 20px 28px; text-align: center; cursor: pointer; transition: box-shadow .35s, transform .35s, border-color .3s, background .3s; position: relative; overflow: hidden; outline: none; } .type-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .type-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--accent); transform: scaleX(0); transition: transform .5s cubic-bezier(.34,1.56,.64,1); } .type-card::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 0%, var(--accent-light) 0%, transparent 60%); opacity: 0; transition: opacity .6s ease; pointer-events: none; } .type-card:hover::before { transform: scaleX(1); } .type-card:hover::after { opacity: 1; } .type-card:hover { box-shadow: var(--shadow-card-hover); transform: translateY(-6px); border-color: var(--accent); background: var(--bg-input); } .type-card .type-icon { font-size: 40px; color: var(--accent); margin-bottom: 18px; transition: transform .5s cubic-bezier(.34,1.56,.64,1); display: inline-flex; align-items: center; justify-content: center; position: relative; z-index: 1; } .type-card:hover .type-icon { transform: scale(1.15); } .type-card .type-name { font-family: var(--font-heading); font-size: 17px; font-weight: 600; color: var(--text-heading); position: relative; z-index: 1; } .type-card .type-count { font-size: 13px; color: var(--text-muted); margin-top: 10px; position: relative; z-index: 1; } .landing-footer { text-align: center; } /* Testimonials */ .testimonials-section { margin: 48px 0 32px; } .testimonials-section h3 { font-family: var(--font-heading); font-size: 26px; font-weight: 500; color: var(--text-primary); text-align: center; margin-bottom: 28px; } .testimonial-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; } .testimonial-card { background: var(--bg-card); border: 1px solid var(--border-light); border-radius: 12px; padding: 24px; display: flex; flex-direction: column; gap: 12px; } .testimonial-card .stars { color: var(--stars); font-size: 14px; letter-spacing: 2px; } .testimonial-card blockquote { font-size: 14px; line-height: 1.6; color: var(--text-secondary); margin: 0; font-style: italic; } .testimonial-card .attribution { font-size: 13px; color: var(--text-muted); font-weight: 500; } @keyframes sheetUp { from { transform: translateY(100%); } to { transform: translateY(0); } } @media (max-width: 991px) { .navbar-nav { float: none; } .navbar-nav > li { border-left: none; } .inv-layout { flex-direction: column; width: 100%; align-items: stretch; gap: 0; margin: 0; } .inv-content { width: 100%; max-width: 100%; min-width: 0; margin-left: 0; } .inv-sidebar { display: none; } .inv-sidebar + .inv-content { margin-left: 0; } /* Bottom sheet: 3/4 height, slides up */ .inv-sidebar { display: none; position: fixed; left: 0; right: 0; bottom: 0; top: auto; width: 100%; z-index: 10000; background: var(--bg-body); max-height: 75vh; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 0; overscroll-behavior: contain; border-radius: 16px 16px 0 0; box-shadow: 0 -8px 40px rgba(0,0,0,.15); } .inv-sidebar.open { display: flex; flex-direction: column; animation: sheetUp .35s cubic-bezier(.2,.9,.1,1) both; } /* Backdrop behind bottom sheet */ .inv-sidebar-backdrop { display: none; position: fixed; inset: 0; z-index: 9999; background: rgba(0,0,0,.4); animation: overlayFade .25s ease both; } .inv-sidebar-backdrop.show { display: block; } .inv-sidebar.open + .inv-sidebar-backdrop { display: block; } .inv-sidebar .sidebar-inner { padding: 0 0 100px; flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; } .inv-sidebar .filter-section { margin-bottom: 0; border-bottom: 6px solid var(--bg-input); padding: 12px 16px; } .inv-sidebar .filter-section:last-child { margin-bottom: 0; border-bottom: none; } .inv-sidebar .filter-section h3 { font-size: 14px; font-weight: 600; color: var(--text-primary); margin-bottom: 8px; padding: 0; background: none; border-radius: 0; cursor: default; display: flex; align-items: center; justify-content: space-between; letter-spacing: 0; text-transform: none; font-family: var(--font-body); } .inv-sidebar .filter-section h3 .toggle-icon { cursor: pointer; font-size: 12px; color: var(--text-muted); } .inv-sidebar .filter-search input { padding: 12px 14px; font-size: 15px; border-radius: 8px; background: var(--bg-input); } .inv-sidebar .swatch-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; } .inv-sidebar .swatch { padding: 10px 12px; border-radius: 8px; font-size: 13px; gap: 10px; min-height: 44px; } .inv-sidebar .swatch-dot { width: 24px; height: 24px; flex-shrink: 0; border: 1.5px solid var(--border-medium); } .inv-sidebar .filter-checkboxes { max-height: none; gap: 6px; padding-right: 0; } .inv-sidebar .filter-checkbox { font-size: 15px; min-height: 40px; padding: 4px 0; } .inv-sidebar .filter-checkbox input { width: 20px; height: 20px; } .inv-sidebar .filter-reset { padding: 4px 16px; } .inv-sidebar .filter-reset a { font-size: 14px; color: var(--accent); background: var(--accent-light); border: 1px solid var(--accent); border-radius: 20px; padding: 6px 14px; display: inline-flex; align-items: center; gap: 6px; text-decoration: none; transition: all .2s; font-weight: 500; } .inv-sidebar .filter-reset a:hover { color: white; background: var(--accent); } .inv-sidebar .compare-desc { font-size: 13px; } .inv-sidebar .btn-block { min-height: 44px; font-size: 14px; padding: 12px; } .inv-sidebar .filter-glossary-link { font-size: 13px; } .inv-sidebar .show-more-btn { padding: 10px 0; min-height: 40px; font-size: 14px; } /* Fixed close/apply bar at the bottom of filter overlay */ .inv-sidebar .sidebar-actions { position: fixed; bottom: 0; left: 0; right: 0; z-index: 10001; display: flex; gap: 10px; padding: 12px 16px; padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)); background: var(--bg-body); border-top: 1px solid var(--border-light); box-shadow: 0 -4px 16px rgba(0,0,0,.08); } .inv-sidebar .sidebar-actions .btn-jrg { flex: 1; justify-content: center; padding: 16px; font-size: 16px; font-weight: 600; border-radius: 8px; } .inv-sidebar .sidebar-actions .sidebar-close-btn { background: transparent; border: 1.5px solid var(--border-medium); color: var(--text-secondary); } .inv-sidebar .sidebar-header { display: flex; justify-content: space-between; align-items: center; padding: 10px 16px; border-bottom: 1px solid var(--border-light); position: sticky; top: 0; background: var(--bg-body); z-index: 1; } .inv-sidebar .sidebar-header h3 { font-size: 18px; margin: 0; color: var(--text-primary); font-weight: 600; letter-spacing: -.3px; } .inv-sidebar .sidebar-header .sidebar-header-actions { display: flex; align-items: center; gap: 4px; } .inv-sidebar .sidebar-inner .active-tags { display: flex !important; gap: 6px; flex-wrap: wrap; padding: 10px 16px; border-bottom: 1px solid var(--border-light); margin-bottom: 0; } .inv-sidebar .sidebar-inner .active-tags:empty { display: none !important; } .inv-sidebar .sidebar-inner .active-tags .tag { font-size: 12px; padding: 4px 10px; } .mobile-filter-bar { display: none !important; } .mobile-filter-bar-new { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; } .mobile-filter-toggle { display: inline-flex; align-items: center; gap: 6px; padding: 10px 18px; font-size: 14px; font-weight: 500; min-height: 40px; background: var(--bg-input); border: 1px solid var(--border-medium); border-radius: 20px; color: var(--text-secondary); font-family: var(--font-body); cursor: pointer; white-space: nowrap; transition: all .2s; } .mobile-filter-toggle:hover { background: var(--border-light); } .mobile-filter-toggle .fa { font-size: 13px; } .mobile-filter-toggle .active-count { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; border-radius: 10px; background: var(--accent); color: #fff; font-size: 11px; font-weight: 600; margin-left: 4px; padding: 0 5px; } /* Active filter chips row */ .mobile-filter-chips { display: flex; gap: 6px; flex-wrap: nowrap; overflow-x: auto; padding: 0; margin-bottom: 0; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .mobile-filter-chips::-webkit-scrollbar { display: none; } .mobile-filter-chips .chip { display: inline-flex; align-items: center; gap: 4px; padding: 6px 12px; font-size: 13px; white-space: nowrap; background: var(--accent-light); color: var(--accent); border-radius: 16px; border: 1px solid var(--accent-glow); cursor: pointer; } .mobile-filter-chips .chip .chip-x { font-size: 14px; opacity: .6; margin-left: 2px; } .mobile-filter-chips .chip-clear { display: inline-flex; align-items: center; padding: 6px 10px; font-size: 12px; color: var(--text-muted); cursor: pointer; background: none; border: none; white-space: nowrap; font-family: var(--font-body); } }/* Luxurious Footer */ .site-footer { background: var(--surface-bg); border-top: 1px solid var(--border-color); padding: 28px 0 12px; color: var(--text-muted); font-family: var(--font-body); margin-top: auto; font-size: 14px; } .site-footer .container { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 32px; margin-bottom: 20px; max-width: 800px; } .footer-brand .logo, .footer-brand .footer-logo { display: inline-block; margin-bottom: 16px; text-decoration: none; } .footer-brand .footer-logo img { max-height: 48px; width: auto; display: block; } .footer-brand .logo-text { font-family: var(--font-heading); font-size: 28px; color: var(--text-heading); text-decoration: none; } .footer-brand .logo-jr { font-weight: 300; letter-spacing: 2px; } .footer-brand .logo-granites { font-weight: 600; color: var(--accent); } .footer-brand p { font-size: 13px; line-height: 1.5; margin-bottom: 16px; max-width: 280px; } .footer-socials { display: flex; gap: 16px; } .footer-socials a { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: var(--bg-input); color: var(--text-muted); text-decoration: none; transition: all 0.3s ease; } .footer-socials a:hover { background: var(--accent); color: var(--text-inverse); transform: translateY(-2px); } [data-theme="dark"] .footer-socials a { background: var(--bg-input); } .footer-heading { font-family: var(--font-heading); font-size: 15px; color: var(--text-heading); margin-bottom: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: .8px; } .footer-links { list-style: none; padding: 0; margin: 0; } .footer-links li { margin-bottom: 8px; } .footer-links a { color: var(--text-muted); text-decoration: none; transition: color 0.2s ease; font-size: 14.5px; } .footer-links a:hover { color: var(--accent); } .footer-contact .footer-contact-row { font-size: 13.5px; line-height: 1.5; margin-bottom: 10px; color: var(--text-muted); } .footer-contact .footer-contact-row strong { color: var(--text-heading); display: inline-block; margin-bottom: 2px; } .footer-contact i { color: var(--accent); margin-top: 4px; } .footer-bottom { border-top: 1px solid var(--border-color); padding-top: 20px; text-align: center; font-size: 13px; color: var(--text-muted); } .footer-bottom p { margin: 0; } /* ===== MOBILE RESPONSIVE ===== */ /* Extra small devices (phones, <576px) */ @media (max-width: 575px) { .container { padding: 0 12px; } /* Header — hide social icons, keep theme toggle */ .header-top { justify-content: center; flex-wrap: wrap; padding: 4px 0; gap: 2px; } .header-top a[href*="facebook"], .header-top a[href*="twitter"], .header-top a[href*="instagram"], .header-top a[href*="google"] { display: none; } .header-top a { width: 32px; height: 32px; font-size: 15px; } .header-main { padding: 6px 0; justify-content: space-between; } .logo { max-width: 110px; } .logo img { max-height: 28px; } /* Navbar — stack vertically on mobile */ .navbar-nav { float: none; display: block; margin: 0; } .navbar-nav > li { border-left: none; float: none; } .navbar-nav > li > a { padding: 12px 16px; line-height: 1.4; font-size: 15px; display: block; } .navbar-nav > li:first-child { border-top: 1px solid var(--border-light); } .navbar-collapse { border-top: 1px solid var(--border-light); max-height: none; } .navbar-toggle { float: right; margin-right: 0; } .navbar-nav > li.dropdown:hover > .dropdown-menu, .navbar-nav > li.dropdown.open > .dropdown-menu { position: static; float: none; width: auto; margin-top: 0; box-shadow: none; border: none; padding-left: 16px; background: transparent; } .dropdown-menu > li > a { padding: 10px 16px; font-size: 14px; } /* Fix: dropdown focus/active state clipping */ .navbar-nav > li.active > a::after { height: 1px; } .navbar-nav > li > a:focus-visible { outline-offset: -1px; } /* Breadcrumbs */ .breadcrumb-nav { font-size: 11px; overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; padding: 8px 0 2px; } .breadcrumb-nav .sep { margin: 0 4px; } /* Page title */ .page-title-wrap h1 { font-size: 24px; } .page-title-border { width: 50px; height: 4px; } .page-title-wrap { padding: 8px 0 4px; } /* Hero */ .hero-section { padding: 20px 14px; margin-bottom: 16px; background-attachment: scroll; border-radius: 8px; } .hero-section h1, .hero-section h2 { font-size: 20px; } .hero-section p { font-size: 12px; } /* Type cards */ .type-landing { padding: 12px 0 24px; } .type-landing .landing-subtitle { font-size: 18px; margin-bottom: 16px; } .type-cards { grid-template-columns: repeat(2, 1fr); gap: 8px; max-width: 100%; } .type-card { padding: 14px 8px 12px; } .type-card .type-icon { font-size: 24px; margin-bottom: 8px; } .type-card .type-name { font-size: 13px; } .type-card .type-count { font-size: 11px; margin-top: 4px; } .landing-footer .btn-jrg { width: 100%; justify-content: center; padding: 12px; font-size: 15px; } /* Product grid — single column on very small screens */ .product-grid { grid-template-columns: 1fr; gap: 8px; } .product-card { border-radius: 8px; } .product-card .card-img { height: 100px; } .product-card .card-body { padding: 8px 8px 10px; } .product-card .card-color { font-size: 13px; margin-bottom: 1px; } .product-card .card-type { font-size: 9px; letter-spacing: .3px; margin-bottom: 4px; } .product-card .card-details { font-size: 10px; gap: 2px 6px; margin-bottom: 4px; } .product-card .card-details .finish-info .finish-help { display: none; } .product-card .card-details .size-info { display: none; } .product-card .size-select { font-size: 11px; padding: 1px 4px; min-width: 80px; } .product-card .card-star-row { display: none !important; } .product-card .card-footer { padding-top: 4px; border-top: none; flex-wrap: nowrap; } .product-card .stock-badge { display: none; } .product-card .compare-check { display: none; } .wishlist-btn { width: 32px; height: 32px; font-size: 14px; padding: 0; top: 4px; left: 4px; } .btn-add button { padding: 8px 10px; font-size: 11px; min-width: 44px; min-height: 36px; justify-content: center; } .btn-add button i { margin-right: 2px; } /* List view mobile */ .product-grid.list-view { gap: 6px; } .product-grid.list-view .product-card { min-height: 64px; } .product-grid.list-view .product-card .card-img { width: 60px; height: 46px; margin: 4px 6px; } .product-grid.list-view .product-card .card-body { padding: 3px 4px 3px 0; gap: 1px 4px; } .product-grid.list-view .product-card .card-color { font-size: 12px; max-width: 55%; } .product-grid.list-view .product-card .card-type { font-size: 9px; } .product-grid.list-view .product-card .card-details { gap: 4px; } .product-grid.list-view .product-card .finish-info, .product-grid.list-view .product-card .size-info { font-size: 9px; } .product-grid.list-view .product-card .card-footer { gap: 2px; flex-wrap: wrap; } .product-grid.list-view .product-card .card-star-row { display: none !important; } .product-grid.list-view .product-card .compare-check { display: none !important; } .product-grid.list-view .product-card .wishlist-btn { width: 28px; height: 28px; font-size: 12px; top: 3px; left: 3px; } /* Top bar */ .top-bar select { font-size: 12px; padding: 8px; min-height: 36px; } .inv-stats { font-size: 12px; } .active-tags { gap: 6px; } .tag { font-size: 11px; padding: 4px 10px; } .browse-type-link { display: none; } /* Sidebar mobile */ .mobile-filter-bar { padding: 8px; gap: 6px; flex-direction: column; } .mobile-filter-bar select, .mobile-filter-bar input { font-size: 13px; padding: 10px 10px; min-width: 0; width: 100%; min-height: 40px; box-sizing: border-box; } .mobile-filter-bar .mob-label { font-size: 12px; display: inline-flex; align-items: center; gap: 4px; min-height: 36px; } .mobile-filter-bar .mob-label input { width: auto; min-height: auto; flex: none; } .mobile-filter-bar .mob-check-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: space-between; width: 100%; } .mobile-filter-bar .mob-check-row .mob-label { flex: none; } .mobile-filter-bar .btn-jrg-sm { align-self: flex-end; padding: 8px 16px; min-height: 36px; } .mobile-filter-toggle { font-size: 14px; padding: 12px; min-height: 44px; } /* Pagination — larger touch targets */ .pagination-wrap { gap: 6px; margin-top: 20px; } .pagination-wrap button { padding: 10px 14px; font-size: 13px; min-width: 40px; min-height: 40px; } .pagination-wrap .page-info { font-size: 12px; margin: 0 4px; flex-basis: 100%; text-align: center; order: 10; } /* Compare bar */ .compare-bar { padding: 10px 8px; gap: 6px; } .compare-bar .count { font-size: 13px; } .compare-bar button { font-size: 11px; padding: 8px 10px; min-height: 36px; } /* Quick view */ .qv-overlay { padding: 0; align-items: flex-end; } .qv-panel { padding: 20px 16px; border-radius: 12px 12px 0 0; max-height: 90vh; } .qv-grid { grid-template-columns: 1fr; gap: 16px; } .qv-img { height: 180px; } .qv-info h2 { font-size: 18px; } .qv-specs li { font-size: 13px; padding: 5px 0; } .qv-qty-wrap { flex-wrap: wrap; } .qv-cart-btn { padding: 14px; font-size: 15px; min-height: 48px; } .qv-close { top: 12px; right: 12px; font-size: 26px; padding: 8px; } /* Compare modal */ .compare-table-wrap { padding: 12px; } .compare-table-wrap h2 { font-size: 18px; } .compare-table th, .compare-table td { padding: 6px 8px; font-size: 11px; } .compare-table th { width: 60px; } /* Glossary */ .glossary-panel { padding: 16px 12px; } .glossary-panel h2 { font-size: 18px; } .glossary-panel th, .glossary-panel td { padding: 6px 8px; font-size: 11px; } /* Collection panel */ .collection-panel { width: 100%; } .collection-header { padding: 14px 16px; } .collection-header h2 { font-size: 18px; } .collection-body { padding: 8px 16px 12px; } .collection-empty { padding: 40px 16px; } .collection-footer { padding: 16px; } .collection-footer .cart-total-row { font-size: 15px; } .collection-footer .btn-row { flex-direction: column; gap: 8px; } .collection-footer .btn-row .btn-jrg { width: 100%; justify-content: center; min-height: 48px; } .cart-item { gap: 10px; padding: 12px 0; } .cart-item-info h4 { font-size: 14px; } .cart-item-remove { font-size: 22px; padding: 8px; } .collection-footer textarea { min-height: 60px; } /* Product detail */ .product-detail.open { padding: 12px; } .pd-layout { grid-template-columns: 1fr; gap: 16px; min-width: 0; width: 100%; max-width: 100%; overflow: hidden; } .pd-main-img { height: 200px; max-width: 100%; } .pd-thumb { width: 48px; height: 40px; } .pd-info h1 { font-size: 20px; word-wrap: break-word; } .pd-type { font-size: 12px; margin-bottom: 10px; } .pd-specs { grid-template-columns: 1fr; gap: 8px; } .pd-spec { padding: 10px 0; } .pd-spec-value { font-size: 14px; word-wrap: break-word; } .pd-cart-btn { padding: 12px; font-size: 15px; max-width: 100%; } .pd-qty { flex-wrap: wrap; gap: 8px; } .pd-gallery { min-width: 0; max-width: 100%; width: 100%; } .pd-back { font-size: 13px; } .share-print-area { flex-direction: column; } .share-print-area .btn-jrg { min-height: 40px; } .fbt-item { width: 120px; } /* Bottom sheet on mobile — matches 991px rule */ .inv-sidebar { max-height: 75vh; border-radius: 16px 16px 0 0; } .inv-sidebar.open { animation: sheetUp .35s cubic-bezier(.2,.9,.1,1) both; } /* Product cards — horizontal layout (image left) */ .product-grid { gap: 8px; } .product-card { flex-direction: row; max-width: none; min-height: 100px; border-radius: 10px; align-items: stretch; overflow: hidden; } .product-card .card-img { width: 110px; flex: 0 0 110px; align-self: stretch; overflow: hidden; position: relative; border-radius: 0; margin: 0; height: auto; } .product-card .card-img::after { display: none !important; } .product-card .card-img .card-product-img { position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; max-width: none !important; max-height: none !important; } .product-card .card-body { padding: 10px 10px 10px 12px; flex: 1; display: flex; flex-direction: column; } .product-card .card-color { font-size: 14px; margin-bottom: 1px; } .product-card .card-type { font-size: 10px; margin-bottom: 4px; } .product-card .card-details { font-size: 10px; gap: 2px 6px; margin-bottom: auto; } .product-card .card-details .finish-info .finish-help { display: none; } .product-card .card-details .size-info { display: inline; } .product-card .size-select { font-size: 11px; padding: 1px 4px; min-width: 80px; } .product-card .card-star-row { display: none !important; } .product-card .card-footer { padding-top: 4px; border-top: none; } .product-card .stock-badge { display: none; } .product-card .compare-check { display: none; } .wishlist-btn { width: 28px; height: 28px; font-size: 12px; padding: 0; top: 4px; left: 4px; } .btn-add button { padding: 6px 10px; font-size: 11px; min-width: 44px; min-height: 32px; } .product-card:hover { transform: none; } body { overflow-x: hidden; } main { animation: none !important; } /* Back to top */ .back-top { right: 12px; bottom: 70px; width: 40px; height: 40px; font-size: 18px; } /* Skeleton */ .skeleton-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; } .skeleton-card .sk-img { height: 100px; } .skeleton-card .sk-body { padding: 10px; } /* Notices */ .notice { font-size: 12px; margin-top: 16px; padding: 0 8px; } .inv-error { padding: 40px 16px; } .no-results { padding: 40px 16px; } /* Testimonials */ .testimonial-grid { grid-template-columns: 1fr; gap: 14px; } .testimonials-section h3 { font-size: 20px; } .testimonial-card { padding: 18px; } /* Swatch grid sidebar */ .swatch-grid { grid-template-columns: 1fr 1fr; gap: 6px; } .swatch { padding: 10px 8px; font-size: 12px; min-height: 40px; } .filter-section h3 { font-size: 14px; padding: 10px; min-height: 44px; } .filter-search input { padding: 10px 12px; font-size: 14px; min-height: 40px; } .show-more-btn { padding: 10px 0; min-height: 40px; } /* Sidebar filter — tighter spacing on mobile */ .inv-sidebar .sidebar-header { padding: 6px 12px; } .inv-sidebar .sidebar-inner { padding-bottom: 80px; } .inv-sidebar .filter-section { padding: 8px 12px; border-bottom-width: 3px; } .inv-sidebar .filter-section h3 { margin-bottom: 4px; margin-top: 0; padding: 0; min-height: 0; } .inv-sidebar .filter-search input { padding: 8px 10px; } .inv-sidebar .sidebar-inner .active-tags { padding: 6px 12px; } /* Touch target overrides for interactive elements */ .filter-checkbox { min-height: 40px; padding: 4px 0; } .filter-checkbox input { width: 20px; height: 20px; } .sidebar-clear-all { min-height: 36px; padding: 6px 0; } .btn-jrg { min-height: 40px; } .btn-jrg-sm { min-height: 36px; } /* Size selector bigger on mobile */ #sizeSearch { font-size: 15px; padding: 10px 12px; min-height: 44px; width: 100%; } .pd-size-select { font-size: 17px; padding: 10px 14px; min-height: 44px; min-width: 0; } .pd-spec:first-child .pd-spec-label { font-size: 13px; letter-spacing: .8px; } .pd-spec:first-child .pd-spec-value { font-size: 18px; font-weight: 600; } /* Thicker swatch borders for colour visibility */ .swatch-dot { border-width: 2px; } .swatch.active .swatch-dot { border-color: var(--accent); border-width: 2px; } /* Footer margin on mobile */ .site-footer .container { padding: 0 16px; gap: 12px; } .site-footer { padding: 20px 0 8px; } .footer-bottom { padding: 12px 16px 4px; } } /* Medium devices (tablets, 576px–767px) */ @media (min-width: 576px) and (max-width: 767px) { .container { padding: 0 20px; } .type-cards { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; } .type-cards .type-card { flex: 0 0 calc(33.33% - 8px); min-width: 180px; } .inv-content { width: 100%; max-width: 100%; display: flex; flex-direction: column; align-items: center; } .product-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; width: 100%; } .product-grid .product-card { max-width: none; width: 100%; } .top-bar { width: 100%; } .active-tags { width: 100%; } .pagination-wrap { width: 100%; } .mobile-filter-bar-new { width: 100%; } .product-card .card-details .size-info { display: inline; } .product-card .card-star-row { display: none !important; } .product-card .stock-badge { display: none; } } /* Fix: sticky sidebar on short screens */ @media (max-height: 600px) { .inv-sidebar { position: static; max-height: none; } } /* Fix: dropdown hover on touch devices */ @media (hover: none) and (pointer: coarse) { .navbar-nav > li.dropdown:hover > .dropdown-menu { display: none; } .navbar-nav > li.dropdown.open > .dropdown-menu { display: block; } .product-card .compare-check { opacity: 1; } } /* Fix: background-attachment on iOS */ @supports (-webkit-overflow-scrolling: touch) { .hero-section { background-attachment: scroll; } } /* Smooth scroll on mobile */ @media (prefers-reduced-motion: reduce) { * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } @media (max-width: 768px) { .site-footer { padding: 24px 0 12px; } .site-footer .container { grid-template-columns: 1fr; gap: 20px; } .footer-brand p { max-width: 100%; } .footer-heading { font-size: 14px; margin-bottom: 10px; } .footer-links li { margin-bottom: 6px; } .footer-links a { font-size: 14px; min-height: 36px; display: inline-block; padding: 4px 0; } .footer-contact .footer-contact-row { font-size: 13px; } .footer-bottom { font-size: 12px; padding-top: 14px; } /* List view — mobile */ .product-grid.list-view .product-card { min-height: 80px; } .product-grid.list-view .product-card .card-img { width: 90px; height: 60px; margin: 6px 8px; } .product-grid.list-view .product-card .card-body { padding: 4px 6px 4px 0; gap: 1px 8px; } .product-grid.list-view .product-card .card-color { font-size: 14px; } .product-grid.list-view .product-card .card-type { font-size: 10px; } .product-grid.list-view .product-card .card-details { gap: 8px; } .product-grid.list-view .product-card .finish-info, .product-grid.list-view .product-card .size-info { font-size: 10px; } .product-grid.list-view .product-card .card-footer { gap: 4px; } .product-grid.list-view .product-card .card-star-row { display: none !important; } } /* Luxurious Page Load Transition */ @keyframes pageFadeSlide { 0% { opacity: 0; transform: translateY(12px); } 100% { opacity: 1; transform: translateY(0); } } main { animation: pageFadeSlide 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) forwards; }