/* ========================================================= Smart Search (com_finder) results as grid tiles (template option) Applies only when body has class .finder-grid Styled to match mod_ch_articles_grid "tile UI" ========================================================= */ body.finder-grid .com-finder .com-finder__results > ul, body.finder-grid .com-finder .com-finder__results > ol, body.finder-grid .com-finder .finder__results > ul, body.finder-grid .com-finder .finder__results > ol, body.finder-grid .com-finder ul.com-finder__results, body.finder-grid .com-finder ol.com-finder__results{ list-style:none; padding:0; margin:12px 0 0; display:grid; gap: var(--finder-gap, 16px); grid-template-columns: repeat(var(--finder-cols-m, 1), minmax(0, 1fr)); /* Auto-fill mode (tile size control) */ } /* Auto-fill grid mode: ignore fixed column counts and use tile min width */ body.finder-grid.finder-grid-autofill .com-finder .com-finder__results > ul, body.finder-grid.finder-grid-autofill .com-finder .com-finder__results > ol, body.finder-grid.finder-grid-autofill .com-finder .finder__results > ul, body.finder-grid.finder-grid-autofill .com-finder .finder__results > ol, body.finder-grid.finder-grid-autofill .com-finder ul.com-finder__results, body.finder-grid.finder-grid-autofill .com-finder ol.com-finder__results{ grid-template-columns: repeat(auto-fill, minmax(var(--finder-minw, 280px), 1fr)); } @media (min-width: 768px){ body.finder-grid .com-finder .com-finder__results > ul, body.finder-grid .com-finder .com-finder__results > ol, body.finder-grid .com-finder .finder__results > ul, body.finder-grid .com-finder .finder__results > ol, body.finder-grid .com-finder ul.com-finder__results, body.finder-grid .com-finder ol.com-finder__results{ grid-template-columns: repeat(var(--finder-cols-t, 2), minmax(0, 1fr)); } } @media (min-width: 992px){ body.finder-grid .com-finder .com-finder__results > ul, body.finder-grid .com-finder .com-finder__results > ol, body.finder-grid .com-finder .finder__results > ul, body.finder-grid .com-finder .finder__results > ol, body.finder-grid .com-finder ul.com-finder__results, body.finder-grid .com-finder ol.com-finder__results{ grid-template-columns: repeat(var(--finder-cols-d, 3), minmax(0, 1fr)); } } /* --------------------------------------------------------- Card (li) – base --------------------------------------------------------- */ body.finder-grid .com-finder .com-finder__results li, body.finder-grid .com-finder .finder__results li{ border-radius: var(--finder-radius, 20px); overflow:hidden; /* Border alpha uses % (0..60) like the module */ border: 1px solid color-mix(in srgb, currentColor calc(var(--finder-border-alpha, 14) * 1%), transparent); background: var(--finder-light-bg, var(--surface)); color: var(--finder-light-text, var(--text)); box-shadow: var(--card-shadow, var(--shadow-sm)); min-height: calc(var(--finder-tile-minh, 0px)); transition: transform .25s ease, box-shadow .25s ease, background .25s ease, border-color .25s ease; } body.theme-dark.finder-grid .com-finder .com-finder__results li, body.theme-dark.finder-grid .com-finder .finder__results li{ background: var(--finder-dark-bg, var(--surface)); color: var(--finder-dark-text, var(--text)); } body.finder-grid .com-finder .com-finder__results li:hover, body.finder-grid .com-finder .finder__results li:hover{ transform: translateY(-2px); box-shadow: 0 16px 40px rgba(0,0,0,.18); } /* Make whole item clickable */ body.finder-grid .com-finder .com-finder__results li a, body.finder-grid .com-finder .finder__results li a{ display:block; padding: var(--finder-tile-pad, 14px) var(--finder-tile-pad, 14px) calc(var(--finder-tile-pad, 14px) + 2px); color: inherit; text-decoration:none; } /* --------------------------------------------------------- Tile variants (matching the module options) We use body class finder-tile-variant-* --------------------------------------------------------- */ /* SOLID – default is close enough, but make border subtler */ body.finder-grid.finder-tile-variant-solid .com-finder .com-finder__results li, body.finder-grid.finder-tile-variant-solid .com-finder .finder__results li{ box-shadow: 0 10px 28px rgba(0,0,0,.14); } /* GLASS */ body.finder-grid.finder-tile-variant-glass .com-finder .com-finder__results li, body.finder-grid.finder-tile-variant-glass .com-finder .finder__results li{ background: color-mix(in srgb, var(--finder-light-bg, #fff) 72%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } body.theme-dark.finder-grid.finder-tile-variant-glass .com-finder .com-finder__results li, body.theme-dark.finder-grid.finder-tile-variant-glass .com-finder .finder__results li{ background: color-mix(in srgb, var(--finder-dark-bg, #0B0F16) 72%, transparent); } /* GRADIENT */ body.finder-grid.finder-tile-variant-gradient .com-finder .com-finder__results li, body.finder-grid.finder-tile-variant-gradient .com-finder .finder__results li{ background: linear-gradient(135deg, color-mix(in srgb, var(--finder-light-bg, #fff) 84%, var(--finder-light-accent, #E10600)), var(--finder-light-bg, #fff) ); } body.theme-dark.finder-grid.finder-tile-variant-gradient .com-finder .com-finder__results li, body.theme-dark.finder-grid.finder-tile-variant-gradient .com-finder .finder__results li{ background: linear-gradient(135deg, color-mix(in srgb, var(--finder-dark-bg, #0B0F16) 84%, var(--finder-dark-accent, #00B3FF)), var(--finder-dark-bg, #0B0F16) ); } /* ACCENT BAR */ body.finder-grid.finder-tile-variant-accent_bar .com-finder .com-finder__results li, body.finder-grid.finder-tile-variant-accent_bar .com-finder .finder__results li{ position: relative; } body.finder-grid.finder-tile-variant-accent_bar .com-finder .com-finder__results li::before, body.finder-grid.finder-tile-variant-accent_bar .com-finder .finder__results li::before{ content:""; position:absolute; inset:0 auto 0 0; width:4px; background: var(--finder-light-accent, #E10600); opacity:.9; } body.theme-dark.finder-grid.finder-tile-variant-accent_bar .com-finder .com-finder__results li::before, body.theme-dark.finder-grid.finder-tile-variant-accent_bar .com-finder .finder__results li::before{ background: var(--finder-dark-accent, #00B3FF); } /* NEON */ body.finder-grid.finder-tile-variant-neon .com-finder .com-finder__results li, body.finder-grid.finder-tile-variant-neon .com-finder .finder__results li{ box-shadow: 0 12px 28px rgba(0,0,0,.22), 0 0 0 1px color-mix(in srgb, var(--finder-light-accent, #E10600) 50%, transparent), 0 0 24px color-mix(in srgb, var(--finder-light-accent, #E10600) 35%, transparent); } body.theme-dark.finder-grid.finder-tile-variant-neon .com-finder .com-finder__results li, body.theme-dark.finder-grid.finder-tile-variant-neon .com-finder .finder__results li{ box-shadow: 0 12px 28px rgba(0,0,0,.55), 0 0 0 1px color-mix(in srgb, var(--finder-dark-accent, #00B3FF) 55%, transparent), 0 0 26px color-mix(in srgb, var(--finder-dark-accent, #00B3FF) 38%, transparent); } /* SOFT */ body.finder-grid.finder-tile-variant-soft .com-finder .com-finder__results li, body.finder-grid.finder-tile-variant-soft .com-finder .finder__results li{ border-color: color-mix(in srgb, currentColor 10%, transparent); box-shadow: 0 10px 24px rgba(0,0,0,.12); } body.finder-grid.finder-tile-variant-soft .com-finder .com-finder__results li:hover, body.finder-grid.finder-tile-variant-soft .com-finder .finder__results li:hover{ box-shadow: 0 16px 32px rgba(0,0,0,.16); } /* MINIMAL */ body.finder-grid.finder-tile-variant-minimal .com-finder .com-finder__results li, body.finder-grid.finder-tile-variant-minimal .com-finder .finder__results li{ box-shadow: none; border-color: color-mix(in srgb, currentColor 18%, transparent); } body.finder-grid.finder-tile-variant-minimal .com-finder .com-finder__results li:hover, body.finder-grid.finder-tile-variant-minimal .com-finder .finder__results li:hover{ box-shadow: none; transform: none; } /* AUTO – let theme decide; nothing extra */ /* --------------------------------------------------------- Title / Snippet typography --------------------------------------------------------- */ body.finder-grid .com-finder .com-finder__results .result__title, body.finder-grid .com-finder .finder__results .result__title, body.finder-grid .com-finder .com-finder__results h4, body.finder-grid .com-finder .finder__results h4{ margin:0 0 8px; font-size: 1.08rem; line-height: 1.25; font-weight: var(--finder-title-weight, 800); text-transform: var(--finder-title-transform, none); letter-spacing: var(--finder-letter-spacing, 0px); } /* Optional text shadow (like module) */ body.finder-grid:not(.finder-text-shadow-off) .com-finder .result__title, body.finder-grid:not(.finder-text-shadow-off) .com-finder .result__description, body.finder-grid:not(.finder-text-shadow-off) .com-finder .result__text{ text-shadow: 0 1px 0 rgba(0,0,0,.08); } body.theme-dark.finder-grid:not(.finder-text-shadow-off) .com-finder .result__title, body.theme-dark.finder-grid:not(.finder-text-shadow-off) .com-finder .result__description, body.theme-dark.finder-grid:not(.finder-text-shadow-off) .com-finder .result__text{ text-shadow: 0 1px 0 rgba(0,0,0,.35); } /* Snippet / description */ body.finder-grid .com-finder .com-finder__results .result__description, body.finder-grid .com-finder .finder__results .result__description, body.finder-grid .com-finder .com-finder__results .result__text, body.finder-grid .com-finder .finder__results .result__text{ margin:0; font-size: .96rem; font-weight: var(--finder-text-weight, 400); color: var(--finder-light-muted, rgba(11,18,32,.75)); display: -webkit-box; -webkit-line-clamp: var(--finder-snippet-lines, 3); -webkit-box-orient: vertical; overflow: hidden; } body.theme-dark.finder-grid .com-finder .result__description, body.theme-dark.finder-grid .com-finder .result__text{ color: var(--finder-dark-muted, rgba(243,244,246,.75)); } body.finder-grid.finder-snippet-0 .com-finder .result__description, body.finder-grid.finder-snippet-0 .com-finder .result__text{ display:none !important; } /* --------------------------------------------------------- Optional hiding of meta/service blocks --------------------------------------------------------- */ body.finder-grid.finder-grid-hide-meta .com-finder .result__meta, body.finder-grid.finder-grid-hide-meta .com-finder .result__taxonomy, body.finder-grid.finder-grid-hide-meta .com-finder .result__mime, body.finder-grid.finder-grid-hide-meta .com-finder .result__url, body.finder-grid.finder-grid-hide-meta .com-finder .result__published{ display:none !important; } /* Hide "service" blocks if enabled (form/tips/time/query info) */ body.finder-grid.finder-grid-hide-info .com-finder .com-finder__searchword, body.finder-grid.finder-grid-hide-info .com-finder .com-finder__tips, body.finder-grid.finder-grid-hide-info .com-finder .com-finder__info, body.finder-grid.finder-grid-hide-info .com-finder .com-finder__advanced, body.finder-grid.finder-grid-hide-info .com-finder .com-finder__query, body.finder-grid.finder-grid-hide-info .com-finder .com-finder__time, body.finder-grid.finder-grid-hide-info .com-finder .com-finder__description{ display:none !important; } /* Page/module heading color on Smart Search page */ body.finder-grid .com-finder .page-header h1, body.finder-grid .com-finder h1.page-title, body.finder-grid .com-finder h1{ color: var(--finder-heading-light, inherit); } body.theme-dark.finder-grid .com-finder .page-header h1, body.theme-dark.finder-grid .com-finder h1.page-title, body.theme-dark.finder-grid .com-finder h1{ color: var(--finder-heading-dark, inherit); } /* Article title color inside tile */ body.finder-grid .com-finder .result__title a, body.finder-grid .com-finder .result__title a:visited{ color: var(--finder-itemtitle-light, currentColor); } body.theme-dark.finder-grid .com-finder .result__title a, body.theme-dark.finder-grid .com-finder .result__title a:visited{ color: var(--finder-itemtitle-dark, currentColor); } /* --------------------------------------------------------- Extra controls (module-like) --------------------------------------------------------- */ /* Hide intro/snippet */ body.finder-grid.finder-hide-intro .com-finder .result__description, body.finder-grid.finder-hide-intro .com-finder .result__text, body.finder-grid.finder-hide-intro .com-finder .result__description *{ display:none !important; } /* Images (if present in result markup) */ body.finder-grid .com-finder .result__image img, body.finder-grid .com-finder .result__image picture img, body.finder-grid .com-finder img.result__image{ width:100%; height: var(--finder-img-h, 180px); object-fit: cover; display:block; } body.finder-grid.finder-hide-image .com-finder .result__image, body.finder-grid.finder-hide-image .com-finder img.result__image{ display:none !important; } /* Title styling */ body.finder-grid .com-finder .result__title, body.finder-grid .com-finder .com-finder__results .result__title{ font-size: var(--finder-itemtitle-size, 18px); font-style: var(--finder-itemtitle-style, inherit); color: var(--finder-itemtitle-light, #0B1220); } body.theme-dark.finder-grid .com-finder .result__title, body.theme-dark.finder-grid .com-finder .com-finder__results .result__title{ color: var(--finder-itemtitle-dark, #F3F4F6); } /* Heading color (page/module title) */ body.finder-grid .com-finder h1, body.finder-grid .com-finder h2, body.finder-grid .com-finder .page-header h1{ color: var(--finder-heading-light, #0B1220); } body.theme-dark.finder-grid .com-finder h1, body.theme-dark.finder-grid .com-finder h2, body.theme-dark.finder-grid .com-finder .page-header h1{ color: var(--finder-heading-dark, #F3F4F6); } /* CTA appended by JS */ body.finder-grid .com-finder .finder-cta{ display:inline-flex; margin-top:10px; font-weight: 900; color: var(--finder-light-accent, #E10600); } body.theme-dark.finder-grid .com-finder .finder-cta{ color: var(--finder-dark-accent, #00B3FF); } /* Slider mode */ body.finder-grid.finder-slider .com-finder .com-finder__results > ul, body.finder-grid.finder-slider .com-finder .finder__results > ul, body.finder-grid.finder-slider .com-finder ul.com-finder__results{ display:flex; gap: var(--finder-gap, 16px); overflow-x:auto; padding-bottom: 6px; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; } body.finder-grid.finder-slider .com-finder .com-finder__results li, body.finder-grid.finder-slider .com-finder .finder__results li{ flex: 0 0 auto; width: var(--finder-cardw, 320px); scroll-snap-align: start; } body.finder-grid.finder-slider .finder-slider__arrow{ position:absolute; top:50%; transform: translateY(-50%); width:40px; height:40px; border-radius:999px; border:1px solid rgba(0,0,0,.15); background: rgba(255,255,255,.9); box-shadow: 0 8px 20px rgba(0,0,0,.18); cursor:pointer; font-size:26px; line-height:38px; padding:0; } body.theme-dark.finder-grid.finder-slider .finder-slider__arrow{ background: rgba(11,15,22,.9); border-color: rgba(255,255,255,.18); color:#F3F4F6; } body.finder-grid.finder-slider .finder-slider__arrow--prev{left:-10px;} body.finder-grid.finder-slider .finder-slider__arrow--next{right:-10px;} body.finder-grid.finder-slider .com-finder .com-finder__results > ul::-webkit-scrollbar{height:8px;}