/* ============================================ GUNS VAULT — Premium Texas Firearms Marketplace Dark Luxury Theme · Matte Black + Gunmetal + Amber ============================================ */ :root { /* Surfaces — pure black/grayscale */ --bg: #050507; --bg-elev-1: #0C0C10; --bg-elev-2: #14141A; --bg-elev-3: #1C1C24; --surface-card: #101015; --surface-card-hover: #18181F; /* Borders */ --border: #232330; --border-strong: #33333F; --border-amber: rgba(255, 255, 255, 0.18); /* Gunmetal */ --gunmetal-100: #4A4F58; --gunmetal-200: #3A3F47; --gunmetal-300: #2A2D33; /* Text */ --text: #F5F5F7; --text-secondary: #B8B8C2; --text-muted: #72727E; --text-faint: #4A4A55; /* Accents — now pure white / silver (was amber) */ --amber: #FFFFFF; --amber-bright: #FFFFFF; --amber-deep: #C8C8D0; --amber-glow: rgba(255, 255, 255, 0.10); /* Status */ --success: #5CB87E; --warn: #E5B252; --danger: #E5524C; --info: #6FA8DC; /* Radius */ --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-xl: 20px; /* Shadows */ --shadow-sm: 0 2px 8px rgba(0,0,0,0.4); --shadow-md: 0 8px 24px rgba(0,0,0,0.5); --shadow-lg: 0 24px 60px rgba(0,0,0,0.6); --shadow-amber: 0 8px 32px rgba(212, 162, 76, 0.18); /* Spacing scale */ --container: 1280px; } /* ---------- Reset ---------- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; background: var(--bg); /* base color now lives on */ } body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: transparent; /* let the site-wide ethereal bg show through */ color: var(--text); line-height: 1.55; font-size: 15px; letter-spacing: -0.005em; min-height: 100vh; overflow-x: hidden; position: relative; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; transition: color .2s ease; } button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; } input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; } ul { list-style: none; } ::selection { background: var(--amber); color: var(--bg); } /* ---------- Typography ---------- */ .serif { font-family: 'Fraunces', 'Times New Roman', serif; font-optical-sizing: auto; } .mono { font-family: 'JetBrains Mono', 'SF Mono', Menlo, monospace; } h1, h2, h3, h4 { font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; color: var(--text); } h1 { font-size: clamp(2.4rem, 5vw, 4.2rem); font-weight: 500; letter-spacing: -0.035em; } h2 { font-size: clamp(1.8rem, 3.5vw, 2.6rem); } h3 { font-size: 1.35rem; } h4 { font-size: 1.05rem; } .eyebrow { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.18em; color: var(--amber); font-weight: 500; display: inline-flex; align-items: center; gap: 0.6rem; } .eyebrow::before { content: ''; width: 18px; height: 1px; background: var(--amber); display: inline-block; } .text-muted { color: var(--text-muted); } .text-secondary { color: var(--text-secondary); } .text-amber { color: var(--amber); } /* ---------- Layout ---------- */ .container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 24px; } .section { padding: 96px 0; position: relative; } .section-tight { padding: 64px 0; } .grid { display: grid; gap: 24px; } .flex { display: flex; } .flex-between { display: flex; align-items: center; justify-content: space-between; } .flex-center { display: flex; align-items: center; justify-content: center; } .gap-sm { gap: 8px; } .gap-md { gap: 16px; } .gap-lg { gap: 24px; } /* ---------- Header / Nav ---------- */ .site-header { position: sticky; top: 0; z-index: 100; background: rgba(10, 10, 11, 0.78); backdrop-filter: saturate(160%) blur(18px); -webkit-backdrop-filter: saturate(160%) blur(18px); border-bottom: 1px solid var(--border); } .nav { display: flex; align-items: center; justify-content: space-between; height: 72px; } .brand { display: flex; align-items: center; gap: 12px; font-weight: 600; letter-spacing: -0.02em; font-size: 1.05rem; } .brand-mark { width: 32px; height: 32px; border-radius: 8px; background: #FFFFFF; display: grid; place-items: center; color: #050507; font-weight: 700; font-size: 14px; box-shadow: 0 0 24px rgba(255, 255, 255, 0.18), inset 0 -1px 4px rgba(0,0,0,0.1); } .brand-name { color: var(--text); } .brand-name .sub { color: var(--amber); } .nav-links { display: flex; gap: 32px; align-items: center; } .nav-links a { color: var(--text-secondary); font-size: 0.92rem; font-weight: 450; transition: color .2s ease; } .nav-links a:hover { color: var(--text); } .nav-links a.active { color: var(--amber); } .nav-actions { display: flex; gap: 12px; align-items: center; } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 22px; border-radius: var(--r-md); font-weight: 500; font-size: 0.9rem; letter-spacing: -0.005em; transition: all .2s ease; border: 1px solid transparent; cursor: pointer; white-space: nowrap; } .btn-primary { background: #FFFFFF; color: #050507; box-shadow: 0 4px 14px rgba(255, 255, 255, 0.16); } .btn-primary:hover { transform: translateY(-1px); background: #F0F0F4; box-shadow: 0 8px 22px rgba(255, 255, 255, 0.22); } .btn-secondary { background: var(--bg-elev-2); color: var(--text); border-color: var(--border-strong); } .btn-secondary:hover { background: var(--bg-elev-3); border-color: var(--gunmetal-100); } .btn-ghost { background: transparent; color: var(--text-secondary); } .btn-ghost:hover { color: var(--text); background: var(--bg-elev-1); } .btn-outline { background: transparent; border-color: var(--border-strong); color: var(--text); } .btn-outline:hover { border-color: var(--amber); color: var(--amber); } .btn-sm { padding: 7px 14px; font-size: 0.82rem; } .btn-lg { padding: 14px 28px; font-size: 0.95rem; } .btn-block { width: 100%; } /* ---------- Cards ---------- */ .card { background: var(--surface-card); border: 1px solid var(--border); border-radius: var(--r-lg); transition: all .2s ease; } .card:hover { border-color: var(--border-strong); } /* ---------- Listing Card ---------- */ .listing-card { background: var(--surface-card); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; transition: all .25s ease; cursor: pointer; display: flex; flex-direction: column; } .listing-card:hover { transform: translateY(-3px); border-color: var(--border-amber); box-shadow: var(--shadow-md); } .listing-img { position: relative; aspect-ratio: 4/3; background: var(--bg-elev-2); overflow: hidden; } .listing-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; } .listing-card:hover .listing-img img { transform: scale(1.04); } .listing-img-placeholder { width: 100%; height: 100%; display: grid; place-items: center; background: linear-gradient(135deg, var(--bg-elev-2) 0%, var(--bg-elev-3) 100%); color: var(--text-faint); } .listing-badge { position: absolute; top: 12px; left: 12px; background: rgba(10, 10, 11, 0.78); backdrop-filter: blur(8px); border: 1px solid var(--border-strong); padding: 5px 10px; border-radius: 100px; font-size: 0.7rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-secondary); } .listing-badge.new { color: var(--amber); border-color: var(--border-amber); } .listing-badge.featured { background: #FFFFFF; color: #050507; border-color: transparent; } .listing-fav { position: absolute; top: 12px; right: 12px; width: 34px; height: 34px; border-radius: 50%; background: rgba(10, 10, 11, 0.78); backdrop-filter: blur(8px); border: 1px solid var(--border-strong); display: grid; place-items: center; color: var(--text-secondary); transition: all .2s ease; } .listing-fav:hover { color: var(--amber); border-color: var(--amber); } .listing-fav.active { color: var(--danger); } .listing-body { padding: 18px 18px 20px; display: flex; flex-direction: column; gap: 8px; flex: 1; } .listing-title { font-size: 1rem; font-weight: 500; color: var(--text); line-height: 1.3; letter-spacing: -0.01em; } .listing-meta { font-size: 0.78rem; color: var(--text-muted); display: flex; gap: 10px; flex-wrap: wrap; } .listing-price-row { display: flex; align-items: baseline; justify-content: space-between; margin-top: auto; padding-top: 12px; } .listing-price { font-size: 1.25rem; font-weight: 600; color: var(--amber); font-feature-settings: 'tnum'; letter-spacing: -0.02em; } .listing-location { font-size: 0.75rem; color: var(--text-muted); display: inline-flex; align-items: center; gap: 4px; } /* ---------- Form Controls ---------- */ .input, .select, .textarea { width: 100%; background: var(--bg-elev-1); border: 1px solid var(--border); border-radius: var(--r-md); padding: 11px 14px; font-size: 0.9rem; color: var(--text); transition: all .2s ease; } .input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--amber); background: var(--bg-elev-2); box-shadow: 0 0 0 3px var(--amber-glow); } .input::placeholder { color: var(--text-faint); } .search-bar { position: relative; display: flex; background: var(--bg-elev-2); border: 1px solid var(--border-strong); border-radius: 100px; padding: 4px; transition: border-color .2s ease; } .search-bar:focus-within { border-color: var(--amber); } .search-bar input { flex: 1; background: transparent; border: none; padding: 10px 18px; color: var(--text); font-size: 0.92rem; outline: none; } .search-bar input::placeholder { color: var(--text-faint); } label.field-label { display: block; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); margin-bottom: 8px; font-weight: 500; } /* Checkbox styled */ .checkbox { display: flex; align-items: center; gap: 10px; font-size: 0.88rem; color: var(--text-secondary); cursor: pointer; padding: 7px 0; transition: color .15s ease; } .checkbox:hover { color: var(--text); } .checkbox input { display: none; } .checkbox .box { width: 16px; height: 16px; border: 1.5px solid var(--gunmetal-100); border-radius: 4px; display: grid; place-items: center; transition: all .15s ease; flex-shrink: 0; } .checkbox input:checked + .box { background: var(--amber); border-color: var(--amber); } .checkbox input:checked + .box::after { content: ''; width: 8px; height: 4px; border-left: 2px solid var(--bg); border-bottom: 2px solid var(--bg); transform: rotate(-45deg) translate(1px, -1px); } .checkbox input:checked ~ span:last-child { color: var(--text); } /* Pill / chip / tag */ .pill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; background: var(--bg-elev-2); border: 1px solid var(--border); border-radius: 100px; font-size: 0.77rem; color: var(--text-secondary); font-weight: 450; } .pill.amber { background: var(--amber-glow); border-color: var(--border-amber); color: var(--amber); } .pill.success { background: rgba(92, 184, 126, 0.12); border-color: rgba(92, 184, 126, 0.3); color: var(--success); } .pill.danger { background: rgba(229, 82, 76, 0.12); border-color: rgba(229, 82, 76, 0.3); color: var(--danger); } /* ---------- Hero ---------- */ .hero { position: relative; padding: 88px 0 120px; overflow: hidden; } .hero::before { content: ''; position: absolute; top: -10%; left: 50%; transform: translateX(-50%); width: 1100px; height: 1100px; background: radial-gradient(circle, var(--amber-glow) 0%, transparent 60%); pointer-events: none; opacity: 0.6; } .hero-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 64px; align-items: center; position: relative; } .hero-headline { font-family: 'Fraunces', serif; font-weight: 400; letter-spacing: -0.045em; line-height: 0.98; font-size: clamp(2.6rem, 5.6vw, 4.6rem); } .hero-headline em { font-style: italic; color: var(--amber); font-weight: 300; } .hero-sub { margin-top: 24px; font-size: 1.08rem; color: var(--text-secondary); max-width: 540px; line-height: 1.6; } .hero-cta { margin-top: 36px; display: flex; gap: 12px; flex-wrap: wrap; } .hero-trust { margin-top: 56px; display: flex; gap: 32px; flex-wrap: wrap; } .hero-trust-item .num { font-family: 'Fraunces', serif; font-size: 2rem; color: var(--amber); font-weight: 400; line-height: 1; } .hero-trust-item .lbl { margin-top: 6px; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); } .hero-visual { position: relative; aspect-ratio: 4/5; border-radius: var(--r-xl); background: linear-gradient(135deg, var(--bg-elev-2) 0%, var(--bg-elev-3) 100%); border: 1px solid var(--border); overflow: hidden; box-shadow: var(--shadow-lg), 0 0 80px rgba(212, 162, 76, 0.08); } .hero-visual img { width: 100%; height: 100%; object-fit: cover; } .hero-visual::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, rgba(10,10,11,0.8) 100%); pointer-events: none; } .hero-visual-card { position: absolute; bottom: 24px; left: 24px; right: 24px; padding: 18px 20px; background: rgba(10,10,11,0.78); backdrop-filter: blur(20px); border: 1px solid var(--border-strong); border-radius: var(--r-md); display: flex; align-items: center; justify-content: space-between; } .hero-visual-card .name { font-weight: 500; font-size: 0.95rem; } .hero-visual-card .meta { font-size: 0.78rem; color: var(--text-muted); margin-top: 2px; } .hero-visual-card .price { font-size: 1.2rem; color: var(--amber); font-weight: 600; font-family: 'Inter'; letter-spacing: -0.01em; } /* ---------- Section header ---------- */ .section-header { display: flex; justify-content: space-between; align-items: end; margin-bottom: 40px; gap: 24px; flex-wrap: wrap; } .section-header .title h2 { margin-top: 8px; } .section-header .sub { margin-top: 8px; color: var(--text-muted); max-width: 520px; font-size: 0.95rem; } /* ---------- Categories ---------- */ .cat-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; } .cat-card { background: var(--surface-card); border: 1px solid var(--border); border-radius: var(--r-md); padding: 22px 18px; text-align: center; transition: all .2s ease; cursor: pointer; } .cat-card:hover { border-color: var(--border-amber); background: var(--surface-card-hover); transform: translateY(-2px); } .cat-card .icon { font-size: 1.6rem; color: var(--amber); margin-bottom: 12px; display: block; } .cat-card .name { font-size: 0.88rem; font-weight: 500; color: var(--text); } .cat-card .count { font-size: 0.74rem; color: var(--text-muted); margin-top: 2px; } /* ---------- How it works ---------- */ .steps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .step-card { padding: 32px; background: var(--surface-card); border: 1px solid var(--border); border-radius: var(--r-lg); position: relative; } .step-num { font-family: 'Fraunces', serif; font-size: 2.4rem; color: var(--amber); font-weight: 400; line-height: 1; } .step-card h3 { margin-top: 16px; margin-bottom: 8px; font-weight: 500; } .step-card p { color: var(--text-muted); font-size: 0.92rem; line-height: 1.6; } /* ---------- Trust strip ---------- */ .trust-strip { background: var(--bg-elev-1); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 40px 0; } .trust-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; align-items: center; } .trust-item { display: flex; align-items: center; gap: 14px; } .trust-item .icon { width: 44px; height: 44px; border-radius: 10px; background: var(--amber-glow); border: 1px solid var(--border-amber); color: var(--amber); display: grid; place-items: center; flex-shrink: 0; } .trust-item .label { font-weight: 500; font-size: 0.92rem; } .trust-item .desc { font-size: 0.78rem; color: var(--text-muted); margin-top: 2px; } /* ---------- CTA Banner ---------- */ .cta-banner { position: relative; border-radius: var(--r-xl); border: 1px solid var(--border-amber); background: linear-gradient(135deg, var(--bg-elev-2) 0%, var(--bg-elev-3) 100%); padding: 64px; overflow: hidden; text-align: center; } .cta-banner::before { content: ''; position: absolute; inset: 0; background: radial-gradient(800px circle at 80% 50%, var(--amber-glow), transparent 50%), radial-gradient(500px circle at 20% 50%, rgba(212, 162, 76, 0.08), transparent 50%); } .cta-banner > * { position: relative; } .cta-banner h2 { font-family: 'Fraunces', serif; font-weight: 400; letter-spacing: -0.035em; } .cta-banner .sub { color: var(--text-secondary); margin-top: 12px; font-size: 1rem; max-width: 580px; margin-left: auto; margin-right: auto; } .cta-banner .actions { margin-top: 32px; display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; } /* ---------- Footer ---------- */ .site-footer { border-top: 1px solid var(--border); background: var(--bg-elev-1); padding: 64px 0 32px; margin-top: 64px; } .footer-grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 48px; margin-bottom: 48px; } .footer-brand p { color: var(--text-muted); font-size: 0.88rem; margin-top: 16px; max-width: 320px; line-height: 1.6; } .footer-col h4 { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); margin-bottom: 18px; font-weight: 500; } .footer-col ul li { margin-bottom: 10px; } .footer-col a { color: var(--text-secondary); font-size: 0.9rem; transition: color .15s ease; } .footer-col a:hover { color: var(--amber); } .footer-legal { border-top: 1px solid var(--border); padding-top: 28px; display: flex; justify-content: space-between; align-items: center; color: var(--text-muted); font-size: 0.82rem; flex-wrap: wrap; gap: 16px; } .footer-disclaimer { background: rgba(229, 82, 76, 0.06); border: 1px solid rgba(229, 82, 76, 0.2); border-radius: var(--r-md); padding: 16px 20px; margin-bottom: 32px; font-size: 0.82rem; color: var(--text-secondary); line-height: 1.6; } .footer-disclaimer strong { color: var(--danger); font-weight: 600; } /* ============================================ BROWSE PAGE ============================================ */ .browse-layout { display: grid; grid-template-columns: 280px 1fr; gap: 36px; margin-top: 32px; } .filter-panel { background: var(--surface-card); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 24px; position: sticky; top: 96px; height: fit-content; max-height: calc(100vh - 120px); overflow-y: auto; } .filter-panel h3 { font-size: 0.95rem; font-weight: 500; margin-bottom: 18px; display: flex; justify-content: space-between; align-items: center; } .filter-panel h3 button { font-size: 0.78rem; color: var(--amber); font-weight: 450; } .filter-group { padding: 18px 0; border-bottom: 1px solid var(--border); } .filter-group:last-of-type { border-bottom: none; } .filter-group .filter-title { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); margin-bottom: 14px; font-weight: 500; } .range-row { display: flex; gap: 8px; align-items: center; } .range-row .input { padding: 9px 12px; font-size: 0.85rem; } .range-row span { color: var(--text-faint); font-size: 0.85rem; } .toolbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; gap: 12px; flex-wrap: wrap; } .toolbar .results { color: var(--text-muted); font-size: 0.88rem; } .toolbar .results strong { color: var(--text); font-weight: 500; } .toolbar-actions { display: flex; gap: 10px; align-items: center; } .sort-select { background: var(--bg-elev-2); border: 1px solid var(--border-strong); color: var(--text); padding: 9px 36px 9px 14px; border-radius: var(--r-md); font-size: 0.86rem; cursor: pointer; appearance: none; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right 12px center; background-size: 10px; } .results-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; } .active-filters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; } .active-filters .pill { cursor: pointer; } .active-filters .pill::after { content: '×'; margin-left: 4px; opacity: 0.6; } /* Hero strip on browse */ .browse-hero { padding: 56px 0 0; border-bottom: 1px solid var(--border); } .browse-hero h1 { font-family: 'Fraunces', serif; font-weight: 400; letter-spacing: -0.04em; font-size: clamp(2rem, 4vw, 3rem); } .browse-hero p { color: var(--text-muted); margin-top: 12px; max-width: 560px; font-size: 1rem; } /* ============================================ LISTING DETAIL PAGE ============================================ */ .listing-layout { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 56px; padding-top: 32px; } .gallery-main { aspect-ratio: 4/3; background: var(--bg-elev-2); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; position: relative; } .gallery-main img { width: 100%; height: 100%; object-fit: cover; } .gallery-thumbs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-top: 14px; } .gallery-thumb { aspect-ratio: 1/1; border-radius: var(--r-sm); border: 1.5px solid var(--border); overflow: hidden; cursor: pointer; transition: border-color .15s ease; background: var(--bg-elev-2); } .gallery-thumb img { width: 100%; height: 100%; object-fit: cover; } .gallery-thumb.active { border-color: var(--amber); } .gallery-thumb:hover { border-color: var(--gunmetal-100); } .listing-detail-info { display: flex; flex-direction: column; gap: 24px; } .listing-pills { display: flex; gap: 8px; flex-wrap: wrap; } .listing-headline h1 { font-family: 'Fraunces', serif; font-weight: 400; font-size: 2.2rem; letter-spacing: -0.025em; line-height: 1.05; } .listing-headline .meta-row { margin-top: 12px; display: flex; gap: 16px; align-items: center; color: var(--text-muted); font-size: 0.88rem; flex-wrap: wrap; } .listing-price-block { display: flex; align-items: baseline; gap: 14px; padding: 24px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } .listing-price-big { font-family: 'Fraunces', serif; font-weight: 400; font-size: 2.6rem; color: var(--amber); letter-spacing: -0.02em; line-height: 1; } .listing-msrp { color: var(--text-muted); font-size: 0.92rem; } .listing-msrp s { color: var(--text-faint); margin-right: 6px; } .spec-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; } .spec-row { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); } .spec-row:nth-child(2n) { border-right: none; } .spec-row .lbl { font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); } .spec-row .val { font-size: 0.92rem; color: var(--text); font-weight: 500; } .seller-card { padding: 22px; background: var(--surface-card); border: 1px solid var(--border); border-radius: var(--r-lg); } .seller-row { display: flex; align-items: center; gap: 14px; } .seller-avatar { width: 52px; height: 52px; border-radius: 50%; background: linear-gradient(135deg, #FFFFFF, #888892); display: grid; place-items: center; color: var(--bg); font-weight: 600; font-size: 1rem; flex-shrink: 0; } .seller-name { font-weight: 500; font-size: 0.98rem; display: flex; align-items: center; gap: 6px; } .seller-verified { width: 14px; height: 14px; background: var(--amber); color: var(--bg); border-radius: 50%; font-size: 9px; display: grid; place-items: center; font-weight: 700; } .seller-meta { font-size: 0.8rem; color: var(--text-muted); margin-top: 2px; display: flex; gap: 10px; } .seller-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--border); } .seller-stats .stat { text-align: center; } .seller-stats .stat .v { font-size: 1.05rem; font-weight: 600; color: var(--text); font-family: 'Inter'; } .seller-stats .stat .l { font-size: 0.74rem; color: var(--text-muted); margin-top: 2px; text-transform: uppercase; letter-spacing: 0.06em; } .seller-actions { margin-top: 18px; display: flex; flex-direction: column; gap: 8px; } .warning-box { border: 1px solid rgba(229, 82, 76, 0.3); background: rgba(229, 82, 76, 0.05); border-radius: var(--r-md); padding: 16px 18px; font-size: 0.85rem; color: var(--text-secondary); line-height: 1.55; display: flex; gap: 12px; } .warning-box .icon { color: var(--danger); flex-shrink: 0; } .warning-box strong { color: var(--text); font-weight: 600; } /* ---------- AI Chat Widget ---------- */ .ai-chat { position: fixed; bottom: 24px; right: 24px; z-index: 200; width: 400px; max-width: calc(100vw - 32px); background: var(--bg-elev-2); border: 1px solid var(--border-strong); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); overflow: hidden; display: flex; flex-direction: column; height: 580px; max-height: calc(100vh - 48px); transform: translateY(0); transition: transform .25s ease, opacity .25s ease; } .ai-chat.collapsed { height: 60px; cursor: pointer; } .ai-chat.collapsed .ai-chat-body, .ai-chat.collapsed .ai-chat-input { display: none; } .ai-chat.hidden { transform: translateY(120%); opacity: 0; pointer-events: none; } .ai-chat-header { padding: 14px 18px; background: var(--bg-elev-3); border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; } .ai-chat-title { display: flex; align-items: center; gap: 10px; } .ai-chat-title .ai-orb { width: 28px; height: 28px; border-radius: 50%; background: radial-gradient(circle at 30% 30%, #FFFFFF 0%, #888892 80%); position: relative; box-shadow: 0 0 16px var(--amber-glow); } .ai-chat-title .ai-orb::after { content: ''; position: absolute; inset: 4px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, rgba(255,255,255,0.5), transparent 50%); } .ai-chat-title .name { font-weight: 500; font-size: 0.92rem; } .ai-chat-title .status { font-size: 0.72rem; color: var(--success); display: flex; align-items: center; gap: 5px; } .ai-chat-title .status::before { content: ''; width: 6px; height: 6px; background: var(--success); border-radius: 50%; box-shadow: 0 0 8px var(--success); } .ai-chat-close { width: 28px; height: 28px; border-radius: 6px; color: var(--text-muted); display: grid; place-items: center; transition: all .15s ease; } .ai-chat-close:hover { background: var(--bg-elev-1); color: var(--text); } .ai-chat-body { flex: 1; overflow-y: auto; padding: 20px 18px; display: flex; flex-direction: column; gap: 12px; } .ai-chat-body::-webkit-scrollbar { width: 6px; } .ai-chat-body::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 3px; } .ai-msg { max-width: 85%; padding: 10px 14px; border-radius: 12px; font-size: 0.88rem; line-height: 1.5; } .ai-msg.bot { background: var(--bg-elev-3); color: var(--text); border-bottom-left-radius: 4px; align-self: flex-start; } .ai-msg.user { background: #FFFFFF; color: #050507; border-bottom-right-radius: 4px; align-self: flex-end; font-weight: 450; } .ai-msg b, .ai-msg strong { color: var(--amber); font-weight: 600; } .ai-msg.bot ul { margin: 6px 0 0 16px; } .ai-msg.bot li { margin-bottom: 3px; font-size: 0.85rem; } .ai-suggestions { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 4px; } .ai-suggestion { padding: 7px 12px; background: var(--bg-elev-3); border: 1px solid var(--border); border-radius: 100px; font-size: 0.78rem; color: var(--text-secondary); cursor: pointer; transition: all .15s ease; } .ai-suggestion:hover { border-color: var(--amber); color: var(--amber); } .ai-chat-input { padding: 12px 14px; border-top: 1px solid var(--border); background: var(--bg-elev-2); display: flex; gap: 8px; flex-shrink: 0; } .ai-chat-input input { flex: 1; background: var(--bg-elev-3); border: 1px solid var(--border); border-radius: 100px; padding: 10px 16px; color: var(--text); font-size: 0.88rem; outline: none; } .ai-chat-input input:focus { border-color: var(--amber); } .ai-chat-input button { width: 38px; height: 38px; border-radius: 50%; background: #FFFFFF; color: #050507; display: grid; place-items: center; transition: transform .15s ease; flex-shrink: 0; } .ai-chat-input button:hover { transform: scale(1.05); } .ai-fab { position: fixed; bottom: 24px; right: 24px; z-index: 199; width: 60px; height: 60px; border-radius: 50%; background: #FFFFFF; color: #050507; display: grid; place-items: center; cursor: pointer; box-shadow: 0 8px 24px rgba(255,255,255,0.18), 0 4px 12px rgba(0,0,0,0.4); transition: transform .2s ease, box-shadow .2s ease; border: 2px solid var(--bg); } .ai-fab:hover { transform: scale(1.06); box-shadow: 0 12px 32px var(--amber-glow), 0 6px 16px rgba(0,0,0,0.5); } .ai-fab.hidden { transform: scale(0); opacity: 0; pointer-events: none; } .typing { display: inline-flex; gap: 4px; padding: 4px 0; } .typing span { width: 6px; height: 6px; background: var(--text-muted); border-radius: 50%; animation: blink 1.2s infinite; } .typing span:nth-child(2) { animation-delay: 0.15s; } .typing span:nth-child(3) { animation-delay: 0.3s; } @keyframes blink { 0%, 60%, 100% { opacity: 0.3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } } /* ============================================ PROFILE PAGE ============================================ */ .profile-header { padding: 48px 0 32px; border-bottom: 1px solid var(--border); } .profile-row { display: flex; gap: 28px; align-items: center; } .profile-avatar { width: 96px; height: 96px; border-radius: 50%; background: linear-gradient(135deg, #FFFFFF, #888892); display: grid; place-items: center; color: var(--bg); font-weight: 600; font-size: 2rem; flex-shrink: 0; box-shadow: 0 0 32px var(--amber-glow); } .profile-info { flex: 1; } .profile-info h1 { font-family: 'Fraunces', serif; font-weight: 400; letter-spacing: -0.02em; font-size: 2.4rem; display: flex; align-items: center; gap: 12px; } .profile-meta { margin-top: 8px; display: flex; gap: 14px; flex-wrap: wrap; color: var(--text-muted); font-size: 0.9rem; } .profile-stats { margin-top: 20px; display: flex; gap: 32px; } .profile-stat .v { font-family: 'Fraunces', serif; font-size: 1.6rem; color: var(--amber); } .profile-stat .l { font-size: 0.78rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; } .profile-actions { display: flex; gap: 10px; } .tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin: 32px 0 28px; } .tab { padding: 14px 18px; font-size: 0.92rem; color: var(--text-muted); border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer; transition: all .15s ease; font-weight: 450; } .tab:hover { color: var(--text); } .tab.active { color: var(--amber); border-color: var(--amber); } .review-card { padding: 22px; background: var(--surface-card); border: 1px solid var(--border); border-radius: var(--r-md); margin-bottom: 14px; } .review-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; } .review-author { display: flex; align-items: center; gap: 10px; } .review-author .av { width: 36px; height: 36px; border-radius: 50%; background: var(--bg-elev-3); border: 1px solid var(--border); display: grid; place-items: center; font-weight: 500; font-size: 0.85rem; color: var(--text-secondary); } .review-author .name { font-weight: 500; font-size: 0.92rem; } .review-author .date { font-size: 0.78rem; color: var(--text-muted); } .review-stars { color: var(--amber); letter-spacing: 1px; } .review-body { color: var(--text-secondary); font-size: 0.92rem; line-height: 1.6; } /* ============================================ LEGAL PAGE ============================================ */ .legal-layout { display: grid; grid-template-columns: 240px 1fr; gap: 56px; margin-top: 48px; } .legal-toc { position: sticky; top: 96px; height: fit-content; } .legal-toc h4 { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); margin-bottom: 16px; font-weight: 500; } .legal-toc a { display: block; padding: 7px 0; font-size: 0.88rem; color: var(--text-secondary); border-left: 2px solid transparent; padding-left: 12px; margin-left: -2px; } .legal-toc a:hover { color: var(--text); } .legal-toc a.active { color: var(--amber); border-color: var(--amber); } .legal-content h1 { font-family: 'Fraunces', serif; font-weight: 400; letter-spacing: -0.03em; font-size: 3rem; margin-bottom: 12px; } .legal-content > p.lead { color: var(--text-secondary); font-size: 1.05rem; line-height: 1.6; margin-bottom: 40px; } .legal-section { padding: 32px 0; border-top: 1px solid var(--border); } .legal-section h2 { font-family: 'Fraunces', serif; font-weight: 400; font-size: 1.6rem; letter-spacing: -0.02em; margin-bottom: 16px; } .legal-section h3 { font-size: 1.05rem; font-weight: 500; margin-top: 24px; margin-bottom: 8px; color: var(--text); } .legal-section p { color: var(--text-secondary); font-size: 0.95rem; line-height: 1.75; margin-bottom: 14px; } .legal-section ul { list-style: none; padding: 0; margin: 14px 0; } .legal-section li { position: relative; padding-left: 22px; color: var(--text-secondary); font-size: 0.95rem; line-height: 1.7; margin-bottom: 8px; } .legal-section li::before { content: ''; position: absolute; left: 0; top: 12px; width: 8px; height: 1px; background: var(--amber); } .alert-callout { background: rgba(229, 82, 76, 0.06); border-left: 3px solid var(--danger); padding: 18px 22px; border-radius: var(--r-sm); margin: 20px 0; } .alert-callout strong { color: var(--danger); font-weight: 600; } .alert-callout p { color: var(--text-secondary); margin-bottom: 8px; font-size: 0.92rem; } .alert-callout p:last-child { margin-bottom: 0; } .info-callout { background: var(--amber-glow); border-left: 3px solid var(--amber); padding: 18px 22px; border-radius: var(--r-sm); margin: 20px 0; } .info-callout strong { color: var(--amber); font-weight: 600; } .info-callout p { color: var(--text-secondary); margin-bottom: 8px; font-size: 0.92rem; } .info-callout p:last-child { margin-bottom: 0; } /* ---------- Responsive ---------- */ @media (max-width: 1024px) { .hero-grid { grid-template-columns: 1fr; } .hero-visual { max-width: 500px; margin: 0 auto; } .browse-layout { grid-template-columns: 1fr; } .filter-panel { position: static; max-height: none; } .listing-layout { grid-template-columns: 1fr; gap: 32px; } .legal-layout { grid-template-columns: 1fr; } .legal-toc { position: static; } .cat-grid { grid-template-columns: repeat(3, 1fr); } .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; } .trust-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 720px) { .section { padding: 64px 0; } .nav-links { display: none; } .cat-grid { grid-template-columns: repeat(2, 1fr); } .footer-grid { grid-template-columns: 1fr; } .hero { padding: 48px 0 80px; } .hero-trust { gap: 24px; } .steps-grid { grid-template-columns: 1fr; } .trust-grid { grid-template-columns: 1fr; } .cta-banner { padding: 36px 24px; } .ai-chat { width: calc(100vw - 24px); right: 12px; bottom: 12px; } .profile-row { flex-direction: column; text-align: center; align-items: center; } .profile-info h1 { justify-content: center; } .profile-stats { justify-content: center; } .spec-list { grid-template-columns: 1fr; } .spec-row { border-right: none; } } /* ---------- Page-load fade ---------- */ .fade-in { animation: fadeIn .5s ease both; } @keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } /* ============================================ ETHERAL SHADOW BACKGROUND Native port of the etheral-shadow React component. Uses SVG turbulence + displacement + animated hue rotate, masked through a soft cloud image, plus a noise overlay. ============================================ */ .ethereal-bg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: hidden; pointer-events: none; z-index: 0; } /* Site-wide variant: fixed behind every page, auto-injected by initSiteEthereal() */ .ethereal-bg.site-ethereal-bg { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: -1; opacity: 0.55; /* subtle so it doesn't fight content */ } /* Soft top-and-bottom darkening so the site-wide bg never overpowers text */ .ethereal-bg.site-ethereal-bg::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 100% 60% at 50% 50%, transparent 0%, rgba(5,5,7,0.55) 70%, rgba(5,5,7,0.85) 100%); } .ethereal-bg .ethereal-svg-defs { position: absolute; width: 0; height: 0; pointer-events: none; } .ethereal-bg .ethereal-displacement-wrap { position: absolute; inset: -100px; filter: url(#ethereal-filter) blur(4px); -webkit-filter: url(#ethereal-filter) blur(4px); animation: etherealDrift 28s ease-in-out infinite alternate; } .ethereal-bg .ethereal-mask { width: 100%; height: 100%; background-color: rgba(220, 220, 230, 1); -webkit-mask-image: url('https://framerusercontent.com/images/ceBGguIpUU8luwByxuQz79t7To.png'); mask-image: url('https://framerusercontent.com/images/ceBGguIpUU8luwByxuQz79t7To.png'); -webkit-mask-size: cover; mask-size: cover; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; animation: etherealBreathe 18s ease-in-out infinite alternate; } /* Slow organic drift of the whole cloud */ @keyframes etherealDrift { 0% { transform: translate3d(-2%, -1%, 0) rotate(-1deg) scale(1.04); } 50% { transform: translate3d( 2%, 1%, 0) rotate( 1deg) scale(1.10); } 100% { transform: translate3d(-1%, 2%, 0) rotate(-0.5deg) scale(1.06); } } /* Subtle breathing on the mask itself */ @keyframes etherealBreathe { 0% { -webkit-mask-size: 110% 110%; mask-size: 110% 110%; opacity: 0.85; } 50% { -webkit-mask-size: 130% 130%; mask-size: 130% 130%; opacity: 1; } 100% { -webkit-mask-size: 115% 115%; mask-size: 115% 115%; opacity: 0.9; } } /* ---- Drifting luxury orbs (live behind the cloud) ---- */ .ethereal-bg .ethereal-orbs { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; } .ethereal-bg .ethereal-orb { position: absolute; display: block; border-radius: 50%; filter: blur(80px); opacity: 0.55; will-change: transform; } .ethereal-bg .ethereal-orb-1 { width: 55vw; height: 55vw; left: -10vw; top: -15vw; background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.22), rgba(255,255,255,0) 60%); animation: orbFloat1 22s ease-in-out infinite alternate; } .ethereal-bg .ethereal-orb-2 { width: 45vw; height: 45vw; right: -12vw; top: 5vw; background: radial-gradient(circle at 60% 40%, rgba(180,190,210,0.18), rgba(255,255,255,0) 65%); animation: orbFloat2 28s ease-in-out infinite alternate; } .ethereal-bg .ethereal-orb-3 { width: 40vw; height: 40vw; left: 25vw; bottom: -15vw; background: radial-gradient(circle at 50% 50%, rgba(220,210,200,0.14), rgba(255,255,255,0) 70%); animation: orbFloat3 34s ease-in-out infinite alternate; } @keyframes orbFloat1 { 0% { transform: translate3d(0,0,0) scale(1); } 100% { transform: translate3d(12vw, 8vh, 0) scale(1.15);} } @keyframes orbFloat2 { 0% { transform: translate3d(0,0,0) scale(1); } 100% { transform: translate3d(-10vw, 12vh, 0) scale(1.2); } } @keyframes orbFloat3 { 0% { transform: translate3d(0,0,0) scale(1); } 100% { transform: translate3d(-8vw, -14vh, 0) scale(0.9); } } @media (prefers-reduced-motion: reduce) { .ethereal-bg .ethereal-displacement-wrap, .ethereal-bg .ethereal-mask, .ethereal-bg .ethereal-orb { animation: none !important; } } .ethereal-bg .ethereal-noise { position: absolute; inset: 0; background-image: url("https://framerusercontent.com/images/g0QcWrxr87K0ufOxIUFBakwYA8.png"); background-size: 240px; background-repeat: repeat; opacity: 0.5; mix-blend-mode: overlay; pointer-events: none; } /* Hero needs the ethereal layer behind text */ .hero { isolation: isolate; } .hero > .container { position: relative; z-index: 2; } .hero .ethereal-bg { z-index: 0; } /* Soft vignette so the edges of the cloud blend into pure black */ .hero .ethereal-vignette { position: absolute; inset: 0; pointer-events: none; z-index: 1; background: radial-gradient(ellipse 80% 70% at 50% 50%, transparent 0%, rgba(5,5,7,0.4) 60%, rgba(5,5,7,0.95) 100%); } /* Override the original amber radial in hero — pure B&W now */ .hero::before { display: none; }