/* ============================================================================ * MITD v5 — SPACE Mall storefront * /home/darkspac/public_html/MITD/v5/assets/css/shop.css * * Deliberately LIGHT, where the admin console is dark. * * They are for different people doing different things. The console is a tool * someone stares at for hours, so it is dark and dense. The storefront is a shop * window: handmade jewellery photographed on a neutral ground, and the job of * everything around it is to get out of the way of the photograph. * * --brand is set per-store on from mall_stores.brand_color, so store #2 * is themed by a DB row rather than a stylesheet. * ========================================================================= */ :root{ --shop-bg: #ffffff; --shop-soft: #faf9f7; --shop-line: #e8e4dd; --shop-ink: #1a1815; --shop-ink-2: #5c574f; --shop-ink-3: #918a7e; --shop-ok: #1f7a4d; --shop-alert: #b4342b; --brand: #c9a67b; } *{ box-sizing: border-box; } .shopBody{ margin:0; background:var(--shop-bg); color:var(--shop-ink); font-family:ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; font-size:15px; line-height:1.6; -webkit-font-smoothing:antialiased; } a{ color:inherit; } /* ── HEADER ────────────────────────────────────────────────────────────── */ .shopHeader{ position:sticky; top:0; z-index:50; background:rgba(255,255,255,.94); backdrop-filter:blur(10px); border-bottom:1px solid var(--shop-line); } .shopHeaderInner{ display:flex; align-items:center; justify-content:space-between; gap:18px; max-width:1180px; margin:0 auto; padding:15px 24px; } .shopBrand{ display:flex; align-items:center; gap:11px; text-decoration:none; min-width:0; } .shopBrand img{ width:38px; height:38px; border-radius:8px; object-fit:cover; } .shopBrand strong{ display:block; font-size:19px; font-weight:700; letter-spacing:-.02em; } .shopBrand small{ display:block; font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--shop-ink-3); } .shopHeaderRight{ display:flex; align-items:center; gap:11px; } .shopSearch input{ width:190px; padding:8px 13px; border:1px solid var(--shop-line); border-radius:999px; background:var(--shop-soft); font-family:inherit; font-size:13.5px; } .shopSearch input:focus{ outline:none; border-color:var(--brand); background:#fff; } .shopCartBtn{ display:inline-flex; align-items:center; gap:7px; padding:9px 17px; border:1px solid var(--shop-ink); border-radius:999px; font-size:13px; font-weight:600; text-decoration:none; transition:background .15s, color .15s; } .shopCartBtn:hover, .shopCartBtn.is-on{ background:var(--shop-ink); color:#fff; } .shopCartBtn b{ display:inline-flex; align-items:center; justify-content:center; min-width:20px; height:20px; padding:0 6px; border-radius:999px; background:var(--brand); color:#fff; font-size:11px; } /* Member sign-in / sign-out — brand-filled so it reads as native to each store. --brand is set per-store on (shop.php), so it matches whatever store you are in. Both share one pill so the nav slot is the same size either way. */ .shopSignIn, .shopSignOut{ display:inline-flex; align-items:center; font-size:13px; font-weight:600; color:#fff; text-decoration:none; white-space:nowrap; background:var(--brand, #7c6cff); border:1px solid var(--brand, #7c6cff); padding:8px 16px; border-radius:999px; transition:filter .15s, transform .05s; } .shopSignIn:hover, .shopSignOut:hover{ filter:brightness(1.1); } .shopSignIn:active, .shopSignOut:active{ transform:translateY(1px); } .shopShipBar{ padding:9px 24px; background:var(--shop-ink); color:#fff; font-size:12.5px; letter-spacing:.02em; text-align:center; } /* ── LAYOUT ────────────────────────────────────────────────────────────── */ .shopMain{ max-width:1180px; margin:0 auto; padding:32px 24px 64px; } .shopMain--narrow{ max-width:760px; } .shopH1{ margin:0 0 22px; font-size:29px; font-weight:700; letter-spacing:-.02em; } .shopIntro{ max-width:640px; margin:0 0 30px; color:var(--shop-ink-2); font-size:16px; line-height:1.7; } .shopIntro p{ margin:0; } .shopBack{ display:inline-block; margin-bottom:20px; color:var(--shop-ink-3); font-size:13px; text-decoration:none; } .shopBack:hover{ color:var(--shop-ink); } .shopAlert{ margin-bottom:20px; padding:12px 17px; border-radius:10px; font-size:14px; } .shopAlert--ok{ background:#eef7f1; color:var(--shop-ok); } .shopAlert--err{ background:#fdeeed; color:var(--shop-alert); } .shopAlert a{ font-weight:600; } /* ── FILTERS ───────────────────────────────────────────────────────────── */ .shopFilters{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:26px; padding-bottom:16px; border-bottom:1px solid var(--shop-line); } .shopChips{ display:flex; flex-wrap:wrap; gap:7px; } .shopChip{ padding:7px 15px; border:1px solid var(--shop-line); border-radius:999px; color:var(--shop-ink-2); font-size:13px; text-decoration:none; transition:border-color .15s, color .15s, background .15s; } .shopChip:hover{ border-color:var(--shop-ink-3); color:var(--shop-ink); } .shopChip.is-on{ border-color:var(--shop-ink); background:var(--shop-ink); color:#fff; } .shopChip--line{ border-style:dashed; } .shopChip--line.is-on{ background:var(--brand); border-color:var(--brand); } .shopSort select{ padding:8px 12px; border:1px solid var(--shop-line); border-radius:8px; background:#fff; font-family:inherit; font-size:13px; color:var(--shop-ink-2); } .shopResultNote{ margin:-8px 0 20px; color:var(--shop-ink-3); font-size:13.5px; } /* ── SOLD-OUT GALLERY ──────────────────────────────────────────────────── */ .shopSold{ margin-top:40px; border-top:1px solid var(--shop-ink-1,#e5e0d8); padding-top:8px; } .shopSold summary{ cursor:pointer; font-size:14px; color:var(--shop-ink-3,#918a7e); font-weight:600; list-style:none; padding:10px 0; user-select:none; } .shopSold summary::-webkit-details-marker{ display:none; } .shopSold summary::before{ content:"▸ "; } .shopSold[open] summary::before{ content:"▾ "; } .shopGrid--sold{ margin-top:12px; } .shopGrid--sold .shopCard{ opacity:.8; } /* ── PRODUCT GRID ──────────────────────────────────────────────────────── */ .shopGrid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(230px, 1fr)); gap:26px 20px; } .shopCard{ display:flex; flex-direction:column; } .shopCardLink{ text-decoration:none; color:inherit; display:flex; flex-direction:column; flex:1; } .shopCardImg{ position:relative; aspect-ratio:1/1; border-radius:12px; overflow:hidden; background:var(--shop-soft); margin-bottom:12px; } .shopCardImg img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .35s ease; } .shopCard:hover .shopCardImg img{ transform:scale(1.04); } .shopCardNoImg{ display:flex; align-items:center; justify-content:center; height:100%; color:var(--shop-ink-3); font-size:12px; } .shopFlag{ position:absolute; top:11px; left:11px; padding:4px 11px; border-radius:999px; background:var(--brand); color:#fff; font-size:10px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; } .shopFlag--out{ background:var(--shop-ink); } .shopCardBody{ flex:1; display:flex; flex-direction:column; } .shopCardName{ margin:0 0 2px; font-size:15px; font-weight:600; line-height:1.4; color:var(--jr-ink); } .shopCardSub{ margin:0 0 6px; color:var(--jr-ink-2, var(--shop-ink-3)); font-size:12.5px; line-height:1.45; } /* Price drops to the body's bottom so it — and the button below it — line up across every card in a row, whether or not a card has a subtitle. */ .shopCardPrice{ margin:auto 0 0; padding-top:8px; font-family:var(--jr-sans); font-size:15px; font-weight:700; letter-spacing:.01em; color:var(--jr-ink); } .shopCardAdd{ margin-top:12px; } .shopCardAdd button{ width:100%; padding:11px; border:1px solid var(--shop-line); border-radius:9px; background:#fff; color:var(--jr-ink); font-family:var(--jr-sans); font-size:12.5px; font-weight:600; letter-spacing:.03em; cursor:pointer; transition:background .16s ease, color .16s ease, border-color .16s ease; } /* Hover fills with the STORE's colour (mall_stores.brand_color -> --brand on ), so a licensee's cards pick up their own brand with no code change. Falls back to --jr-ink if a store has no colour set, so the hover always does something visible. */ .shopCardAdd button:hover{ background:var(--brand, var(--jr-ink)); border-color:var(--brand, var(--jr-ink)); color:#fff; } .shopCardAdd.is-out{ display:block; padding:10px; color:var(--shop-ink-3); font-size:12.5px; text-align:center; } /* ── PAGER ─────────────────────────────────────────────────────────────── */ .shopPager{ display:flex; justify-content:center; gap:6px; margin-top:44px; } .shopPager a{ display:inline-flex; align-items:center; justify-content:center; min-width:38px; height:38px; padding:0 12px; border:1px solid var(--shop-line); border-radius:9px; color:var(--shop-ink-2); font-size:14px; text-decoration:none; } .shopPager a:hover{ border-color:var(--shop-ink); color:var(--shop-ink); } .shopPager a.is-on{ background:var(--shop-ink); border-color:var(--shop-ink); color:#fff; } /* ── PRODUCT PAGE ──────────────────────────────────────────────────────── */ .shopItem{ display:grid; grid-template-columns:1.1fr 1fr; gap:48px; align-items:start; } .shopItemImg{ position:relative; border-radius:14px; overflow:hidden; background:var(--shop-soft); } .shopItemImg img{ width:100%; display:block; } .shopItemType{ margin:0 0 6px; color:var(--shop-ink-3); font-size:11px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; } .shopItemName{ margin:0 0 6px; font-size:33px; font-weight:700; line-height:1.15; letter-spacing:-.025em; } .shopItemSub{ margin:0 0 18px; color:var(--shop-ink-2); font-size:15px; font-style:italic; } .shopItemPrice{ display:flex; align-items:baseline; gap:12px; margin:0 0 22px; font-size:27px; font-weight:700; } .shopItemXp{ padding:4px 11px; border-radius:999px; background:var(--shop-soft); color:var(--shop-ink-2); font-size:11px; font-weight:700; letter-spacing:.06em; } .shopItemDesc p{ margin:0 0 13px; color:var(--shop-ink-2); font-size:15px; line-height:1.75; } /* Handmade note — subtle italic line under the description on the live item view. */ .shopItemHandmade{ display:inline-flex; align-items:center; gap:6px; margin:10px 0 0; font-size:13px; font-weight:600; color:var(--shop-ink-3); } .shopHandmadeIcon{ flex:none; color:currentColor; } .shopItemSpecs{ margin:20px 0; padding:18px 20px 18px 38px; border-radius:11px; background:var(--shop-soft); color:var(--shop-ink-2); font-size:14px; line-height:1.9; } .shopItemSpecs li::marker{ color:var(--brand); } .shopItemBuy{ display:flex; gap:10px; margin:24px 0 10px; } .shopItemBuy input[type="number"]{ width:74px; padding:14px 12px; border:1px solid var(--shop-line); border-radius:10px; font-family:inherit; font-size:15px; text-align:center; } .shopItemBuy button{ flex:1; padding:15px 26px; border:0; border-radius:10px; background:var(--shop-ink); color:#fff; font-family:inherit; font-size:14px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; cursor:pointer; transition:background .15s; } .shopItemBuy button:hover{ background:var(--brand); } .shopItemStock{ margin:0 0 6px; color:var(--brand); font-size:12.5px; font-weight:600; } /* Item-page shipping block. Was a single

riding .shopItemStock's type scale; it is now a small stack — fee, free-ship progress, region — so it owns its own scale and the children own their spacing. --shop-ok is the same green the cart's .shopShipNudge.is-won uses, so "earned" reads identically in both places. */ .shopItemShip{ margin:10px 0; color:var(--shop-ink-3); font-size:14px; line-height:1.5; } .shopItemShipFee{ margin:0 0 2px; } .shopItemShipFree{ margin:0 0 2px; } .shopShipEarned{ color:var(--shop-ok); font-weight:600; } .shopItemShipRegion{ margin:2px 0 0; font-size:12px; opacity:.7; } .shopItemOut{ margin:24px 0; padding:16px 18px; border-radius:11px; background:var(--shop-soft); color:var(--shop-ink-2); font-size:14px; } .shopItemTags{ display:flex; flex-wrap:wrap; gap:6px; margin:20px 0; } .shopItemTags span{ padding:4px 12px; border:1px solid var(--shop-line); border-radius:999px; color:var(--shop-ink-3); font-size:12px; } .shopMore{ margin-top:72px; padding-top:40px; border-top:1px solid var(--shop-line); } .shopMore h2{ margin:0 0 22px; font-size:20px; font-weight:700; letter-spacing:-.015em; } /* ── CART ──────────────────────────────────────────────────────────────── */ .shopShipNudge{ margin-bottom:24px; padding:15px 18px; border-radius:11px; background:var(--shop-soft); border:1px solid var(--shop-line); } .shopShipNudge p{ margin:0 0 9px; font-size:14px; } .shopShipNudge.is-won{ background:#eef7f1; border-color:#cfe6da; } .shopShipNudge.is-won p{ margin:0; color:var(--shop-ok); } .shopShipBarTrack{ height:5px; border-radius:3px; background:var(--shop-line); overflow:hidden; } .shopShipBarFill{ height:100%; background:var(--brand); transition:width .3s ease; } .shopCartList{ border-top:1px solid var(--shop-line); } .shopCartRow{ display:flex; align-items:center; gap:15px; padding:17px 0; border-bottom:1px solid var(--shop-line); } .shopCartImg{ flex:0 0 auto; } .shopCartImg img{ width:72px; height:72px; border-radius:9px; object-fit:cover; display:block; } .shopCartInfo{ flex:1; min-width:0; } .shopCartInfo a{ font-size:15px; font-weight:600; text-decoration:none; } .shopCartInfo a:hover{ color:var(--brand); } .shopCartInfo small{ display:block; color:var(--shop-ink-3); font-size:12.5px; } .shopCartLast{ color:var(--brand) !important; font-weight:600; } .shopCartQty input{ width:62px; padding:9px; border:1px solid var(--shop-line); border-radius:8px; font-family:inherit; font-size:14px; text-align:center; } .shopCartLine{ min-width:78px; text-align:right; font-weight:700; font-size:15px; } .shopCartDel button{ width:30px; height:30px; border:0; border-radius:7px; background:none; color:var(--shop-ink-3); font-size:20px; line-height:1; cursor:pointer; } .shopCartDel button:hover{ background:#fdeeed; color:var(--shop-alert); } .shopTotals{ margin:26px 0 22px; } .shopTotalRow{ display:flex; justify-content:space-between; padding:9px 0; font-size:15px; color:var(--shop-ink-2); } .shopTotalRow b{ color:var(--shop-ink); font-weight:600; } .shopTotalRow b.is-free{ color:var(--shop-ok); } /* Applied-coupon line. Sits in the totals stack but is INFORMATION, not money — the right-hand side is prose ("free shipping"), so it drops the bold money weight the other rows use and sits back a step. */ .shopCouponApplied span b{ font-weight:600; } .shopCouponApplied > b{ color:var(--shop-ink-2); font-weight:400; font-size:13px; text-align:right; opacity:.85; } .shopTotalRow--sum{ margin-top:6px; padding-top:15px; border-top:1px solid var(--shop-line); font-size:19px; } .shopTotalRow--sum b{ font-weight:700; } /* Coupon. The applied row rides .shopTotalRow so it lines up with Subtotal and Shipping; --shop-ok marks it as a saving, matching b.is-free directly above it. The entry form sits between the totals and Checkout: visible, but never louder than the button it precedes. */ .shopCouponRow{ align-items:center; color:var(--shop-ok); } .shopCouponRow b{ color:var(--shop-ok); } /* Amount + Remove share the right-hand cell so the coupon is ONE line: "Coupon GAMEDAY1 — 5% off −$1.00 Remove" */ .shopCouponRight{ display:inline-flex; align-items:center; gap:12px; } .shopCouponRemove{ margin:0; } .shopCouponRemoveBtn{ padding:0; border:0; background:none; color:var(--shop-ink-3); font-family:inherit; font-size:12.5px; text-decoration:underline; cursor:pointer; } .shopCouponRemoveBtn:hover{ color:var(--shop-alert); } .shopCouponForm{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:0 0 14px; } .shopCouponForm input[type="text"]{ flex:1; min-width:0; padding:12px 13px; border:1px solid var(--shop-line); border-radius:9px; background:var(--shop-bg); color:var(--shop-ink); font-family:inherit; font-size:14px; } .shopCouponForm input[type="text"]:focus{ outline:none; border-color:var(--brand); } .shopCouponForm button{ flex:0 0 auto; padding:12px 18px; border:1px solid var(--shop-line); border-radius:9px; background:var(--shop-soft); color:var(--shop-ink); font-family:inherit; font-size:14px; font-weight:600; cursor:pointer; transition:background .15s, border-color .15s; } .shopCouponForm button:hover{ background:var(--shop-bg); border-color:var(--brand); } .shopCouponErr{ flex:1 0 100%; color:var(--shop-alert); font-size:12.5px; } .shopXpLine{ margin:10px 0 0; color:var(--shop-ink-3); font-size:12.5px; text-align:right; } .shopCheckoutBtn{ display:block; padding:17px; border-radius:11px; background:var(--shop-ink); color:#fff; font-size:15px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; text-align:center; text-decoration:none; transition:background .15s; } .shopCheckoutBtn:hover{ background:var(--brand); } .shopCartFoot{ display:flex; align-items:center; justify-content:space-between; margin-top:18px; font-size:13.5px; } .shopCartFoot a{ color:var(--shop-ink-2); } .shopCartFoot button{ border:0; background:none; color:var(--shop-ink-3); font-family:inherit; font-size:13.5px; cursor:pointer; text-decoration:underline; } /* ── EMPTY / FOOTER ────────────────────────────────────────────────────── */ .shopEmpty{ padding:72px 24px; text-align:center; color:var(--shop-ink-2); } .shopEmpty strong{ display:block; margin-bottom:8px; font-size:19px; color:var(--shop-ink); } .shopEmpty p{ margin:0; } .shopFoot{ margin-top:72px; padding:28px 0; border-top:1px solid var(--shop-line); background:var(--shop-soft); } .shopFootInner{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; max-width:1180px; margin:0 auto; padding:0 24px; color:var(--shop-ink-3); font-size:12.5px; } .shopFootInner nav{ display:flex; gap:18px; } .shopFootInner a{ color:var(--shop-ink-2); text-decoration:none; } .shopFootInner a:hover{ color:var(--shop-ink); } .shopFootMark{ letter-spacing:.08em; text-transform:uppercase; font-size:10.5px; } /* ── DIGITAL COUNTERPART SHELL (light theme) ───────────────────────────── */ /* Same markup as the admin preview, retuned for a light background. */ .dcPanel{ display:flex; align-items:flex-start; gap:12px; margin-top:26px; padding:16px 18px; border:1px solid var(--shop-line); border-radius:12px; background:var(--shop-soft); } .dcMark{ flex:0 0 auto; color:var(--brand); font-size:14px; } .dcBody b{ display:block; margin-bottom:4px; font-size:14px; color:var(--shop-ink); } .dcBody p{ margin:0; color:var(--shop-ink-2); font-size:13px; line-height:1.65; } .dcCompact{ display:flex; align-items:flex-start; gap:8px; margin:16px 0 0; color:var(--shop-ink-2); font-size:13px; } .dcInline{ margin:11px 0 0; color:var(--shop-ink-3); font-size:12px; text-align:center; } .dcPanel em, .dcCompact em, .dcInline em{ display:block; margin-top:4px; color:var(--brand); font-style:normal; font-weight:600; } .dcLink{ padding:0; border:0; background:none; color:var(--shop-ink); font:inherit; font-weight:600; text-decoration:underline; text-underline-offset:2px; cursor:pointer; } .dcLink:hover{ color:var(--brand); } .dcScrim{ position:fixed; inset:0; background:rgba(26,24,21,.42); z-index:940; } .dcDrawer{ position:fixed; top:0; right:0; width:min(440px, 100vw); height:100vh; display:flex; flex-direction:column; background:#fff; box-shadow:-18px 0 48px rgba(26,24,21,.18); z-index:941; transform:translateX(100%); transition:transform .2s ease-out; overflow-y:auto; } .dcDrawer.is-open{ transform:translateX(0); } .dcDrawerHead{ display:flex; align-items:center; justify-content:space-between; padding:19px 22px; border-bottom:1px solid var(--shop-line); position:sticky; top:0; background:#fff; } .dcDrawerHead h2{ margin:0; font-size:17px; font-weight:700; letter-spacing:-.015em; } .dcDrawerClose{ border:0; background:none; color:var(--shop-ink-3); font-size:26px; line-height:1; cursor:pointer; } .dcDrawerClose:hover{ color:var(--shop-ink); } .dcDrawerBody{ padding:22px; } .dcDrawerBody h3{ margin:22px 0 8px; font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--brand); } .dcDrawerBody h3:first-child{ margin-top:0; } .dcDrawerBody p{ margin:0 0 12px; color:var(--shop-ink-2); font-size:14px; line-height:1.7; } .dcDrawerBody ul{ margin:0 0 12px; padding-left:20px; color:var(--shop-ink-2); font-size:14px; line-height:1.8; } .dcDrawerBody b{ color:var(--shop-ink); } .dcSoon{ padding:13px 15px; border-left:3px solid var(--brand); border-radius:0 8px 8px 0; background:var(--shop-soft); } .dcSoon b{ color:var(--brand); } .dcTerms{ margin-top:20px !important; padding-top:15px; border-top:1px solid var(--shop-line); font-size:12px !important; color:var(--shop-ink-3) !important; } .dcTerms a{ color:var(--shop-ink-2); } /* ── RESPONSIVE ────────────────────────────────────────────────────────── */ @media (max-width:860px){ .shopItem{ grid-template-columns:1fr; gap:28px; } .shopItemName{ font-size:27px; } .shopSearch input{ width:140px; } } @media (max-width:560px){ .shopHeaderInner{ padding:12px 16px; } .shopMain{ padding:22px 16px 48px; } .shopGrid{ grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:20px 14px; } .shopSearch{ display:none; } .shopCartRow{ flex-wrap:wrap; } .shopCartInfo{ flex:1 1 100%; order:-1; } .shopFootInner{ justify-content:center; text-align:center; } } /* ── HELD STATE ────────────────────────────────────────────────────────── */ /* A held piece is not gone — it is in someone else's cart for a few more minutes. Saying so, with the time, turns a dead end into a reason to wait. */ .shopFlag--held{ background:var(--shop-ink); color:#fff; font-variant-numeric:tabular-nums; } .shopCardAdd.is-held{ display:block; padding:10px; border:1px dashed var(--shop-line); border-radius:9px; color:var(--shop-ink-2); font-size:12.5px; font-weight:600; text-align:center; text-decoration:none; } .shopCardAdd.is-held:hover{ border-color:var(--shop-ink-3); color:var(--shop-ink); } .shopHoldClock{ font-variant-numeric:tabular-nums; font-weight:700; } .shopItemHeld, .shopItemOut{ margin:24px 0; padding:18px 20px; border-radius:12px; background:var(--shop-soft); border:1px solid var(--shop-line); } .shopItemHeld b, .shopItemOut b{ display:block; margin-bottom:5px; font-size:15px; color:var(--shop-ink); } .shopItemHeld p, .shopItemOut p{ margin:0 0 13px; color:var(--shop-ink-2); font-size:14px; } .shopWatchBtn{ display:inline-block; padding:11px 20px; border:1px solid var(--shop-ink); border-radius:9px; color:var(--shop-ink); font-size:13px; font-weight:600; text-decoration:none; transition:background .15s, color .15s; } .shopWatchBtn:hover{ background:var(--shop-ink); color:#fff; } .shopSaveLink{ display:inline-block; margin-bottom:14px; color:var(--shop-ink-2); font-size:13px; text-decoration:underline; text-underline-offset:3px; } .shopSaveLink:hover{ color:var(--brand); } /* Cart countdown */ .shopHoldTimer{ display:block; margin-top:3px; font-size:11.5px; font-weight:700; font-variant-numeric:tabular-nums; color:var(--shop-ink-3); } .shopHoldTimer.is-low{ color:var(--shop-alert); } .shopHoldTimer.is-frozen{ color:var(--shop-ok); } .shopHoldTimer.is-out{ color:var(--shop-alert); } .shopHoldNote{ margin:0 0 14px; padding:12px 16px; border-radius:10px; background:var(--shop-soft); color:var(--shop-ink-2); font-size:13px; text-align:center; } .shopShipDay{ margin:0 0 9px !important; color:var(--shop-ink-3); font-size:12.5px; } /* Expired holds in the cart */ .shopExpired{ position:relative; margin-bottom:22px; padding:16px 18px; border-radius:11px; border:1px solid var(--shop-line); background:#fdf8f3; } .shopExpired b{ display:block; margin-bottom:4px; font-size:14.5px; } .shopExpired > p{ margin:0 0 12px; color:var(--shop-ink-2); font-size:13.5px; } /* Dismiss. The notice has been read; the X clears the lapsed lines out of the cart. Sits in the corner rather than in the row flow so it never competes with "Add it back", which is the action we actually want. */ .shopExpiredDismiss{ position:absolute; top:8px; right:10px; margin:0; } .shopExpiredX{ padding:2px 6px; border:0; background:none; color:var(--shop-ink-3); font-family:inherit; font-size:18px; line-height:1; cursor:pointer; } .shopExpiredX:hover{ color:var(--shop-ink); } .shopExpiredRow{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:9px 0; border-top:1px solid var(--shop-line); font-size:13.5px; } .shopExpiredRow > span{ flex:1; min-width:120px; font-weight:600; } .shopExpiredRow em{ color:var(--shop-ink-3); font-style:normal; font-size:12.5px; } .shopMiniBtn{ padding:7px 14px; border:1px solid var(--shop-ink); border-radius:7px; background:var(--shop-ink); color:#fff; font-family:inherit; font-size:12px; font-weight:600; text-decoration:none; cursor:pointer; } .shopMiniBtn--ghost{ background:none; color:var(--shop-ink); } .shopMiniBtn--ghost:hover{ background:var(--shop-soft); } /* ── BUY IT NOW ────────────────────────────────────────────────────────── */ /* Deliberately secondary to Add to cart: most shoppers should build a basket, and free shipping depends on them doing so. This is the direct route for someone who has already decided — including someone the hold limits have shut out of the cart, since that limit governs holding, not buying. */ .shopBuyNow{ margin:0 0 14px; } .shopBuyNow button{ width:100%; padding:13px 26px; border:1px solid var(--shop-ink); border-radius:10px; background:#fff; color:var(--shop-ink); font-family:inherit; font-size:13px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; cursor:pointer; transition:background .15s, color .15s; } .shopBuyNow button:hover{ background:var(--shop-ink); color:#fff; } .shopAlertBuy{ display:inline-block; margin-left:10px; } .shopAlertBuy button{ padding:7px 16px; border:1px solid currentColor; border-radius:7px; background:none; color:inherit; font-family:inherit; font-size:12.5px; font-weight:700; cursor:pointer; } .shopAlertBuy button:hover{ background:rgba(180,52,43,.08); } /* ============================================================================ * JuLeeRei storefront redesign — PHASE 1: brand tokens + announce bar + header * Appended to shop.css. Extends :root; restyles .shopAnnounce/.shopHeader. * White-label: monogram from $store['logo_path'], slogan from $store['tagline'], * accent from --brand (mall_stores.brand_color). System fonts, no files. * ========================================================================= */ :root{ /* Warm near-blacks + creams from the mockup, plus a richer gold than the old tan. --brand still drives per-store accents; --jr-gold is the fixed metallic used for the monogram frame + hairlines. */ --jr-black: #100f0d; /* announce/header/footer band */ --jr-black-2: #1c1a16; /* raised dark surfaces */ --jr-cream: #f6f3ee; /* warm section ground */ --jr-white: #ffffff; /* product cards */ --jr-ink: #1a1815; /* body text on light */ --jr-ink-2: #6b6459; /* muted text */ --jr-gold: #c6a153; /* metallic accent (matches logo) */ --jr-gold-deep: #a07c37; /* gold hover/pressed */ --jr-on-dark: #efe9dd; /* text on the dark bands */ --jr-on-dark-2: #b3ab9b; /* muted text on dark */ --jr-line: #e8e2d7; /* hairline — was only ever a fallback value */ /* Type: system serif for display (editorial, warm), system sans for UI. */ --jr-serif: Georgia, "Iowan Old Style", "Palatino Linotype", "Times New Roman", serif; --jr-sans: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; } /* ── ANNOUNCE BAR ───────────────────────────────────────────────────────── Thin dark strip above the header. Centered store slogan (tagline), with a free-ship note tucked to the right on wide screens. */ .shopAnnounce{ background:var(--jr-black); color:var(--jr-on-dark); font-family:var(--jr-sans); font-size:11px; letter-spacing:.14em; text-transform:uppercase; } .shopAnnounceInner{ max-width:1180px; margin:0 auto; padding:8px 24px; display:flex; align-items:center; justify-content:center; gap:20px; position:relative; } .shopAnnounceSlogan{ text-align:center; color:var(--jr-on-dark); } .shopAnnounceSlogan b{ /* last word of the slogan, in gold */ color:var(--jr-gold); font-weight:600; } .shopAnnounceShip{ position:absolute; right:24px; color:var(--jr-on-dark-2); letter-spacing:.1em; } @media (max-width:760px){ .shopAnnounceShip{ display:none; } /* keep the slogan clean on mobile */ } /* ── HEADER (rebrand) ───────────────────────────────────────────────────── Light band under the announce strip. Monogram + serif wordmark left, nav + utilities right. Overrides the base .shopHeader look. */ .shopHeader{ position:sticky; top:0; z-index:50; background:rgba(255,255,255,.96); backdrop-filter:blur(10px); border-bottom:1px solid var(--jr-line, #e8e2d7); } .shopHeaderInner{ display:flex; align-items:center; justify-content:space-between; gap:24px; max-width:1180px; margin:0 auto; padding:14px 24px; } /* Brand lockup: monogram + name/tagline stacked */ .shopBrand{ display:flex; align-items:center; gap:13px; text-decoration:none; color:var(--jr-ink); } .shopBrand img{ width:46px; height:46px; object-fit:contain; display:block; } .shopBrand span{ display:flex; flex-direction:column; line-height:1.05; } .shopBrand strong{ font-family:var(--jr-serif); font-weight:600; font-size:25px; letter-spacing:.01em; color:var(--jr-ink); } .shopBrand small{ font-family:var(--jr-sans); font-size:9.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--jr-ink-2); margin-top:3px; } /* Right-side utilities */ .shopHeaderRight{ display:flex; align-items:center; gap:16px; } .shopSearch input{ font-family:var(--jr-sans); font-size:13px; padding:8px 13px; border:1px solid var(--jr-line, #e8e2d7); border-radius:999px; background:var(--jr-cream); width:150px; transition:width .2s ease, border-color .2s ease; } .shopSearch input:focus{ outline:none; border-color:var(--jr-gold); width:190px; } .shopCartBtn{ font-family:var(--jr-sans); font-size:12px; letter-spacing:.1em; text-transform:uppercase; text-decoration:none; color:var(--jr-ink); display:inline-flex; align-items:center; gap:7px; padding:8px 15px; border:1px solid var(--jr-ink); border-radius:999px; transition:background .15s ease, color .15s ease; } .shopCartBtn:hover{ background:var(--jr-ink); color:var(--jr-white); } .shopCartBtn b{ background:var(--jr-gold); color:var(--jr-black); font-size:11px; min-width:18px; height:18px; padding:0 5px; border-radius:999px; display:inline-flex; align-items:center; justify-content:center; } /* Sign in / out become flat text links. The base rule above paints them as a --brand pill (background, border, padding, radius, inline-flex, weight 600), and none of that is inherited away by simply restating colour — so it is RESET here. Without these four lines the control renders as a tan pill with --jr-ink-2 text on it: about 2.3:1 contrast, and neither look. */ .shopSignIn, .shopSignOut{ background:none; border:0; padding:0; border-radius:0; font-family:var(--jr-sans); font-weight:500; font-size:12px; letter-spacing:.08em; text-transform:uppercase; text-decoration:none; color:var(--jr-ink-2); transition:color .15s ease; } .shopSignIn:hover, .shopSignOut:hover{ color:var(--jr-gold-deep); filter:none; } .shopSignIn:active, .shopSignOut:active{ transform:none; } /* Old free-ship bar is superseded by the announce strip — hide if present. NOTE: this matches .shopShipBar ONLY. cart.php's free-shipping progress meter uses .shopShipBarTrack / .shopShipBarFill, which are different class names and are deliberately untouched. */ .shopShipBar{ display:none; } @media (max-width:640px){ .shopBrand strong{ font-size:21px; } .shopBrand img{ width:40px; height:40px; } .shopSearch{ display:none; } /* search collapses on small screens for now */ } /* ============================================================================ * JuLeeRei storefront — PHASE 2: hero band * Full-width showpiece under the header. Image backdrop ($store banner_path/ * hero), serif headline overlaid left, gold + outline CTAs. White-label: image * from the store field, so a tenant sets their own hero. * ========================================================================= */ .shopHero{ position:relative; width:100%; min-height:520px; display:flex; align-items:center; background:var(--jr-black); /* fallback while/if image is absent */ background-size:cover; background-position:center 38%; overflow:hidden; } /* Left-weighted scrim so the serif stays legible over a busy photo, fading to clear on the right where the product imagery should breathe. */ .shopHero::before{ content:""; position:absolute; inset:0; background:linear-gradient( 100deg, rgba(12,11,9,.82) 0%, rgba(12,11,9,.55) 34%, rgba(12,11,9,.15) 60%, rgba(12,11,9,0) 82% ); } .shopHeroInner{ position:relative; max-width:1180px; margin:0 auto; padding:64px 24px; width:100%; } .shopHeroText{ max-width:460px; } .shopHeroTitle{ font-family:var(--jr-serif); color:var(--jr-on-dark); font-weight:600; font-size:clamp(44px, 6vw, 74px); line-height:1.02; letter-spacing:.005em; margin:0; } .shopHeroTitle .g{ color:var(--jr-gold); display:block; } /* "You." in gold, own line */ .shopHeroSub{ font-family:var(--jr-sans); color:var(--jr-on-dark-2); font-size:15px; line-height:1.65; margin:20px 0 30px; max-width:340px; } .shopHeroCtas{ display:flex; gap:14px; flex-wrap:wrap; } .shopHeroBtn{ font-family:var(--jr-sans); font-size:12.5px; letter-spacing:.14em; text-transform:uppercase; font-weight:600; text-decoration:none; padding:14px 30px; border-radius:2px; transition:background .16s ease, color .16s ease, border-color .16s ease; display:inline-block; } .shopHeroBtn--gold{ background:var(--jr-gold); color:var(--jr-black); border:1px solid var(--jr-gold); } .shopHeroBtn--gold:hover{ background:var(--jr-gold-deep); border-color:var(--jr-gold-deep); } .shopHeroBtn--ghost{ background:transparent; color:var(--jr-on-dark); border:1px solid rgba(239,233,221,.55); } .shopHeroBtn--ghost:hover{ background:rgba(239,233,221,.12); border-color:var(--jr-on-dark); } /* Anchor target for the hero's "Explore collections" link. scroll-margin keeps the chips clear of the sticky header once they are jumped to. */ #shopFilters{ scroll-margin-top:96px; } /* "Shop all" jumps here. 76px clears the sticky header (14px padding x2 + 46px monogram + 1px border ~= 75px); .shopMain's own 32px top padding then supplies the breathing room, so the grid does not start flush under it. */ #products{ scroll-margin-top:76px; } @media (max-width:760px){ .shopHero{ min-height:440px; background-position:center 30%; } .shopHero::before{ background:linear-gradient( 180deg, rgba(12,11,9,.35) 0%, rgba(12,11,9,.72) 55%, rgba(12,11,9,.85) 100% ); } .shopHeroInner{ padding:48px 22px; } .shopHeroText{ max-width:none; } .shopHeroSub{ max-width:none; } } /* ============================================================================ * JuLeeRei storefront — COLLECTIONS page (dark browse-by-category) * Appended to shop.css. Scoped under .colPage so the light storefront is * untouched. The header/announce/footer keep their shared styling; everything * from .colMain down is this page's dark theme. * ========================================================================= */ /* The page body goes dark; the shared header sits on top of it. */ .colPage{ background:var(--jr-black); color:var(--jr-on-dark); } /* Header stays light + sticky as elsewhere — but drop its bottom hairline so it meets the dark canvas cleanly. */ .colPage .shopHeader{ border-bottom:1px solid rgba(0,0,0,.12); } .colMain{ max-width:1180px; margin:0 auto; padding:56px 24px 72px; } .colHead{ text-align:center; margin-bottom:40px; } .colTitle{ font-family:var(--jr-serif); font-weight:600; font-size:clamp(32px, 4.4vw, 48px); color:var(--jr-on-dark); margin:0 0 12px; letter-spacing:.01em; } .colLede{ font-family:var(--jr-sans); font-size:14.5px; line-height:1.65; color:var(--jr-on-dark-2); max-width:520px; margin:0 auto; } /* ── Category grid ──────────────────────────────────────────────────────── 4-up on desktop, 2-up tablet, 1-up phone. Cards are dark tiles with an image on top and a caption below, the whole tile a link. */ .colGrid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:22px; } @media (max-width:1000px){ .colGrid{ grid-template-columns:repeat(2, 1fr); } } @media (max-width:560px){ .colGrid{ grid-template-columns:1fr; gap:18px; } } .colCard{ display:block; text-decoration:none; color:inherit; background:var(--jr-black-2); border:1px solid rgba(198,161,83,.14); /* faint gold hairline */ border-radius:4px; overflow:hidden; transition:border-color .18s ease, transform .18s ease; } .colCard:hover{ border-color:rgba(198,161,83,.5); transform:translateY(-3px); } .colCardImg{ aspect-ratio:1 / 1; background:#000; overflow:hidden; } .colCardImg img{ width:100%; height:100%; object-fit:cover; display:block; } .colCardBody{ padding:16px 18px 18px; } .colCardName{ font-family:var(--jr-serif); font-weight:600; font-size:21px; color:var(--jr-on-dark); margin:0 0 4px; } .colCardCount{ display:block; font-family:var(--jr-sans); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--jr-on-dark-2); margin-bottom:12px; } .colCardCta{ font-family:var(--jr-sans); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--jr-gold); } .colCard:hover .colCardCta{ color:#e2c176; } .colEmpty{ text-align:center; color:var(--jr-on-dark-2); font-family:var(--jr-sans); padding:60px 0; } .colEmpty a{ color:var(--jr-gold); } /* ── Value-props strip ───────────────────────────────────────────────────── */ .colValues{ display:grid; grid-template-columns:repeat(4, 1fr); gap:26px; margin-top:64px; padding-top:44px; border-top:1px solid rgba(198,161,83,.16); } @media (max-width:820px){ .colValues{ grid-template-columns:repeat(2, 1fr); gap:28px 24px; } } @media (max-width:440px){ .colValues{ grid-template-columns:1fr; } } .colValue{ display:flex; gap:13px; align-items:flex-start; } .colValueIcon{ color:var(--jr-gold); font-size:22px; line-height:1; flex:0 0 auto; margin-top:1px; } .colValue b{ display:block; font-family:var(--jr-sans); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--jr-on-dark); margin-bottom:4px; } .colValue span{ display:block; font-family:var(--jr-sans); font-size:12.5px; line-height:1.5; color:var(--jr-on-dark-2); } /* Footer on the dark page: lift its text off black. */ .colPage .shopFoot{ background:var(--jr-black); border-top:1px solid rgba(198,161,83,.16); color:var(--jr-on-dark-2); } /* The footer LINKS carry their own colour from the light theme (.shopFootInner a -> --shop-ink-2, hover -> --shop-ink), which container colour cannot override. On --jr-black that is ~2.2:1, and the hover state is near-invisible at ~1.05:1. Re-point them for this page only. */ .colPage .shopFootInner a{ color:var(--jr-on-dark-2); } .colPage .shopFootInner a:hover{ color:var(--jr-gold); } /* ── PRODUCT GALLERY (item page) ────────────────────────────────────────── * Main image plus a thumb strip, shown only when a product has more than one * image. The list comes from mitd_v5_product_image_files(), the same helper the * store console uses, so the public order matches the console's. * .shopItemMain is applied ALONGSIDE .shopItemImg, not instead of it — the * Sold out / Limited flags are absolutely positioned against .shopItemImg. * ======================================================================== */ .shopItemGallery{ display:flex; flex-direction:column; gap:12px; } .shopItemMain{ aspect-ratio:1/1; border-radius:12px; overflow:hidden; background:var(--shop-soft); } /* Crossfade stage: both layers fill .shopItemMain absolutely and only the .is-front one is opaque. Swapping which layer holds .is-front dissolves between them with no blank frame in between. */ .shopItemStage{ position:absolute; inset:0; } .shopItemLayer{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; opacity:0; transition:opacity .3s ease; } .shopItemLayer.is-front{ opacity:1; } .shopItemThumbs{ display:flex; gap:10px; flex-wrap:wrap; } .shopItemThumb{ width:76px; height:76px; padding:0; border:1px solid var(--shop-line); border-radius:8px; overflow:hidden; background:var(--shop-soft); cursor:pointer; transition:border-color .15s ease; } .shopItemThumb img{ width:100%; height:100%; object-fit:cover; display:block; } .shopItemThumb:hover{ border-color:var(--jr-gold, #c6a153); } .shopItemThumb.is-active{ border-color:var(--jr-ink, #1a1815); border-width:2px; } /* ── FINAL SALE ───────────────────────────────────────────────────────────── Store terms 7A excludes some pieces from returns. That exclusion only binds a buyer who saw it BEFORE paying, so this sits with the buy buttons and on the cart line — not in a footnote. Deliberately quiet rather than alarming: it is information, not a warning, and a red banner on every pair of earrings would read as a problem with the product. */ .shopFinalSale{ margin:14px 0 0; padding:11px 13px; border:1px solid var(--shop-line); border-left:3px solid var(--shop-ink); border-radius:9px; background:#faf8f4; font-size:13px; line-height:1.55; color:var(--shop-ink-2); } .shopFinalSale strong{ color:var(--shop-ink); } .shopFinalSale a{ color:inherit; text-decoration:underline; text-underline-offset:.15em; white-space:nowrap; } .shopCartFinal{ display:block; margin-top:3px; font-size:12px; line-height:1.45; color:var(--shop-ink-2); } /* ── PRODUCT PAGE: AT-A-GLANCE FEATURES ────────────────────────────────────── Gold-circle icon + label pairs under the price. Rules hairline above and below so the block reads as its own band between price and description rather than as a floating list. Every chip is data-gated in item.php, so this grid can hold anywhere from one to four items — the two columns handle an odd count by leaving the last cell empty, which looks intentional. */ .shopItemFeatures{ list-style:none; margin:22px 0; padding:18px 0; border-top:1px solid var(--jr-line, #e8e2d7); border-bottom:1px solid var(--jr-line, #e8e2d7); display:grid; grid-template-columns:repeat(2, 1fr); gap:16px 20px; } .shopFeature{ display:flex; align-items:center; gap:11px; } .shopFeatureIcon{ flex:0 0 auto; width:38px; height:38px; display:flex; align-items:center; justify-content:center; border:1px solid var(--jr-line, #e8e2d7); border-radius:50%; color:var(--jr-gold); } .shopFeatureLabel{ font-family:var(--jr-sans); font-size:12.5px; line-height:1.3; color:var(--jr-ink); } /* One column on a phone: two 38px circles plus labels don't fit side by side without the text wrapping mid-phrase. */ @media (max-width:480px){ .shopItemFeatures{ grid-template-columns:1fr; gap:13px; } }