.search-filter {
max-width: 100%;
margin: 0 auto;
font-family: inherit;
} .search-filter__form {
display: flex;
flex-direction: column;
align-items: baseline;
gap: 24px 0;
@media screen and (max-width: 768px) {
gap: 16px 0;
}
} .search-filter__field {
display: flex;
flex-direction: column;
gap: 0.5rem;
} .search-filter__label {
font-weight: 700;
font-size: 0.875rem;
color: #333;
letter-spacing: 0.02em;
} .search-filter__input {
width: 100%;
padding: 0.625rem 0.875rem;
border: 1px solid #ccc;
border-radius: 4px;
font-size: 0.9375rem;
line-height: 1.5;
background-color: #fff;
transition: border-color 0.2s ease;
box-sizing: border-box;
}
.search-filter__input:focus {
outline: none;
border-color: #0073aa;
box-shadow: 0 0 0 2px rgba(0, 115, 170, 0.15);
} .search-filter__select {
width: 100%;
padding: 0.625rem 0.875rem;
border: 1px solid #ccc;
border-radius: 4px;
font-size: 0.9375rem;
line-height: 1.5;
background-color: #fff;
cursor: pointer;
box-sizing: border-box;
}
.search-filter__select:focus {
outline: none;
border-color: #0073aa;
box-shadow: 0 0 0 2px rgba(0, 115, 170, 0.15);
}
.search-filter__taxonomies {
width: 100%;
display: flex;
flex-direction: column;
gap: 24px 0;
@media screen and (max-width: 768px) {
gap: 16px 0;
}
}
.search-filter__terms {
display: flex;
flex-direction: column;
gap: 8px 0;
} .search-filter__term {
display: flex;
align-items: center;
cursor: pointer;
width: 100%;
gap: 0 8px;
padding: 0;
input[type="checkbox"],
input[type="radio"] {
width: 20px;
height: 20px;
padding: 0;
margin: 0;
outline: none;
cursor: pointer;
position: relative;
opacity: 1;
border-radius: 2px;
@media screen and (max-width: 768px) {
width: 18px;
height: 18px;
min-width: 18px;
min-height: 18px;
}
&:before {
content: '';
display: block;
width: 100%;
height: 100%;
border-radius: 2px;
border: 1px solid var(--color-black);
transition: var(--transition);
background-repeat: no-repeat;
background-position: center;
background-size: 10px auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
}
&:checked {
&::before {
background-color: var(--color-black);
background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20width%3D%2214%22%20height%3D%2214%22%20viewBox%3D%220%200%2014%2014%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M4.75502%2012.0149L0.205017%207.46495C-0.0683389%207.19159%20-0.0683389%206.74838%200.205017%206.47499L1.19494%205.48504C1.4683%205.21166%201.91154%205.21166%202.1849%205.48504L5.24999%208.55011L11.8151%201.98505C12.0884%201.71169%2012.5317%201.71169%2012.805%201.98505L13.795%202.975C14.0683%203.24835%2014.0683%203.69157%2013.795%203.96495L5.74497%2012.015C5.47159%2012.2883%205.02837%2012.2883%204.75502%2012.0149V12.0149Z%22%20fill%3D%22white%22%2F%3E%3C%2Fsvg%3E');
}
}
&:hover {
&::before {
opacity: .5;
}
}
}
}
.search-filter__term-name {
color: #333;
}
.search-filter__term-count {
color: #999;
font-size: 10px;
} .search-filter__logic-toggle {
display: flex;
gap: 1rem;
}
.search-filter__logic-option {
display: inline-flex;
align-items: center;
gap: 0.25rem;
cursor: pointer;
font-size: 0.875rem;
font-weight: 600;
}
.search-filter__logic-option input[type="radio"] {
margin: 0;
} .search-filter__reset {
font-weight: var(--weight-bold);
color: var(--color-black);
font-size: var(--fs-small);
border: 1px solid var(--color-light-gray);
background-color: var(--color-white);
color: var(--color-gray);
border-radius: 50rem;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 6px 16px;
cursor: pointer;
&:hover {
background-color: var(--color-light-gray-light);
color: var(--color-gray);
}
} .search-filter__loading {
display: flex;
justify-content: center;
align-items: center;
padding: 2rem;
}
.search-filter__spinner {
display: inline-block;
width: 32px;
height: 32px;
border: 3px solid #e2e6ea;
border-top-color: #0073aa;
border-radius: 50%;
animation: search-filter-spin 0.7s linear infinite;
}
@keyframes search-filter-spin {
to {
transform: rotate(360deg);
}
} .search-filter__result-count {
font-size: 0.875rem;
color: #666;
margin-bottom: 1rem;
min-height: 1.25em;
} .search-filter__results {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 1.5rem;
transition: opacity 0.2s ease;
} .search-filter__item {
display: flex;
flex-direction: column;
background: #fff;
border: 1px solid #e2e6ea;
border-radius: 8px;
overflow: hidden;
transition: box-shadow 0.2s ease;
}
.search-filter__item:hover {
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
} .search-filter__item-thumbnail {
aspect-ratio: 16 / 10;
overflow: hidden;
}
.search-filter__item-thumbnail a {
display: block;
width: 100%;
height: 100%;
}
.search-filter__item-thumbnail img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.3s ease;
}
.search-filter__item:hover .search-filter__item-thumbnail img {
transform: scale(1.03);
} .search-filter__item-content {
padding: 1rem;
display: flex;
flex-direction: column;
gap: 0.5rem;
flex: 1;
} .search-filter__item-title {
font-size: 1rem;
font-weight: 700;
line-height: 1.4;
margin: 0;
}
.search-filter__item-title a {
color: #333;
text-decoration: none;
transition: color 0.15s ease;
}
.search-filter__item-title a:hover {
color: #0073aa;
} .search-filter__item-meta {
display: flex;
align-items: center;
gap: 0.75rem;
font-size: 0.8125rem;
color: #999;
}
.search-filter__item-type {
background-color: #f0f0f0;
padding: 0.125rem 0.5rem;
border-radius: 3px;
font-size: 0.75rem;
} .search-filter__item-excerpt {
font-size: 0.875rem;
color: #666;
line-height: 1.6;
} .search-filter__no-results {
grid-column: 1 / -1;
text-align: center;
padding: 3rem 1rem;
color: #999;
font-size: 0.9375rem;
} .search-filter__pagination {
margin-top: 2rem;
display: flex;
justify-content: center;
}
.search-filter__pagination .wp-pagenavi {
display: flex;
flex-wrap: wrap;
gap: 0.25rem;
justify-content: center;
}
.search-filter__pagination .wp-pagenavi a,
.search-filter__pagination .wp-pagenavi span {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 2.25rem;
height: 2.25rem;
padding: 0 0.5rem;
border: 1px solid #ddd;
border-radius: 4px;
font-size: 0.875rem;
color: #333;
text-decoration: none;
transition: background-color 0.15s ease, border-color 0.15s ease;
}
.search-filter__pagination .wp-pagenavi a:hover {
background-color: #0073aa;
border-color: #0073aa;
color: #fff;
}
.search-filter__pagination .wp-pagenavi span.current {
background-color: #0073aa;
border-color: #0073aa;
color: #fff;
font-weight: 700;
} .search-filter__nav .page-numbers {
display: flex;
flex-wrap: wrap;
gap: 0.25rem;
justify-content: center;
list-style: none;
padding: 0;
margin: 0;
}
.search-filter__nav .page-numbers li {
list-style: none;
}
.search-filter__nav .page-numbers a,
.search-filter__nav .page-numbers span {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 2.25rem;
height: 2.25rem;
padding: 0 0.5rem;
border: 1px solid #ddd;
border-radius: 4px;
font-size: 0.875rem;
color: #333;
text-decoration: none;
transition: background-color 0.15s ease, border-color 0.15s ease;
}
.search-filter__nav .page-numbers a:hover {
background-color: #0073aa;
border-color: #0073aa;
color: #fff;
}
.search-filter__nav .page-numbers span.current {
background-color: #0073aa;
border-color: #0073aa;
color: #fff;
font-weight: 700;
}