/* TASK-005 (v2) — Unified search: autocomplete dropdown + results-page type badges. NOTE: the nav search toggle reuses the theme-native .header-search-1 / .header-search-1-form styling from style.css — we intentionally do NOT override it here anymore. */ /* ---- Autocomplete dropdown (appended to , position:fixed via JS) ---- */ .search-suggest-box{ position:fixed; z-index:99999; display:none; background:#fff; border:1px solid #e5e5e5; max-height:360px; overflow-y:auto; text-align:left; box-shadow:0 8px 24px rgba(0,0,0,.15); border-radius:6px; } .search-suggest-item, .search-suggest-all{ display:flex; align-items:center; gap:8px; padding:9px 14px; color:#333; font-size:14px; line-height:1.3; border-bottom:1px solid #f1f1f1; text-decoration:none; } .search-suggest-item:last-of-type{ border-bottom:1px solid #f1f1f1; } .search-suggest-item:hover, .search-suggest-all:hover{ background:#f5f7f8; color:#2fbdef; } .search-suggest-text{ flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .search-suggest-type{ flex:none; font-size:11px; font-weight:600; text-transform:uppercase; padding:2px 7px; border-radius:10px; color:#fff; background:#2fbdef; } .search-suggest-all{ font-weight:600; color:#2fbdef; border-bottom:none; background:#fafdff; } /* ---- Results page: filter & sort toolbar ---- */ .search-toolbar{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:14px; margin-bottom:24px; padding-bottom:16px; border-bottom:1px solid #eef1f4; } .search-toolbar-count{ font-size:15px; color:#666; } .search-toolbar-count strong{ color:#1f2d3a; } .search-toolbar-controls{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; } .search-pills{ display:inline-flex; background:#f1f5f8; border-radius:30px; padding:3px; } .search-pill{ padding:6px 16px; border-radius:30px; font-size:13px; font-weight:600; color:#5a6b78; text-decoration:none; transition:.2s; } .search-pill.active{ background:#2fbdef; color:#fff; box-shadow:0 2px 8px rgba(47,189,239,.35); } .search-pill:hover:not(.active){ color:#2fbdef; } /* "Sort & Filter" dropdown-panel button (replaces the two bare selects) */ .search-filter-wrap{ position:relative; } .search-filter-toggle{ display:inline-flex; align-items:center; gap:8px; height:38px; padding:0 14px; border:1px solid #e3e9ee; border-radius:8px; background:#fff; color:#3a4750; font-size:13px; font-weight:600; cursor:pointer; transition:.2s; } .search-filter-toggle:hover, .search-filter-wrap.open .search-filter-toggle{ border-color:#2fbdef; color:#2fbdef; } .search-filter-toggle .sft-caret{ font-size:12px; transition:transform .2s; } .search-filter-wrap.open .sft-caret{ transform:rotate(180deg); } .search-filter-toggle.has-active::after{ content:''; width:7px; height:7px; border-radius:50%; background:#2fbdef; } .search-filter-panel{ position:absolute; right:0; top:calc(100% + 8px); z-index:1000; width:240px; max-width:90vw; background:#fff; border:1px solid #eef1f4; border-radius:12px; padding:14px; box-shadow:0 12px 30px rgba(20,40,60,.14); opacity:0; visibility:hidden; transform:translateY(-8px); transform-origin:top right; transition:opacity .2s ease, transform .2s ease, visibility .2s; } .search-filter-wrap.open .search-filter-panel{ opacity:1; visibility:visible; transform:translateY(0); } .sfp-group{ margin-bottom:14px; } .sfp-group:last-child{ margin-bottom:0; } .sfp-label{ display:block; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:#9aa7b1; margin-bottom:7px; } .sfp-opt{ display:block; padding:7px 12px; margin-bottom:3px; border-radius:7px; font-size:13px; color:#3a4750; text-decoration:none; transition:.15s; } .sfp-opt:hover{ background:#f5f7f8; color:#2fbdef; } .sfp-opt.active{ background:#2fbdef; color:#fff; font-weight:600; } @media (max-width:767px){ .search-toolbar-controls{ width:100%; justify-content:space-between; } } /* ---- Results page: reuse theme .ltn__blog-item-3 card; add only placeholder + corner badge (scoped) ---- */ .search-results-count{ font-size:15px; color:#666; margin-bottom:18px; } .search-results .ltn__blog-img{ position:relative; aspect-ratio:350/400; overflow:hidden; /* same proportion as news thumbs */ background:linear-gradient(135deg,#eef4f8,#dbe7ef); /* branded placeholder tint */ } .search-results .ltn__blog-img a{ position:absolute; inset:0; z-index:1; display:block; } .search-results .ltn__blog-img img{ width:100%; height:100%; object-fit:cover; } .search-results .src-thumb-icon{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); font-size:42px; color:#a9c8da; z-index:0; /* shows when no/failed image */ } .search-results .search-type-badge{ position:absolute; top:12px; left:12px; z-index:2; font-size:11px; font-weight:600; text-transform:uppercase; padding:3px 10px; border-radius:10px; color:#fff; box-shadow:0 2px 6px rgba(0,0,0,.18); } .search-type-news{ background:#2fbdef; } .search-type-content{ background:#7a8a99; } @media (max-width:575px){ .search-results .ltn__blog-img{ aspect-ratio:16/10; } } /* ---- Sticky search: modern anchored panel (overrides theme boxy slide) ---- */ .header-search-wrap{ position:relative; } /* stable anchor (overrides theme <=767 inherit) */ .header-search-wrap .header-search-1{ transition:color .2s; } .header-search-wrap.search-active .header-search-1{ color:#2fbdef; } .header-search-wrap .header-search-1-form{ height:auto; overflow:visible; width:340px; top:calc(100% + 14px); right:0; padding:10px; background:#fff; border-radius:14px; box-shadow:0 12px 30px rgba(20,40,60,.12); opacity:0; visibility:hidden; transform:translateY(-10px) scale(.98); transform-origin:top right; transition:opacity .22s ease, transform .22s ease, visibility .22s; } .header-search-wrap .header-search-1-form.search-open{ height:auto; opacity:1; visibility:visible; transform:translateY(0) scale(1); } .header-search-wrap .header-search-1-form::before{ /* caret -> "extension of the nav" */ content:''; position:absolute; top:-7px; right:18px; width:14px; height:14px; background:#fff; transform:rotate(45deg); box-shadow:-3px -3px 6px rgba(20,40,60,.04); } .header-search-wrap .header-search-1-form form{ margin:0; position:relative; } .header-search-wrap .header-search-1-form input{ height:46px; width:100%; margin:0; border:1px solid #e3e9ee; border-radius:10px; padding:0 46px 0 14px; background:#f7fafc; transition:border-color .2s, background .2s; } .header-search-wrap .header-search-1-form input:focus{ border-color:#2fbdef; background:#fff; outline:none; } .header-search-wrap .header-search-1-form button{ position:absolute; right:6px; top:0; height:46px; width:40px; border:none; background:transparent; color:#2fbdef; cursor:pointer; } @media (max-width:575px){ .header-search-wrap .header-search-1-form{ width:min(320px,92vw); } }