/* jdm-stuff/assets/css/catalog.css * Catalog browse views. Trim detail reuses catalog.php's own .jdm-cat__sheet * styles — this file covers home / maker / model. * * Button/chip tokens below mirror the ones scoped to #jdm-search / * .jdma-search-panel in bpro-2026.css (--search-btn-bg etc). Those tokens * don't cascade down to .jdm-cat since it's outside those containers, so * they're redeclared here with the same values/names — if the site tokens * ever move, update both places (or better, hoist them to :root site-wide). */ .jdm-cat{ --jc-fg: #231f20; --jc-muted: #231f2080; --jc-line: #e5e7eb; --jc-accent: #e3562f; --jc-bg-alt: #f7f8fa; --search-btn-bg: #ffffff; --search-btn-border: #e5e7eb; --search-btn-text: #231f20; --search-btn-hover-bg: #f2f2f0; --search-accent: #e3562f; --search-accent-text: #f8f8f7; font-family: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; color: var(--jc-fg); background-color: #fcfcfa; } .jdm-cat *{ box-sizing: border-box; } /* ── Dark mode — mirrors the site-wide html[data-theme="dark"] pattern ── */ html[data-theme="dark"] .jdm-cat{ --jc-fg: #FCFCFA; --jc-muted: #FCFCFA80; --jc-line: #FCFCFA20; --jc-bg-alt: #2a2a2a; --jc-accent: #E3562F; --search-btn-bg: #2a2a2a; --search-btn-border: #444; --search-btn-text: #e8e8e8; --search-btn-hover-bg: #333; } .jdm-cat .elementor-background-overlay { background-image: linear-gradient(180deg, #231F2000 0%, #231F2080 20%, #231F20 100%), url(https://b-pro.ca/wp-content/uploads/2026/08/bpro-2026-catalog-hero-wide-clear.jpg) !important; background-position: center 25% !important; background-repeat: no-repeat !important; background-size: cover !important; inset: 0; position: absolute; } .jdm-cat .bpro-title-h2-2026 h2 { font-family: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important; color: #ffffff; text-transform: uppercase !important; font-weight: 600 !important; font-size: 2.3em; font-variation-settings: 'wdth' 75 !important; letter-spacing: -0.01em !important; line-height: 0.9 !important; font-style: normal !important; margin-bottom: 0px; } .jdm-cat .bpro-title-h2-2026 .elementor-widget-container { padding: 1% 45% 4% 4% !important; } @media (max-width: 768px) { .jdm-cat .bpro-title-h2-2026 .elementor-widget-container { padding: 1% 4% 4% 4% !important; } } /* ── Breadcrumbs — styled as the same pill buttons used in search panels ── !important on the visual properties: this stylesheet loads in , and anything printed later in with equal selector specificity (e.g. JDMCatalog::styles()' inline block on the trim page) would otherwise win the cascade tie and silently blank these out. */ .jdm-cat__crumbs{ display: flex; flex-wrap: wrap; align-items: center; margin-bottom: 1rem; } .jdm-cat__crumbs a, .jdm-cat__crumbs span{ display: inline-block !important; padding: 5px 8px !important; margin: 0 2px 4px 0 !important; background: var(--search-btn-bg) !important; border: 1px solid var(--search-btn-border) !important; border-radius: 2px !important; cursor: pointer; font-size: 13px !important; font-weight: 600; color: var(--search-btn-text) !important; line-height: 1.75; } .jdm-cat__crumbs a{ cursor: pointer !important; text-decoration: none !important; } .jdm-cat__crumbs a:hover{ background: var(--search-btn-hover-bg) !important; border-color: var(--jc-accent) !important; } /* Current page — last child, not a link — highlighted like an active toggle */ .jdm-cat__crumbs span:last-child{ background: var(--search-accent) !important; border-color: var(--search-accent) !important; color: var(--search-accent-text) !important; cursor: default; } .jdm-cat__page-head{ margin-bottom: 1.5rem; } .jdm-cat__page-head h1{ margin: 0 0 .25rem; font-size: 1.6rem; } .jdm-cat__sub{ margin: 0; color: var(--jc-muted); font-size: .95rem; } .jdm-cat__msg{ padding: .85rem 1rem; background: var(--jc-bg-alt); border: 1px solid var(--jc-line); border-radius: 8px; color: var(--jc-muted); } .jdm-cat__msg--err{ border-color: #f3c2c2; background: #fdf2f2; color: #9b2c2c; } html[data-theme="dark"] .jdm-cat__msg--err{ border-color: #6b2b2b; background: #2a1c1c; color: #e8a3a3; } .jdm-cat__msg a{ color: inherit; text-decoration: underline; } .jdm-cat__grid{ display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: .75rem; } /* ── Generic pill button — sort toggle, chassis filter chips, etc. ────── Exact spec: display inline-block, padding 5px 8px, margin 0 2px 4px 0, background/border/color from the shared tokens above, radius 2px, font-size 13px. No font-family override — inherits from .jdm-cat. */ .jdm-cat__pillbtn, .jdm-cat__sortbtn{ display: inline-block; padding: 5px 8px; margin: 0 2px 4px 0; background: var(--search-btn-bg); border: 1px solid var(--search-btn-border); border-radius: 2px; cursor: pointer; font-size: 13px; font-weight: 600; color: var(--search-btn-text); text-decoration: none; } .jdm-cat__pillbtn:hover, .jdm-cat__sortbtn:hover{ background: var(--search-btn-hover-bg); } .jdm-cat__pillbtn.is-active, .jdm-cat__sortbtn.is-active{ background: var(--search-accent); border-color: var(--search-accent); color: var(--search-accent-text); } .jdm-cat__sortbar{ margin-bottom: 1.25rem; } .jdm-cat__group{ margin-bottom: 1.75rem; } .jdm-cat__group-title{ margin: 0 0 .6rem; padding-bottom: .35rem; border-bottom: 1px solid var(--jc-line); font-family: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important; color: #231f20; text-transform: uppercase !important; font-weight: 650 !important; font-size: 36px; font-variation-settings: 'wdth' 75 !important; letter-spacing: -0.05em !important; line-height: 0.9em !important; font-style: normal !important; } /* Model list (maker page) — grouped by first letter, plain text links in fixed-width flex columns rather than the card tiles used elsewhere. */ .jdm-cat__letter-group{ margin-bottom: 1.5rem; } .jdm-cat__letter-title{ margin: 0 0 .5rem; padding-bottom: .3rem; border-bottom: 1px solid var(--jc-line); font-family: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important; color: #231f20; text-transform: uppercase !important; font-weight: 650 !important; font-size: 36px; font-variation-settings: 'wdth' 75 !important; letter-spacing: -0.05em !important; line-height: 0.9em !important; font-style: normal !important; } .jdm-cat__letter-cols{ display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: .75rem; } .jdm-cat__letter-cols .jdm-cat__model-link{ /* 4 columns by default — override per breakpoint or per alpha_X class below */ display: flex; flex-direction: column; gap: .2rem; font-weight: 600; font-size: .95rem; padding: 1rem 1.1rem; border: 1px solid var(--jc-line); border-radius: 10px; text-decoration: none; color: var(--jc-fg); background: var(--search-btn-bg); transition: border-color .15s ease, box-shadow .15s ease; } .jdm-cat__letter-cols .jdm-cat__model-link:hover{ border-color: var(--jc-accent); box-shadow: 0 2px 8px rgba(0,0,0,.06); } @media (max-width: 720px){ .jdm-cat__letter-cols .jdm-cat__model-link{ flex: 0 0 50%; max-width: 50%; } } @media (max-width: 420px){ .jdm-cat__letter-cols .jdm-cat__model-link{ flex: 0 0 100%; max-width: 100%; } } /* Example of overriding a single letter's column count, since each letter group carries its own alpha_X class (alpha_a, alpha_b, ... alpha_num): .jdm-cat__letter-group.alpha_a .jdm-cat__model-link{ flex-basis: 33.333%; max-width: 33.333%; } */ /* ── Chassis filter chip row (model page) ───────────────────────────── */ .jdm-cat__chassisbar{ display: flex; flex-wrap: wrap; align-items: center; margin-bottom: 1.25rem; } .jdm-cat__chassisbar-label{ font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--jc-muted); margin-right: .5rem; } /* ── Release-date groups (model page) ────────────────────────────────── */ .jdm-cat__release{ margin-bottom: 2rem; } .jdm-cat__release-head{ display: flex; align-items: flex-start; gap: 1rem; } .jdm-cat__release-img{ flex: 0 0 400px; max-width: 400px; height: 200px; max-height: 200px; border-radius: 6px; overflow: hidden; background: var(--jc-bg-alt); } .jdm-cat__release-img img{ width: 100%; height: 100%; object-fit: cover; display: block; } .jdm-cat__release-body{ flex: 1 1 auto; min-width: 0; } .jdm-cat__release-label{ font-size: 1.05rem; font-weight: 700; color: var(--jc-fg); margin-bottom: .4rem; } .jdm-cat__release-label span{ color: var(--jc-accent); } .jdm-cat__spectable{ width: 100%; border-collapse: collapse; font-size: .85rem; } .jdm-cat__spectable th{ background: var(--jc-bg-alt); color: var(--jc-muted); font-weight: 600; text-align: left; padding: 2px 4px; border-bottom: 1px solid var(--jc-line); white-space: nowrap; } .jdm-cat__spectable td{ padding: 2px 4px; border-bottom: 1px solid var(--jc-line); vertical-align: middle; } .jdm-cat__spectable td:first-child { width: 40%; } .jdm-cat__spectable tbody tr:hover{ background: var(--jc-bg-alt); } .jdm-cat__spectable a { color: var(--jc-accent); text-decoration: none; font-weight: 600; display: block; width: 100%; } .jdm-cat__spectable a:hover{ text-decoration: underline; } .jdm-cat__spectable tr.is-filtered-out{ display: none; } @media (max-width: 640px){ .jdm-cat__release-head{ flex-direction: column; align-items: stretch; } .jdm-cat__release-img{ flex-basis: auto; max-width: 100%; width: 100%; height: 180px; } .jdm-cat__spectable{ display: block; overflow-x: auto; white-space: nowrap; } } /* ── Universal filter bar (model page) ──────────────────────────────── */ .jdm-cat__filterbar{ display: flex; flex-wrap: wrap; gap: 1rem; padding: .85rem 1rem; margin-bottom: 1.25rem; background: var(--jc-bg-alt); border: 1px solid var(--jc-line); border-radius: 8px; margin-left: calc(400px + 1rem); } @media (max-width: 768px) { .jdm-cat__filterbar{ margin-left: unset !important; } } /* Each row takes the full width, so sliders and toggles stack as two rows instead of one long wrap of same-width columns. */ .jdm-cat__filter-row{ display: flex; flex-wrap: wrap; gap: 1.5rem; width: 100%; } .jdm-cat__filter-row--sliders{ align-items: flex-end; } .jdm-cat__filter-row--toggles{ align-items: center; gap: 1.25rem; } .jdm-cat__specrow-mobile { display: none; } @media (max-width: 768px) { .jdm-cat__filter-row--sliders { gap: 0.5rem; } .jdm-cat__filter-row--sliders .jdm-cat__filter-group { min-width: 30%; } .jdm-cat__filter-group .jdm-cat__pillbtn { margin-bottom: 0px; padding: 4px 4px; } .jdm-cat__filter-row--toggles { gap: 0.5rem; } .jdm-cat__specrow-mobile { display: block; font-size: 0.75rem; color: #231f20; font-weight: 400; } .jdm-cat__specrow-mobile span { padding: 2px 4px; } .jdm-cat__spectable, .jdm-cat__spectable tbody, .jdm-cat__spectable tr { display: block; width: 100%; } .jdm-cat__spectable thead { display: none; } .jdm-cat__spectable th, .jdm-cat__spectable td { display: none; } .jdm-cat__spectable th:nth-child(1), .jdm-cat__spectable td:nth-child(1) { display: block; width: 100%; } } /* Toggle groups: row layout (label beside buttons), not the column layout sliders use, and no forced min-width so buttons hug their text instead of stretching a 160px-wide column. */ .jdm-cat__filter-row--toggles .jdm-cat__filter-group{ display: flex; flex-direction: row; align-items: center; flex-wrap: wrap; min-width: 0; gap: .4rem; } .jdm-cat__filter-row--toggles .jdm-cat__filter-label{ margin-right: .15rem; } .jdm-cat__filter-group{ display: flex; flex-direction: column; gap: .35rem; min-width: 160px; } .jdm-cat__filter-group label, .jdm-cat__filter-label{ font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--jc-muted); } .jdm-cat__filter-value{ color: var(--jc-accent); font-weight: 700; text-transform: none; } /* Two-handle range slider: two overlapping , track hidden on the inputs themselves, only the thumbs are interactive. */ .jdm-cat__range-track{ position: relative; height: 24px; } .jdm-cat__range{ position: absolute; left: 0; right: 0; top: 8px; width: 100%; margin: 0; background: transparent; pointer-events: none; -webkit-appearance: none; appearance: none; } .jdm-cat__range::-webkit-slider-runnable-track{ height: 3px; background: var(--jc-line); border-radius: 2px; } .jdm-cat__range::-moz-range-track{ height: 3px; background: var(--jc-line); border-radius: 2px; } .jdm-cat__range::-webkit-slider-thumb{ -webkit-appearance: none; pointer-events: all; width: 14px; height: 14px; margin-top: -5.5px; border-radius: 50%; background: var(--search-accent); cursor: pointer; border: 2px solid var(--search-btn-bg); } .jdm-cat__range::-moz-range-thumb{ pointer-events: all; width: 14px; height: 14px; border-radius: 50%; background: var(--search-accent); cursor: pointer; border: 2px solid var(--search-btn-bg); } .jdm-cat__msg--empty-filter{ margin-bottom: 1.25rem; } /* ── Trim page photo gallery (JDMCatalog::render_images()) ──────────── */ .jdm-cat__gallery{ display: flex; flex-wrap: wrap; gap: .4rem; padding: 1rem 1.25rem; border-bottom: 1px solid var(--jc-line); } .jdm-cat__gallery-item{ display: block; line-height: 0; } .jdm-cat__gallery-item img{ height: 130px; width: auto; border-radius: 4px; display: block; } .jdm-cat__tile{ display: flex; flex-direction: column; gap: .2rem; padding: 1rem 1.1rem; border: 1px solid var(--jc-line); border-radius: 10px; text-decoration: none; color: var(--jc-fg); background: var(--search-btn-bg); transition: border-color .15s ease, box-shadow .15s ease; } .jdm-cat__tile:hover{ border-color: var(--jc-accent); box-shadow: 0 2px 8px rgba(0,0,0,.06); } .jdm-cat__tile-name{ font-weight: 600; font-size: .95rem; } .jdm-cat__tile-count{ font-size: .78rem; color: var(--jc-muted); } @media (max-width: 480px){ .jdm-cat__grid{ grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); } }