/* * InfiCatalog - frontend styles * * Everything is scoped with an "inficatalog-" prefix so it never leaks * into (or clashes with) theme styles, and built on CSS custom properties * so the Design settings tab (accent color, button style, border radius, * card style, typography size) can re-theme the whole catalog by changing * a handful of variables - see Inficatalog_Assets::inline_design_css(). * No Google Fonts or other external assets are ever loaded; only system * fonts are used. */ :root { --inficatalog-accent: #4f46e5; --inficatalog-accent-contrast: #ffffff; --inficatalog-text: #1a1d29; --inficatalog-muted: #6b7280; --inficatalog-border: #e5e7eb; --inficatalog-bg: #ffffff; --inficatalog-radius: 12px; --inficatalog-font-scale: 1; --inficatalog-columns: 3; } .inficatalog-container { max-width: 1240px; margin: 0 auto; padding: 0 20px; box-sizing: border-box; font-size: calc(1em * var(--inficatalog-font-scale)); } .inficatalog-container *, .inficatalog-grid *, .inficatalog-cat-grid * { box-sizing: border-box; } /* ---------- Buttons ---------- */ .inficatalog-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 18px; border-radius: var(--inficatalog-radius); font-size: 0.9em; font-weight: 600; text-decoration: none; background: var(--inficatalog-accent); color: var(--inficatalog-accent-contrast); border: 2px solid var(--inficatalog-accent); cursor: pointer; transition: opacity 0.15s ease, transform 0.15s ease; } .inficatalog-btn:hover, .inficatalog-btn:focus-visible { opacity: 0.88; } .inficatalog-btn:focus-visible { outline: 3px solid var(--inficatalog-accent); outline-offset: 2px; } .inficatalog-btn-enquiry, .inficatalog-btn-cta { background: transparent; color: var(--inficatalog-accent); } body.inficatalog-btn-style-outline .inficatalog-btn-view, body.inficatalog-btn-style-outline .inficatalog-btn-search { background: transparent; color: var(--inficatalog-accent); } /* ---------- Grid / List ---------- */ .inficatalog-grid--grid { display: grid; grid-template-columns: repeat(var(--inficatalog-columns, 3), minmax(0, 1fr)); gap: 24px; margin: 24px 0; } @media (max-width: 992px) { .inficatalog-grid--grid { grid-template-columns: repeat(min(3, var(--inficatalog-columns, 3)), minmax(0, 1fr)); } } @media (max-width: 700px) { .inficatalog-grid--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } } @media (max-width: 460px) { .inficatalog-grid--grid { grid-template-columns: 1fr; } } .inficatalog-grid--list { display: flex; flex-direction: column; gap: 16px; margin: 24px 0; } .inficatalog-grid--list .inficatalog-card { display: grid; grid-template-columns: 220px 1fr; gap: 20px; } @media (max-width: 600px) { .inficatalog-grid--list .inficatalog-card { grid-template-columns: 1fr; } } /* ---------- Card ---------- */ .inficatalog-card { background: var(--inficatalog-bg); border-radius: var(--inficatalog-radius); overflow: hidden; transition: transform 0.18s ease, box-shadow 0.18s ease; position: relative; } /* Card style variants, applied on by Inficatalog_Assets. */ body.inficatalog-card-style-shadow .inficatalog-card { border: 1px solid var(--inficatalog-border); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06); } body.inficatalog-card-style-shadow .inficatalog-card:hover { transform: translateY(-4px); box-shadow: 0 14px 28px rgba(0, 0, 0, 0.1); } body.inficatalog-card-style-border .inficatalog-card { border: 1px solid var(--inficatalog-border); } body.inficatalog-card-style-minimal .inficatalog-card { border: none; } .inficatalog-card-media { position: relative; background: #f5f6f8; overflow: hidden; } .inficatalog-ratio-square .inficatalog-card-media { aspect-ratio: 1 / 1; } .inficatalog-ratio-portrait .inficatalog-card-media { aspect-ratio: 3 / 4; } .inficatalog-ratio-landscape .inficatalog-card-media { aspect-ratio: 4 / 3; } .inficatalog-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.35s ease; } .inficatalog-card:hover .inficatalog-card-media img { transform: scale(1.05); } .inficatalog-badge { position: absolute; top: 10px; left: 10px; background: var(--inficatalog-accent); color: var(--inficatalog-accent-contrast); font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; } .inficatalog-card--featured { box-shadow: 0 0 0 2px var(--inficatalog-accent); } .inficatalog-card-body { padding: 16px; } .inficatalog-card-cat { display: block; font-size: 0.78em; text-transform: uppercase; letter-spacing: 0.04em; color: var(--inficatalog-muted); margin-bottom: 4px; } .inficatalog-card-title { margin: 0 0 6px; font-size: 1.05em; font-weight: 700; line-height: 1.35; } .inficatalog-card-title a { color: var(--inficatalog-text); text-decoration: none; } .inficatalog-card-sku { font-size: 0.8em; color: var(--inficatalog-muted); margin-bottom: 6px; } .inficatalog-card-price { font-size: 1em; font-weight: 700; margin-bottom: 8px; } .inficatalog-card-excerpt { font-size: 0.88em; color: var(--inficatalog-muted); margin: 0 0 12px; line-height: 1.5; } .inficatalog-card-actions { display: flex; flex-wrap: wrap; gap: 8px; } /* ---------- Price ---------- */ .inficatalog-price-regular { color: var(--inficatalog-accent); } del.inficatalog-price-regular { color: var(--inficatalog-muted); font-weight: 400; margin-right: 6px; text-decoration: line-through; } ins.inficatalog-price-sale { text-decoration: none; color: var(--inficatalog-accent); } /* ---------- Category grid ---------- */ .inficatalog-cat-grid--grid { display: grid; grid-template-columns: repeat(var(--inficatalog-columns, 3), minmax(0, 1fr)); gap: 20px; margin: 24px 0; } @media (max-width: 700px) { .inficatalog-cat-grid--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 460px) { .inficatalog-cat-grid--grid { grid-template-columns: 1fr; } } .inficatalog-cat-card { border: 1px solid var(--inficatalog-border); border-radius: var(--inficatalog-radius); overflow: hidden; transition: box-shadow 0.15s ease; } .inficatalog-cat-card:hover { box-shadow: 0 10px 22px rgba(0, 0, 0, 0.08); } .inficatalog-cat-card-link { text-decoration: none; color: inherit; display: block; } .inficatalog-cat-card-media { aspect-ratio: 16 / 9; background: #f5f6f8; overflow: hidden; } .inficatalog-cat-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; } .inficatalog-cat-card-body { padding: 16px; } .inficatalog-cat-card-title { margin: 0 0 6px; font-size: 1.05em; font-weight: 700; color: var(--inficatalog-text); } .inficatalog-cat-card-desc { font-size: 0.88em; color: var(--inficatalog-muted); margin: 0 0 8px; } .inficatalog-cat-card-count { font-size: 0.8em; color: var(--inficatalog-accent); font-weight: 600; } /* ---------- Search ---------- */ .inficatalog-search-form { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; } .inficatalog-search-form input[type="search"], .inficatalog-search-form select { padding: 10px 14px; border: 1px solid var(--inficatalog-border); border-radius: var(--inficatalog-radius); font-size: 0.95em; } .inficatalog-search-form input[type="search"] { flex: 1 1 240px; } /* ---------- Notices / pagination ---------- */ .inficatalog-notice { padding: 32px; text-align: center; color: var(--inficatalog-muted); background: #fafafa; border-radius: var(--inficatalog-radius); } .inficatalog-pagination { margin: 32px 0; } .inficatalog-pagination ul, .inficatalog-pagination .nav-links { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 0; justify-content: center; } .inficatalog-pagination a, .inficatalog-pagination span, .nav-links a, .nav-links span.current { display: inline-flex; align-items: center; justify-content: center; min-width: 38px; height: 38px; padding: 0 10px; border: 1px solid var(--inficatalog-border); border-radius: 8px; text-decoration: none; color: var(--inficatalog-text); } .inficatalog-pagination .current, .nav-links span.current { background: var(--inficatalog-accent); border-color: var(--inficatalog-accent); color: var(--inficatalog-accent-contrast); } /* ---------- Archive filters / breadcrumbs ---------- */ .inficatalog-archive-header h1 { margin-bottom: 8px; } .inficatalog-archive-filters { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0 8px; } .inficatalog-archive-filters select { padding: 8px 12px; border-radius: 8px; border: 1px solid var(--inficatalog-border); background: #fff; } .inficatalog-breadcrumb { margin: 20px 0 10px; font-size: 0.82em; color: var(--inficatalog-muted); } .inficatalog-breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; padding: 0; margin: 0; } .inficatalog-breadcrumb li:not(:last-child)::after { content: "/"; margin-left: 6px; color: var(--inficatalog-border); } .inficatalog-breadcrumb a { color: var(--inficatalog-muted); text-decoration: none; } .inficatalog-breadcrumb a:hover, .inficatalog-breadcrumb a:focus-visible { color: var(--inficatalog-accent); } /* ---------- Single product ---------- */ .inficatalog-single-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 48px; margin: 20px 0 40px; } @media (max-width: 800px) { .inficatalog-single-grid { grid-template-columns: 1fr; gap: 24px; } } .inficatalog-single-main-image { border-radius: var(--inficatalog-radius); overflow: hidden; background: #f5f6f8; aspect-ratio: 1 / 1; } .inficatalog-single-main-image img { width: 100%; height: 100%; object-fit: cover; cursor: zoom-in; } .inficatalog-single-thumbs { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; } .inficatalog-thumb { width: 64px; height: 64px; padding: 0; border: 2px solid var(--inficatalog-border); border-radius: 8px; overflow: hidden; background: none; cursor: pointer; } .inficatalog-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .inficatalog-thumb.is-active, .inficatalog-thumb:focus-visible { border-color: var(--inficatalog-accent); outline: none; } .inficatalog-single-title { margin: 0 0 12px; font-size: 1.9em; line-height: 1.25; } .inficatalog-single-cats { margin-bottom: 14px; display: flex; gap: 8px; flex-wrap: wrap; } .inficatalog-cat-pill { font-size: 0.78em; padding: 4px 12px; border-radius: 999px; background: #f1f3f5; color: var(--inficatalog-text); text-decoration: none; } .inficatalog-cat-pill:hover, .inficatalog-cat-pill:focus-visible { background: var(--inficatalog-accent); color: var(--inficatalog-accent-contrast); } .inficatalog-single-price { font-size: 1.7em; font-weight: 800; margin-bottom: 10px; } .inficatalog-single-meta { display: flex; gap: 16px; flex-wrap: wrap; color: var(--inficatalog-muted); margin-bottom: 16px; font-size: 0.88em; } .inficatalog-single-meta strong { color: var(--inficatalog-text); } .inficatalog-single-excerpt { color: var(--inficatalog-muted); margin-bottom: 20px; } .inficatalog-single-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 20px; } .inficatalog-specs-table { width: 100%; border-collapse: collapse; margin-top: 8px; } .inficatalog-specs-table th, .inficatalog-specs-table td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--inficatalog-border); font-size: 0.88em; } .inficatalog-specs-table th { width: 40%; color: var(--inficatalog-muted); font-weight: 600; } .inficatalog-social-share { list-style: none; display: flex; gap: 10px; flex-wrap: wrap; padding: 0; margin: 20px 0 0; } .inficatalog-social-share a { font-size: 0.8em; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--inficatalog-border); text-decoration: none; color: var(--inficatalog-text); } .inficatalog-social-share a:hover, .inficatalog-social-share a:focus-visible { border-color: var(--inficatalog-accent); color: var(--inficatalog-accent); } .inficatalog-single-description { max-width: 800px; margin: 0 0 40px; line-height: 1.7; } .inficatalog-related-products h2, .inficatalog-single-description h2 { font-size: 1.4em; margin-bottom: 16px; } /* ---------- Lightbox ---------- */ .inficatalog-lightbox { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.85); display: flex; align-items: center; justify-content: center; z-index: 100000; padding: 24px; } .inficatalog-lightbox[hidden] { display: none; } .inficatalog-lightbox img { max-width: 100%; max-height: 100%; border-radius: 6px; } .inficatalog-lightbox-close { position: absolute; top: 20px; right: 28px; background: none; border: none; color: #fff; font-size: 32px; line-height: 1; cursor: pointer; } .inficatalog-lightbox-close:focus-visible { outline: 2px solid #fff; } /* ---------- Accessibility helper ---------- */ .screen-reader-text { border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; word-wrap: normal !important; }