/** * Wabtec Product Search styles * All colors/sizes use CSS variables — override these in your theme * to match the Wabtec brand without editing the plugin. */ .wps-wrapper { --wps-bg: #ffffff; --wps-fg: #1a1a1a; --wps-muted: #6b7280; --wps-border: #e5e7eb; --wps-border-focus: #1a1a1a; --wps-accent: #c8102e; /* Wabtec red — adjust as needed */ --wps-hover-bg: #f5f5f5; --wps-shadow: 0 12px 32px -8px rgba(0, 0, 0, 0.18); --wps-radius: 6px; --wps-thumb-size: 48px; position: relative; width: 100%; font-family: inherit; box-sizing: border-box; } .wps-wrapper *, .wps-wrapper *::before, .wps-wrapper *::after { box-sizing: border-box; } /* Input row */ .wps-input-row { position: relative; display: flex; align-items: center; } .wps-input { width: 100%; padding: 12px 80px 12px 16px; font-size: 15px; line-height: 1.4; color: var(--wps-fg); background: var(--wps-bg); border: 1px solid var(--wps-border); border-radius: var(--wps-radius); outline: none; transition: border-color 0.15s ease, box-shadow 0.15s ease; -webkit-appearance: none; appearance: none; } .wps-input::-webkit-search-decoration, .wps-input::-webkit-search-cancel-button, .wps-input::-webkit-search-results-button, .wps-input::-webkit-search-results-decoration { -webkit-appearance: none; } .wps-input::placeholder { color: var(--wps-muted); } .wps-input:focus { border-color: var(--wps-border-focus); box-shadow: 0 0 0 3px rgba(26, 26, 26, 0.08); } .wps-icon { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: var(--wps-muted); pointer-events: none; display: flex; } .wps-clear { position: absolute; right: 42px; top: 50%; transform: translateY(-50%); background: transparent; border: 0; padding: 4px; cursor: pointer; color: var(--wps-muted); display: flex; align-items: center; justify-content: center; border-radius: 999px; transition: background 0.15s ease, color 0.15s ease; } .wps-clear:hover { background: var(--wps-hover-bg); color: var(--wps-fg); } /* Dropdown */ .wps-results { position: absolute; top: calc(100% + 6px); left: 0; right: 0; max-height: 480px; overflow-y: auto; background: var(--wps-bg); border: 1px solid var(--wps-border); border-radius: var(--wps-radius); box-shadow: var(--wps-shadow); z-index: 9999; padding: 4px; } /* Detached dropdown — moved to to escape any ancestor overflow:hidden or stacking context (Breakdance menu/header). Positioned via inline position:fixed + top/left/width set by JS. The very high z-index sits above sticky headers, sliders, and Breakdance overlays. The variables are re-declared here because the node no longer inherits them from .wps-wrapper once it's detached from that subtree. */ .wps-results--detached { position: fixed; right: auto; z-index: 2147483000; /* just below max int — beats sticky headers & overlays */ --wps-bg: #ffffff; --wps-fg: #1a1a1a; --wps-muted: #6b7280; --wps-border: #e5e7eb; --wps-accent: #c8102e; --wps-hover-bg: #f5f5f5; --wps-shadow: 0 12px 32px -8px rgba(0, 0, 0, 0.18); --wps-radius: 6px; --wps-thumb-size: 48px; background: var(--wps-bg); border: 1px solid var(--wps-border); border-radius: var(--wps-radius); box-shadow: var(--wps-shadow); font-family: inherit; box-sizing: border-box; } .wps-results--detached *, .wps-results--detached *::before, .wps-results--detached *::after { box-sizing: border-box; } /* Section header — one per category (Producten / Blogs / Pagina's) */ .wps-section { padding: 0; } .wps-section + .wps-section { border-top: 1px solid var(--wps-border); margin-top: 4px; padding-top: 4px; } .wps-section-header { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--wps-muted); padding: 8px 12px 4px; user-select: none; } /* Text-only rows (posts / pages) — no thumbnail, lighter padding */ .wps-result--text { padding: 8px 12px; } .wps-result--text .wps-meta { padding: 0; } /* "Toon alle resultaten" footer link */ .wps-show-all { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; margin-top: 4px; border-top: 1px solid var(--wps-border); text-decoration: none; color: var(--wps-accent); font-size: 13px; font-weight: 500; transition: background 0.1s ease; cursor: pointer; } .wps-show-all:hover, .wps-show-all.is-active, .wps-show-all:focus { background: var(--wps-hover-bg); text-decoration: none; outline: none; } .wps-show-all svg { flex-shrink: 0; } /* Result item */ .wps-result { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: calc(var(--wps-radius) - 2px); text-decoration: none; color: var(--wps-fg); transition: background 0.1s ease; cursor: pointer; } .wps-result:hover, .wps-result.is-active, .wps-result:focus { background: var(--wps-hover-bg); text-decoration: none; outline: none; } .wps-thumb { flex: 0 0 var(--wps-thumb-size); width: var(--wps-thumb-size); height: var(--wps-thumb-size); border-radius: 4px; overflow: hidden; background: var(--wps-hover-bg); display: flex; align-items: center; justify-content: center; } .wps-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .wps-no-thumb { width: 100%; height: 100%; background: linear-gradient(45deg, transparent 48%, var(--wps-border) 48%, var(--wps-border) 52%, transparent 52%), var(--wps-hover-bg); } .wps-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; } .wps-title { font-size: 14px; font-weight: 500; line-height: 1.35; color: var(--wps-fg); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .wps-sku { font-size: 12px; color: var(--wps-muted); font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; letter-spacing: 0.02em; } .wps-result mark { background: transparent; color: var(--wps-accent); font-weight: 600; padding: 0; } /* Empty / loading states */ .wps-empty, .wps-loading { padding: 16px 12px; color: var(--wps-muted); font-size: 14px; text-align: center; } .wps-loading { display: flex; align-items: center; justify-content: center; gap: 8px; } .wps-loading::before { content: ''; width: 12px; height: 12px; border: 2px solid var(--wps-border); border-top-color: var(--wps-accent); border-radius: 50%; animation: wps-spin 0.7s linear infinite; } @keyframes wps-spin { to { transform: rotate(360deg); } } /* Screen reader only */ .wps-wrapper .screen-reader-text { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* Mobile tweaks */ @media (max-width: 640px) { .wps-wrapper { --wps-thumb-size: 40px; } .wps-input { font-size: 16px; /* prevent iOS zoom */ } }