/* ========================================================================= OUTBACK PROSPECTING — Prototype design system Brand carryover: Exo 2 + Open Sans, burnt-orange / gold / warm-black. Signature: topographic goldfield contour motif + gold "assay-tag" plates. ========================================================================= */ :root { /* ---- Palette (carried from live BigCommerce theme) ---- */ --ink: #150a05; /* warm near-black — primary surface */ --ink-2: #23130b; /* raised panel */ --ink-3: #311c10; /* hover / border on dark */ --flame: #f26323; /* primary burnt orange — the brand */ --flame-hi: #f94c05; /* hotter orange for gradients */ --gold: #e9a126; /* gold accent */ --gold-hi: #fca80a; /* bright gold highlight */ --sand: #fef1e7; /* warm cream — light surface */ --sand-2: #f7e6d6; /* cream shade */ --dust: #a1918b; /* warm grey — muted text on dark */ --dust-ink: #6d5c53; /* warm grey — muted text on light */ --line: rgba(255,255,255,.09); --line-ink: rgba(21,10,5,.12); --good: #3f9d5a; --warn: #e0a021; --bad: #d93838; /* gradients */ --grad-flame: linear-gradient(135deg, var(--gold-hi) 0%, var(--flame) 48%, var(--flame-hi) 100%); --grad-gold: linear-gradient(180deg, #ffd873 0%, var(--gold-hi) 42%, var(--gold) 100%); /* type */ --display: 'Exo 2', system-ui, sans-serif; --body: 'Open Sans', system-ui, sans-serif; /* rhythm */ --wrap: 1240px; --gutter: clamp(18px, 4vw, 44px); --sec-y: clamp(56px, 9vw, 112px); --r-sm: 8px; --r-md: 14px; --r-lg: 22px; --shadow: 0 24px 60px -28px rgba(0,0,0,.7); --shadow-soft: 0 18px 44px -30px rgba(21,10,5,.55); --header-h: 128px; } /* ---------------------------------------------------------------- reset */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; } } body { font-family: var(--body); background: var(--ink); color: var(--sand); line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; } img, svg { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; } input, select, textarea { font: inherit; color: inherit; } :focus-visible { outline: 3px solid var(--gold-hi); outline-offset: 2px; border-radius: 4px; } /* ---------------------------------------------------------------- motion Scroll-reveal + parallax. Everything is gated behind motion-safe and only activates once JS adds `.anim-ready` to , so no-JS / reduced-motion users always see fully-rendered, static content. */ @media (prefers-reduced-motion: no-preference) { .anim-ready [data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); transition-delay: var(--reveal-delay, 0ms); } .anim-ready [data-reveal].is-visible { opacity: 1; transform: none; } .parallax { will-change: transform; } .showplate { transition: transform .35s cubic-bezier(.2,.7,.2,1); } .anim-ready .hero__load > * { animation: heroUp .8s cubic-bezier(.2,.7,.2,1) both; } .anim-ready .hero__load > *:nth-child(1) { animation-delay: .05s; } .anim-ready .hero__load > *:nth-child(2) { animation-delay: .13s; } .anim-ready .hero__load > *:nth-child(3) { animation-delay: .21s; } .anim-ready .hero__load > *:nth-child(4) { animation-delay: .29s; } .anim-ready .hero__load > *:nth-child(5) { animation-delay: .37s; } .card, .cat, .trust { will-change: transform; } } @keyframes heroUp { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } } /* header lifts on scroll */ .header.is-scrolled { box-shadow: 0 10px 30px -18px rgba(0,0,0,.9); background: color-mix(in srgb, var(--ink) 94%, transparent); } /* ========================================================================= REAL PRODUCT PHOTOS + LIGHT SURFACES + PATTERNS (added pass) Product shots are transparent PNGs of dark hardware, so they sit on LIGHT tiles — which also gives the store the lighter beats it needs to break up the dark, and reads as a premium catalogue. ========================================================================= */ /* Product shots are a mix of transparent PNGs and white-background photos. mix-blend-mode: multiply drops any white backdrop into the light tile, so every product reads consistently regardless of how it was shot. */ .pimg { max-width: 86%; max-height: 86%; object-fit: contain; mix-blend-mode: multiply; } .pimg-fb { display: none; mix-blend-mode: normal; } /* light media tiles (kept light enough that multiply doesn't muddy products). Doubled class selectors so these win over the base .card__media / .pdp__stage rules defined later in the file. */ .card__media.card__media--photo, .thumb.thumb--photo, .line__media.line__media--photo { background: linear-gradient(160deg, #ffffff 0%, #fbf5ec 100%); } .card__media.card__media--photo { padding: 16px; } .pdp__stage.pdp__stage--photo { background: radial-gradient(circle at 50% 40%, #ffffff 0%, #f7f0e5 94%); } .mini.mini--photo { background: #fdfaf5; } .line__media.line__media--photo { padding: 8px; } /* badges/pills sit legibly on the light tiles */ .card__media--photo .pill--hire, .pdp__stage--photo .pill--hire { background: var(--flame); color: #2a1207; box-shadow: none; } .card__media--photo .pill--low, .pdp__stage--photo .pill--low { background: var(--gold-hi); color: #2a1207; box-shadow: none; } .card__media--photo .pill--stock, .pdp__stage--photo .pill--stock { background: #2f8f4f; color: #fff; box-shadow: none; } .card__media--photo .pill--out, .pdp__stage--photo .pill--out { background: #c9302c; color: #fff; box-shadow: none; } .thumb--photo .pimg { max-width: 80%; max-height: 80%; } .thumb--photo.is-active { border-color: var(--gold-hi); } /* ---- light section band: breaks up the darkness ---- */ .section--light { background: var(--sand); color: var(--ink); } .section--light::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5; background-image: repeating-radial-gradient(circle at 20% 30%, transparent 0 30px, rgba(242,99,35,.05) 31px 32px), repeating-radial-gradient(circle at 84% 78%, transparent 0 38px, rgba(233,161,38,.06) 39px 40px); mask-image: linear-gradient(180deg, transparent, #000 20%, #000 80%, transparent); } .section--light > * { position: relative; } .section--light .eyebrow { color: var(--flame); } .section--light .h-lg, .section--light .h-md, .section--light h2, .section--light h3 { color: var(--ink); } .section--light .lead, .section--light .muted { color: var(--dust-ink); } .section--light .quote { color: var(--ink); } .section--light .quote em { color: var(--flame); } .section--light .trust { background: #fff; border-color: var(--line-ink); box-shadow: var(--shadow-soft); } .section--light .trust span { color: var(--dust-ink); } .section--light .trust svg { color: var(--flame); } .section--light .btn--ghost { color: var(--ink); box-shadow: inset 0 0 0 1.5px rgba(21,10,5,.2); } .section--light .btn--ghost:hover { box-shadow: inset 0 0 0 1.5px var(--flame); } /* ---- decorative parallax glow layers (open up the sections) ---- */ .section-glow { position: absolute; z-index: 0; pointer-events: none; border-radius: 50%; filter: blur(60px); opacity: .5; } .section-glow--gold { width: 460px; height: 460px; background: radial-gradient(circle, rgba(252,168,10,.28), transparent 70%); } .section-glow--flame { width: 520px; height: 520px; background: radial-gradient(circle, rgba(242,99,35,.22), transparent 70%); } .section > .wrap { position: relative; z-index: 1; } /* ---- section rule: little gold survey marker divider ---- */ .rule { display: flex; align-items: center; gap: 14px; color: var(--gold-hi); margin: 0 auto; max-width: 220px; } .rule::before, .rule::after { content: ""; height: 1px; flex: 1; background: linear-gradient(90deg, transparent, rgba(233,161,38,.5), transparent); } .rule i { width: 8px; height: 8px; transform: rotate(45deg); background: var(--grad-gold); border-radius: 2px; } /* topo texture used across the site (a survey-map contour field) */ .topo { position: absolute; inset: 0; pointer-events: none; background-image: repeating-radial-gradient(circle at 22% 32%, transparent 0 26px, rgba(233,161,38,.06) 27px 28px), repeating-radial-gradient(circle at 82% 74%, transparent 0 34px, rgba(242,99,35,.05) 35px 36px); mask-image: linear-gradient(180deg, #000, transparent 96%); opacity: .9; } /* ---------------------------------------------------------------- layout */ .wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); } .section { padding-block: var(--sec-y); position: relative; } .stack > * + * { margin-top: 1rem; } /* eyebrow / section heads */ .eyebrow { font-family: var(--display); font-weight: 800; font-size: .72rem; letter-spacing: .28em; text-transform: uppercase; color: var(--gold-hi); display: inline-flex; align-items: center; gap: .6em; } .eyebrow::before { content: ""; width: 26px; height: 2px; background: var(--grad-flame); } h1,h2,h3,h4 { font-family: var(--display); line-height: 1.02; letter-spacing: -.01em; } .h-xl { font-size: clamp(2.6rem, 7vw, 5.4rem); font-weight: 900; text-transform: uppercase; } .h-lg { font-size: clamp(2rem, 4.4vw, 3.2rem); font-weight: 800; text-transform: uppercase; } .h-md { font-size: clamp(1.35rem, 2.4vw, 1.9rem); font-weight: 800; } .lead { font-size: clamp(1.02rem, 1.5vw, 1.18rem); color: var(--dust); max-width: 60ch; } .muted { color: var(--dust); } /* ---------------------------------------------------------------- buttons */ .btn { --bg: var(--grad-flame); display: inline-flex; align-items: center; justify-content: center; gap: .6em; font-family: var(--display); font-weight: 800; letter-spacing: .04em; text-transform: uppercase; font-size: .84rem; padding: .95em 1.6em; border-radius: var(--r-sm); background: var(--bg); color: #2a1207; box-shadow: 0 10px 26px -12px rgba(242,99,35,.7); transition: transform .18s ease, box-shadow .18s ease, filter .18s ease; white-space: nowrap; } .btn:hover { transform: translateY(-2px); box-shadow: 0 16px 34px -12px rgba(242,99,35,.8); filter: saturate(1.08); } .btn:active { transform: translateY(0); } .btn--ghost { background: transparent; color: var(--sand); box-shadow: inset 0 0 0 1.5px rgba(254,241,231,.28); } .btn--ghost:hover { box-shadow: inset 0 0 0 1.5px var(--gold-hi); filter: none; } .btn--gold { background: var(--grad-gold); color: #2a1207; } .btn--sm { padding: .62em 1em; font-size: .74rem; } .btn--full { width: 100%; } .btn--dark { background: var(--ink); color: var(--sand); box-shadow: inset 0 0 0 1.5px var(--line); } .btn[disabled] { opacity: .5; pointer-events: none; } .pill { display: inline-flex; align-items: center; gap: .45em; font-family: var(--display); font-weight: 700; font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; padding: .4em .7em; border-radius: 999px; } .pill--stock { background: rgba(63,157,90,.16); color: #7fe0a0; box-shadow: inset 0 0 0 1px rgba(63,157,90,.4); } .pill--low { background: rgba(224,160,33,.16); color: var(--gold-hi); box-shadow: inset 0 0 0 1px rgba(224,160,33,.4); } .pill--out { background: rgba(217,56,56,.16); color: #ff8a8a; box-shadow: inset 0 0 0 1px rgba(217,56,56,.4); } .pill--hire { background: rgba(242,99,35,.16); color: #ffb489; box-shadow: inset 0 0 0 1px rgba(242,99,35,.4); } /* ---------------------------------------------------------------- header */ .header { position: sticky; top: 0; z-index: 60; background: color-mix(in srgb, var(--ink) 86%, transparent); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); } .header__bar { display: flex; align-items: center; gap: 1.4rem; padding-block: .7rem; min-height: 68px; } .brand { display: flex; align-items: center; gap: .7rem; flex-shrink: 0; } .brand img { height: 46px; width: auto; } .brand__type { font-family: var(--display); font-weight: 900; text-transform: uppercase; line-height: .95; letter-spacing: .01em; } .brand__type b { display:block; font-size: 1.06rem; background: var(--grad-gold); -webkit-background-clip: text; background-clip: text; color: transparent; } .brand__type span { display:block; font-size: .62rem; letter-spacing: .34em; color: var(--dust); font-weight: 700; } .nav { display: flex; align-items: center; gap: .3rem; margin-left: auto; } .nav a { font-family: var(--display); font-weight: 700; font-size: .82rem; letter-spacing: .04em; text-transform: uppercase; padding: .5rem .8rem; border-radius: var(--r-sm); color: var(--sand); position: relative; transition: color .15s ease, background .15s ease; } .nav a:hover { color: var(--gold-hi); } .nav a.is-active { color: var(--gold-hi); } .nav a.is-active::after { content: ""; position: absolute; left: .8rem; right: .8rem; bottom: .12rem; height: 2px; background: var(--grad-flame); border-radius: 2px; } .header__actions { display: flex; align-items: center; gap: .5rem; } .icon-btn { position: relative; display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: var(--r-sm); color: var(--sand); box-shadow: inset 0 0 0 1px var(--line); transition: background .15s ease, color .15s ease; } .icon-btn:hover { background: var(--ink-2); color: var(--gold-hi); } .cart-count { position: absolute; top: -6px; right: -6px; min-width: 20px; height: 20px; padding: 0 5px; display: grid; place-items: center; border-radius: 999px; background: var(--grad-flame); color: #2a1207; font-family: var(--display); font-weight: 800; font-size: .68rem; box-shadow: 0 0 0 2px var(--ink); } .cart-count[data-count="0"] { display: none; } .burger { display: none; } .announce { background: var(--grad-flame); color: #2a1207; font-family: var(--display); font-weight: 700; text-transform: uppercase; letter-spacing: .1em; font-size: .72rem; text-align: center; padding: .45rem 1rem; } /* ---------------------------------------------------------------- views */ .view { display: none; } .view.is-active { display: block; animation: viewIn .4s ease both; } @keyframes viewIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } /* ---------------------------------------------------------------- hero */ .hero { position: relative; overflow: hidden; border-bottom: 1px solid var(--line); } .hero__bg { position: absolute; inset: 0; background: radial-gradient(120% 90% at 78% 8%, rgba(242,99,35,.32), transparent 55%), radial-gradient(90% 80% at 12% 100%, rgba(233,161,38,.18), transparent 60%), var(--ink); } .hero__inner { position: relative; display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(24px,4vw,56px); align-items: center; padding-block: clamp(48px, 8vw, 104px); } .hero__eyebrow { margin-bottom: 1.1rem; } .hero h1 { margin-bottom: 1.2rem; } .hero h1 .flame { background: var(--grad-flame); -webkit-background-clip: text; background-clip: text; color: transparent; } .hero__cta { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.8rem; } .hero__stats { display: flex; gap: clamp(18px,3vw,40px); margin-top: 2.4rem; flex-wrap: wrap; } .hero__stat b { font-family: var(--display); font-weight: 900; font-size: 1.9rem; display: block; color: var(--gold-hi); } .hero__stat span { font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--dust); } /* hero product show-plate */ .showplate { position: relative; aspect-ratio: 1/1; border-radius: var(--r-lg); background: radial-gradient(circle at 50% 38%, rgba(252,168,10,.28), transparent 62%), linear-gradient(180deg, var(--ink-2), var(--ink)); box-shadow: var(--shadow); overflow: hidden; display: grid; place-items: center; border: 1px solid var(--line); } .showplate .assay { position: absolute; left: 18px; bottom: 18px; z-index: 3; } .showplate .float-tag { position: absolute; top: 20px; right: 20px; z-index: 3; } .showplate--photo { background: radial-gradient(circle at 50% 40%, #fffdf9 0%, #ecdfce 82%); } .showplate--photo .coil-sweep { display: none; } .showplate__img { position: relative; z-index: 2; width: 90%; max-height: 78%; object-fit: contain; filter: drop-shadow(0 26px 34px rgba(21,10,5,.35)); } .coil-sweep { position: absolute; inset: -20% ; z-index: 1; background: conic-gradient(from 0deg, transparent 0 78%, rgba(252,168,10,.16) 88%, transparent 100%); animation: sweep 7s linear infinite; } @keyframes sweep { to { transform: rotate(360deg); } } /* ---------------------------------------------------------------- categories */ .cat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; } .cat { position: relative; overflow: hidden; border-radius: var(--r-md); padding: 1.3rem 1.2rem; min-height: 156px; display: flex; flex-direction: column; justify-content: flex-end; background: linear-gradient(180deg, var(--ink-2), var(--ink)); border: 1px solid var(--line); transition: transform .2s ease, border-color .2s ease; } .cat:hover { transform: translateY(-4px); border-color: rgba(252,168,10,.5); } .cat__ico { position: absolute; top: 14px; right: 14px; color: rgba(252,168,10,.55); } .cat h3 { font-size: 1.06rem; text-transform: uppercase; font-weight: 800; } .cat span { font-size: .78rem; color: var(--dust); } /* ---------------------------------------------------------------- product cards */ .grid-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 1.8rem; flex-wrap: wrap; } .prod-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } .card { position: relative; border-radius: var(--r-md); overflow: hidden; background: linear-gradient(180deg, var(--ink-2), #1a0d07); border: 1px solid var(--line); display: flex; flex-direction: column; transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; } .card:hover { transform: translateY(-5px); border-color: rgba(252,168,10,.45); box-shadow: var(--shadow); } .card__media { position: relative; aspect-ratio: 4/3; display: grid; place-items: center; background: radial-gradient(circle at 50% 40%, rgba(252,168,10,.16), transparent 62%); cursor: pointer; } .card__badges { position: absolute; top: 10px; left: 10px; display: flex; gap: 6px; flex-wrap: wrap; z-index: 2; } .card__fav { position: absolute; top: 10px; right: 10px; z-index: 2; width: 40px; height: 40px; border-radius: 999px; display: grid; place-items: center; background: rgba(21,10,5,.55); color: var(--sand); backdrop-filter: blur(4px); } .card__fav:hover { color: var(--flame); } .card__body { padding: 1rem 1.05rem 1.15rem; display: flex; flex-direction: column; gap: .55rem; flex: 1; } .card__brand { font-family: var(--display); font-weight: 700; font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; color: var(--gold-hi); } .card__title { font-family: var(--display); font-weight: 700; font-size: 1.02rem; line-height: 1.15; cursor: pointer; } .card__title:hover { color: var(--gold-hi); } .card__spec { font-size: .78rem; color: var(--dust); } .card__foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: .6rem; padding-top: .5rem; } .price { font-family: var(--display); font-weight: 800; font-size: 1.25rem; } .price s { color: var(--dust); font-weight: 600; font-size: .85rem; margin-right: .35rem; } .rating { display: inline-flex; align-items: center; gap: .3em; font-size: .76rem; color: var(--gold-hi); } /* assay tag — the signature spec plate */ .assay { font-family: var(--display); background: var(--ink); border: 1px solid rgba(252,168,10,.4); border-left: 4px solid var(--gold-hi); border-radius: 6px; padding: .5rem .7rem; box-shadow: var(--shadow-soft); } .assay b { display: block; font-size: .6rem; letter-spacing: .22em; text-transform: uppercase; color: var(--dust); font-weight: 700; } .assay span { font-weight: 800; font-size: .95rem; color: var(--gold-hi); } /* detector illustration */ .detector { width: 74%; filter: drop-shadow(0 20px 30px rgba(0,0,0,.5)); } .card .detector { width: 62%; } /* ---------------------------------------------------------------- hire band */ .hire { position: relative; overflow: hidden; border-radius: var(--r-lg); background: var(--grad-flame); color: #2a1207; padding: clamp(28px,5vw,56px); display: grid; grid-template-columns: 1.3fr .7fr; gap: 2rem; align-items: center; } .hire h2 { color: #2a1207; } .hire__inner p { color: #2a1207; max-width: 46ch; } .hire .btn--dark { color: var(--sand); } .hire__price { text-align: center; background: rgba(21,10,5,.14); border-radius: var(--r-md); padding: 1.4rem; box-shadow: inset 0 0 0 1px rgba(21,10,5,.18); } .hire__price b { font-family: var(--display); font-weight: 900; font-size: 3rem; display: block; line-height: 1; } .hire__price span { font-family: var(--display); font-weight: 700; text-transform: uppercase; letter-spacing: .1em; font-size: .72rem; } /* ---------------------------------------------------------------- story / trust */ .story { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px,5vw,64px); align-items: center; } .quote { font-family: var(--display); font-weight: 800; font-size: clamp(1.5rem,3vw,2.3rem); line-height: 1.15; text-transform: uppercase; } .quote em { color: var(--gold-hi); font-style: normal; } .trust-row { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; } .trust { text-align: center; padding: 1.3rem 1rem; border-radius: var(--r-md); background: var(--ink-2); border: 1px solid var(--line); } .trust svg { margin-inline: auto; margin-bottom: .6rem; color: var(--gold-hi); } .trust b { font-family: var(--display); display: block; font-size: .92rem; text-transform: uppercase; letter-spacing: .04em; } .trust span { font-size: .78rem; color: var(--dust); } /* ---------------------------------------------------------------- footer */ .footer { background: #100704; border-top: 1px solid var(--line); padding-top: var(--sec-y); } .footer__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 2rem; padding-bottom: 2.6rem; } .footer h4 { font-size: .78rem; letter-spacing: .2em; text-transform: uppercase; color: var(--dust); margin-bottom: 1rem; font-weight: 800; } .footer a { display: block; padding: .3rem 0; color: var(--sand); font-size: .9rem; } .footer a:hover { color: var(--gold-hi); } .footer__brand img { height: 92px; margin-bottom: 1.2rem; } .footer__brand p { color: var(--dust); font-size: .88rem; max-width: 34ch; } .socials { display: flex; gap: .5rem; margin-top: 1rem; } .socials a { width: 38px; height: 38px; border-radius: 8px; display: grid; place-items: center; box-shadow: inset 0 0 0 1px var(--line); padding: 0; } .socials a:hover { background: var(--ink-2); } .footer__bar { border-top: 1px solid var(--line); padding-block: 1.4rem; display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; font-size: .8rem; color: var(--dust); } .footer__bar a { display: inline; } /* ================================================================ PRODUCT DETAIL */ .crumbs { display: flex; gap: .5rem; align-items: center; font-size: .8rem; color: var(--dust); padding-block: 1.2rem; flex-wrap: wrap; } .crumbs a:hover { color: var(--gold-hi); } .crumbs span { color: var(--ink-3); } .pdp { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(28px,4vw,56px); align-items: start; } .pdp__gallery { position: sticky; top: calc(68px + 20px); } .pdp__stage { position: relative; aspect-ratio: 1/1; border-radius: var(--r-lg); overflow: hidden; background: radial-gradient(circle at 50% 40%, rgba(252,168,10,.2), transparent 60%), linear-gradient(180deg, var(--ink-2), var(--ink)); border: 1px solid var(--line); display: grid; place-items: center; } .pdp__thumbs { display: grid; grid-template-columns: repeat(4,1fr); gap: 10px; margin-top: 10px; } .thumb { aspect-ratio: 1/1; border-radius: var(--r-sm); background: var(--ink-2); border: 1px solid var(--line); display: grid; place-items: center; cursor: pointer; } .thumb.is-active { border-color: var(--gold-hi); } .thumb svg { width: 60%; } .pdp__info h1 { font-size: clamp(1.9rem,3.6vw,2.8rem); font-weight: 900; text-transform: uppercase; margin: .4rem 0 .8rem; } .pdp__price { display: flex; align-items: baseline; gap: .8rem; margin: 1rem 0; } .pdp__price .price { font-size: 2rem; } .pdp__variants { display: flex; flex-direction: column; gap: 1.2rem; margin: 1.6rem 0; } .variant__label { font-family: var(--display); font-weight: 700; font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--dust); margin-bottom: .55rem; } .chips { display: flex; flex-wrap: wrap; gap: .5rem; } .chip { font-family: var(--display); font-weight: 700; font-size: .82rem; padding: .55rem .9rem; border-radius: var(--r-sm); box-shadow: inset 0 0 0 1.5px var(--line); transition: all .15s ease; } .chip:hover { box-shadow: inset 0 0 0 1.5px var(--dust); } .chip.is-active { background: var(--grad-flame); color: #2a1207; box-shadow: none; } .qty { display: inline-flex; align-items: center; border-radius: var(--r-sm); box-shadow: inset 0 0 0 1.5px var(--line); overflow: hidden; } .qty button { width: 44px; height: 46px; font-size: 1.2rem; font-weight: 800; color: var(--sand); } .qty button:hover { background: var(--ink-2); color: var(--gold-hi); } .qty input { width: 48px; height: 46px; text-align: center; background: transparent; border: 0; font-family: var(--display); font-weight: 800; } .pdp__buy { display: flex; gap: .8rem; margin: 1.6rem 0; flex-wrap: wrap; } .pdp__buy .btn { flex: 1; min-width: 180px; } .spec-table { width: 100%; border-collapse: collapse; margin-top: 1rem; } .spec-table th, .spec-table td { text-align: left; padding: .8rem 0; border-bottom: 1px solid var(--line); font-size: .9rem; vertical-align: top; } .spec-table th { color: var(--dust); font-weight: 600; width: 42%; font-family: var(--body); } .spec-table td { font-family: var(--display); font-weight: 600; } .assurance { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin: 1.4rem 0; } .assurance div { display: flex; gap: .6rem; align-items: flex-start; font-size: .8rem; color: var(--dust); } .assurance svg { color: var(--gold-hi); flex-shrink: 0; } /* ================================================================ CART / CHECKOUT */ .page-head { padding-block: clamp(28px,5vw,52px) 0; } .commerce { display: grid; grid-template-columns: 1.55fr .95fr; gap: clamp(24px,3vw,40px); align-items: start; } @media (max-width: 900px) { .commerce { grid-template-columns: 1fr; } } .line { display: grid; grid-template-columns: 92px 1fr auto; gap: 1rem; align-items: center; padding: 1.1rem 0; border-bottom: 1px solid var(--line); } .line__media { width: 92px; height: 92px; border-radius: var(--r-sm); background: radial-gradient(circle at 50% 40%, rgba(252,168,10,.18), transparent), var(--ink-2); display: grid; place-items: center; border: 1px solid var(--line); } .line__media svg { width: 66%; } .line__title { font-family: var(--display); font-weight: 700; font-size: 1rem; } .line__meta { font-size: .78rem; color: var(--dust); } .line__brand { font-size: .64rem; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-hi); font-family: var(--display); font-weight: 700; } .line__right { display: flex; flex-direction: column; align-items: flex-end; gap: .5rem; } .line .qty button { width: 40px; height: 40px; font-size: 1rem; } .line .qty input { width: 38px; height: 40px; } .link-x { font-size: .76rem; color: var(--dust); } .link-x:hover { color: var(--bad); } .panel { background: linear-gradient(180deg, var(--ink-2), #1a0d07); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 1.5rem; } .panel--sticky { position: sticky; top: calc(68px + 20px); } .panel h3 { font-size: 1.05rem; text-transform: uppercase; margin-bottom: 1.1rem; } .sum-row { display: flex; justify-content: space-between; padding: .5rem 0; font-size: .92rem; } .sum-row.total { border-top: 1px solid var(--line); margin-top: .6rem; padding-top: 1rem; font-family: var(--display); font-weight: 800; font-size: 1.3rem; } .sum-row .muted { color: var(--dust); } .promo { display: flex; gap: .5rem; margin: 1rem 0; } .field { display: block; } .field label { font-family: var(--display); font-weight: 700; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--dust); margin-bottom: .4rem; display: block; } .input { width: 100%; padding: .8rem .9rem; border-radius: var(--r-sm); background: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line); color: var(--sand); transition: box-shadow .15s ease; } .input::placeholder { color: var(--dust-ink); } .input:focus { box-shadow: inset 0 0 0 1.5px var(--gold-hi); outline: none; } .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } .form-grid .col-2 { grid-column: 1 / -1; } .checkout-steps { display: flex; gap: .5rem; margin-bottom: 1.6rem; flex-wrap: wrap; } .step { display: flex; align-items: center; gap: .5rem; font-family: var(--display); font-weight: 700; font-size: .8rem; color: var(--dust); } .step b { width: 24px; height: 24px; border-radius: 999px; display: grid; place-items: center; background: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line); font-size: .74rem; } .step.is-done b, .step.is-current b { background: var(--grad-flame); color: #2a1207; box-shadow: none; } .step.is-current { color: var(--sand); } .step-div { flex: 1; height: 1px; background: var(--line); min-width: 16px; } .pay-methods { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin: 1rem 0; } .pay-opt { display: flex; align-items: center; gap: .6rem; padding: .8rem; border-radius: var(--r-sm); box-shadow: inset 0 0 0 1.5px var(--line); cursor: pointer; font-family: var(--display); font-weight: 700; font-size: .84rem; } .pay-opt.is-active { box-shadow: inset 0 0 0 2px var(--gold-hi); background: rgba(252,168,10,.06); } .square-badge { font-size: .68rem; color: var(--dust); display: flex; align-items: center; gap: .4rem; margin-top: .8rem; } .empty { text-align: center; padding: clamp(40px,8vw,90px) 1rem; } .empty svg { color: var(--ink-3); margin-inline: auto; margin-bottom: 1.2rem; } .empty h2 { text-transform: uppercase; margin-bottom: .6rem; } /* order confirmation */ .confirm { text-align: center; max-width: 620px; margin-inline: auto; padding-block: clamp(40px,7vw,80px); } .confirm__check { width: 84px; height: 84px; border-radius: 999px; background: var(--grad-flame); display: grid; place-items: center; margin: 0 auto 1.6rem; color: #2a1207; box-shadow: 0 16px 40px -14px rgba(242,99,35,.7); } .confirm__no { font-family: var(--display); font-weight: 800; color: var(--gold-hi); letter-spacing: .1em; } /* ================================================================ DASHBOARD */ .dash { display: grid; grid-template-columns: 240px 1fr; gap: clamp(20px,3vw,36px); align-items: start; padding-block: clamp(28px,4vw,44px); } .dash__side { position: sticky; top: calc(68px + 20px); } .dash-user { display: flex; align-items: center; gap: .8rem; padding: 1rem; border-radius: var(--r-md); background: var(--ink-2); border: 1px solid var(--line); margin-bottom: 1rem; } .dash-avatar { width: 46px; height: 46px; border-radius: 999px; background: var(--grad-flame); display: grid; place-items: center; font-family: var(--display); font-weight: 900; color: #2a1207; } .dash-user b { font-family: var(--display); font-size: .95rem; display: block; } .dash-user span { font-size: .74rem; color: var(--dust); } .dash-nav { display: flex; flex-direction: column; gap: 2px; } .dash-nav button { display: flex; align-items: center; gap: .7rem; text-align: left; padding: .7rem .85rem; border-radius: var(--r-sm); color: var(--sand); font-family: var(--display); font-weight: 700; font-size: .86rem; transition: background .15s ease, color .15s ease; } .dash-nav button:hover { background: var(--ink-2); } .dash-nav button.is-active { background: var(--grad-flame); color: #2a1207; } .dash-nav svg { flex-shrink: 0; } .dash__main { min-width: 0; } .dash-panel { display: none; } .dash-panel.is-active { display: block; animation: viewIn .3s ease both; } .kpis { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; margin-bottom: 1.6rem; } .kpi { padding: 1.2rem; border-radius: var(--r-md); background: var(--ink-2); border: 1px solid var(--line); } .kpi b { font-family: var(--display); font-weight: 900; font-size: 1.8rem; display: block; } .kpi span { font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; color: var(--dust); } .kpi small { font-size: .74rem; font-weight: 700; } .kpi small.up { color: #7fe0a0; } .kpi small.down { color: #ff8a8a; } .dtable-wrap { overflow-x: auto; border-radius: var(--r-md); border: 1px solid var(--line); } .dtable { width: 100%; border-collapse: collapse; min-width: 640px; } .dtable th { text-align: left; font-family: var(--display); font-weight: 700; font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--dust); padding: .9rem 1rem; background: var(--ink-2); border-bottom: 1px solid var(--line); } .dtable td { padding: .9rem 1rem; border-bottom: 1px solid var(--line); font-size: .88rem; } .dtable tr:last-child td { border-bottom: 0; } .dtable tr:hover td { background: rgba(255,255,255,.02); } .dtable .prod-cell { display: flex; align-items: center; gap: .7rem; } .dtable .mini { width: 40px; height: 40px; border-radius: 6px; background: var(--ink); display: grid; place-items: center; flex-shrink: 0; } .dtable .mini svg { width: 64%; } .stock-bar { width: 90px; height: 6px; border-radius: 999px; background: var(--ink); overflow: hidden; } .stock-bar i { display: block; height: 100%; background: var(--grad-flame); } .section-card { background: var(--ink-2); border: 1px solid var(--line); border-radius: var(--r-md); padding: 1.4rem; margin-bottom: 1.4rem; } .section-card h3 { font-size: 1rem; text-transform: uppercase; margin-bottom: 1rem; } .dash-order { display: grid; grid-template-columns: auto 1fr auto auto; gap: 1rem; align-items: center; padding: 1rem 0; border-bottom: 1px solid var(--line); } .dash-order:last-child { border-bottom: 0; } .dash-order b { font-family: var(--display); } /* ---------------------------------------------------------------- toast */ .toast-wrap { position: fixed; right: 20px; bottom: 20px; z-index: 90; display: flex; flex-direction: column; gap: 10px; } .toast { display: flex; align-items: center; gap: .7rem; padding: .9rem 1.1rem; border-radius: var(--r-sm); background: var(--ink-2); box-shadow: var(--shadow); border: 1px solid var(--line); border-left: 4px solid var(--gold-hi); font-family: var(--display); font-weight: 700; font-size: .88rem; animation: toastIn .3s ease both; max-width: 340px; } .toast svg { color: var(--gold-hi); flex-shrink: 0; } @keyframes toastIn { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: none; } } /* ---------------------------------------------------------------- drawer (mobile nav) */ .scrim { position: fixed; inset: 0; background: rgba(0,0,0,.6); z-index: 70; opacity: 0; pointer-events: none; transition: opacity .25s ease; } .scrim.is-open { opacity: 1; pointer-events: auto; } .drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(320px, 84vw); z-index: 80; background: var(--ink); border-left: 1px solid var(--line); padding: 1.4rem; transform: translateX(100%); transition: transform .3s ease; overflow-y: auto; } .drawer.is-open { transform: none; } .drawer__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.4rem; } .drawer a { display: block; padding: .9rem .4rem; font-family: var(--display); font-weight: 800; text-transform: uppercase; font-size: 1.05rem; border-bottom: 1px solid var(--line); } .drawer a:hover { color: var(--gold-hi); } /* ================================================================ RESPONSIVE */ @media (max-width: 1080px) { .cat-grid { grid-template-columns: repeat(2, 1fr); } .prod-grid { grid-template-columns: repeat(3, 1fr); } .trust-row { grid-template-columns: repeat(2,1fr); } .kpis { grid-template-columns: repeat(2,1fr); } } @media (max-width: 900px) { .nav, .header__actions .desk-only { display: none; } .burger { display: inline-grid; } .hero__inner { grid-template-columns: 1fr; } .showplate { max-width: 460px; } .pdp { grid-template-columns: 1fr; } .pdp__gallery { position: static; } .hire { grid-template-columns: 1fr; } .story { grid-template-columns: 1fr; } .footer__grid { grid-template-columns: 1fr 1fr; } .dash { grid-template-columns: 1fr; } .dash__side { position: static; } .dash-nav { flex-direction: row; overflow-x: auto; padding-bottom: 6px; } .dash-nav button { white-space: nowrap; } .panel--sticky, .pdp__gallery { position: static; } } @media (max-width: 640px) { .prod-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; } .cat-grid { grid-template-columns: 1fr 1fr; } .form-grid { grid-template-columns: 1fr; } .pay-methods { grid-template-columns: 1fr; } .footer__grid { grid-template-columns: 1fr; } .kpis { grid-template-columns: 1fr 1fr; } .assurance { grid-template-columns: 1fr; } .line { grid-template-columns: 68px 1fr; } .line__media { width: 68px; height: 68px; } .line__right { grid-column: 1 / -1; flex-direction: row; justify-content: space-between; align-items: center; } .card__title { font-size: .94rem; } .toast-wrap { left: 12px; right: 12px; } .toast { max-width: none; } } @media (max-width: 420px) { .prod-grid { grid-template-columns: 1fr; } } /* ========================================================================= LIGHT THEME PASS The original brand site is light (cream/white + orange). This layer flips the prototype to a bright, warm, premium light theme. Appended last so it wins the cascade. Footer + the "assay" spec plate stay dark as accents. ========================================================================= */ :root { --line: rgba(21,10,5,.12); --dust: #6f5d53; --page: #f1e6d4; --surface: #ffffff; --surface-2: #fbf3e8; } body { background: var(--page); color: #241308; } .brand img { height: 50px; } /* header (light, sits above the dark hero) */ .header { background: color-mix(in srgb, #fffaf2 90%, transparent); border-bottom-color: var(--line); } .header.is-scrolled { background: color-mix(in srgb, #fffaf2 97%, transparent); box-shadow: 0 10px 30px -20px rgba(21,10,5,.35); } .nav a { color: #241308; } .icon-btn { color: #241308; box-shadow: inset 0 0 0 1px var(--line); } .icon-btn:hover { background: #fff3e6; color: var(--flame); } .brand__type b { background: var(--grad-flame); -webkit-background-clip: text; background-clip: text; color: transparent; } .cart-count { box-shadow: 0 0 0 2px #fffaf2; } /* hero stays a rich DARK anchor so the light body doesn't read as washed out */ .hero { border-bottom: 1px solid rgba(255,255,255,.08); } .hero__bg { background: radial-gradient(120% 90% at 80% 6%, rgba(242,99,35,.34), transparent 55%), radial-gradient(90% 80% at 8% 100%, rgba(233,161,38,.2), transparent 62%), linear-gradient(180deg, #291608 0%, #160b05 100%); } .hero .h-xl, .hero h1 { color: var(--sand); } .hero .lead { color: #cdbaa9; } .hero .eyebrow { color: var(--gold-hi); } .hero__stat b { color: var(--gold-hi); } .hero__stat span { color: #b6a293; } /* general text accents */ .eyebrow { color: var(--flame); } .lead, .muted { color: var(--dust); } .crumbs span { color: #c9b8a5; } /* cards + tiles */ .card { background: var(--surface); border-color: var(--line); } .card:hover { border-color: rgba(242,99,35,.5); box-shadow: 0 26px 50px -30px rgba(21,10,5,.32); } .card__brand { color: var(--flame); } .card__spec { color: var(--dust); } .card__fav { background: rgba(255,255,255,.82); color: #6f5d53; box-shadow: inset 0 0 0 1px var(--line); } .card__fav:hover { color: var(--flame); } .card__fav.is-on { background: var(--flame); color: #fff; } /* categories */ .cat { background: linear-gradient(180deg, #fff, #f9efe1); border-color: var(--line); } .cat:hover { border-color: rgba(242,99,35,.5); } .cat__ico { color: rgba(242,99,35,.45); } /* panels / dashboard surfaces */ .panel, .section-card, .kpi, .dash-user, .trust { background: var(--surface); border-color: var(--line); box-shadow: var(--shadow-soft); } .dtable-wrap { border-color: var(--line); background: #fff; box-shadow: var(--shadow-soft); } .dtable, .dtable tr { background: #fff; } .dtable th { background: #fff; color: #8a7d72; border-bottom: 2px solid var(--line); } .dtable td { border-bottom-color: var(--line); } .dtable tr:last-child td { border-bottom: 0; } .dtable tr:hover td { background: #faf5ee; } .mini { background: #f6efe4; box-shadow: inset 0 0 0 1px var(--line); } .stock-bar { background: #ece0cf; } .kpi small.up { color: #2f8f4f; } .kpi small.down { color: #c9302c; } .trust svg { color: var(--flame); } .dash-nav button { color: #241308; } .dash-nav button:hover { background: #f7ecdd; } .dash-avatar { color: #fff; } /* forms */ .input { background: #fff; color: #241308; box-shadow: inset 0 0 0 1.5px var(--line); } .input::placeholder { color: #a89a8e; } .qty { box-shadow: inset 0 0 0 1.5px var(--line); } .qty button { color: #241308; } .qty button:hover { background: #f7ecdd; color: var(--flame); } .qty input { color: #241308; } .chip { color: #241308; box-shadow: inset 0 0 0 1.5px var(--line); } .chip:hover { box-shadow: inset 0 0 0 1.5px var(--dust); } .pay-opt { box-shadow: inset 0 0 0 1.5px var(--line); } .pay-opt.is-active { box-shadow: inset 0 0 0 2px var(--flame); background: rgba(242,99,35,.05); } /* buttons */ .btn--ghost { color: #241308; box-shadow: inset 0 0 0 1.5px rgba(21,10,5,.22); } .btn--ghost:hover { color: #241308; box-shadow: inset 0 0 0 1.5px var(--flame); } /* lines / tables borders */ .line { border-bottom-color: var(--line); } .spec-table th, .spec-table td { border-bottom-color: var(--line); } .spec-table th { color: var(--dust); } /* status pills readable on white */ .pill--stock { background: rgba(47,143,79,.14); color: #237a41; box-shadow: inset 0 0 0 1px rgba(47,143,79,.35); } .pill--low { background: rgba(224,160,33,.16); color: #a9760a; box-shadow: inset 0 0 0 1px rgba(224,160,33,.4); } .pill--out { background: rgba(201,48,44,.12); color: #b5302c; box-shadow: inset 0 0 0 1px rgba(201,48,44,.35); } .pill--hire { background: rgba(242,99,35,.14); color: #c6521f; box-shadow: inset 0 0 0 1px rgba(242,99,35,.4); } /* product photo tiles → bright white so multiply keeps images bright */ .card__media.card__media--photo, .thumb.thumb--photo, .line__media.line__media--photo { background: linear-gradient(180deg, #ffffff, #fdfaf5); } .pdp__stage.pdp__stage--photo { background: radial-gradient(circle at 50% 42%, #ffffff 0%, #fdf8f0 96%); } .mini.mini--photo { background: #ffffff; } .showplate.showplate--photo { background: radial-gradient(circle at 50% 42%, #ffffff 0%, #fbf4ea 90%); box-shadow: 0 30px 60px -34px rgba(21,10,5,.4); } .showplate__img { mix-blend-mode: multiply; filter: none; } /* assay tag + drawer + toast + footer keep intentional contrast */ .assay { background: #1a0d05; box-shadow: 0 14px 30px -14px rgba(21,10,5,.5); } .assay b { color: #b6a597; } .drawer { background: #fdf6ec; border-left-color: var(--line); } .drawer a { color: #241308; border-bottom-color: var(--line); } .drawer__head .brand__type b { color: transparent; } .toast { background: #fff; color: #241308; border-color: var(--line); box-shadow: 0 20px 44px -22px rgba(21,10,5,.4); } .scrim { background: rgba(21,10,5,.4); } /* section glows softer on light */ .section-glow { opacity: .32; } /* footer stays dark — keep its internal text light */ .footer__brand p { color: #b6a597; } .footer__bar { color: #b6a597; border-top-color: rgba(255,255,255,.1); } .footer h4 { color: #b6a597; } .footer a { color: #f4ead9; } .footer .socials a { box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); } /* pdp assurance strip (replaces the fake thumbnails) */ .pdp__assurance-strip { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; } .pdp__assurance-strip span { display: inline-flex; align-items: center; gap: .5em; font-family: var(--display); font-weight: 700; font-size: .74rem; letter-spacing: .02em; color: var(--dust); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm); padding: .55rem .8rem; } .pdp__assurance-strip svg { color: var(--flame); } /* ---- contrast fixes: orange/gold used as TEXT must be darker on light ---- */ :root { --flame-text: #b8431a; --gold-text: #8a6108; } .eyebrow { color: var(--flame-text); } .card__brand { color: var(--flame-text); } .rating { color: var(--gold-text); } .pill--low { color: #8a5f08; } .pill--hire { color: #b8431a; } .hero .eyebrow { color: var(--gold-hi); } /* on the dark hero, keep bright */ .hero__stat b { color: var(--gold-hi); } .section--light .eyebrow { color: var(--flame-text); } /* hero showplate must never overflow small screens */ .showplate { max-width: 100%; } @media (max-width: 900px) { .showplate { max-width: min(460px, 100%); } } /* content page: centre the reading column */ #contentMount > div[style*="max-width"] { margin-inline: auto; } /* per-item low-stock threshold input in the admin products table */ .input--thresh { width: 66px; padding: .45rem .5rem; text-align: center; font-family: var(--display); font-weight: 700; } /* admin products toolbar: search + category filter + pagination */ .admin-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; flex-wrap: wrap; } .search-field { position: relative; flex: 1; min-width: 220px; max-width: 360px; } .search-field svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--dust); pointer-events: none; } .search-field .input { padding-left: 38px; } .admin-pager { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1rem; flex-wrap: wrap; } .pager-btns { display: flex; gap: .4rem; flex-wrap: wrap; } .pager-btns .btn { min-width: 40px; } @media (max-width: 640px) { .admin-toolbar { flex-direction: column; align-items: stretch; } .search-field { max-width: none; } .admin-pager { justify-content: center; } } /* the gold wordmark is drawn for dark backgrounds — seat it on a dark plaque so it reads strongly against the light header */ .header .brand { background: #17100a; padding: 8px 14px; border-radius: 12px; box-shadow: 0 8px 20px -10px rgba(21,10,5,.55), inset 0 0 0 1px rgba(255,255,255,.06); } .header .brand img { height: 40px; } /* keep status pills on one line inside table cells */ .dtable .pill { white-space: nowrap; } /* expanded admin settings: grid of cards, setting rows, toggle switches */ .settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; align-items: start; } @media (max-width: 900px) { .settings-grid { grid-template-columns: 1fr; } } .setting-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .75rem 0; border-bottom: 1px solid var(--line); } .setting-row:last-child { border-bottom: 0; } .setting-row b { font-family: var(--display); display: block; font-size: .92rem; } .setting-row .muted { font-size: .76rem; } .switch { position: relative; display: inline-block; width: 44px; height: 24px; flex-shrink: 0; } .switch input { position: absolute; opacity: 0; width: 0; height: 0; } .switch span { position: absolute; inset: 0; background: #d9cbb8; border-radius: 999px; transition: background .2s; cursor: pointer; } .switch span::before { content: ""; position: absolute; width: 18px; height: 18px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: transform .2s; box-shadow: 0 1px 3px rgba(0,0,0,.3); } .switch input:checked + span { background: var(--flame); } .switch input:checked + span::before { transform: translateX(20px); } .switch input:focus-visible + span { outline: 3px solid var(--gold-hi); outline-offset: 2px; } /* ========================================================================= UX REVIEW FIXES (round 2) ========================================================================= */ /* H1: KPI rows collapse fluidly instead of overflowing on narrow admin */ .kpis { grid-template-columns: repeat(auto-fit, minmax(188px, 1fr)); } .kpi { min-width: 0; } @media (max-width: 460px) { .kpis { grid-template-columns: 1fr; } } /* mobile admin/customer sidebar nav wraps to rows instead of hiding items in a scroller */ @media (max-width: 900px) { .dash-nav { flex-wrap: wrap; overflow: visible; } .dash-nav button { flex: 1 1 auto; } } /* real bug: after the light-theme flip, hero ghost button went dark-on-dark */ .hero .btn--ghost { color: var(--sand); box-shadow: inset 0 0 0 1.5px rgba(254,241,231,.32); } .hero .btn--ghost:hover { color: var(--sand); box-shadow: inset 0 0 0 1.5px var(--gold-hi); } /* contrast: amber pill text + table header labels to clear WCAG AA */ .pill--low { color: #8a5e00; } .dtable th { color: #6a5f54; } /* visually-hidden but focusable (accessible payment radios, etc.) */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } label:focus-within.pay-opt, .pay-opt:has(.sr-only:focus-visible) { box-shadow: inset 0 0 0 2px var(--gold-hi); } /* shop sort toolbar */ .shop-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.4rem; flex-wrap: wrap; } .shop-toolbar .muted { font-size: .84rem; } .sort-field { display: inline-flex; align-items: center; gap: .6rem; } .sort-field span { font-family: var(--display); font-weight: 700; font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--dust); } .sort-field .input { width: auto; padding: .5rem .8rem; } /* responsive insurance: let grid cards shrink so 2-col can never overflow */ .card, .cat { min-width: 0; } /* HOME ONLY: at the top of the page the logo plaque OVERHANGS downward into the dark hero (bar height unchanged — it's a scale transform anchored top-left, so the layout box stays put and only the visual spills below). Shrinks back to normal size once the page scrolls. Toggled by `logo-xl` on .header. */ /* header wordmark plaque */ .header .brand img { height: 42px; } /* full-logo emblem worked into the hero as a large faint watermark */ /* full logo is the hero centrepiece (title), with the lead text below it. Kept at a size the (upscaled) raster stays crisp at, so it doesn't pixelate. */ .hero__logo { width: min(380px, 78%); height: auto; margin: .6rem 0 1.4rem; filter: drop-shadow(0 10px 22px rgba(0,0,0,.45)); } @media (max-width: 900px) { .hero__logo { width: min(320px, 74%); } } /* keep the hero above the fold, content vertically centred */ .hero { display: flex; align-items: center; min-height: calc(100svh - 92px); } .hero .hero__inner { padding-block: clamp(20px, 3vw, 44px); width: 100%; } .hero__cta { margin-top: 1.4rem; } .hero__stats { margin-top: 1.8rem; } @media (max-width: 900px) { .hero { min-height: 0; } .hero__logo { width: min(280px, 64%); } } /* wordmark in the story ("The Outfit") section */ .story__logo { height: 84px; width: auto; margin-bottom: 1.5rem; } @media (max-width: 640px) { .story__logo { height: 64px; } } /* ---- PDP gallery + zoom lightbox ---- */ .pdp__zoom { position: absolute; top: 12px; right: 12px; z-index: 4; width: 40px; height: 40px; border-radius: 999px; background: rgba(21,10,5,.5); color: #fff; display: grid; place-items: center; backdrop-filter: blur(4px); transition: background .15s ease; } .pdp__zoom:hover { background: var(--flame); } #pdpMain { cursor: zoom-in; } .pdp__thumbs { display: flex; gap: 10px; margin-top: 12px; grid-template-columns: none; } .pdp__thumbs .thumb { width: 82px; height: 82px; flex: 0 0 auto; padding: 8px; aspect-ratio: auto; cursor: pointer; } .pdp__thumbs .thumb .pimg { max-width: 100%; max-height: 100%; } .lightbox { position: fixed; inset: 0; z-index: 100; background: rgba(15,8,4,.9); display: grid; place-items: center; padding: 3vw; opacity: 0; transition: opacity .2s ease; } .lightbox.is-open { opacity: 1; } .lightbox__stage { max-width: 92vw; max-height: 90vh; background: linear-gradient(160deg, #fff, #f6efe4); border-radius: 18px; padding: min(4vw, 40px); box-shadow: 0 40px 90px -30px rgba(0,0,0,.7); overflow: hidden; display: grid; place-items: center; } .lightbox img { max-width: 82vw; max-height: 78vh; object-fit: contain; cursor: zoom-in; transition: transform .3s cubic-bezier(.2,.7,.2,1); mix-blend-mode: multiply; } .lightbox img.is-zoomed { transform: scale(1.9); cursor: zoom-out; } .lightbox__close { position: absolute; top: 20px; right: 24px; width: 46px; height: 46px; border-radius: 999px; background: #fff; color: #241308; font-size: 1.05rem; font-weight: 700; display: grid; place-items: center; box-shadow: 0 8px 20px -8px rgba(0,0,0,.5); z-index: 2; } .lightbox__close:hover { background: var(--flame); color: #fff; } /* ---- lightbox nav + count ---- */ .lightbox__nav { position: absolute; top: 50%; transform: translateY(-50%); width: 56px; height: 56px; border-radius: 999px; background: rgba(255,255,255,.94); color: #241308; font-size: 2rem; line-height: 1; display: grid; place-items: center; z-index: 3; box-shadow: 0 10px 24px -8px rgba(0,0,0,.6); } .lightbox__nav:hover { background: var(--flame); color: #fff; } .lightbox__nav--prev { left: max(16px, 3vw); } .lightbox__nav--next { right: max(16px, 3vw); } .lightbox__count { position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%); color: #fff; font-family: var(--display); font-weight: 700; font-size: .82rem; letter-spacing: .12em; background: rgba(21,10,5,.55); padding: .45rem .9rem; border-radius: 999px; z-index: 3; } /* ---- PDP price/SKU as a full-width banner across the bottom of the image box ---- */ .pdp__stage { overflow: hidden; } .pdp__stage .assay { position: absolute; left: 0; right: 0; bottom: 0; top: auto; display: flex; align-items: center; justify-content: space-between; gap: 1rem; border-radius: 0; border-left: 0; border-top: 2px solid var(--gold-hi); padding: .9rem 1.5rem; box-shadow: none; } .pdp__stage .assay b { margin: 0; } .pdp__stage .assay span { font-size: 1.15rem; } /* PDP description */ .pdp__desc p { color: var(--dust); margin-bottom: 1rem; } .pdp__desc p:first-child { color: var(--foreground, #241308); font-weight: 600; } /* hero showplate crossfade between featured products */ .showplate__img { transition: opacity .4s ease; } /* ---- Add Product mockup ---- */ .ap-drop { display: flex; flex-direction: column; align-items: center; gap: .5rem; text-align: center; padding: 2rem; border: 2px dashed var(--line); border-radius: var(--r-md); cursor: pointer; color: var(--dust); transition: border-color .15s ease, background .15s ease; } .ap-drop:hover { border-color: var(--flame); background: rgba(242,99,35,.04); } .ap-drop svg { color: var(--flame); } .ap-drop b { font-family: var(--display); color: #241308; } .ap-thumbs { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; } .ap-thumb { width: 84px; height: 84px; border-radius: var(--r-sm); background: #f6efe4; border: 1px solid var(--line); display: grid; place-items: center; position: relative; color: var(--dust); } .ap-thumb--main { box-shadow: inset 0 0 0 2px var(--flame); } .ap-thumb--main span { position: absolute; bottom: 5px; left: 50%; transform: translateX(-50%); font-family: var(--display); font-weight: 700; font-size: .56rem; letter-spacing: .1em; text-transform: uppercase; color: var(--flame); } .ap-thumb--add { border-style: dashed; font-size: 1.6rem; cursor: pointer; } .ap-variant { display: grid; grid-template-columns: 1fr 2fr auto; gap: .6rem; align-items: center; } @media (max-width: 640px) { .ap-variant { grid-template-columns: 1fr; } } textarea.input { resize: vertical; font-family: var(--body); line-height: 1.5; } /* white panel behind the cart line items */ .cart-items { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 1.4rem 1.6rem; box-shadow: var(--shadow-soft); } .cart-items .line:first-child { padding-top: .3rem; } /* contact page details */ .contact-row { display: flex; gap: .9rem; align-items: flex-start; padding: .8rem 0; border-bottom: 1px solid var(--line); } .contact-row:last-of-type { border-bottom: 0; } .contact-row svg { color: var(--flame); flex-shrink: 0; margin-top: 2px; } .contact-row b { font-family: var(--display); display: block; font-size: .82rem; letter-spacing: .04em; text-transform: uppercase; color: var(--dust); margin-bottom: .15rem; } .contact-row a, .contact-row span { color: #241308; } .contact-row a:hover { color: var(--flame); } /* the hero's parallax bg can momentarily shift on load; give the hero itself a dark base so no page-colour strip ever shows through above/below it */ .hero { background: #160b05; } .hero__bg { top: -120px; bottom: -120px; } /* contact page — map + help band */ .contact-map { position: relative; height: clamp(280px, 40vh, 380px); border-radius: var(--r-lg); overflow: hidden; background: radial-gradient(120% 100% at 30% 20%, #3a2010, #160b05); border: 1px solid var(--line); display: grid; place-items: center; margin-top: 1.2rem; } .contact-map .topo { opacity: .9; } .contact-map__pin { color: var(--flame); filter: drop-shadow(0 8px 12px rgba(0,0,0,.5)); position: relative; z-index: 1; } .contact-map__card { position: absolute; left: clamp(16px,3vw,28px); bottom: clamp(16px,3vw,28px); background: #fff; border-radius: var(--r-md); padding: 1.2rem 1.4rem; max-width: 380px; box-shadow: var(--shadow); z-index: 2; } .contact-map__card b { font-family: var(--display); display: block; font-size: 1.05rem; color: #241308; } .contact-map__card span { color: var(--dust-ink); font-size: .9rem; display: block; margin: .3rem 0 .9rem; } .contact-help { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; margin-top: 14px; } .contact-help .section-card svg { color: var(--flame); margin-bottom: .5rem; } .contact-help .section-card b { font-family: var(--display); display: block; text-transform: uppercase; font-size: .92rem; margin-bottom: .3rem; } .contact-help .section-card span { color: var(--dust); font-size: .88rem; } @media (max-width: 800px) { .contact-help { grid-template-columns: 1fr; } }