/* ========================================================================== SHOP V2 — "MILLION-DOLLAR ITEM SHOP" SKIN (2026-08-29, cinematic pass) -------------------------------------------------------------------------- Layered ON TOP of styles.css, loaded only by shop.html. Pure presentation + the v2 structure injected by js/shopv2.js. The catalog engine (products.js render, quick view, cart, checkout) is untouched. Mobile-first; scoped to body[data-page="shop"] wherever it could bleed into other pages. ========================================================================== */ /* ------------------------ CINEMATIC PAGE HERO ------------------------ */ body[data-page="shop"] .page-hero{ position:relative; overflow:hidden; background:url(../assets/installs/v2-gmc-sunset.webp) 62% 72%/cover no-repeat #0c0d0f; } body[data-page="shop"] .page-hero::before{ content:""; position:absolute; inset:0; /* one gentle wash — stacked heavies render as a slab (proven on the home hero) */ background: linear-gradient(92deg, rgba(9,10,12,.78) 0%, rgba(9,10,12,.48) 44%, rgba(9,10,12,.1) 72%, rgba(9,10,12,.02) 86%), linear-gradient(180deg, rgba(9,10,12,.2), rgba(9,10,12,0) 35%, rgba(9,10,12,0) 60%, #0c0d0f 97%); } body[data-page="shop"] .page-hero .container{ position:relative; z-index:1; } body[data-page="shop"] .page-hero h1{ font-size:clamp(2.3rem, 7.2vw, 4rem); line-height:1.06; letter-spacing:.005em; background:linear-gradient(100deg,#f7f3e8 0%,#e0c074 26%,#ffffff 46%,#c9a44f 64%,#f2e5c4 86%); -webkit-background-clip:text; background-clip:text; color:transparent; filter:drop-shadow(0 2px 14px rgba(0,0,0,.55)); } /* ------------------------------ TAB RAIL ----------------------------- */ .cat-nav{ gap:.45rem; padding:.8rem 0 .85rem; border-bottom:1px solid rgba(224,192,116,.22); box-shadow:0 18px 30px -26px rgba(224,192,116,.35); scroll-snap-type:x proximity; scrollbar-width:none; } .cat-nav a{ scroll-snap-align:start; display:inline-flex; align-items:center; gap:.42rem; padding:.66rem 1.1rem; font-size:0.875rem; font-weight:650; color:#c3c8d1; border:1px solid rgba(255,255,255,.14); border-radius:13px; background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015)); transition:all .22s; -webkit-tap-highlight-color:transparent; } .cat-nav a .tab-ico{ font-size:1rem; line-height:1; } .cat-nav a:hover{ color:#fff; border-color:rgba(224,192,116,.55); background:rgba(224,192,116,.08); transform:translateY(-1px); } .cat-nav a.active{ background:linear-gradient(135deg,#f4e0ac,#c9a44f 52%,#e8ca85); color:#14161a; border-color:transparent; font-weight:800; box-shadow:0 6px 22px rgba(201,164,79,.45), inset 0 1px 0 rgba(255,255,255,.55); } /* trust strip (injected under the tab rail by shopv2.js) */ .v2-trust{ display:flex; gap:.55rem 1.5rem; justify-content:center; align-items:center; padding:.72rem .2rem .35rem; font-size:0.75rem; font-weight:550; color:#9ba1ab; overflow-x:auto; white-space:nowrap; scrollbar-width:none; } .v2-trust::-webkit-scrollbar{ height:0; } .v2-trust b{ color:#e0c074; font-weight:750; } .v2-trust span{ display:inline-flex; align-items:center; gap:.34rem; } /* how it works — three steps, stated once, never repeated */ .v2-how{ display:flex; justify-content:center; align-items:center; gap:.6rem 2.4rem; flex-wrap:wrap; padding:.15rem .2rem 1rem; font:600 0.75rem/1 Inter,system-ui,sans-serif; color:#8f959f; } .v2-how span{ display:inline-flex; align-items:center; gap:.55rem; } .v2-how b{ display:inline-flex; align-items:center; justify-content:center; width:19px; height:19px; border-radius:50%; flex:none; background:linear-gradient(135deg,#f4e0ac,#c9a44f); color:#14161a; font:800 0.75rem/1 Inter,sans-serif; } @media (max-width:680px){ .v2-how{ gap:.5rem 1.1rem; font-size:0.75rem; padding-bottom:.8rem; } .v2-how b{ width:17px; height:17px; font-size:0.75rem; } } /* price ladder — the buyer's first question, answered once, in the same voice as the strips above */ .v2-price{ display:flex; justify-content:center; align-items:center; gap:.5rem 1.15rem; flex-wrap:wrap; padding:0 .2rem 1rem; font:600 0.75rem/1 Inter,system-ui,sans-serif; color:#8f959f; } .v2-price span{ display:inline-flex; align-items:center; gap:.3rem; } .v2-price b{ color:#e0c074; font-weight:750; } .v2-price .v2-price-lbl{ color:#6f757e; font-size:0.68rem; font-weight:700; letter-spacing:.07em; text-transform:uppercase; } @media (max-width:680px){ .v2-price{ gap:.4rem .85rem; padding-bottom:.85rem; } } /* ------------------------- SECTION HEADERS --------------------------- */ .cat-head{ display:flex; align-items:baseline; gap:.85rem; margin:1.7rem 0 1.15rem; } .cat-head h2{ font-size:clamp(1.45rem,4.8vw,2.05rem); position:relative; padding-bottom:.5rem; background:linear-gradient(95deg,#f5f1e6,#e0c074 55%,#f5f1e6); -webkit-background-clip:text; background-clip:text; color:transparent; } .cat-head h2::after{ content:""; position:absolute; left:0; bottom:0; width:64px; height:3px; border-radius:3px; background:linear-gradient(90deg,#e0c074,#c9a44f 55%,rgba(224,192,116,0)); box-shadow:0 0 12px rgba(224,192,116,.5); } .cat-count{ font-size:0.75rem; color:#8b9099; font-weight:650; letter-spacing:.06em; text-transform:uppercase; } /* --------------------------- ITEM TILES ------------------------------ */ #shop-sections .grid--3{ gap:1.15rem; } #shop-sections .card{ border-radius:18px; border:1px solid rgba(255,255,255,.10); position:relative; background:linear-gradient(180deg,#181a20,#0f1115); box-shadow:0 8px 26px -14px rgba(0,0,0,.7); } #shop-sections .card:hover{ transform:translateY(-7px); box-shadow:0 22px 44px -18px rgba(0,0,0,.85), 0 0 0 1px rgba(255,255,255,.06); } #shop-sections .card-media{ aspect-ratio:1/1; } #shop-sections .card-media img{ transition:transform .8s var(--ease, ease); } #shop-sections .card:hover .card-media img{ transform:scale(1.08); } /* item-shop scrim: name + price live ON the art */ .v2scrim{ position:absolute; left:0; right:0; bottom:0; z-index:2; pointer-events:none; display:flex; align-items:flex-end; justify-content:space-between; gap:.55rem; padding:2.4rem .8rem .66rem; background:linear-gradient(180deg, rgba(8,9,11,0), rgba(8,9,11,.62) 45%, rgba(8,9,11,.92)); } .v2scrim .v2name{ font:800 1rem/1.22 Inter,system-ui,sans-serif; color:#fff; letter-spacing:.005em; text-shadow:0 1px 8px rgba(0,0,0,.8); min-width:0; } .v2chip{ flex:none; background:linear-gradient(135deg,#f4e0ac,#c9a44f 60%,#e8ca85); color:#14161a; font:800 0.75rem/1 Inter,system-ui,sans-serif; letter-spacing:.01em; padding:.44rem .66rem; border-radius:9px; box-shadow:0 3px 12px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.6); } .v2chip small{ font-size:0.75rem; font-weight:800; opacity:.75; margin-right:.2rem; } /* body: art already carries the name — body carries pitch + CTA */ #shop-sections .card-body{ padding:.85rem .95rem 1rem; } #shop-sections .card-body h3{ display:none; } #shop-sections .card-body .desc{ font-size:0.875rem; color:#9aa0a9; } #shop-sections .card-foot{ margin-top:.8rem; gap:.6rem; } #shop-sections .v2-haschip .card-foot .price{ display:none; } /* price lives on the art (quote items keep their foot label) */ #shop-sections .card-foot .btn{ flex:1; justify-content:center; } #shop-sections .card-foot .btn--primary{ background:linear-gradient(135deg,#f4e0ac,#c9a44f 55%,#e8ca85); color:#14161a; border:none; font-weight:800; letter-spacing:.015em; box-shadow:0 4px 16px rgba(201,164,79,.28), inset 0 1px 0 rgba(255,255,255,.5); } #shop-sections .card-foot .btn--primary:hover{ filter:brightness(1.07); transform:translateY(-1px); } /* legendary tier: metallic gold edge + shine sweep */ .card--legend{ border:1px solid transparent !important; background: linear-gradient(180deg,#181a20,#0f1115) padding-box, linear-gradient(160deg, rgba(224,192,116,.72), rgba(224,192,116,.10) 38%, rgba(224,192,116,.05) 62%, rgba(224,192,116,.55)) border-box !important; } .card--legend:hover{ box-shadow:0 18px 44px -14px rgba(201,164,79,.30), 0 0 0 1px rgba(224,192,116,.35); } .card--legend .card-tag{ background:linear-gradient(135deg,#f4e0ac,#c9a44f); color:#14161a; border-color:transparent; font-weight:800; box-shadow:0 2px 10px rgba(0,0,0,.45); } /* shine sweep — GPU-only transform, fires once on hover (an always-on loop reads gimmicky AND costs frames) */ .card--legend .card-media::after{ content:""; position:absolute; top:0; bottom:0; left:0; width:45%; transform:translateX(-160%) skewX(-18deg); background:linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.15), rgba(255,255,255,0)); pointer-events:none; z-index:3; } .card--legend:hover .card-media::after{ animation:v2shine .9s ease-out 1; } @keyframes v2shine{ from{ transform:translateX(-160%) skewX(-18deg); } to{ transform:translateX(340%) skewX(-18deg); } } /* -------------------------- FEATURED ROW ----------------------------- */ #cat-featured{ position:relative; } #cat-featured::before{ content:""; position:absolute; top:-70px; left:50%; transform:translateX(-50%); width:min(920px,100vw); height:330px; pointer-events:none; background:radial-gradient(50% 50% at 50% 50%, rgba(224,192,116,.12), transparent 70%); } #cat-featured .cat-head h2::after{ width:84px; } .v2-feat-hint{ font-size:.75rem; color:#767b85; margin:-.35rem 0 .85rem; } #cat-featured .v2-feat-row{ display:flex; gap:1.05rem; overflow-x:auto; padding:.25rem .2rem 1.15rem; scroll-snap-type:x mandatory; scrollbar-width:none; -webkit-overflow-scrolling:touch; } #cat-featured .v2-feat-row::-webkit-scrollbar{ height:0; } #cat-featured .v2-feat-row .card{ flex:0 0 300px; scroll-snap-align:start; } /* IMAGE POSITIONING FIX (2026-08-29) — Featured was the ONLY row not on the site's 1:1 standard (the other 48 product cards are square), so the grid read broken, and the landscape boxes were destroying portrait phone photos. Measured on the live page: 900x1600 into 16:10 threw away 65% of the shot; 878x1560 into 4:3 threw away 58%. Squaring the row matches the rest of the site AND cuts the loss roughly in half (0.75 source: 44% -> 25%). Do NOT put these back to landscape: the source photos are portrait truck shots, so a wide box crops the product out of frame. */ #cat-featured .v2-feat-row .card-media{ aspect-ratio:1/1; } /* the spotlight card — this week's #1, twice the size */ #cat-featured .v2-feat-row .card.v2-big{ flex:0 0 min(560px, 88vw); } #cat-featured .v2-big .card-media{ aspect-ratio:4/3; } #cat-featured .v2-big .v2scrim .v2name{ font-size:1.28rem; } #cat-featured .v2-big .card-media::before{ content:"THIS WEEK'S PICK"; position:absolute; top:12px; right:12px; z-index:4; background:linear-gradient(135deg,#f4e0ac,#c9a44f); color:#14161a; font:800 0.75rem/1 Inter,system-ui,sans-serif; letter-spacing:.09em; padding:.44rem .7rem; border-radius:99px; box-shadow:0 3px 14px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.6); } /* 🔴 MOBILE ADD-TO-CART BLOCKER — repeated here because shopv2.css loads AFTER sitev2.css on shop.html, and the shop is where the money is. Full diagnosis in sitev2.css. Short version: the fixed `.v2-qc` contact panel (z-index 900, from components.js) sat ON TOP of the Quick View's Add to Cart button at 375px wide and swallowed every tap. Modal must outrank it. Keep any new fixed overlay <1000. */ .qv-overlay{ z-index:1000 !important; } body:has(.qv-overlay.open) .v2-qc, body:has(.qv-overlay.open) .ne-in{ display:none !important; } /* the fixed panels are a BOX with small controls — let taps pass through the empty space or they silently kill whatever is behind them (caught covering the "Real Installs" tab on a 375px phone). Same guard as sitev2.css. */ .v2-qc{ pointer-events:none !important; } .v2-qc a, .v2-qc button{ pointer-events:auto !important; } .ne-in{ pointer-events:none !important; } .ne-in a, .ne-in button{ pointer-events:auto !important; } /* the panel's own "Text us" link still overlapped the "Real Installs" tab at 375px — a real tap target beats pointer-events, so the tab was dead. Park it bottom-right on phones, clear of the tab rail AND the Quick View buy button. Mirrors sitev2.css. */ @media (max-width: 768px){ .v2-qc{ top:auto !important; bottom:calc(env(safe-area-inset-bottom, 0px) + 14px) !important; left:auto !important; right:12px !important; flex-direction:row !important; gap:.4rem !important; width:auto !important; max-width:calc(100vw - 24px) !important; } } /* ------------------- REAL INSTALLS — the truck wall ------------------ */ .v2-inst-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:.8rem; grid-auto-flow:dense; } .v2-inst{ position:relative; margin:0; border-radius:14px; overflow:hidden; cursor:zoom-in; border:1px solid rgba(255,255,255,.09); background:#101216; aspect-ratio:4/5; } /* INSTALL CROP FIX (2026-08-29) — measured on the live wall: the feature tile was an 8/5 LETTERBOX while the install photos are square or portrait (791x791, 878x878, 1920x1920, 1170x1560...). A 791x791 shot in a wide tile threw away 62% and a 1080x1920 threw away 65% — the decal itself was cropped out of frame, which is the opposite of what an install photo is for. Now it spans 2 COLUMNS x 2 ROWS as a SQUARE: same visual prominence (4x a normal tile), but a square source loses NOTHING instead of 62%. ⚠ Do NOT put this back to a wide ratio unless the photos assigned to it are landscape. */ .v2-inst--wide{ grid-column:span 2; grid-row:span 2; aspect-ratio:1/1; } .v2-inst img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .7s cubic-bezier(.2,.7,.3,1), filter .4s; } .v2-inst:hover img{ transform:scale(1.07); filter:brightness(1.06); } .v2-inst figcaption{ position:absolute; left:0; right:0; bottom:0; padding:1.6rem .65rem .5rem; font:650 0.75rem/1.3 Inter,system-ui,sans-serif; color:#e8e4d8; background:linear-gradient(180deg, transparent, rgba(8,9,11,.85)); opacity:0; transform:translateY(6px); transition:all .3s; pointer-events:none; } .v2-inst:hover figcaption{ opacity:1; transform:none; } .v2-sponsor{ display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin-top:1.15rem; padding:1.05rem 1.2rem; border-radius:16px; border:1px dashed rgba(224,192,116,.45); background:rgba(224,192,116,.05); } .v2-sponsor-txt{ font-size:0.875rem; color:#c9cdd5; min-width:0; } .v2-sponsor-txt b{ color:#f2ead4; } .v2-sponsor-sub{ display:block; margin-top:.3rem; font-size:0.75rem; color:#9299a4; } .v2-sponsor-sub a{ color:#e0c074; font-weight:700; text-decoration:none; } .v2-sponsor-sub a:hover{ text-decoration:underline; } #v2-lightbox{ position:fixed; inset:0; z-index:1000; display:none; align-items:center; justify-content:center; background:rgba(6,7,9,.94); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); cursor:zoom-out; padding:2.2vh 2.2vw; } #v2-lightbox.on{ display:flex; animation:v2fade .22s ease both; } #v2-lightbox img{ max-width:96vw; max-height:94vh; border-radius:12px; box-shadow:0 30px 90px rgba(0,0,0,.8); } #v2-lightbox .v2-lb-x{ position:absolute; top:12px; right:18px; font:300 2.2rem/1 Inter,sans-serif; color:#cfd3da; } @keyframes v2fade{ from{opacity:0} to{opacity:1} } /* ------------------- NESMITH AUDIO — the audio wing ------------------ */ /* same premium DNA, its own atmosphere: the violet stage-light of the builds */ .v2-audio{ position:relative; } .v2-audio::before{ content:""; position:absolute; top:-60px; left:50%; transform:translateX(-50%); width:min(960px,100vw); height:360px; pointer-events:none; background:radial-gradient(50% 50% at 50% 50%, rgba(147,84,255,.10), transparent 70%); } .v2-audio .cat-head h2{ background:linear-gradient(95deg,#f5f1e6,#cdb0ff 45%,#e0c074 80%); -webkit-background-clip:text; background-clip:text; } .v2-audio .v2-kick{ color:#b79aef; } .v2-audio .v2-kick::before{ background:linear-gradient(90deg,#a678ff,rgba(166,120,255,.12)); } /* special tab — the wing gets its own door */ .cat-nav a[data-tab="audio"]{ border-color:rgba(166,120,255,.5); color:#cdb0ff; } .cat-nav a[data-tab="audio"]:hover{ background:rgba(147,84,255,.08); border-color:#a678ff; color:#e6d9ff; } .cat-nav a[data-tab="audio"].active{ background:linear-gradient(135deg,#d8c3ff,#9a6bff 55%,#c0a1ff); color:#140f1e; box-shadow:0 4px 18px rgba(147,84,255,.4), inset 0 1px 0 rgba(255,255,255,.5); } /* cinematic video hero */ .v2-au-hero{ position:relative; border-radius:20px; overflow:hidden; margin:0 0 1.35rem; border:1px solid rgba(166,120,255,.3); background:#0d0b12; box-shadow:0 14px 44px -18px rgba(0,0,0,.8); } .v2-au-hero video{ width:100%; aspect-ratio:16/8.5; object-fit:cover; display:block; } .v2-au-scrim{ position:absolute; inset:0; display:flex; align-items:flex-end; background:linear-gradient(180deg, rgba(10,8,15,.15), rgba(10,8,15,.45) 55%, rgba(10,8,15,.92)); padding:1.5rem; } .v2-au-logo{ width:min(300px, 52%); display:block; margin-bottom:.55rem; filter:drop-shadow(0 4px 14px rgba(0,0,0,.6)); } @media (max-width:680px){ .v2-au-logo{ width:70%; } } .v2-au-flag{ display:inline-block; font:800 0.75rem/1 Inter,sans-serif; letter-spacing:.22em; text-transform:uppercase; color:#cdb0ff; margin-bottom:.6rem; } .v2-au-scrim h3{ font-family:'Playfair Display',Georgia,serif; font-size:clamp(1.5rem,4.5vw,2.3rem); color:#f4f1ea; margin-bottom:.45rem; letter-spacing:.005em; } .v2-au-scrim p{ max-width:460px; color:#b9b3c6; font-size:0.875rem; margin-bottom:1rem; } .v2-au-scrim p b{ color:#e6d9ff; } /* real stock chips — honest scarcity, suede swatches */ .v2-au-stock{ display:flex; align-items:center; flex-wrap:wrap; gap:.4rem .7rem; margin:.65rem 0 .1rem; padding:.55rem .7rem; border-radius:11px; border:1px solid rgba(166,120,255,.25); background:rgba(147,84,255,.05); } .v2-au-stock-t{ font:800 0.75rem/1 Inter,sans-serif; letter-spacing:.18em; text-transform:uppercase; color:#b79aef; } .v2-au-fin{ display:inline-flex; align-items:center; gap:.38rem; font:700 0.75rem/1 Inter,sans-serif; color:#d9dce2; } .v2-au-fin i{ width:12px; height:12px; border-radius:50%; display:inline-block; border:1px solid rgba(255,255,255,.25); box-shadow:inset 0 1px 2px rgba(255,255,255,.18); } /* spec strip — the competitive truth, stated plainly */ .v2-au-specs{ margin:0 0 1.1rem; padding:1.15rem 1.25rem; border-radius:18px; border:1px solid rgba(166,120,255,.3); background:radial-gradient(80% 130% at 10% 0%, rgba(147,84,255,.09), transparent 58%), rgba(147,84,255,.035); } .v2-au-specs-k{ display:block; font:800 0.75rem/1 Inter,sans-serif; letter-spacing:.2em; text-transform:uppercase; color:#b79aef; margin-bottom:.85rem; } .v2-au-specs-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:.85rem 1.1rem; } .v2-au-specs-row > div{ display:flex; flex-direction:column; gap:.2rem; } .v2-au-specs-row b{ font-family:'Playfair Display',Georgia,serif; font-size:1.32rem; color:#f2efe6; font-weight:600; line-height:1.1; } .v2-au-specs-row i{ font-style:normal; font-size:0.75rem; line-height:1.45; color:#9aa0a9; } .v2-au-specs-note{ margin:.9rem 0 0; font-size:0.75rem; color:#8f959f; } @media (max-width:680px){ .v2-au-specs-row{ grid-template-columns:repeat(2,1fr); gap:.7rem .8rem; } .v2-au-specs-row b{ font-size:1.1rem; } } /* audio product cards ride the standard tile system; violet-edge legend */ .v2-audio .card--legend, .v2-audio .card{ border-color:rgba(166,120,255,.22) !important; } .v2-audio .card .card-media{ aspect-ratio:4/3; } .v2-audio .card-media{ display:block; } /* one flagship product today (pods & cup-holders join when we have real pics) — centered spotlight */ .v2-au-grid{ margin-bottom:1.1rem; grid-template-columns:minmax(0,560px); justify-content:center; } /* media strip below the cards */ .v2-au-media{ display:grid; grid-template-columns:2fr 1fr 1fr; gap:.8rem; margin-bottom:1.15rem; } .v2-au-media .v2-inst{ aspect-ratio:auto; } .v2-au-media video, .v2-au-media img{ width:100%; height:100%; object-fit:cover; display:block; } .v2-au-media .v2-inst--wide{ grid-column:span 1; } .v2-audio .v2-sponsor{ border-color:rgba(166,120,255,.35); background:radial-gradient(80% 120% at 12% 0%, rgba(147,84,255,.08), transparent 60%), rgba(147,84,255,.04); } @media (max-width:680px){ .v2-au-hero video{ aspect-ratio:4/5; } .v2-au-scrim{ padding:1rem; } .v2-au-media{ grid-template-columns:1fr 1fr; } .v2-au-media .v2-inst--wide{ grid-column:span 2; } .v2-audio .card .card-media{ aspect-ratio:1/1; } } /* ------------------ GLASS SIZE FINDER — 📐 tab ----------------------- */ .v2-gs-measure{ display:grid; grid-template-columns:repeat(3,1fr) auto; gap:.9rem; align-items:center; margin:0 0 1.1rem; padding:1rem 1.1rem; border-radius:16px; border:1px solid rgba(224,192,116,.3); background:rgba(224,192,116,.05); } .v2-gs-step{ font-size:0.875rem; line-height:1.45; color:#b6bbc4; } .v2-gs-step b:first-child{ display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; margin-right:.5rem; border-radius:50%; background:linear-gradient(135deg,#f4e0ac,#c9a44f); color:#14161a; font:800 0.75rem/1 Inter,sans-serif; } .v2-gs-step b{ color:#e8e2d2; } .v2-gs-searchwrap{ margin:0 0 .9rem; } .v2-gs-search{ width:100%; padding:.8rem 1.1rem; border-radius:13px; font:550 1rem/1 Inter,sans-serif; color:#e8e4d8; background:rgba(255,255,255,.045); border:1px solid rgba(255,255,255,.14); outline:none; transition:border-color .2s; } .v2-gs-search:focus{ border-color:rgba(224,192,116,.6); } .v2-gs-make h3{ font-size:1rem; margin:1.15rem 0 .45rem; color:#e0c074; letter-spacing:.08em; text-transform:uppercase; font-weight:800; } .v2-gs-row{ display:flex; align-items:center; gap:1rem; padding:.72rem .9rem; margin-bottom:.45rem; border:1px solid rgba(255,255,255,.09); border-radius:13px; background:linear-gradient(180deg,#15171c,#101216); } .v2-gs-row.has{ border-color:rgba(224,192,116,.35); } .v2-gs-truck{ flex:1; min-width:0; font-size:0.875rem; color:#dfe2e8; } .v2-gs-truck b{ font-weight:750; } .v2-gs-truck span{ margin-left:.55rem; color:#8b9099; font-size:0.75rem; } .v2-gs-truck i{ display:block; font-style:normal; color:#767b85; font-size:0.75rem; margin-top:.15rem; } .v2-gs-size{ flex:none; font:800 1rem/1 Inter,sans-serif; color:#14161a; background:linear-gradient(135deg,#f4e0ac,#c9a44f); padding:.5rem .75rem; border-radius:9px; box-shadow:inset 0 1px 0 rgba(255,255,255,.55); } .v2-gs-pending{ flex:none; font-size:0.75rem; color:#8b9099; } /* ---------------- DESIGN STUDIO — your art on real glass -------------- */ .v2-st-wrap{ display:grid; grid-template-columns:minmax(0,1.5fr) minmax(320px,1fr); gap:1.4rem; align-items:start; } .v2-st-stage{ position:relative; border-radius:20px; overflow:hidden; user-select:none; border:1px solid rgba(224,192,116,.3); background:#0d0f13; aspect-ratio:16/10; box-shadow:0 18px 54px -22px rgba(0,0,0,.85); } .v2-st-bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; } .v2-st-decal{ position:absolute; transform:translate(-50%,-50%); cursor:grab; touch-action:none; z-index:2; filter:drop-shadow(0 3px 10px rgba(0,0,0,.55)); } .v2-st-decal:active{ cursor:grabbing; } .v2-st-decal img{ width:100%; display:block; pointer-events:none; } .v2-st-text{ display:block; text-align:center; white-space:nowrap; line-height:1.1; pointer-events:none; } .v2-st-text.f-script{ font-family:'Dancing Script','Playfair Display',cursive; font-weight:700; } .v2-st-text.f-serif{ font-family:'Playfair Display',Georgia,serif; font-style:italic; font-weight:700; } .v2-st-text.f-block{ font-family:'Anton','Arial Narrow',Inter,sans-serif; font-weight:400; letter-spacing:.012em; text-transform:uppercase; } /* double layer = the visible contrast outline (what +$5 actually buys) */ .v2-st-text.dbl{ -webkit-text-stroke:var(--dbl-stroke,.06em) var(--dbl-color,#131318); paint-order:stroke fill; } /* holographic vinyl */ .v2-st-text.c-holo{ background:conic-gradient(from 90deg,#ff9bb3,#a0e9ff,#c8ffd0,#ffe79b,#e0b3ff,#ff9bb3); -webkit-background-clip:text; background-clip:text; color:transparent; } .v2-st-text.c-red{ color:#d3122a; } .v2-st-text.c-purple{ color:#9061f0; } .v2-st-text.c-blue{ color:#2b6cff; } .v2-st-text.c-teal{ color:#08c5c5; } .v2-st-text.c-hotpink{ color:#ff2d9b; } .v2-st-text.sample{ opacity:.75; } /* size presets — real-world language */ .v2-st-presets{ display:flex; align-items:center; gap:.4rem; flex-wrap:wrap; } .v2-st-presets > span{ font:700 0.75rem/1 Inter,sans-serif; letter-spacing:.14em; text-transform:uppercase; color:#8f959f; } .v2-st-presets button{ padding:.42rem .7rem; border-radius:99px; cursor:pointer; font:700 0.75rem/1 Inter,sans-serif; color:#c3c8d1; background:transparent; border:1px solid rgba(255,255,255,.16); transition:all .2s; } .v2-st-presets button:hover{ border-color:rgba(224,192,116,.6); color:#e0c074; } #v2-st-save{ margin-top:-.35rem; } .v2-st-text.c-chrome{ background:linear-gradient(180deg,#ffffff,#c9ced6 45%,#8f959d 55%,#e9ebee); -webkit-background-clip:text; background-clip:text; color:transparent; } .v2-st-text.c-white{ color:#f4f4f0; } .v2-st-text.c-gold{ background:linear-gradient(180deg,#f7e7a6,#c9a44f 55%,#8a6d2f); -webkit-background-clip:text; background-clip:text; color:transparent; } .v2-st-text.c-black{ color:#101014; filter:drop-shadow(0 1px 3px rgba(255,255,255,.25)); } .v2-st-text.c-pink{ color:#ff2d9b; } .v2-st-hint{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font:650 0.75rem/1 Inter,sans-serif; letter-spacing:.12em; text-transform:uppercase; color:#b9b3a4; background:rgba(9,10,12,.35); pointer-events:none; } .v2-st-panel{ border:1px solid rgba(224,192,116,.25); border-radius:20px; padding:1.25rem 1.3rem; background:linear-gradient(180deg,#15171c,#0f1114); display:flex; flex-direction:column; gap:.95rem; } .v2-st-modes{ display:flex; gap:.5rem; } .v2-st-modes button, .v2-st-styles button, .v2-st-stagebtns button{ flex:1; padding:.62rem .8rem; border-radius:11px; cursor:pointer; font:700 0.75rem/1 Inter,sans-serif; letter-spacing:.1em; text-transform:uppercase; color:#a7adb8; background:transparent; border:1px solid rgba(255,255,255,.14); transition:all .2s; } .v2-st-modes button.on, .v2-st-styles button.on, .v2-st-stagebtns button.on{ background:linear-gradient(135deg,#f4e0ac,#c9a44f 55%,#e8ca85); color:#141414; border-color:transparent; font-weight:800; } .v2-st-field input[type="text"]{ width:100%; padding:.85rem 1rem; border-radius:12px; font:600 1rem/1 Inter,sans-serif; color:#f2efe6; background:#0e1013; border:1px solid rgba(255,255,255,.14); } .v2-st-styles{ display:flex; gap:.5rem; margin-top:.6rem; } /* 21 finishes now, not 9 — a single flex row squeezed them to slivers and pushed half of them off the panel. Wrap into a grid with real 34px touch targets. */ .v2-st-colors{ display:grid; grid-template-columns:repeat(auto-fill,minmax(34px,1fr)); gap:.5rem; margin-top:.55rem; } .v2-st-colors button{ width:100%; aspect-ratio:1; min-width:0; min-height:34px; padding:0; border-radius:9px; border:1px solid rgba(255,255,255,.14); background:transparent; cursor:pointer; overflow:hidden; transition:border-color .16s, transform .16s; -webkit-tap-highlight-color:transparent; } .v2-st-colors button i{ display:block; width:100%; height:100%; border-radius:7px; } .v2-st-colors button:hover{ border-color:rgba(224,192,116,.6); transform:translateY(-1px); } .v2-st-colors button.on{ border-color:#e0c074; box-shadow:0 0 0 2px rgba(224,192,116,.35), 0 4px 14px rgba(201,164,79,.3); } .v2-st-colors button:focus-visible{ outline:2px solid #e0c074; outline-offset:2px; } .v2-st-colors button{ width:34px; height:34px; border-radius:50%; padding:2px; cursor:pointer; background:transparent; border:2px solid transparent; transition:border-color .2s; } .v2-st-colors button i{ display:block; width:100%; height:100%; border-radius:50%; border:1px solid rgba(255,255,255,.25); } .v2-st-colors button.on{ border-color:#e0c074; } .v2-st-upload{ display:block; text-align:center; padding:1.1rem; border-radius:12px; cursor:pointer; border:1px dashed rgba(224,192,116,.5); color:#e0c074; font:700 0.75rem/1 Inter,sans-serif; letter-spacing:.1em; text-transform:uppercase; transition:background .2s; } .v2-st-upload:hover{ background:rgba(224,192,116,.07); } .v2-st-slider{ font:650 0.75rem/1.4 Inter,sans-serif; color:#a7adb8; } .v2-st-slider b{ color:#f2efe6; font-size:1rem; } .v2-st-slider input{ width:100%; margin-top:.45rem; accent-color:#c9a44f; } .v2-st-dbl{ display:flex; align-items:center; gap:.55rem; font:650 0.75rem/1.3 Inter,sans-serif; color:#d9dce2; cursor:pointer; } .v2-st-dbl input{ accent-color:#c9a44f; width:17px; height:17px; } .v2-st-dbl span{ color:#8f959f; font-weight:550; } .v2-st-stagebtns{ display:flex; gap:.5rem; align-items:center; } .v2-st-stagebtns > span{ font:700 0.75rem/1 Inter,sans-serif; letter-spacing:.14em; text-transform:uppercase; color:#8f959f; } .v2-st-price{ font:800 2rem/1 'Playfair Display',Georgia,serif; color:#f2efe6; padding-top:.4rem; border-top:1px solid rgba(224,192,116,.18); } .v2-st-price span{ display:block; font:650 0.75rem/1.4 Inter,sans-serif; letter-spacing:.1em; text-transform:uppercase; color:#8f959f; margin-top:.3rem; } .v2-st-note{ font-size:0.75rem; line-height:1.5; color:#8f959f; margin:0; } .v2-st-note b{ color:#c9a44f; } @media (max-width:900px){ .v2-st-wrap{ grid-template-columns:1fr; } .v2-st-stage{ aspect-ratio:4/3; } } /* ---------------- CLUB WING — the wall every crew wants on ------------ */ .v2-club-wing{ margin:0 0 1.5rem; } .v2-club-wall{ display:grid; grid-template-columns:repeat(4,1fr); gap:.8rem; margin-bottom:1rem; } .v2-club-wall figure{ position:relative; margin:0; border-radius:14px; overflow:hidden; border:1px solid rgba(255,255,255,.1); aspect-ratio:4/3; background:#0d0f13; } .v2-club-wall img{ width:100%; height:100%; object-fit:cover; display:block; filter:saturate(.94) contrast(1.04); transition:transform .6s cubic-bezier(.2,.7,.3,1); } .v2-club-wall figure:hover img{ transform:scale(1.06); } .v2-club-wall figcaption{ position:absolute; left:0; right:0; bottom:0; padding:1.4rem .7rem .55rem; font:800 0.875rem/1 Inter,sans-serif; letter-spacing:.06em; color:#f2efe6; background:linear-gradient(180deg, transparent, rgba(8,9,11,.85)); text-shadow:0 1px 6px rgba(0,0,0,.7); } .v2-club-you{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.3rem; border:1px dashed rgba(224,192,116,.55); border-radius:14px; aspect-ratio:4/3; color:#e0c074; font:800 1rem/1.2 Inter,sans-serif; text-decoration:none; text-align:center; background:rgba(224,192,116,.04); transition:background .2s, border-color .2s; } .v2-club-you:hover{ background:rgba(224,192,116,.1); border-color:#e0c074; } .v2-club-you span{ font:300 2.2rem/1 Inter,sans-serif; color:#c9a44f; } .v2-club-you i{ font:600 0.75rem/1.3 Inter,sans-serif; font-style:normal; color:#8f959f; letter-spacing:.08em; text-transform:uppercase; } .v2-club-perks{ display:grid; grid-template-columns:repeat(2,1fr); gap:.55rem .9rem; padding:1rem 1.15rem; border-radius:16px; border:1px solid rgba(224,192,116,.3); background:radial-gradient(80% 120% at 10% 0%, rgba(224,192,116,.07), transparent 60%), rgba(224,192,116,.03); font:550 0.875rem/1.5 Inter,sans-serif; color:#a9afb9; } .v2-club-perks b{ color:#e0c074; font-weight:750; } @media (max-width:680px){ .v2-club-wall{ grid-template-columns:repeat(2,1fr); gap:.55rem; } .v2-club-perks{ grid-template-columns:1fr; font-size:0.75rem; } } /* --------- THE CLUB PROGRAM — leadership tier, the competition killer --- */ .v2-prog{ margin-top:1.4rem; padding:1.5rem 1.6rem; border-radius:20px; border:1px solid rgba(224,192,116,.3); background: radial-gradient(90% 130% at 8% 0%, rgba(224,192,116,.08), transparent 58%), linear-gradient(180deg,#16181d,#0f1115); } .v2-prog-head{ max-width:680px; margin-bottom:1.4rem; } .v2-prog-head h3{ font-family:'Playfair Display',Georgia,serif; font-size:clamp(1.5rem,3.6vw,2.1rem); color:#f4f1ea; margin:.25rem 0 .5rem; } .v2-prog-head p{ color:#a9afb9; font-size:1rem; line-height:1.7; margin:0; } .v2-prog-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:.9rem; margin-bottom:1.3rem; } .v2-prog-card{ padding:1.1rem 1.15rem; border-radius:16px; border:1px solid rgba(255,255,255,.1); background:rgba(255,255,255,.025); } .v2-prog-role{ display:block; font:800 0.75rem/1 Inter,sans-serif; letter-spacing:.16em; text-transform:uppercase; color:#e0c074; margin-bottom:.7rem; padding-bottom:.55rem; border-bottom:1px solid rgba(224,192,116,.22); } .v2-prog-card ul{ margin:0; padding:0; list-style:none; } .v2-prog-card li{ position:relative; padding-left:1.05rem; margin-bottom:.5rem; font-size:0.875rem; line-height:1.55; color:#b3b9c2; } .v2-prog-card li::before{ content:""; position:absolute; left:0; top:.55em; width:5px; height:5px; border-radius:50%; background:linear-gradient(135deg,#f4e0ac,#c9a44f); } .v2-prog-vault{ display:grid; grid-template-columns:1.15fr 1fr; gap:1.3rem; align-items:center; padding-top:1.3rem; border-top:1px solid rgba(224,192,116,.2); } .v2-prog-vault-art{ display:grid; grid-template-columns:repeat(3,1fr); gap:.5rem; } .v2-prog-vault-art img{ width:100%; aspect-ratio:1/1; object-fit:contain; display:block; padding:.5rem; background:#f4f2ec; border-radius:11px; border:1px solid rgba(224,192,116,.25); } .v2-prog-vault-txt b{ display:block; font-family:'Playfair Display',Georgia,serif; font-size:1.2rem; color:#f2efe6; margin-bottom:.4rem; } .v2-prog-vault-txt p{ color:#a9afb9; font-size:0.875rem; line-height:1.65; margin:0 0 .9rem; } .v2-prog-vault-txt p b{ display:inline; font-family:inherit; font-size:inherit; color:#e0c074; } .v2-prog-vault-txt .btn{ margin-right:.5rem; margin-bottom:.4rem; } @media (max-width:900px){ .v2-prog-grid{ grid-template-columns:1fr; } .v2-prog-vault{ grid-template-columns:1fr; } } @media (max-width:680px){ .v2-prog{ padding:1.15rem 1.1rem; } .v2-prog-vault-art{ grid-template-columns:repeat(3,1fr); gap:.4rem; } .v2-prog-vault-txt .btn{ width:100%; justify-content:center; margin-right:0; } } /* ---------------- DEPARTMENT BANNERS — every tab is a storefront ------ */ .v2-dept{ position:relative; border-radius:20px; overflow:hidden; margin:0 0 1.4rem; border:1px solid rgba(255,255,255,.1); background:#0d0f13; box-shadow:0 16px 48px -20px rgba(0,0,0,.8); } .v2-dept img{ width:100%; aspect-ratio:21/7; object-fit:cover; display:block; filter:saturate(.94) contrast(1.04); } .v2-dept-scrim{ position:absolute; inset:0; display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; padding:1.4rem 1.6rem; background:linear-gradient(92deg, rgba(9,10,12,.78) 0%, rgba(9,10,12,.42) 45%, rgba(9,10,12,.05) 75%), linear-gradient(180deg, rgba(9,10,12,.1), rgba(9,10,12,0) 40%, rgba(9,10,12,.72) 96%); } .v2-dept-scrim h2{ font-family:'Playfair Display',Georgia,serif; font-size:clamp(1.7rem, 4.5vw, 2.7rem); color:#f4f1ea; margin:.2rem 0 .3rem; letter-spacing:.004em; } .v2-dept-scrim p{ color:#c3bfb2; font-size:1rem; max-width:480px; margin:0; text-shadow:0 1px 8px rgba(0,0,0,.7); } .v2-dept-count{ flex:none; align-self:flex-end; font:700 0.75rem/1 Inter,sans-serif; letter-spacing:.16em; text-transform:uppercase; color:#b9b3a4; padding:.5rem .8rem; border:1px solid rgba(224,192,116,.35); border-radius:99px; background:rgba(9,10,12,.55); } /* the installs wall opens with a full-bleed magazine spread */ #cat-installs .v2-inst:first-child{ grid-column:1 / -1; aspect-ratio:21/8; } #cat-installs .v2-inst:first-child img{ object-position:50% 74% !important; } /* ultra-wide cut: keep the truck, lose the sky */ #cat-installs .v2-inst:first-child figcaption{ font-size:0.75rem; padding:2rem .9rem .7rem; } @media (max-width:680px){ .v2-dept img{ aspect-ratio:4/3; } .v2-dept-scrim{ padding:.95rem 1rem; } .v2-dept-scrim h2{ font-size:1.5rem; } .v2-dept-scrim p{ font-size:0.875rem; } .v2-dept-count{ display:none; } #cat-installs .v2-inst:first-child{ aspect-ratio:16/10; } } /* ------------- EVERY TAB FINISHED — closers, sparse grids, meta ------- */ .v2-closer{ margin-top:1.35rem; } /* 1–2 piece categories: centered pair, never a void */ .cat-section[data-few="1"] .grid--3{ grid-template-columns:repeat(2, minmax(0, 430px)) !important; justify-content:center; } /* the size/price meta line: editorial small caps, gold interpuncts */ .v2-meta{ font-size:0.75rem !important; letter-spacing:.12em !important; text-transform:uppercase; font-weight:650 !important; color:#8f959f !important; } /* apparel coming-soon panel joins the canon */ .coming-soon-panel{ border:1px solid rgba(224,192,116,.32) !important; border-radius:20px !important; background:radial-gradient(80% 120% at 12% 0%, rgba(224,192,116,.07), transparent 60%), #101216 !important; } .coming-soon-panel .cs-title{ font-family:'Playfair Display',Georgia,serif !important; color:#f2efe6 !important; } .coming-soon-panel .cs-badge{ background:linear-gradient(135deg,#f4e0ac,#c9a44f) !important; color:#141414 !important; font-weight:800 !important; letter-spacing:.1em; } @media (max-width:680px){ .cat-section[data-few="1"] .grid--3{ grid-template-columns:repeat(2,1fr) !important; } } /* ----------------------- TAB-SWITCH STAGGER -------------------------- */ .cat-section.v2-in .card{ animation:v2up .55s cubic-bezier(.18,.7,.28,1) both; } .cat-section.v2-in .card:nth-child(2){animation-delay:.05s} .cat-section.v2-in .card:nth-child(3){animation-delay:.1s} .cat-section.v2-in .card:nth-child(4){animation-delay:.15s} .cat-section.v2-in .card:nth-child(5){animation-delay:.2s} .cat-section.v2-in .card:nth-child(6){animation-delay:.25s} .cat-section.v2-in .card:nth-child(n+7){animation-delay:.3s} @keyframes v2up{ from{opacity:0; transform:translateY(16px) scale(.985)} to{opacity:1; transform:none} } /* ========================================================================== CHECKOUT PIPELINE V2 — the buying moment wears the same suit (checkout.js injects .co-* markup at runtime; these override its bones) ========================================================================== */ .co-overlay .co, .co{ border:1px solid rgba(224,192,116,.28) !important; border-radius:18px !important; } .co-head, .co h2, .co-title{ font-family:'Playfair Display',Georgia,serif !important; letter-spacing:.005em; } .co-paybtn, .co [data-co-pay]{ background:linear-gradient(135deg,#f4e0ac,#c9a44f 55%,#e8ca85) !important; color:#14161a !important; font-weight:800 !important; letter-spacing:.03em; border:none !important; box-shadow:0 6px 22px rgba(201,164,79,.35), inset 0 1px 0 rgba(255,255,255,.55) !important; } .co-paybtn:hover, .co [data-co-pay]:hover{ filter:brightness(1.06); } .co-card{ border:1px solid rgba(224,192,116,.35) !important; border-radius:12px !important; } .co-cardlabel{ color:#c9a44f !important; letter-spacing:.14em !important; } .co-reqnote{ border-radius:12px; } /* cart drawer, same DNA */ .cart-drawer, [data-cart-drawer], .cart-panel{ border-left:1px solid rgba(224,192,116,.25) !important; } .cart-drawer .btn--primary, .cart-panel .btn--primary{ background:linear-gradient(135deg,#f4e0ac,#c9a44f 55%,#e8ca85) !important; color:#14161a !important; font-weight:800 !important; border:none !important; } /* crisper type everywhere on the dark ground */ html{ -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } /* ========================================================================== LUXURY CANON — one language on every surface. No seams, nothing cheap. Gold gradient = action. Serif = title. 18px panels / 12px controls. ========================================================================== */ /* ---- buttons: one action color across the whole page ---- */ .btn{ border-radius:12px !important; } .btn--buy, .btn--primary, .btn--gold{ background:linear-gradient(135deg,#f4e0ac,#c9a44f 55%,#e8ca85) !important; color:#14161a !important; font-weight:800 !important; border:none !important; box-shadow:0 4px 16px rgba(201,164,79,.25), inset 0 1px 0 rgba(255,255,255,.5) !important; } .btn--buy:hover, .btn--primary:hover, .btn--gold:hover{ filter:brightness(1.06); transform:translateY(-1px); } .btn--ghost{ background:transparent !important; color:#e0c074 !important; border:1px solid rgba(224,192,116,.45) !important; } .btn--ghost:hover{ background:rgba(224,192,116,.1) !important; color:#f2e5c4 !important; } /* the card grid keeps its quiet outline CTAs (declared later, stronger selector) */ #shop-sections .card-foot .btn--primary, #shop-sections .card-foot .btn--gold{ background:transparent !important; color:#e0c074 !important; border:1px solid rgba(224,192,116,.45) !important; box-shadow:none !important; } #shop-sections .card-foot .btn--primary:hover, #shop-sections .card-foot .btn--gold:hover{ background:linear-gradient(135deg,#f4e0ac,#c9a44f 55%,#e8ca85) !important; color:#141414 !important; border-color:transparent !important; } /* ---- quick view: the fitting room wears the suit ---- */ .qv{ background:linear-gradient(180deg,#16181d,#0f1115) !important; border:1px solid rgba(224,192,116,.28) !important; border-radius:20px !important; box-shadow:0 30px 90px rgba(0,0,0,.75) !important; } .qv-body h2, .qv-body h3{ font-family:'Playfair Display',Georgia,serif !important; } .qv-media img{ border-radius:14px !important; } .qv-thumb{ border-radius:10px !important; border:1px solid rgba(255,255,255,.12) !important; } .qv-thumb.sel{ border-color:#e0c074 !important; box-shadow:0 0 0 1px rgba(224,192,116,.4) !important; } .qv-body input, .qv-body select, .qv-body textarea{ background:#0e1013 !important; border:1px solid rgba(255,255,255,.13) !important; border-radius:12px !important; transition:border-color .2s, box-shadow .2s; } .qv-body input:focus, .qv-body select:focus, .qv-body textarea:focus{ border-color:rgba(224,192,116,.6) !important; box-shadow:0 0 0 3px rgba(224,192,116,.12) !important; outline:none !important; } .qv-body .swatch.sel{ box-shadow:0 0 0 2px #0f1115, 0 0 0 4px #e0c074 !important; } .qv-table th{ color:#c9a44f !important; letter-spacing:.12em; text-transform:uppercase; font-size:0.75rem !important; } .qv-table td{ border-color:rgba(255,255,255,.07) !important; } .qv-close{ border-radius:50% !important; border:1px solid rgba(255,255,255,.15) !important; transition:border-color .2s, color .2s; } .qv-close:hover{ border-color:rgba(224,192,116,.6) !important; color:#e0c074 !important; } /* ---- cart drawer: same room, same light ---- */ .cart-drawer{ background:linear-gradient(180deg,#14161b,#0e1013) !important; border-left:1px solid rgba(224,192,116,.28) !important; box-shadow:-24px 0 70px rgba(0,0,0,.6) !important; } .cart-head{ font-family:'Playfair Display',Georgia,serif !important; border-bottom:1px solid rgba(224,192,116,.18) !important; } .cart-x:hover{ color:#e0c074 !important; } .cart-items > *{ border-bottom:1px solid rgba(255,255,255,.06); } .cart-emptysell{ border-top:1px solid rgba(224,192,116,.16) !important; } /* ---- pricing table + ways-to-save on the shop page ---- */ .price-table{ border:1px solid rgba(224,192,116,.2) !important; border-radius:14px !important; overflow:hidden; } .price-table th{ color:#c9a44f !important; letter-spacing:.1em; text-transform:uppercase; font-size:0.75rem !important; } .ways-to-save span{ border:1px solid rgba(224,192,116,.3) !important; border-radius:10px !important; background:rgba(224,192,116,.05) !important; } /* ------------- TYPE SCALE DISCIPLINE — real weights, real presence -------- */ /* (pages now load Inter 300–800 variable: 750/800 render TRUE, not synthetic) */ .cat-head h2{ font-size:clamp(1.7rem, 4.6vw, 2.4rem); font-weight:600; } .v2scrim .v2name{ font-size:1rem; font-weight:760; } .v2chip{ font-size:0.875rem; padding:.48rem .72rem; } #cat-featured .v2-big .v2scrim .v2name{ font-size:1.42rem; } #cat-featured .v2-feat-row .card{ flex:0 0 320px; } #cat-featured .v2-feat-row .card.v2-big{ flex:0 0 min(600px, 88vw); } #shop-sections .card-body .desc{ font-size:0.875rem; line-height:1.6; } .v2-kick{ font-size:0.75rem; } @media (max-width:680px){ .v2scrim .v2name{ font-size:0.875rem; } .v2chip{ font-size:0.75rem; } #cat-featured .v2-big .v2scrim .v2name{ font-size:1.15rem; } } /* ---------------- THE GENEVA PASS (shop) — restraint --------------------- */ /* section titles: warm ivory serif; gold stays in the kicker line only */ .cat-head h2{ background:none; -webkit-background-clip:initial; background-clip:initial; color:#efece2; } .v2-audio .cat-head h2{ background:none; -webkit-background-clip:initial; background-clip:initial; color:#efece2; } /* trust strip: neutral voice, gold only where it counts */ .v2-trust{ color:#8f959f; } .v2-trust b{ color:#d6d2c4; } .v2-trust .v2-star{ color:#c9a44f; } /* one photographic grade across the whole grid */ #shop-sections .card-media img, .v2-inst img, .qv-media img{ filter:saturate(.94) contrast(1.04) brightness(.99); } /* announce bar whisper — EXACT class only (a [class*=] here once matched html.has-announce and uppercased the entire page — never again) */ /* ⚠ DUPLICATE OF THE SAME BLOCK IN sitev2.css — shopv2 loads LAST so THIS one wins. Changing only sitev2.css looks like it does nothing. Keep both in sync or delete one. TYPE AUDIT 2026-08-29: .68rem rendered at 10.88px, too small for a strip on every page. */ div.announce-bar{ font-size:0.75rem !important; letter-spacing:.14em !important; text-transform:uppercase; font-weight:650 !important; color:#8f959f !important; background:#050607 !important; border-bottom:1px solid rgba(255,255,255,.05); padding-top:.5rem !important; padding-bottom:.5rem !important; } div.announce-bar b, div.announce-bar strong, div.announce-bar a{ color:#c9a44f !important; font-weight:750 !important; } /* header nav tracked out — .84rem not .74rem (TYPE AUDIT 2026-08-29: 11.84px was too small for primary nav; must stay in sync with the same rule in sitev2.css) */ #site-header nav a{ font-size:0.875rem !important; letter-spacing:.16em !important; text-transform:uppercase; font-weight:650 !important; } /* air between sections */ .cat-section{ padding-top:1.6rem; } /* ---------------------------- ATMOSPHERE ----------------------------- */ body[data-page="shop"]::-webkit-scrollbar{ width:11px; } body[data-page="shop"]::-webkit-scrollbar-track{ background:#0c0d0f; } body[data-page="shop"]::-webkit-scrollbar-thumb{ background:linear-gradient(180deg,#c9a44f,#7d5f23); border-radius:8px; border:2px solid #0c0d0f; } @media (prefers-reduced-motion: reduce){ body[data-page="shop"] .page-hero h1{ animation:none; } .card--legend .card-media::after{ animation:none; } .cat-section.v2-in .card{ animation:none; } } /* ------------------------------ PHONE -------------------------------- */ @media (max-width: 680px){ .cat-nav{ padding:.62rem 0 .7rem; } .cat-nav a{ padding:.58rem .88rem; font-size:0.875rem; } .v2-trust{ justify-content:flex-start; font-size:.75rem; gap:.5rem 1.1rem; } #shop-sections .grid--3{ grid-template-columns:repeat(2,1fr); gap:.72rem; } #shop-sections .card{ border-radius:15px; } #shop-sections .card-body{ padding:.6rem .65rem .7rem; } #shop-sections .card-body .desc{ display:none; } /* art + name + price sells on phone */ #shop-sections .card-foot{ margin-top:0; } #shop-sections .card-foot .btn{ width:100%; padding:.62rem .5rem; font-size:0.75rem; } .v2scrim{ padding:2rem .6rem .55rem; } .v2scrim .v2name{ font-size:0.875rem; } .v2chip{ font-size:0.75rem; padding:.4rem .55rem; } #cat-featured .v2-feat-row .card{ flex:0 0 74vw; } #cat-featured .v2-feat-row .card.v2-big{ flex:0 0 88vw; } #cat-featured .v2-feat-row .card-body .desc{ display:-webkit-box; } /* featured keeps its pitch */ .v2-inst-grid{ grid-template-columns:repeat(2,1fr); gap:.55rem; } .v2-inst figcaption{ opacity:1; transform:none; font-size:0.75rem; padding:1.2rem .5rem .4rem; } .v2-sponsor{ flex-direction:column; align-items:stretch; text-align:center; } .v2-gs-measure{ grid-template-columns:1fr; gap:.7rem; } .v2-gs-measure .btn{ width:100%; justify-content:center; } .v2-gs-row{ flex-wrap:wrap; gap:.5rem .8rem; } .v2-gs-row .btn{ width:100%; justify-content:center; } } /* ========================================================================== PREMIUM POLISH PASS — editorial typography, gold hairlines, no cheapness ========================================================================== */ /* gold kicker above every section title (injected by shopv2.js) */ .v2-kick{ display:flex; align-items:center; gap:.55rem; font:800 0.75rem/1 Inter,system-ui,sans-serif; letter-spacing:.24em; text-transform:uppercase; color:#c9a44f; margin-bottom:.5rem; } .v2-kick::before{ content:""; width:22px; height:1px; background:linear-gradient(90deg,#e0c074,rgba(224,192,116,.15)); } .cat-head{ align-items:flex-end; } .cat-head > div{ min-width:0; } /* DECLUTTER: luxury is fewer words. Hint lines, breadcrumb, helper text — gone. The art, the titles and the prices carry the room. */ .v2-feat-hint{ display:none; } body[data-page="shop"] .breadcrumb{ display:none; } body[data-page="shop"] .shop-search-wrap ~ p:not(#shop-search-count){ display:none; } /* trust strip — typographic, gold separators, zero emoji */ .v2-trust{ font-size:0.75rem; letter-spacing:.05em; } .v2-trust span + span::before{ content:"\00B7"; margin-right:1.5rem; color:rgba(224,192,116,.55); font-weight:900; } .v2-trust .v2-star{ color:#e0c074; letter-spacing:.06em; } /* cards — inner hairline + deeper radius finish */ #shop-sections .card{ box-shadow:0 8px 26px -14px rgba(0,0,0,.7), inset 0 0 0 1px rgba(255,255,255,.025); } /* perf note: content-visibility was here and caused scroll-jank/flicker ("glitchy") — hidden tabs are display:none (zero cost already) and lazy imgs handle the rest. */ /* sponsor / chart bands — solid gold hairline, soft interior glow */ .v2-sponsor{ border:1px solid rgba(224,192,116,.38); background: radial-gradient(80% 120% at 12% 0%, rgba(224,192,116,.08), transparent 60%), rgba(224,192,116,.035); box-shadow:inset 0 1px 0 rgba(255,255,255,.05); } .v2-sponsor-txt b{ font-family:'Playfair Display',Georgia,serif; font-size:1rem; letter-spacing:.01em; } /* lightbox — gallery-frame finish */ #v2-lightbox img{ border:1px solid rgba(224,192,116,.35); } /* measure guide — gilded panel */ .v2-gs-measure{ border:1px solid rgba(224,192,116,.34); background: radial-gradient(70% 130% at 8% 0%, rgba(224,192,116,.09), transparent 55%), rgba(224,192,116,.035); box-shadow:inset 0 1px 0 rgba(255,255,255,.05); } /* tab rail — glass finish with gold hairline */ .cat-nav{ border-top:1px solid rgba(255,255,255,.05); background:linear-gradient(180deg, rgba(12,13,15,.97), rgba(12,13,15,.92)) !important; } /* ========================================================================== QUIET-LUXURY PASS — typographic tabs, restrained CTAs, art direction, air ========================================================================== */ /* tabs: pure typography — small caps, tracked out, hairline pills */ .cat-nav a{ font:700 0.75rem/1 Inter,system-ui,sans-serif; letter-spacing:.14em; text-transform:uppercase; color:#a7adb8; padding:.72rem 1.15rem; border-radius:10px; border:1px solid rgba(255,255,255,.11); background:transparent; } .cat-nav a:hover{ transform:none; color:#f2ead4; border-color:rgba(224,192,116,.5); background:rgba(224,192,116,.05); } .cat-nav a.active{ background:linear-gradient(135deg,#f0d9a2,#c9a44f 55%,#e8ca85); color:#141414; font-weight:800; letter-spacing:.14em; box-shadow:0 4px 18px rgba(201,164,79,.35), inset 0 1px 0 rgba(255,255,255,.5); } /* hero: restraint — headline carries it, everything else steps back */ body[data-page="shop"] .page-hero .v2-sub{ max-width:520px; font-size:1rem; color:#c6c3b8; } body[data-page="shop"] .page-hero .reveal[style*="flex-wrap"]{ display:none !important; } /* meta chip row duplicates the trust strip */ /* NOTE: the shop hero's photo + scrim are declared ONCE at the top of this file. A duplicate block lived here and silently re-applied the old three-layer scrim (the "slab wall" bug) plus a stale crop. Deleted — never re-declare the hero. */ /* search — jewelry-case finish */ .shop-search{ border-radius:13px !important; border-color:rgba(255,255,255,.13) !important; background:rgba(255,255,255,.04) !important; font-weight:550 !important; } .shop-search:focus{ border-color:rgba(224,192,116,.55) !important; box-shadow:0 0 0 3px rgba(224,192,116,.12) !important; } /* art direction: portrait workbench shots keep monitors at the top of frame — bias every card crop toward the work itself */ #shop-sections .card-media img{ object-position:50% 62%; } #cat-featured .v2-feat-row .card-media img{ object-position:50% 55%; } /* CTAs: quiet until earned — hairline gold outline, fills on hover. The full gold button lives in the quick view where the decision happens. */ #shop-sections .card-foot .btn--primary, #shop-sections .card-foot .btn--gold, #shop-sections .card-foot .btn--ghost{ background:transparent; color:#e0c074; border:1px solid rgba(224,192,116,.45); font:700 0.75rem/1 Inter,sans-serif; letter-spacing:.12em; text-transform:uppercase; box-shadow:none; padding:.72rem .6rem; border-radius:10px; } #shop-sections .card-foot .btn--primary:hover, #shop-sections .card-foot .btn--gold:hover{ background:linear-gradient(135deg,#f0d9a2,#c9a44f 55%,#e8ca85); color:#141414; border-color:transparent; transform:none; filter:none; } /* air — luxury needs negative space */ .cat-section{ padding-top:1.2rem; } .cat-head{ margin:2.1rem 0 1.35rem; } #shop-sections .grid--3{ gap:1.35rem; } #shop-sections .card-body{ padding:1rem 1.05rem 1.1rem; } #shop-sections .card-body .desc{ font-size:0.75rem; line-height:1.55; color:#8f96a0; } /* scrim type — tracked, refined */ .v2scrim .v2name{ font-weight:750; letter-spacing:.015em; } .v2chip{ font-weight:800; } /* section count — align with the editorial system */ .cat-count{ font-size:0.75rem; letter-spacing:.16em; color:#767b85; } @media (max-width:680px){ .cat-nav a{ font-size:0.75rem; padding:.62rem .85rem; letter-spacing:.11em; } #shop-sections .grid--3{ gap:.8rem; } #shop-sections .card-foot .btn{ font-size:0.75rem; padding:.66rem .4rem; } } /* ONLINE ONLY — hide the retired local-pickup toggle (see sitev2.css) */ #co-pickup293, label[for="co-pickup293"]{ display:none !important; } .co-row:has(#co-pickup293){ display:none !important; } /* ── QUICK VIEW: THE RESTRAINT PASS (2026-08-29) ─────────────────────────── Chris: "this looks cheap." It did. The panel stated the price ladder three times and the layer choice twice. Everything reference now lives inside ONE closed disclosure; these rules make that disclosure read as a quiet, premium affordance rather than a collapsed dump of leftovers. */ .qv-sizeguide{ margin:.85rem 0 .2rem; border:1px solid rgba(255,255,255,.09); border-radius:12px; background:linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.012)); overflow:hidden; } .qv-sizeguide > summary{ list-style:none; cursor:pointer; padding:.72rem .9rem; font:650 0.875rem/1 Inter,system-ui,sans-serif; color:#b9bfc9; display:flex; align-items:center; justify-content:space-between; gap:.6rem; transition:color .2s, background .2s; -webkit-tap-highlight-color:transparent; } .qv-sizeguide > summary::-webkit-details-marker{ display:none; } .qv-sizeguide > summary::after{ content:"+"; font:400 1.15rem/1 Inter,system-ui,sans-serif; color:#c9a44f; transition:transform .25s var(--ease, ease); flex:none; } .qv-sizeguide[open] > summary::after{ transform:rotate(45deg); } .qv-sizeguide > summary:hover{ color:#f0ece2; background:rgba(224,192,116,.05); } .qv-sizeguide[open] > summary{ border-bottom:1px solid rgba(255,255,255,.07); color:#f0ece2; } .qv-sizeguide .sg-rows, .qv-sizeguide .qv-table, .qv-sizeguide .sg-tip{ margin-left:.9rem; margin-right:.9rem; } .qv-sizeguide .sg-rows{ margin-top:.85rem; } .qv-sizeguide .qv-table{ width:calc(100% - 1.8rem); margin-top:.9rem; } .qv-sizeguide .sg-tip{ margin-top:.7rem; padding-bottom:.15rem; font:400 0.75rem/1.6 Inter,system-ui,sans-serif; color:#878d97; } .qv-sizeguide .sg-tip:last-child{ padding-bottom:.9rem; } .qv-sizeguide .sg-tip b{ color:#b9bfc9; font-weight:650; } .sg-pop{ font-size:0.75rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; background:rgba(224,192,116,.14); color:#e0c074; border-radius:4px; padding:2px 6px; margin-left:6px; white-space:nowrap; } /* the live size/price readout is now the loudest thing in the block — it earned that */ .qv-live{ font-size:1rem; } /* ── QV PICKER — tap, don't type (2026-08-29) ────────────────────────────── Chips that drive the real controls. Sized for thumbs (44px+ targets), one loud gold selection per group, everything else quiet. See js/qvpicker.js. */ .qvp{ margin:.9rem 0 .2rem; } .qvp-lab{ font:650 0.75rem/1 Inter,system-ui,sans-serif; letter-spacing:.09em; text-transform:uppercase; color:#8b9099; margin:0 0 .55rem; } .qvp-chips{ display:grid; grid-template-columns:repeat(auto-fit,minmax(88px,1fr)); gap:.5rem; } .qvp-chip{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.2rem; min-height:56px; padding:.55rem .5rem; cursor:pointer; border:1px solid rgba(255,255,255,.13); border-radius:13px; background:linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.012)); color:#c3c8d1; transition:border-color .18s, background .18s, transform .18s, color .18s; -webkit-tap-highlight-color:transparent; text-align:center; } .qvp-chip:hover{ border-color:rgba(224,192,116,.45); color:#f0ece2; transform:translateY(-1px); } .qvp-chip .qvp-t{ font:700 0.875rem/1.1 Inter,system-ui,sans-serif; } .qvp-chip .qvp-p{ font:600 0.75rem/1 Inter,system-ui,sans-serif; color:#8b9099; letter-spacing:.01em; } .qvp-chip.on{ border-color:transparent; color:#14161a; background:linear-gradient(135deg,#f4e0ac,#c9a44f 55%,#e8ca85); box-shadow:0 5px 18px rgba(201,164,79,.34), inset 0 1px 0 rgba(255,255,255,.55); } .qvp-chip.on .qvp-p{ color:rgba(20,22,26,.66); } .qvp-chip:focus-visible{ outline:2px solid #e0c074; outline-offset:2px; } /* the exact-inches box is now the secondary path, so it reads as one */ .qvp-exact{ margin-top:.6rem; } .qvp-exact label{ font-size:0.75rem !important; color:#7d838d !important; } .qvp-exact input{ max-width:150px; } /* the