/* * V4 listing page (desktop + mobile) - hand-authored, scoped under .vmp-*. * * Follows the same convention as vm-v4.css / footer-v4.css: no Tailwind, the * green accent comes from --service-color (set per product kind on by * the listing blade), and every grey / clamp() rhythm is expressed here so it * does not depend on utilities that may not have survived the content scan. * * Mobile is full-bleed: the product grid runs edge-to-edge with no side * padding. Desktop centres the same grid up to 1560px. */ .vmp { --vmp-ink: #1A1A1A; --vmp-muted: #4A4A4A; --vmp-soft: #5C5C5C; --vmp-faint: #8A8A8A; --vmp-dark: #22360B; --vmp-line: #DCDCDC; --vmp-line-soft: #EFEFEF; --vmp-font: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; } /* ------------------------------------------------------------ hero + intro */ .vmp-hero { padding: 72px 0 0; } @media (min-width: 768px) { .vmp-hero { padding-top: 96px; } } .vmp-hero-inner { max-width: 1024px; margin: 0 auto; padding: 0 14px; } @media (min-width: 768px) { .vmp-hero-inner { padding: 0 clamp(14px, 3.5vw, 28px); } } .vmp-title { margin: 0; text-align: center; font: 700 22px/1.25 var(--vmp-font); color: var(--vmp-ink); letter-spacing: -0.01em; } @media (min-width: 768px) { .vmp-title { font-size: clamp(19px, 2.4vw, 24px); } } .vmp-subtitle { margin: 6px 0 0; text-align: center; font: 400 12.5px/1.6 var(--vmp-font); color: var(--vmp-muted); } @media (min-width: 768px) { .vmp-subtitle { font-size: clamp(13.5px, 1.6vw, 15px); } } .vmp-intro-wrap { overflow: hidden; transition: max-height 0.5s ease, opacity 0.35s ease; } .vmp-intro { margin: 0 auto; max-width: 768px; padding: 14px 0 4px; text-align: center; font: 400 12.5px/1.7 var(--vmp-font); color: var(--vmp-muted); } @media (min-width: 768px) { .vmp-intro { font-size: clamp(13.5px, 1.6vw, 15px); } } .vmp-intro .service-overview-link { font-weight: 700; color: var(--vmp-ink); text-decoration: underline; text-decoration-color: var(--service-color); text-decoration-thickness: 2px; text-underline-offset: 3px; } .vmp-toggle-row { display: flex; justify-content: center; margin-top: 12px; position: relative; } .vmp-toggle-row::before { content: ""; position: absolute; top: 50%; left: 0; right: 0; height: 1px; background: var(--vmp-line); } .vmp-toggle { position: relative; border: 0; background: var(--service-color); border-radius: 6px; width: 52px; height: 26px; display: grid; place-items: center; cursor: pointer; } .vmp-toggle img { width: 14px; height: 14px; display: block; transition: transform 0.3s ease; } .vmp-toggle[aria-expanded="true"] img { transform: rotate(180deg); } /* ------------------------------------------------------------ filter panel */ .vmp-panel { max-width: 768px; margin: 16px auto 0; background: #fff; border: 1px solid var(--vmp-line); border-radius: 10px; overflow: hidden; transition: border-color 0.18s ease, box-shadow 0.18s ease; } .vmp-panel:focus-within { border-color: var(--service-color); box-shadow: 0 0 0 3px rgba(145, 234, 45, 0.32); } @media (min-width: 768px) { .vmp-panel { margin-top: clamp(16px, 2.2vw, 22px); } } .vmp-search { display: flex; align-items: center; border-bottom: 1px solid var(--vmp-line-soft); } .vmp-search-icon { flex: 0 0 auto; display: grid; place-items: center; padding: 0 4px 0 14px; } .vmp-search-icon img { width: 17px; height: 17px; display: block; opacity: 0.55; } .vmp-search input { flex: 1 1 auto; min-width: 0; border: 0; background: transparent; font: 400 14px/1.3 var(--vmp-font); padding: 14px 8px; color: var(--vmp-ink); } .vmp-search input:focus { outline: none; } .vmp-clear { flex: 0 0 auto; border: 0; background: transparent; color: var(--vmp-faint); font: 400 16px/1 var(--vmp-font); padding: 0 14px; cursor: pointer; } /* Type / label selects - two columns on desktop, stacked on mobile. Native selects only: they are robust, fully accessible, and on a phone the OS presents the same list the design's custom panel would have. */ .vmp-selects { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); border-bottom: 1px solid var(--vmp-line-soft); } .vmp-select { position: relative; display: block; } .vmp-select + .vmp-select { border-top: 1px solid var(--vmp-line-soft); } @media (min-width: 768px) { .vmp-select + .vmp-select { border-top: 0; border-left: 1px solid var(--vmp-line-soft); } } .vmp-select select { appearance: none; -webkit-appearance: none; width: 100%; border: 0; border-radius: 0; background: #fff; text-align: center; cursor: pointer; font: 600 12.5px/1.3 var(--vmp-font); padding: 13px 34px; color: var(--vmp-ink); } .vmp-select select:disabled { background: #FAFAFA; color: #A8A8A8; cursor: not-allowed; } .vmp-select img { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); width: 12px; height: 12px; pointer-events: none; opacity: 0.5; } /* Quick flags + name sort. */ .vmp-flags { display: flex; gap: 6px; align-items: center; justify-content: center; flex-wrap: wrap; padding: 10px 10px; } .vmp-flag { display: inline-flex; gap: 6px; align-items: center; border-radius: 6px; font: 700 10px/1 var(--vmp-font); letter-spacing: 0.05em; text-transform: uppercase; padding: 10px 11px; cursor: pointer; white-space: nowrap; border: 1px solid var(--vmp-line); background: #fff; color: var(--vmp-soft); } .vmp-flag.is-on[data-flag="sale"] { border-color: #D0021B; background: #D0021B; color: #fff; } .vmp-flag.is-on[data-flag="added"] { border-color: var(--service-color); background: var(--service-color); color: var(--vmp-dark); } .vmp-flag.is-on[data-flag="updated"] { border-color: #F5C10A; background: #F5C10A; color: #3A2E00; } .vmp-flag-count { font: 700 10px/1 var(--vmp-font); opacity: 0.55; } .vmp-flag.is-on .vmp-flag-count { opacity: 0.75; } .vmp-sort { position: relative; display: inline-flex; } .vmp-sort select { appearance: none; -webkit-appearance: none; border-radius: 6px; font: 700 10px/1 var(--vmp-font); letter-spacing: 0.05em; text-transform: uppercase; padding: 10px 22px 10px 11px; cursor: pointer; white-space: nowrap; border: 1px solid var(--vmp-line); background: #fff; color: var(--vmp-soft); } .vmp-sort select.is-active { border-color: #3A3A3A; background: #3A3A3A; color: #fff; } .vmp-sort img { position: absolute; right: 9px; top: 50%; transform: translateY(-50%); width: 9px; height: 9px; pointer-events: none; opacity: 0.5; } .vmp-sort select.is-active + img { filter: invert(1); opacity: 0.85; } /* ------------------------------------------------------------- card grid */ .vmp-grid-wrap { width: 100%; max-width: 1560px; margin: 18px auto 0; padding: 0; } @media (min-width: 768px) { .vmp-grid-wrap { margin-top: clamp(16px, 2.2vw, 22px); padding: 0 clamp(8px, 1.6vw, 20px); } } .vmp-grid { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 8px; } @media (min-width: 768px) { .vmp-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px 8px; } } @media (min-width: 1024px) { .vmp-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 30px 8px; } } @media (min-width: 1500px) { .vmp-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } } .vmp-card { position: relative; aspect-ratio: 1/1; background: #DEDEDE; border-bottom: 3px solid var(--service-color); overflow: hidden; } .vmp-card__link { position: absolute; inset: 0; z-index: 1; display: block; } .vmp-card__link img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } .vmp-card__hover { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; transition: opacity 0.2s ease; } .vmp-card:hover .vmp-card__hover { opacity: 1; } .vmp-card__hover span { font: 600 12px/1 var(--vmp-font); color: #333; background: #fff; border-radius: 999px; padding: 9px 16px; white-space: nowrap; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18); } .vmp-card__badge { position: absolute; top: 0; left: 0; z-index: 4; pointer-events: none; font: 700 11px/1 var(--vmp-font); letter-spacing: 0.06em; text-transform: uppercase; padding: 7px 9px; } .vmp-card__badge--sale { background: #FF7A00; color: #fff; } .vmp-card__badge--new { background: var(--vmp-dark); color: var(--service-color); } .vmp-card__meta { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; display: block; } .vmp-card__name { display: block; background: rgba(20, 20, 20, 0.82); padding: 8px 10px; text-align: center; font: 700 11.5px/1.4 var(--vmp-font); color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .vmp-card__name:hover { color: var(--service-color); } .vmp-card__tags { display: grid; grid-template-columns: 1fr 1fr; background: #000; } .vmp-card__tag { display: flex; align-items: center; justify-content: center; min-width: 0; padding: 7px 8px; font: 600 11px/1.4 var(--vmp-font); color: #EDEDED; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: background 0.15s ease, color 0.15s ease; } .vmp-card__tag:hover { background: var(--service-color); color: #1A1A1A; } /* Sales uses a dark green service colour - keep hover text legible there. */ .vmp--sales .vmp-card__tag:hover, .vmp--sales .vmp-flag.is-on[data-flag="added"] { color: #fff; } .vmp--sales .vmp-toggle img { filter: invert(1); } /* ------------------------------------------------------------- no results */ .vmp-empty { margin: 18px auto 0; max-width: 640px; padding: 0 14px; } .vmp-empty-box { background: #fff; border-radius: 8px; padding: 26px 18px; text-align: center; } .vmp-empty-box h2 { margin: 0; font: 700 15.5px/1.4 var(--vmp-font); color: var(--vmp-ink); } .vmp-empty-box p { margin: 8px auto 16px; max-width: 44ch; font: 400 13px/1.7 var(--vmp-font); color: var(--vmp-muted); } .vmp-empty-actions { display: inline-flex; gap: 8px; flex-wrap: wrap; justify-content: center; } .vmp-empty-clear { border: 1px solid var(--vmp-ink); border-radius: 6px; background: #fff; color: var(--vmp-ink); font: 600 13px/1 var(--vmp-font); padding: 13px 16px; cursor: pointer; } .vmp-empty-wa { background: #25D366; color: #fff; font: 600 13px/1 var(--vmp-font); padding: 14px 16px; border-radius: 6px; } /* -------------------------------------------------------------- pagination */ .vmp-pager { margin-top: 22px; display: grid; grid-template-columns: 1fr 1fr; grid-template-areas: "nums nums" "prev next"; gap: 10px; align-items: center; } .vmp-pager__nums { grid-area: nums; margin: 0; display: flex; gap: 8px; align-items: baseline; justify-self: center; } .vmp-pager__current { font: 700 24px/1 var(--vmp-font); color: #6BAF16; } .vmp-pager__sep { font: 400 18px/1 var(--vmp-font); color: #C0C0C0; } .vmp-pager__total { font: 700 24px/1 var(--vmp-font); color: var(--vmp-ink); } .vmp-pager__btn { display: flex; gap: 9px; align-items: center; justify-content: center; border: 0; border-radius: 6px; padding: 14px; font: 700 12px/1 var(--vmp-font); letter-spacing: 0.08em; text-transform: uppercase; background: #4A4A4A; color: #fff; cursor: pointer; min-width: 0; } .vmp-pager__btn--prev { grid-area: prev; } .vmp-pager__btn--next { grid-area: next; } .vmp-pager__btn.is-disabled { background: #E2E2E2; color: #A8A8A8; cursor: default; } .vmp-pager__arrow { font: 400 20px/1 var(--vmp-font); } @media (min-width: 768px) { .vmp-pager { grid-template-columns: auto 1fr auto; grid-template-areas: "prev nums next"; align-items: stretch; margin-top: clamp(20px, 2.8vw, 30px); } .vmp-pager__nums { justify-self: stretch; justify-content: center; align-items: center; padding: 10px 6px; } .vmp-pager__current { font-size: clamp(22px, 3vw, 30px); } .vmp-pager__sep { font-size: clamp(18px, 2.4vw, 24px); } .vmp-pager__total { font-size: clamp(22px, 3vw, 30px); } .vmp-pager__btn { min-width: clamp(120px, 14vw, 190px); padding: clamp(16px, 2.4vw, 26px) clamp(14px, 2.4vw, 30px); } .vmp-pager__btn--prev { background: #CFCFCF; color: #3A3A3A; } .vmp-pager__btn--next { background: #4A4A4A; color: #fff; } }