/* Catalogue category + product-detail pages — shared additions on top of styles.css. Loaded after styles.css. The catalogues-sample.html draft keeps its own inline styles. */ /* section header inside category pages (same look as the hub draft's inline version) */ .cat-sec{margin:44px 0 14px;padding-bottom:8px;border-bottom:2px solid var(--line)} .cat-sec h2{font-size:1.25rem} .cat-sec .mono{font-family:"IBM Plex Mono";font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--clay);display:block;margin-bottom:4px} .prod-grid.cat{margin-top:14px} /* Pre-hide everything past page 1 so the first paint matches what catalogue.js will render. All 120 cards stay in the raw HTML for crawlers; only a JS-capable browser (the .js flag comes from the inline bootstrap in ) hides them. Without this the page paints ~6x taller on a cold cache and then collapses — a large, avoidable CLS. catalogue.js overrides this per-card with inline style.display, which wins. */ .js .prod-grid.cat:not(.js-paged) .prodcard:nth-child(n+21){display:none} #cat-grid{transition:opacity .18s var(--d)} /* product-name link inside cards (hero products link to their detail page) */ .prodcard h4 a{color:inherit;text-decoration:none;border-bottom:1px solid transparent;transition:border-color .2s var(--d)} .prodcard h4 a:hover{border-color:var(--clay)} /* product detail hero */ .prod-hero{display:grid;grid-template-columns:minmax(260px,420px) 1fr;gap:40px;align-items:start} /* White plate, no multiply: the product renders bright. mix-blend-mode:multiply over the cream --sand-2 panel pushed every white product render toward the background colour, which read as a dim/washed-out photo. The catalogue images are all composited on pure #fff, so a white plate needs no blending to sit flush. */ .prod-hero .pimg{width:100%;aspect-ratio:4/3;object-fit:contain;padding:14px;background:#fff;border:1px solid var(--line-soft);border-radius:var(--r)} /* the hero image is a zoom trigger — give it the same hover affordance as a product card */ .prod-zoom-trigger{border-radius:var(--r);transition:box-shadow .25s var(--d)} .prod-zoom-trigger:hover .pimg{border-color:var(--clay)} .prod-zoom-trigger:focus-visible{outline:2px solid var(--clay);outline-offset:3px} .prod-hero .pimg.fallback{display:flex;align-items:center;justify-content:center;color:var(--clay);font-family:"Archivo",sans-serif;font-weight:800;font-size:2.2rem} .prod-hero .m{font-family:"IBM Plex Mono";font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint);margin:6px 0 14px} @media (max-width:760px){.prod-hero{grid-template-columns:1fr;gap:24px}} /* spec table */ .spec-table{width:100%;border-collapse:collapse;margin-top:10px;font-size:14.5px} .spec-table th,.spec-table td{text-align:left;padding:10px 14px;border-bottom:1px solid var(--line-soft);vertical-align:top} .spec-table th{font-family:"IBM Plex Mono";font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint);font-weight:500;width:38%} .spec-table tr:last-child th,.spec-table tr:last-child td{border-bottom:none} /* category cross-links strip */ .cat-strip{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px} .cat-strip a{font-family:"IBM Plex Sans";font-size:13.5px;font-weight:500;padding:9px 16px;border-radius:999px;border:1px solid var(--line);color:var(--ink-soft);text-decoration:none;transition:border-color .2s var(--d),color .2s var(--d)} .cat-strip a:hover{border-color:var(--clay);color:var(--ink)} .cat-strip a.current{background:var(--slate);color:var(--sand-2);border-color:var(--slate);pointer-events:none} /* simple FAQ block */ .faq-item{border-bottom:1px solid var(--line-soft);padding:18px 0} .faq-item:last-child{border-bottom:none} .faq-item h3{font-size:1.02rem;font-weight:600;margin-bottom:8px} .faq-item p{font-size:14.5px;color:var(--ink-soft)} /* products hub — single-row scrollable filter rail (brand + category merged, one control) */ .filter-panel{background:var(--sand-2);border:1px solid var(--line-soft);border-radius:var(--r);padding:14px 0;margin-bottom:30px} .filter-rail{display:flex;align-items:center;gap:8px;flex-wrap:nowrap;overflow-x:auto;padding:0 24px;scrollbar-width:none;-webkit-overflow-scrolling:touch;cursor:grab; mask-image:linear-gradient(to right,transparent 0,#000 20px,#000 calc(100% - 20px),transparent 100%); -webkit-mask-image:linear-gradient(to right,transparent 0,#000 20px,#000 calc(100% - 20px),transparent 100%)} .filter-rail::-webkit-scrollbar{display:none} .filter-rail.dragging{cursor:grabbing;user-select:none;-webkit-user-select:none} .filter-rail .chip{flex-shrink:0} .filter-rail .filter-divider{flex-shrink:0;width:1px;height:22px;background:var(--line);margin:0 2px} .filter-rail .chip[data-cat-filter]{font-size:12.5px;padding:7px 14px} .filter-rail .chip[data-cat-filter].active{background:var(--clay);color:#fff;border-color:var(--clay)} /* pagination bar (hub draft) */ .pager{display:flex;flex-wrap:wrap;align-items:center;gap:8px;justify-content:center;margin:34px 0 6px} .pager button{font-family:"IBM Plex Mono";font-size:13px;min-width:38px;padding:8px 12px;border-radius:10px;border:1px solid var(--line);background:transparent;color:var(--ink-soft);cursor:pointer} .pager button:hover{border-color:var(--clay);color:var(--ink)} .pager button.active{background:var(--slate);color:var(--sand-2);border-color:var(--slate)} .pager button:disabled{opacity:.4;cursor:default} .pager-count{font-family:"IBM Plex Mono";font-size:11.5px;letter-spacing:.06em;color:var(--ink-faint);text-align:center;margin-top:8px}