.ars-search {
--ars-ink: #0c2855;
--ars-accent: #d80045;
--ars-card-background: #fff;
--ars-radius: 7px; width: 100%;
margin: 0;
color: var(--ars-ink);
font-family: inherit;
}
.ars-search:hover {
--ars-shadow: 0 3px 8px rgba(12, 40, 85, 0.17);
}
.ars-search *,
.ars-search *::before,
.ars-search *::after {
box-sizing: border-box;
}
.ars-search__title {
margin: 0 0 16px;
color: var(--ars-ink);
font-family: inherit;
font-size: 1rem;
font-weight: 700;
line-height: 1.25;
}
.ars-search__form {
display: grid;
gap: 16px;
margin: 0;
}
.ars-search__select-wrap {
position: relative;
}
.ars-search__select-wrap::after {
position: absolute;
top: 50%;
right: 14px;
width: 12px;
height: 12px;
border-right: 1px solid var(--ars-ink);
border-bottom: 1px solid var(--ars-ink);
content: "";
pointer-events: none;
transform: translateY(-68%) rotate(45deg);
}
.ars-search__select,
.ars-search__input {
width: 100%;
height: 45px;
border: 1px solid #1B3A66;
border-radius: 6px;
background: #fff;
color: var(--ars-ink);
box-shadow: var(--ars-shadow);
font: inherit;
font-size: 1rem;
line-height: 1.2;
}
.ars-search__select {
padding: 0 44px 0 13px;
appearance: none;
background-image: none;
cursor: pointer;
}
.ars-search__query {
display: grid;
grid-template-columns: minmax(0, 1fr) 40px;
}
.ars-search__input {
min-width: 0;
padding: 0 13px;
border-radius: 6px 0 0 6px; -webkit-appearance: none;
appearance: none;
font-family: "Century Gothic Regular", Helvetica, Arial, Lucida, sans-serif;
font-size: 16px;
line-height: 20px;
transition: all 0.2s ease-in;
border-width: 1px 0px 1px 1px;
}
.ars-search__input:hover {
box-shadow: 0 3px 8px rgba(12, 40, 85, 0.12);
border-color: #ED1847;
}
.ars-search__input::-webkit-search-cancel-button {
-webkit-appearance: none;
appearance: none;
}
.ars-search__input::placeholder {
color: #1B3A66;
opacity: 1;
font-family: "Century Gothic Regular", Helvetica, Arial, Lucida, sans-serif;
}
.ars-search__submit {
display: grid;
width: 45px;
height: 45px;
padding: 0;
place-items: center;
border: 1px solid #ED1847;
border-radius: 0 6px 6px 0;
background: #ED1847;
color: #fff;
box-shadow: var(--ars-shadow);
cursor: pointer;
transition:
background-color 160ms ease,
opacity 160ms ease;
}
.ars-search__submit img {
width: 21px;
height: 21px;
fill: none;
stroke: currentcolor;
stroke-linecap: round;
stroke-width: 1;
}
.ars-search__submit:hover {
background-color: #1B3A66;
border-color: #1B3A66;
}
.ars-search__submit:disabled {
cursor: wait;
opacity: 0.65;
}
.ars-search__submit:focus-visible {
position: relative;
z-index: 1;
outline: 3px solid rgba(216, 0, 69, 0.22);
outline-offset: 2px;
}
.ars-search__select:focus,
.ars-search__input:focus {
outline: none;
}
.ars-search__results {
display: grid;
gap: 15px;
margin-top: 24px;
}
.ars-search__results:empty {
display: none;
}
.ars-search__results--loading {
min-height: 38px;
position: relative;
}
.ars-search__results--loading::before {
position: absolute;
top: 4px;
left: 50%;
width: 26px;
height: 26px;
border: 3px solid rgba(12, 40, 85, 0.18);
border-top-color: var(--ars-accent);
border-radius: 50%;
content: "";
animation: ars-spin 700ms linear infinite;
transform: translateX(-50%);
}
.ars-search__results--loading > * {
visibility: hidden;
}
.ars-search__message {
margin: 0;
padding: 12px 14px;
border-left: 3px solid var(--ars-accent);
background: #f7f8fb;
color: var(--ars-ink);
font-size: 0.9375rem;
line-height: 1.4;
}
.ars-search__message--error {
color: #8f1832;
}
.ars-search__actions {
display: flex;
justify-content: flex-end;
margin-top: 8px;
}
.ars-search__actions[hidden] {
display: none;
}
.ars-search__clear {
padding: 0;
border: 0;
background: transparent;
color: var(--ars-ink);
font: inherit;
font-size: 0.75rem;
line-height: 1.25;
text-decoration: underline;
text-underline-offset: 2px;
cursor: pointer;
}
.ars-search__clear:hover {
color: var(--ars-accent);
}
.ars-card {
min-width: 0;
margin: 0;
overflow: hidden;
border-radius: var(--ars-radius);
background: var(--ars-card-background);
box-shadow: var(--ars-shadow);
transition:
transform 160ms ease,
box-shadow 160ms ease;
border: 1px solid #1B3A66;
}
.ars-card__link {
display: grid;
grid-template-columns: clamp(94px, 29%, 175px) minmax(0, 1fr);
min-height: 64px;
color: var(--ars-ink);
text-decoration: none;
}
.ars-card__media {
display: block;
min-height: 64px;
overflow: hidden;
background: #e7edf5;
}
.ars-card__image,
.ars-card__placeholder {
display: block;
width: 100%;
height: 100%;
min-height: 64px;
aspect-ratio: 3 / 2;
}
.ars-card__image {
object-fit: cover;
}
.ars-card__placeholder {
display: grid;
place-items: center;
background: linear-gradient(135deg, #e8eef6, #d3dfed);
}
.ars-card__placeholder svg {
width: 30px;
fill: none;
stroke: #6e82a0;
stroke-linecap: round;
stroke-linejoin: round;
stroke-width: 1.5;
}
.ars-card__content {
display: flex;
min-width: 0;
flex-direction: column;
justify-content: center;
padding: 10px 16px;
}
.ars-card__title {
display: -webkit-box;
overflow: hidden;
color: var(--ars-ink);
font-size: 1rem;
font-weight: 700;
line-height: 1.2;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
.ars-card__date {
margin-top: 2px;
color: var(--ars-ink);
font-size: 0.8125rem;
font-weight: 400;
line-height: 1.25;
}
.ars-card__date strong {
font-weight: 700;
}
.ars-card:hover { box-shadow: 0 5px 13px rgba(12, 40, 85, 0.21);
border-color: #ED1847;
}
.ars-card:hover .ars-card__title {
color: #ED1847;
}
.ars-card__link:focus-visible {
outline: 3px solid #3978c5;
outline-offset: -3px;
}
.ars-search .screen-reader-text {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
@keyframes ars-spin {
to {
transform: translateX(-50%) rotate(360deg);
}
}
@media (max-width: 420px) {
.ars-search__results {
gap: 14px;
}
.ars-card__link {
grid-template-columns: 94px minmax(0, 1fr);
}
.ars-card__content {
padding: 8px 12px;
}
}
@media (prefers-reduced-motion: reduce) {
.ars-card,
.ars-search__submit {
transition: none;
}
.ars-search__results--loading::before {
animation-duration: 1400ms;
}
}