/* ========================================================= OLW Smart Search - Final Optimized CSS Version: 4.6.0 Fixed: - Result meta supports date, category, and matches - Blog Category disabled state for Services Only mode - Clean responsive layout - Lightweight selectors for faster rendering Current Rule: - No frontend Page Type filter - Services results are controlled from backend ========================================================= */ /* ========================================================= 1. Base Variables ========================================================= */ .olw-search-wrap, .olw-popup-search { --olw-blue: #2200ff; --olw-blue-light: #4b37ff; --olw-dark: #111827; --olw-text: #344054; --olw-muted: #667085; --olw-soft-muted: #98a2b3; --olw-border: rgba(226, 232, 240, 0.9); --olw-card: rgba(255, 255, 255, 0.82); --olw-glass: rgba(255, 255, 255, 0.76); --olw-shadow: 0 20px 55px rgba(16, 24, 40, 0.08); --olw-small-shadow: 0 8px 18px rgba(16, 24, 40, 0.035); font-family: inherit; } .olw-search-wrap *, .olw-popup-search * { box-sizing: border-box; } .olw-search-wrap button, .olw-search-wrap input, .olw-search-wrap select, .olw-popup-search button, .olw-popup-search input { font-family: inherit !important; } /* ========================================================= 2. Search Heading ========================================================= */ .olw-search-heading { margin: 0; text-align: center; color: #111827; font-size: clamp(34px, 4vw, 58px); line-height: 1.08; font-weight: 800; letter-spacing: -0.04em; } /* ========================================================= 3. Main Search Wrapper ========================================================= */ .olw-search-wrap { max-width: 1280px; margin: 0 auto; padding: 20px; } .olw-search-form { margin: 0 auto 34px; } /* ========================================================= 4. Search Input Box ========================================================= */ .olw-search-box { position: relative; display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; padding: 8px; border: 1px solid var(--olw-border); border-radius: 24px; background: linear-gradient(135deg, rgba(255,255,255,.96), rgba(255,255,255,.66)); box-shadow: 0 10px 30px rgba(16, 24, 40, .06); } .olw-search-box:focus-within { border-color: rgba(34, 0, 255, .38); box-shadow: 0 0 0 5px rgba(34, 0, 255, .08), var(--olw-shadow); } .olw-search-icon { position: absolute; left: 24px; top: 50%; width: 22px; height: 22px; color: var(--olw-soft-muted); display: flex; align-items: center; justify-content: center; transform: translateY(-50%); pointer-events: none; } .olw-search-input { width: 100% !important; height: 54px !important; border: 0 !important; border-radius: 18px !important; background: transparent !important; color: var(--olw-dark) !important; font-size: 16px !important; outline: none !important; padding: 0 46px 0 52px !important; box-shadow: none !important; } .olw-search-input::placeholder, .olw-popup-input::placeholder { color: var(--olw-soft-muted); } .olw-clear { position: absolute !important; right: 145px !important; top: 50% !important; width: 30px !important; height: 30px !important; border: 0 !important; border-radius: 50% !important; background: rgba(15, 23, 42, .06) !important; color: #64748b !important; font-size: 20px !important; line-height: 1 !important; padding: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; transform: translateY(-50%) !important; cursor: pointer !important; } .olw-search-submit { height: 50px !important; min-width: 122px !important; border: 0 !important; border-radius: 17px !important; background: linear-gradient(135deg, var(--olw-blue), var(--olw-blue-light)) !important; color: #fff !important; font-size: 15px !important; font-weight: 600 !important; padding: 0 18px !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; cursor: pointer !important; box-shadow: 0 12px 26px rgba(34, 0, 255, .24) !important; } .olw-search-submit svg { width: 18px; height: 18px; } /* ========================================================= 5. Popular Keywords + Filter Button ========================================================= */ .olw-top-controls { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-top: 16px; } .olw-popular, .olw-chip-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .olw-popular > span { color: var(--olw-muted); font-size: 13px; font-weight: 700; margin-right: 2px; } .olw-chip { width: auto !important; min-width: 0 !important; min-height: 34px !important; border: 1px solid var(--olw-border) !important; border-radius: 999px !important; background: linear-gradient(135deg, rgba(255,255,255,.9), rgba(255,255,255,.58)) !important; color: #1f2937 !important; font-size: 13px !important; font-weight: 700 !important; line-height: 1 !important; padding: 9px 13px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; cursor: pointer !important; box-shadow: 0 8px 22px rgba(16, 24, 40, .05) !important; transition: color .2s ease, border-color .2s ease, transform .2s ease; } .olw-chip:hover { color: var(--olw-blue) !important; border-color: rgba(34, 0, 255, .35) !important; transform: translateY(-1px); } .olw-filter-btn { height: 38px !important; border: 1px solid var(--olw-border) !important; border-radius: 999px !important; background: var(--olw-glass) !important; color: #1f2937 !important; font-size: 13px !important; font-weight: 700 !important; padding: 0 14px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; cursor: pointer !important; } .olw-filter-btn__text, .olw-filter-btn__icon { display: inline-flex; align-items: center; justify-content: center; } .olw-filter-btn__icon svg, .olw-filter-svg { width: 24px !important; height: 24px !important; display: block; } .olw-filter-btn.open .olw-filter-btn__icon svg { transform: rotate(180deg); } /* ========================================================= 6. Filter Panel ========================================================= */ .olw-filter-panel[hidden] { display: none !important; } .olw-filter-panel { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) auto; gap: 12px; margin-top: 16px; padding: 16px; border: 1px solid var(--olw-border); border-radius: 22px; background: linear-gradient(135deg, rgba(255,255,255,.9), rgba(255,255,255,.6)); box-shadow: 0 12px 32px rgba(16, 24, 40, .06); } .olw-filter-panel label { display: grid; gap: 6px; min-width: 0; } .olw-filter-panel label > span { color: var(--olw-muted); font-size: 12px; font-weight: 800; } .olw-filter-panel select { width: 100% !important; height: 44px !important; border: 1px solid var(--olw-border) !important; border-radius: 14px !important; background: rgba(255,255,255,.86) !important; color: var(--olw-text) !important; font-size: 14px !important; padding: 0 12px !important; outline: none !important; cursor: pointer; } .olw-title-only { min-height: 44px; align-self: end; border: 1px solid var(--olw-border); border-radius: 14px; background: rgba(255,255,255,.86); padding: 0 12px; display: flex !important; align-items: center; gap: 8px !important; cursor: pointer; } .olw-filter-panel label.is-disabled { opacity: .45; } .olw-filter-panel label.is-disabled select, .olw-filter-panel label.is-disabled input { cursor: not-allowed; } .olw-filter-panel label.is-disabled select { background: rgba(248, 250, 252, .9) !important; } /* ========================================================= 7. Search Status ========================================================= */ .olw-status { min-height: 24px; margin: 0 auto 40px; color: var(--olw-muted); font-size: 22px; font-weight: 700; } /* ========================================================= 8. Result Grid ========================================================= */ .olw-result-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; width: 100%; } .olw-search-wrap.is-posts-only .olw-result-grid, .olw-search-wrap.is-pages-only .olw-result-grid { grid-template-columns: 1fr; } .olw-search-wrap.is-posts-only [data-olw-col="posts"], .olw-search-wrap.is-pages-only [data-olw-col="pages"] { width: 100%; max-width: 100%; } .olw-result-col { width: 100%; background: var(--olw-card); border: 1px solid var(--olw-border); border-radius: 26px; padding: 22px; box-shadow: var(--olw-shadow); } .olw-result-col[hidden] { display: none !important; } .olw-col-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; } .olw-col-head h3 { margin: 0 !important; color: #101828; font-size: 22px !important; font-weight: 800 !important; } .olw-col-head span { min-width: 32px; height: 32px; border-radius: 50%; background: rgba(34, 0, 255, .08); color: var(--olw-blue); font-size: 13px; font-weight: 850; display: flex; align-items: center; justify-content: center; } /* ========================================================= 9. Result Items ========================================================= */ .olw-list { display: grid; gap: 12px; } .olw-item { display: flex; gap: 14px; align-items: flex-start; padding: 15px !important; border: 1px solid var(--olw-border); border-radius: 20px; background: rgba(255,255,255,.78); color: #101828 !important; text-decoration: none !important; box-shadow: var(--olw-small-shadow); transition: border-color .2s ease, background .2s ease, transform .2s ease; } .olw-item:hover { transform: translateY(-2px); border-color: rgba(34, 0, 255, .22); background: rgba(255,255,255,.95); } .olw-thumb, .olw-icon { width: 48px; height: 48px; flex: 0 0 48px; border-radius: 15px; overflow: hidden; background: rgba(34, 0, 255, .07); color: var(--olw-blue); display: flex; align-items: center; justify-content: center; } .olw-thumb img { width: 100%; height: 100%; object-fit: cover; } .olw-item-body { display: grid; gap: 6px; min-width: 0; } .olw-item-body strong { color: #101828; font-size: 16px; line-height: 1.35; font-weight: 700; } .olw-item-body p { margin: 0 !important; color: var(--olw-muted); font-size: 14px; line-height: 1.48; } .olw-item-body small { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: #8270ff; font-size: 12.5px; line-height: 1.35; } .olw-item-body small span { display: inline-flex; align-items: center; min-height: 20px; } .olw-meta-date { color: #8270ff; font-weight: 600; } .olw-meta-category { padding: 3px 8px; border: 1px solid rgba(34, 0, 255, .12); border-radius: 999px; background: rgba(34, 0, 255, .055); color: #344054; font-weight: 700; } .olw-meta-matches { color: var(--olw-blue); font-weight: 800; } .olw-item mark, .olw-popup-search mark { background: #fff0a8; color: inherit; padding: 0 2px; border-radius: 4px; } /* ========================================================= 10. Empty + Loading States ========================================================= */ .olw-empty { border: 1px dashed rgba(203, 213, 225, .9); border-radius: 20px; padding: 18px; color: var(--olw-muted); background: rgba(255,255,255,.58); } .olw-empty strong { display: block; color: #101828; margin-bottom: 5px; } .olw-empty p { margin: 0 0 12px !important; } .olw-empty a { display: inline-flex; margin: 4px 6px 0 0; border-radius: 999px; padding: 8px 11px; background: rgba(34, 0, 255, .07); color: var(--olw-blue) !important; text-decoration: none !important; font-size: 13px; font-weight: 800; } .olw-loading-card { display: flex; gap: 13px; padding: 15px; border: 1px solid var(--olw-border); border-radius: 20px; background: rgba(255,255,255,.78); } .olw-loading-card span { width: 48px; height: 48px; border-radius: 15px; } .olw-loading-card div { flex: 1; display: grid; gap: 10px; align-content: center; } .olw-loading-card b, .olw-loading-card span { background: linear-gradient(90deg, #f2f4f7, #e9edf5, #f2f4f7); background-size: 200% 100%; animation: olwShimmer 1.2s infinite; } .olw-loading-card b { height: 12px; border-radius: 999px; } .olw-loading-card b:last-child { width: 65%; } @keyframes olwShimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* ========================================================= 11. Pagination ========================================================= */ .olw-pager { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 22px; } .olw-pager button, .olw-pager span { width: 42px !important; height: 42px !important; min-width: 42px !important; min-height: 42px !important; border: 1px solid var(--olw-border) !important; border-radius: 14px !important; background: rgba(255,255,255,.78) !important; color: var(--olw-text) !important; font-size: 16px !important; font-weight: 800 !important; line-height: 1 !important; padding: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; } .olw-pager button.active { background: linear-gradient(135deg, var(--olw-blue), var(--olw-blue-light)) !important; color: #fff !important; border-color: transparent !important; } .olw-pager button:disabled { opacity: .45 !important; cursor: not-allowed !important; } .olw-pager span { border: 0 !important; background: transparent !important; } /* ========================================================= 12. Popup Search ========================================================= */ .olw-popup-search { position: relative; width: min(700px, calc(100vw - 32px)); margin: 0 auto; } .olw-popup-form { display: grid; grid-template-columns: 52px 1fr 56px; align-items: center; min-height: 60px; border: 1px solid rgba(255,255,255,.72); border-radius: 100px; background: linear-gradient(135deg, rgba(255,255,255,.96), rgba(255,255,255,.72)); box-shadow: 0 24px 60px rgba(16, 24, 40, .16); overflow: hidden; } .olw-popup-icon { width: 50px; height: 40px; color: var(--olw-soft-muted); display: flex; align-items: center; justify-content: center; } .olw-popup-input { width: 100% !important; height: 40px !important; border: 0 !important; background: transparent !important; color: #111827 !important; font-size: 18px !important; padding: 0 14px 0 0 !important; outline: none !important; box-shadow: none !important; } .olw-popup-submit { width: 40px !important; height: 40px !important; border: 0 !important; border-radius: 100px !important; background: linear-gradient(135deg, var(--olw-blue), var(--olw-blue-light)) !important; color: #fff !important; padding: 0 !important; margin: 4px !important; display: flex !important; align-items: center !important; justify-content: center !important; cursor: pointer !important; box-shadow: 0 12px 26px rgba(34, 0, 255, .24) !important; } .olw-chip-row { justify-content: center; margin-top: 14px; } .olw-popup-results { position: absolute; top: calc(100% + 14px); left: 0; right: 0; z-index: 99999; background: rgba(255,255,255,.94); border: 1px solid var(--olw-border); border-radius: 24px; box-shadow: 0 28px 70px rgba(16, 24, 40, .2); padding: 14px; } .olw-popup-results[hidden] { display: none !important; } .olw-popup-message { padding: 14px; color: var(--olw-muted); font-size: 14px; } .olw-popup-group h4 { margin: 0 0 8px; color: var(--olw-muted); font-size: 12px; font-weight: 850; text-transform: uppercase; letter-spacing: .05em; } .olw-popup-group + .olw-popup-group { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--olw-border); } .olw-popup-group a { display: flex; justify-content: space-between; gap: 14px; padding: 11px 12px; border-radius: 14px; color: #101828 !important; text-decoration: none !important; } .olw-popup-group a:hover { background: rgba(34, 0, 255, .055); } .olw-popup-group strong { font-size: 14px; line-height: 1.35; } .olw-popup-group span { color: var(--olw-muted); font-size: 12px; font-weight: 700; } .olw-view-all { display: block; margin-top: 12px; padding: 13px; border-radius: 16px; background: rgba(34, 0, 255, .075); color: var(--olw-blue) !important; text-align: center; text-decoration: none !important; font-weight: 850; font-size: 14px; } /* ========================================================= 13. Tablet Responsive ========================================================= */ @media (max-width: 1024px) { .olw-filter-panel { grid-template-columns: repeat(2, minmax(0, 1fr)); } .olw-result-grid { grid-template-columns: 1fr; } } /* ========================================================= 14. Mobile Responsive ========================================================= */ @media (max-width: 640px) { .olw-search-heading { font-size: clamp(30px, 9vw, 42px); } .olw-search-wrap { padding: 34px 14px 56px; } .olw-search-box { grid-template-columns: 1fr; gap: 8px; padding: 10px; } .olw-search-icon { top: 37px; } .olw-search-input { background: rgba(255,255,255,.62) !important; } .olw-clear { top: 37px !important; right: 20px !important; } .olw-search-submit { width: 100% !important; } .olw-top-controls { display: grid; } .olw-filter-btn { width: 100% !important; justify-content: center !important; } .olw-filter-panel { grid-template-columns: 1fr; } .olw-status { margin-bottom: 24px; font-size: 16px; } .olw-result-col { padding: 16px; } .olw-item { padding: 13px !important; } .olw-thumb, .olw-icon { width: 44px; height: 44px; flex-basis: 44px; } .olw-item-body small { gap: 6px; } .olw-meta-category { padding: 3px 7px; } .olw-pager button, .olw-pager span { width: 38px !important; height: 38px !important; min-width: 38px !important; min-height: 38px !important; border-radius: 12px !important; } .olw-popup-search { width: min(100%, calc(100vw - 24px)); } .olw-popup-form { grid-template-columns: 46px 1fr 52px; min-height: 58px; } .olw-popup-icon { width: 46px; height: 58px; } .olw-popup-input { height: 58px !important; font-size: 15.5px !important; } .olw-popup-submit { width: 50px !important; height: 50px !important; } .olw-popup-group a { display: grid; gap: 4px; } }