/* Search Collection page styles Page-specific layout only. Shared hero/search form pieces live in hero.css. */ /* Hero band uses the exact same gradient as home.css .hero-bg-gradient for uniformity */ .search-hero { background: linear-gradient(to right, var(--color-primary-rgba), var(--color-bg-beige)); padding: 2.25rem 0 2.75rem; color: var(--color-bg-white); } .search-hero .container { text-align: center; } .search-hero-title { color: var(--color-bg-white); font-size: clamp(1.8rem, 4vw, 2.4rem); margin-bottom: 1.25rem; } /* Page-specific override so the search form card matches the width used on the home page without modifying the shared hero.css or home.css */ .search-card { max-width: 820px; } /* More Ways to Search uses the light gray background from .events-section in home */ .more-ways { background-color: var(--color-bg-light-gray); padding: 2rem 0 2.5rem; } .more-ways-title { text-align: center; margin-bottom: 1.1rem; font-size: 1.5rem; } .ways-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; max-width: 1080px; margin: 0 auto; } .way-card { /* blend with background - no border or bg */ } .way-card-header { background-size: cover; background-position: center; background-repeat: no-repeat; padding: 2rem 1.25rem; min-height: 130px; display: flex; align-items: center; justify-content: center; } /* Card-specific background images (moved from inline styles in page-searchtest.php) */ .way-card--maps .way-card-header { background-image: url('https://images.unsplash.com/photo-1524661135-423995f22d0b?q=80&w=600&auto=format&fit=crop'); } .way-card--catalogs .way-card-header { background-image: url('https://images.unsplash.com/photo-1456513080510-7bf3a84b82f8?q=80&w=600&auto=format&fit=crop'); } .way-card--about .way-card-header { background-image: url('https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?q=80&w=600&auto=format&fit=crop'); } .way-card-header h3 { font-family: var(--font-serif); font-size: 1.4rem; color: #fff; margin: 0; text-align: center; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.65); line-height: 1.2; white-space: nowrap; } .way-card-body { padding-top: 0.6rem; text-align: center; } .way-card-body p { font-size: 0.78rem; color: var(--text-muted); margin-bottom: 0.4rem; line-height: 1.35; } .way-card-body a { color: var(--text-dark); text-decoration: none; border-bottom: 3px solid var(--color-secondary); padding-bottom: 2px; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; } /* Our St. Louis Collection section */ .our-collection { padding: 1rem 0 2.5rem; } .our-collection-grid { display: grid; grid-template-columns: 1fr 400px; gap: 1.75rem; max-width: 1080px; margin: 0 auto; } .our-collection .intro-text { color: var(--text-muted); font-size: 0.85rem; margin-bottom: 0.75rem; } .collection-photo { border: 1px solid var(--border-light); border-radius: 3px; overflow: hidden; } .collection-caption { font-size: 0.65rem; color: var(--text-subtle); padding: 0.4rem 0.55rem; } /* Compact primary button */ .search-tips-btn { padding: 0.45rem 0.9rem; font-size: 0.65rem; letter-spacing: 0.05em; box-shadow: 0 2px 0 var(--color-accent-lime); } /* Responsive */ @media (max-width: 820px) { .ways-grid { grid-template-columns: 1fr; max-width: 460px; } .our-collection-grid { grid-template-columns: 1fr; } .search-row { grid-template-columns: 1fr 130px; } } @media (max-width: 480px) { .search-card { max-width: 100%; } .search-row { grid-template-columns: 1fr; } } /* Search results visibility (controlled via classes, no inline styles) Scoped to #search-results (the container on /searchtest) so it doesn't accidentally match on regular WP search pages. */ #search-results.search-results { display: none; } #search-results.search-results.visible { display: block; } /* Hide the "before search" content sections when results are shown. Added via classList in JS (search.js) instead of element.style.display. */ .hidden-for-search { display: none; } /* Category filter as native accordion inside the search form card. "All Categories" lives in the

. Tree of checkboxes is revealed when open. Uses native

per NewSearch.md (structure only for now). */ .search-cat-filter { width: 100%; min-width: 0; border-radius: 3px; } /* Always-present anchor for scrolling to search results. The anchor lives in the source before the #search-results section so it is guaranteed to exist when we attempt to scroll (no race on dynamic insert). scroll-margin-top compensates for the sticky header. */ .search-anchor { /* Offset roughly matches the sticky header height + a little breathing room. */ scroll-margin-top: 90px; } .search-cat-filter > summary { list-style: none; cursor: pointer; padding: 0.45rem 0.55rem; font-size: 0.85rem; background: var(--color-bg-banner); border: 1px solid var(--border-light); border-radius: 3px; display: flex; align-items: center; justify-content: space-between; color: var(--text-dark); font-weight: 500; width: 100%; box-sizing: border-box; } .search-cat-filter > summary::-webkit-details-marker { display: none; } /* Left side holds the All Categories checkbox + label */ .search-cat-filter .cat-summary-left { display: inline-flex; align-items: center; gap: 0.4rem; white-space: nowrap; flex-shrink: 0; } .search-cat-filter .cat-summary-left label { cursor: pointer; user-select: none; } /* Chevron reuses existing nav-indicator styles from style.css */ .search-cat-filter .accordion-chevron { display: inline-flex; align-items: center; gap: 0.3rem; pointer-events: none; /* chevron is purely visual; clicking summary toggles */ } /* Explicit gray pipe color (like .content-accordion .indicator-pipe). The summary sets a dark text color for the "All Categories" label, which would otherwise make the | pipe inherit black/dark instead of the usual gray. */ .search-cat-filter .indicator-pipe { color: var(--text-divider); font-weight: 400; font-size: 0.9em; line-height: 1; } /* Open panel with the category checkboxes (expands naturally to fit all items) */ .search-cat-filter .cat-tree { background: var(--color-bg-white); border: 1px solid var(--border-light); border-top: none; border-radius: 0 0 3px 3px; padding: 0.35rem 0.55rem 0.55rem 0.6rem; display: flex; flex-direction: column; gap: 0.15rem; width: 100%; box-sizing: border-box; } /* Nested sub-categories get additional left indent so the tree structure is visible. Each deeper level adds another .cat-subtree wrapper. */ .search-cat-filter .cat-subtree { display: flex; flex-direction: column; gap: 0.12rem; padding-left: 0.75rem; } /* Extra breathing room under an expanded parent summary before its children */ .search-cat-filter .cat-parent > .cat-subtree { padding-top: 0.1rem; } /* Parent categories inside the tree are

(native). Collapsed by default. The caret is on the left for clear collapsed/expanded state. */ .search-cat-filter .cat-parent > summary { list-style: none; display: flex; align-items: center; justify-content: flex-start; gap: 0.2rem; padding: 0.08rem 0.1rem 0.08rem 0; cursor: pointer; color: var(--text-dark); font-size: 0.82rem; width: 100%; } .search-cat-filter .cat-parent > summary::-webkit-details-marker { display: none; } /* Consistent caret / placeholder for all rows at the same level. This ensures checkboxes and labels align vertically whether or not the item has children (parents show a visible caret, leaves reserve the space). */ .search-cat-filter .cat-caret { display: inline-block; width: 14px; height: 10px; flex-shrink: 0; margin-right: 0.1rem; position: relative; vertical-align: middle; } .search-cat-filter .cat-caret::before { content: ""; position: absolute; top: 50%; left: 4px; /* center the triangle inside the slot */ width: 0; height: 0; border-top: 4.5px solid transparent; border-bottom: 4.5px solid transparent; border-left: 6px solid var(--text-subtle); transform: translateY(-50%); } .search-cat-filter .cat-parent[open] .cat-caret::before { border-left-color: var(--text-muted); transform: translateY(-50%) rotate(90deg); left: 5px; } /* Empty placeholder for leaves: reserves the exact same space as a real caret so that sibling items at the same depth line up perfectly. */ .search-cat-filter .cat-caret.cat-caret-empty::before { content: none; } /* The name text. Clicking it (or the caret) expands the parent via the summary. */ .search-cat-filter .cat-parent > summary .cat-name { white-space: nowrap; user-select: none; } /* Keep the checkbox small and not eating the row for expansion */ .search-cat-filter .cat-parent > summary input[type="checkbox"] { flex-shrink: 0; margin: 0; } /* Subtle hover on the whole parent row (except the checkbox itself) */ .search-cat-filter .cat-parent > summary:hover { background-color: rgba(0, 0, 0, 0.035); border-radius: 2px; } /* Individual category checkbox rows */ .search-cat-filter .cat-option { display: flex; align-items: center; justify-content: flex-start; gap: 0.15rem; font-size: 0.82rem; color: var(--text-dark); cursor: pointer; padding: 0.08rem 0; width: 100%; } .search-cat-filter .cat-option input[type="checkbox"] { margin: 0; flex-shrink: 0; width: auto; } /* The form grid has a broad rule for .search-row input { width:100% }. We must override it for our filter's checkboxes so they don't expand and push labels far to the right (causing horizontal scroll in the tree). */ .search-row .search-cat-filter input[type="checkbox"] { width: auto; padding: 0; background: transparent; border: none; box-shadow: none; } .search-cat-filter .cat-option span { user-select: none; } /* Placeholder when no categories */ .search-cat-filter .cat-empty { font-size: 0.8rem; color: var(--text-subtle); padding: 0.2rem 0; } /* When open, soften the summary border connection */ .search-cat-filter[open] > summary { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border-bottom-color: var(--border-light); } /* Make checkboxes inside the form inherit focus ring treatment */ .search-cat-filter input[type="checkbox"]:focus { outline: none; box-shadow: 0 0 0 2px var(--color-lime-focus-ring); } /* Tiny external link icon shown after category names in the search filter accordion when the category has an explanation page. Matches the visual style of the "Learn More" link icon used in the collection catalogs tree. */ .search-cat-filter .cat-explain-link { display: inline-flex; align-items: center; justify-content: center; margin-left: 0.25rem; padding: 1px 2px; color: var(--color-primary); text-decoration: none; line-height: 1; flex-shrink: 0; border-radius: 2px; } .search-cat-filter .cat-explain-link:hover { text-decoration: underline; color: var(--color-primary); } .search-cat-filter .cat-explain-link:focus { outline: 2px solid var(--color-lime-focus-ring); outline-offset: 1px; } .search-cat-filter .cat-explain-link .cat-explain-icon, .search-cat-filter .cat-explain-link svg { width: 11px; height: 11px; stroke: currentColor; vertical-align: -1px; } /* search.php (default WP site search) Reuses .search-hero + .search-card (with hanging button) from hero.css exactly. Reuses .blog-post-title + .blog-excerpt from blog.css for result items. Only the small bits that don't exist elsewhere. */ .site-search-results { padding: 1rem 0 2rem; } .search-result { padding-bottom: 0.65rem; border-bottom: 1px solid var(--border-light); } .search-result:last-child { border-bottom: none; padding-bottom: 0; } .search-result-meta { font-size: 0.66rem; color: var(--text-subtle); margin-top: 0.15rem; text-transform: uppercase; letter-spacing: 0.03em; } .search-advanced-link a { color: var(--color-secondary); font-weight: 600; text-decoration: none; } .search-advanced-link a:hover { text-decoration: underline; } .search-no-results a { color: var(--color-secondary); font-weight: 600; } /* 404 page tweaks (reuses search-hero + search-card from search.css) */ body.error404 .search-hero-title { margin-bottom: 0.5rem; } body.error404 .search-no-results { text-align: center; } body.error404 .search-no-results p { margin: 0.25rem 0; }