/* ========================================================================= ZimBoost - public (guest) pages ------------------------------------------------------------------------- Used by the landing page, the public marketplace and the public product page. Everything is scoped under `.zbp` (set on by layouts/public.blade.php) so it can never leak into the logged-in console, which keeps using dist/css/zimboost.css. Palette: Zimbabwe flag colours used as accents only - green leads, gold highlights, red is reserved for genuinely urgent things (live promos). Black, white and light grey carry the actual UI, so the page reads as a premium SaaS product rather than a flag. No external requests: no @import, no webfonts, no background images. ========================================================================= */ .zbp { /* ---- brand ---- */ --zbp-green: #009739; --zbp-green-600: #007e2f; --zbp-green-700: #016326; --zbp-green-050: #e9f6ee; --zbp-gold: #fcd116; --zbp-gold-600: #dcb600; --zbp-gold-050: #fff8e0; --zbp-red: #ce1126; --zbp-red-050: #fdecee; /* ---- neutrals (these do the heavy lifting) ---- */ --zbp-black: #0b0c0e; --zbp-ink: #14161a; --zbp-ink-2: #3b414b; --zbp-muted: #6b7280; --zbp-line: #e7eaef; --zbp-line-2: #f0f2f5; --zbp-bg: #ffffff; --zbp-bg-soft: #f7f8fa; /* ---- shape & motion ---- */ --zbp-r-sm: 10px; --zbp-r: 14px; --zbp-r-lg: 20px; --zbp-r-pill: 999px; --zbp-shadow-xs: 0 1px 2px rgba(11, 12, 14, .06); --zbp-shadow-sm: 0 2px 8px rgba(11, 12, 14, .06); --zbp-shadow-md: 0 10px 24px rgba(11, 12, 14, .09); --zbp-shadow-lg: 0 20px 48px rgba(11, 12, 14, .14); --zbp-t: 180ms cubic-bezier(.2, .8, .2, 1); margin: 0; background: var(--zbp-bg); color: var(--zbp-ink); font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Ubuntu, 'Helvetica Neue', Arial, sans-serif; font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } .zbp *, .zbp *::before, .zbp *::after { box-sizing: border-box; } .zbp img { max-width: 100%; display: block; } .zbp a { color: var(--zbp-green-600); text-decoration: none; transition: color var(--zbp-t); } .zbp a:hover { color: var(--zbp-green-700); } .zbp h1, .zbp h2, .zbp h3, .zbp h4 { margin: 0; color: var(--zbp-ink); font-weight: 700; line-height: 1.18; letter-spacing: -.02em; } /* keyboard users get a visible, on-brand focus ring everywhere */ .zbp :focus-visible { outline: 3px solid rgba(0, 151, 57, .35); outline-offset: 2px; border-radius: 6px; } /* screen-reader-only helper (used for form labels the design hides) */ .zbp-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .zbp-skip { position: absolute; left: -9999px; top: 8px; z-index: 100; padding: 10px 18px; background: var(--zbp-ink); color: #fff; border-radius: var(--zbp-r-sm); } .zbp-skip:focus { left: 16px; color: #fff; } /* ========================================================================= Layout ========================================================================= */ .zbp-wrap { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 20px; } .zbp-section { padding: 72px 0; } .zbp-section--tight { padding: 44px 0; } .zbp-section--soft { background: var(--zbp-bg-soft); } .zbp-section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 28px; } .zbp-section-head h2 { font-size: clamp(1.5rem, 3vw, 2.05rem); } .zbp-section-head p { margin: 8px 0 0; color: var(--zbp-muted); font-size: .96rem; max-width: 62ch; } .zbp-section-head .zbp-link-more { flex: none; font-weight: 600; font-size: .92rem; white-space: nowrap; } .zbp-section-head .zbp-link-more i { transition: transform var(--zbp-t); display: inline-block; } .zbp-section-head .zbp-link-more:hover i { transform: translateX(3px); } /* the eyebrow label above a section title */ .zbp-eyebrow { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 10px; padding: 5px 12px; border-radius: var(--zbp-r-pill); background: var(--zbp-green-050); color: var(--zbp-green-700); font-size: .74rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; } .zbp-eyebrow--gold { background: var(--zbp-gold-050); color: #7a5c00; } .zbp-eyebrow--dark { background: rgba(255, 255, 255, .1); color: #fff; } /* the three-colour flag rule, used sparingly as a brand signature */ .zbp-flagline { display: flex; height: 5px; width: 120px; border-radius: var(--zbp-r-pill); overflow: hidden; } .zbp-flagline i { flex: 1; } .zbp-flagline i:nth-child(1) { background: var(--zbp-green); } .zbp-flagline i:nth-child(2) { background: var(--zbp-gold); } .zbp-flagline i:nth-child(3) { background: var(--zbp-red); } /* ========================================================================= Buttons ========================================================================= */ .zbp-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 12px 22px; border: 1px solid transparent; border-radius: var(--zbp-r-sm); font-family: inherit; font-size: .94rem; font-weight: 600; line-height: 1.2; white-space: nowrap; cursor: pointer; transition: transform var(--zbp-t), box-shadow var(--zbp-t), background-color var(--zbp-t), border-color var(--zbp-t), color var(--zbp-t); } .zbp-btn:hover { transform: translateY(-2px); } .zbp-btn:active { transform: translateY(0); } .zbp-btn--green { background: var(--zbp-green); color: #fff; box-shadow: 0 6px 16px rgba(0, 151, 57, .28); } .zbp-btn--green:hover { background: var(--zbp-green-600); color: #fff; box-shadow: 0 10px 24px rgba(0, 151, 57, .34); } .zbp-btn--gold { background: var(--zbp-gold); color: var(--zbp-ink); box-shadow: 0 6px 16px rgba(252, 209, 22, .34); } .zbp-btn--gold:hover { background: var(--zbp-gold-600); color: var(--zbp-ink); box-shadow: 0 10px 24px rgba(252, 209, 22, .4); } .zbp-btn--dark { background: var(--zbp-ink); color: #fff; } .zbp-btn--dark:hover { background: #000; color: #fff; } .zbp-btn--line { background: #fff; color: var(--zbp-ink); border-color: var(--zbp-line); box-shadow: var(--zbp-shadow-xs); } .zbp-btn--line:hover { border-color: var(--zbp-green); color: var(--zbp-green-700); } .zbp-btn--ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .26); } .zbp-btn--ghost:hover { background: rgba(255, 255, 255, .12); color: #fff; } .zbp-btn--lg { padding: 15px 30px; font-size: 1rem; border-radius: var(--zbp-r); } .zbp-btn--sm { padding: 9px 15px; font-size: .85rem; } .zbp-btn--block { display: flex; width: 100%; } /* ========================================================================= Header ========================================================================= */ .zbp-header { position: sticky; top: 0; z-index: 50; background: rgba(11, 12, 14, .92); backdrop-filter: saturate(160%) blur(10px); -webkit-backdrop-filter: saturate(160%) blur(10px); border-bottom: 1px solid rgba(255, 255, 255, .08); } .zbp-header .zbp-wrap { display: flex; align-items: center; gap: 18px; height: 72px; } .zbp-brand { display: flex; align-items: center; gap: 10px; color: #fff; font-weight: 800; font-size: 1.16rem; letter-spacing: -.02em; flex: none; } .zbp-brand:hover { color: #fff; } .zbp-brand img { height: 34px; width: auto; } .zbp-nav { display: flex; align-items: center; gap: 4px; margin-left: 10px; flex: 1 1 auto; } .zbp-nav a { position: relative; padding: 8px 14px; border-radius: var(--zbp-r-sm); color: rgba(255, 255, 255, .74); font-size: .92rem; font-weight: 500; transition: color var(--zbp-t), background-color var(--zbp-t); } .zbp-nav a:hover { color: #fff; background: rgba(255, 255, 255, .08); } .zbp-nav a.is-active { color: #fff; } .zbp-nav a.is-active::after { content: ''; position: absolute; left: 14px; right: 14px; bottom: 2px; height: 2px; border-radius: 2px; background: var(--zbp-gold); } .zbp-header-actions { display: flex; align-items: center; gap: 10px; flex: none; } /* ========================================================================= Hero ========================================================================= */ .zbp-hero { position: relative; overflow: hidden; padding: 88px 0 96px; background: radial-gradient(880px 460px at 84% -12%, rgba(0, 151, 57, .42), transparent 62%), radial-gradient(680px 380px at 2% 112%, rgba(252, 209, 22, .20), transparent 60%), var(--zbp-black); color: #fff; } .zbp-hero::after { /* faint dot grid - pure CSS, no image request */ content: ''; position: absolute; inset: 0; background-image: radial-gradient(rgba(255, 255, 255, .06) 1px, transparent 1px); background-size: 26px 26px; pointer-events: none; } .zbp-hero > .zbp-wrap { position: relative; z-index: 1; } .zbp-hero h1 { margin: 20px 0 18px; max-width: 18ch; color: #fff; font-size: clamp(2.2rem, 5.4vw, 3.7rem); font-weight: 800; line-height: 1.06; letter-spacing: -.03em; } .zbp-hero h1 em { font-style: normal; color: var(--zbp-gold); } .zbp-hero-lead { margin: 0 0 30px; max-width: 58ch; color: rgba(255, 255, 255, .76); font-size: clamp(1rem, 1.9vw, 1.16rem); } .zbp-hero-cta { display: flex; flex-wrap: wrap; gap: 12px; } /* trust row under the hero copy */ .zbp-trust { display: flex; flex-wrap: wrap; gap: 10px 28px; margin-top: 34px; padding-top: 26px; border-top: 1px solid rgba(255, 255, 255, .1); } .zbp-trust div { display: flex; align-items: center; gap: 9px; color: rgba(255, 255, 255, .66); font-size: .88rem; } .zbp-trust i { color: var(--zbp-green); font-size: .95rem; } /* hero search - drops the visitor straight into the marketplace */ .zbp-hero-search { display: flex; gap: 8px; margin-top: 30px; padding: 8px; max-width: 620px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .16); border-radius: var(--zbp-r); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); transition: border-color var(--zbp-t), background-color var(--zbp-t); } .zbp-hero-search:focus-within { border-color: rgba(0, 151, 57, .8); background: rgba(255, 255, 255, .12); } .zbp-hero-search input { flex: 1 1 auto; min-width: 0; padding: 11px 14px; background: transparent; border: 0; color: #fff; font-family: inherit; font-size: .98rem; } .zbp-hero-search input::placeholder { color: rgba(255, 255, 255, .5); } .zbp-hero-search input:focus { outline: none; } /* ========================================================================= Toolbar - search / category / sort ========================================================================= */ .zbp-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 14px; background: #fff; border: 1px solid var(--zbp-line); border-radius: var(--zbp-r); box-shadow: var(--zbp-shadow-sm); } .zbp-toolbar-search { position: relative; flex: 1 1 260px; min-width: 0; } .zbp-toolbar-search i { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: var(--zbp-muted); font-size: .9rem; pointer-events: none; } .zbp-field, .zbp-toolbar-search input { width: 100%; padding: 12px 16px; background: var(--zbp-bg-soft); border: 1px solid var(--zbp-line); border-radius: var(--zbp-r-sm); color: var(--zbp-ink); font-family: inherit; font-size: .94rem; transition: border-color var(--zbp-t), box-shadow var(--zbp-t), background-color var(--zbp-t); } .zbp-toolbar-search input { padding-left: 40px; } .zbp-field:focus, .zbp-toolbar-search input:focus { outline: none; background: #fff; border-color: var(--zbp-green); box-shadow: 0 0 0 4px rgba(0, 151, 57, .12); } .zbp-select { flex: 0 1 auto; min-width: 176px; padding-right: 38px; background-image: linear-gradient(45deg, transparent 50%, var(--zbp-muted) 50%), linear-gradient(135deg, var(--zbp-muted) 50%, transparent 50%); background-position: calc(100% - 19px) 50%, calc(100% - 14px) 50%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; -webkit-appearance: none; -moz-appearance: none; appearance: none; cursor: pointer; } /* category chips */ .zbp-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; } .zbp-chip { display: inline-flex; align-items: center; gap: 7px; padding: 8px 16px; background: #fff; border: 1px solid var(--zbp-line); border-radius: var(--zbp-r-pill); color: var(--zbp-ink-2); font-size: .88rem; font-weight: 500; transition: transform var(--zbp-t), border-color var(--zbp-t), background-color var(--zbp-t), color var(--zbp-t), box-shadow var(--zbp-t); } .zbp-chip:hover { transform: translateY(-1px); border-color: var(--zbp-green); color: var(--zbp-green-700); box-shadow: var(--zbp-shadow-xs); } .zbp-chip.is-active { background: var(--zbp-ink); border-color: var(--zbp-ink); color: #fff; } .zbp-chip.is-active:hover { color: #fff; } .zbp-chip span { padding: 1px 7px; border-radius: var(--zbp-r-pill); background: var(--zbp-line-2); color: var(--zbp-muted); font-size: .74rem; font-weight: 700; } .zbp-chip.is-active span { background: rgba(255, 255, 255, .18); color: #fff; } .zbp-result-count { margin: 22px 0 18px; color: var(--zbp-muted); font-size: .9rem; } .zbp-result-count strong { color: var(--zbp-ink); } /* ========================================================================= Product grid + cards ========================================================================= */ .zbp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 22px; } .zbp-card { position: relative; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--zbp-line); border-radius: var(--zbp-r); overflow: hidden; box-shadow: var(--zbp-shadow-xs); transition: transform var(--zbp-t), box-shadow var(--zbp-t), border-color var(--zbp-t); } .zbp-card:hover { transform: translateY(-4px); border-color: transparent; box-shadow: var(--zbp-shadow-md); } /* image sits in a fixed-ratio frame so rows stay aligned no matter what the admin uploads, and the reserved box means no layout shift while loading */ .zbp-card-media { position: relative; display: block; aspect-ratio: 4 / 3; background: linear-gradient(135deg, #f2f4f7, #e9edf2); overflow: hidden; } .zbp-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 420ms cubic-bezier(.2, .8, .2, 1); } .zbp-card:hover .zbp-card-media img { transform: scale(1.06); } .zbp-card-media-empty { display: flex; align-items: center; justify-content: center; height: 100%; color: #c3c9d2; font-size: 2rem; } /* a subtle scrim so white badge text stays legible on pale photos */ .zbp-card-media::after { content: ''; position: absolute; inset: 0 0 auto 0; height: 76px; background: linear-gradient(180deg, rgba(11, 12, 14, .28), transparent); opacity: 0; transition: opacity var(--zbp-t); pointer-events: none; } .zbp-card.has-badge .zbp-card-media::after { opacity: 1; } .zbp-card-badges { position: absolute; top: 12px; left: 12px; right: 12px; display: flex; flex-wrap: wrap; gap: 6px; z-index: 2; } .zbp-badge { display: inline-flex; align-items: center; gap: 5px; padding: 5px 11px; border-radius: var(--zbp-r-pill); font-size: .68rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: #fff; box-shadow: 0 2px 8px rgba(11, 12, 14, .18); } .zbp-badge--featured { background: var(--zbp-green); } .zbp-badge--promo { background: var(--zbp-gold); color: var(--zbp-ink); } .zbp-badge--hot { background: var(--zbp-red); } .zbp-card-body { display: flex; flex-direction: column; flex: 1 1 auto; padding: 18px; } .zbp-card-category { margin-bottom: 8px; color: var(--zbp-green-700); font-size: .72rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; } .zbp-card-title { margin: 0 0 7px; font-size: 1.03rem; font-weight: 700; line-height: 1.34; } .zbp-card-title a { color: inherit; } .zbp-card-title a:hover { color: var(--zbp-green-700); } .zbp-card-desc { margin: 0 0 14px; color: var(--zbp-muted); font-size: .875rem; line-height: 1.55; /* keep every card's text block the same height so the price/buttons line up across a row, however long the admin's description is */ display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .zbp-card-price { display: flex; align-items: baseline; gap: 7px; margin: 0 0 16px; color: var(--zbp-ink); font-size: 1.22rem; font-weight: 800; letter-spacing: -.02em; } .zbp-card-price small { color: var(--zbp-muted); font-size: .78rem; font-weight: 500; letter-spacing: 0; } .zbp-card-price--ask { color: var(--zbp-muted); font-size: .95rem; font-weight: 600; } .zbp-card-actions { display: flex; gap: 8px; margin-top: auto; } .zbp-card-actions > * { flex: 1 1 0; min-width: 0; } /* the login-gated action, styled so it reads as available rather than blocked */ .zbp-btn--locked { position: relative; } .zbp-btn--locked i { font-size: .78rem; opacity: .85; } /* ========================================================================= Featured / trending rail - horizontal snap scroller on every screen size, so a long featured list never pushes the grid below the fold ========================================================================= */ .zbp-rail { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(268px, 1fr); gap: 20px; padding: 4px 4px 22px; margin: 0 -4px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; scrollbar-color: var(--zbp-line) transparent; -webkit-overflow-scrolling: touch; } .zbp-rail > * { scroll-snap-align: start; } .zbp-rail::-webkit-scrollbar { height: 8px; } .zbp-rail::-webkit-scrollbar-track { background: var(--zbp-line-2); border-radius: var(--zbp-r-pill); } .zbp-rail::-webkit-scrollbar-thumb { background: #d3d8e0; border-radius: var(--zbp-r-pill); } .zbp-rail::-webkit-scrollbar-thumb:hover { background: #bfc6d0; } /* the featured rail sits on the dark band, so its cards need a light frame */ .zbp-band { background: radial-gradient(700px 320px at 90% 0%, rgba(0, 151, 57, .28), transparent 60%), var(--zbp-black); color: #fff; padding: 60px 0 46px; } .zbp-band h2 { color: #fff; } .zbp-band .zbp-section-head p { color: rgba(255, 255, 255, .62); } .zbp-band .zbp-link-more { color: var(--zbp-gold); } .zbp-band .zbp-link-more:hover { color: #fff; } .zbp-band .zbp-card { border-color: transparent; } /* ========================================================================= Empty state ========================================================================= */ .zbp-empty { padding: 64px 24px; text-align: center; background: var(--zbp-bg-soft); border: 1px dashed var(--zbp-line); border-radius: var(--zbp-r-lg); } .zbp-empty i { display: block; margin-bottom: 14px; color: #c8ced8; font-size: 2.4rem; } .zbp-empty h3 { margin-bottom: 8px; font-size: 1.14rem; } .zbp-empty p { margin: 0 0 20px; color: var(--zbp-muted); } /* ========================================================================= Pagination ========================================================================= */ .zbp-pagination { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; margin-top: 44px; } .zbp-pagination a, .zbp-pagination span { display: inline-flex; align-items: center; justify-content: center; min-width: 42px; height: 42px; padding: 0 13px; background: #fff; border: 1px solid var(--zbp-line); border-radius: var(--zbp-r-sm); color: var(--zbp-ink-2); font-size: .9rem; font-weight: 600; transition: transform var(--zbp-t), border-color var(--zbp-t), color var(--zbp-t), background-color var(--zbp-t); } .zbp-pagination a:hover { transform: translateY(-1px); border-color: var(--zbp-green); color: var(--zbp-green-700); } .zbp-pagination .is-current { background: var(--zbp-green); border-color: var(--zbp-green); color: #fff; } .zbp-pagination .is-disabled { color: #c3c9d2; background: var(--zbp-bg-soft); } .zbp-pagination .is-gap { border: 0; background: transparent; min-width: 20px; color: var(--zbp-muted); } /* ========================================================================= Call to action band ========================================================================= */ .zbp-cta { position: relative; overflow: hidden; padding: 52px 40px; border-radius: var(--zbp-r-lg); background: linear-gradient(115deg, var(--zbp-green-700) 0%, var(--zbp-green) 62%, #00ab41 100%); color: #fff; box-shadow: var(--zbp-shadow-lg); text-align: center; } .zbp-cta::before { content: ''; position: absolute; top: -60px; right: -40px; width: 260px; height: 260px; border-radius: 50%; background: rgba(252, 209, 22, .18); pointer-events: none; } .zbp-cta > * { position: relative; z-index: 1; } .zbp-cta h2 { color: #fff; font-size: clamp(1.45rem, 3vw, 2.1rem); } .zbp-cta p { margin: 12px auto 26px; max-width: 56ch; color: rgba(255, 255, 255, .88); } .zbp-cta-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; } .zbp-cta-note { margin-top: 18px; font-size: .84rem; color: rgba(255, 255, 255, .72); } /* the slim "sign in to act" strip pinned under the marketplace toolbar */ .zbp-gate { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 18px; padding: 14px 18px; background: var(--zbp-gold-050); border: 1px solid rgba(252, 209, 22, .5); border-radius: var(--zbp-r); } .zbp-gate i { color: #b58900; font-size: 1.05rem; } .zbp-gate p { flex: 1 1 240px; margin: 0; font-size: .92rem; color: #6b5200; } .zbp-gate p strong { color: #4a3800; } .zbp-gate .zbp-btn { flex: none; } /* ========================================================================= Feature strip (why register) ========================================================================= */ .zbp-features { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 20px; } .zbp-feature { padding: 26px 24px; background: #fff; border: 1px solid var(--zbp-line); border-radius: var(--zbp-r); transition: transform var(--zbp-t), box-shadow var(--zbp-t), border-color var(--zbp-t); } .zbp-feature:hover { transform: translateY(-3px); border-color: transparent; box-shadow: var(--zbp-shadow-md); } .zbp-feature-icon { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; margin-bottom: 16px; border-radius: 13px; background: var(--zbp-green-050); color: var(--zbp-green-700); font-size: 1.15rem; } .zbp-feature-icon--gold { background: var(--zbp-gold-050); color: #8a6a00; } .zbp-feature-icon--red { background: var(--zbp-red-050); color: var(--zbp-red); } .zbp-feature h3 { margin-bottom: 7px; font-size: 1.02rem; } .zbp-feature p { margin: 0; color: var(--zbp-muted); font-size: .89rem; } /* ========================================================================= Product detail page ========================================================================= */ .zbp-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 24px; color: var(--zbp-muted); font-size: .86rem; } .zbp-breadcrumb a { color: var(--zbp-muted); } .zbp-breadcrumb a:hover { color: var(--zbp-green-700); } .zbp-breadcrumb span[aria-current] { color: var(--zbp-ink); font-weight: 600; } .zbp-detail { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 44px; align-items: start; } .zbp-detail-media { position: relative; aspect-ratio: 4 / 3; border-radius: var(--zbp-r-lg); overflow: hidden; background: linear-gradient(135deg, #f2f4f7, #e9edf2); box-shadow: var(--zbp-shadow-sm); } .zbp-detail-media img { width: 100%; height: 100%; object-fit: cover; } .zbp-detail-media .zbp-card-media-empty { font-size: 3rem; } .zbp-detail h1 { margin: 12px 0 14px; font-size: clamp(1.6rem, 3.6vw, 2.35rem); } .zbp-detail-price { display: flex; align-items: baseline; gap: 10px; margin-bottom: 22px; font-size: clamp(1.6rem, 3.2vw, 2.1rem); font-weight: 800; letter-spacing: -.02em; } .zbp-detail-price small { color: var(--zbp-muted); font-size: .88rem; font-weight: 500; } .zbp-detail-lead { margin: 0 0 22px; color: var(--zbp-ink-2); font-size: 1.02rem; } .zbp-detail-body { margin: 0 0 26px; padding-top: 22px; border-top: 1px solid var(--zbp-line); color: var(--zbp-ink-2); } .zbp-detail-actions { display: flex; flex-wrap: wrap; gap: 10px; } .zbp-detail-actions .zbp-btn { flex: 1 1 190px; } /* ========================================================================= Footer ========================================================================= */ .zbp-footer { padding: 56px 0 28px; background: var(--zbp-black); color: rgba(255, 255, 255, .6); font-size: .9rem; } .zbp-footer-cols { display: grid; grid-template-columns: minmax(220px, 1.4fr) repeat(auto-fit, minmax(150px, 1fr)); gap: 34px; padding-bottom: 32px; border-bottom: 1px solid rgba(255, 255, 255, .09); } .zbp-footer h4 { margin-bottom: 14px; color: #fff; font-size: .78rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; } .zbp-footer ul { list-style: none; margin: 0; padding: 0; } .zbp-footer li { margin-bottom: 9px; } .zbp-footer a { color: rgba(255, 255, 255, .62); } .zbp-footer a:hover { color: #fff; } .zbp-footer-about p { margin: 14px 0 18px; max-width: 42ch; } .zbp-footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding-top: 22px; font-size: .84rem; } /* ========================================================================= Motion - fade sections in on scroll (progressive enhancement). Elements are visible by default; the JS only adds `zbp-reveal` when it is able to observe them, so no-JS visitors never see a blank page. ========================================================================= */ .zbp-reveal { opacity: 0; transform: translateY(16px); transition: opacity 520ms ease, transform 520ms cubic-bezier(.2, .8, .2, 1); } .zbp-reveal.is-visible { opacity: 1; transform: none; } /* client-side filtering hides cards by adding this class */ .zbp-hidden { display: none !important; } @media (prefers-reduced-motion: reduce) { .zbp *, .zbp *::before, .zbp *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } .zbp-reveal { opacity: 1; transform: none; } .zbp-card:hover { transform: none; } .zbp-card:hover .zbp-card-media img { transform: none; } .zbp-btn:hover { transform: none; } } /* ========================================================================= Responsive ========================================================================= */ @media (max-width: 991px) { .zbp-detail { grid-template-columns: minmax(0, 1fr); gap: 28px; } .zbp-section { padding: 56px 0; } } @media (max-width: 820px) { /* the inline nav would crowd the sign-in buttons - the footer carries the same links, and the hero/marketplace CTAs cover the same journeys */ .zbp-nav { display: none; } } @media (max-width: 640px) { .zbp-header .zbp-wrap { height: 62px; gap: 10px; } .zbp-brand { font-size: 1.02rem; } .zbp-brand img { height: 28px; } .zbp-hero { padding: 56px 0 62px; } .zbp-section { padding: 44px 0; } .zbp-section-head { flex-direction: column; align-items: flex-start; gap: 10px; margin-bottom: 22px; } .zbp-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 14px; } .zbp-card-body { padding: 14px; } .zbp-card-title { font-size: .95rem; } .zbp-card-desc { font-size: .82rem; -webkit-line-clamp: 2; } .zbp-card-price { font-size: 1.08rem; } .zbp-card-actions { flex-direction: column; } .zbp-btn { padding: 11px 18px; font-size: .9rem; } .zbp-btn--lg { padding: 13px 22px; font-size: .95rem; } .zbp-cta { padding: 38px 22px; } .zbp-toolbar { padding: 12px; } .zbp-select { flex: 1 1 100%; min-width: 0; } .zbp-rail { grid-auto-columns: minmax(230px, 1fr); } .zbp-footer-cols { grid-template-columns: minmax(0, 1fr); gap: 26px; } } @media (max-width: 380px) { .zbp-grid { grid-template-columns: minmax(0, 1fr); } }