.af-search-sidebar-widget {
position: relative;
height: auto !important;
max-height: none !important;
overflow: visible !important;
}
.af-search-widget {
--afs-text: #fff;
--afs-muted: #b2bfd1;
--afs-accent: #67e8f9;
--afs-green: #6ee7b7;
--afs-dark: #03111d;
--afs-field: #061525;
position: relative;
isolation: isolate;
display: block;
width: 100%;
height: auto !important;
max-height: none !important;
overflow: visible !important;
color: var(--afs-text);
} .af-search-widget::before {
position: absolute;
z-index: -1;
inset: -9px;
border: 1px solid rgba(103, 232, 249, 0.25);
border-radius: 18px;
background: transparent;
box-shadow:
0 0 12px rgba(103, 232, 249, 0.22),
0 0 30px rgba(110, 231, 183, 0.1);
content: "";
opacity: 0.35;
pointer-events: none;
transform: scale(0.985);
animation:
afs-panel-pulse
2.5s ease-in-out infinite alternate;
}
@keyframes afs-panel-pulse {
from {
opacity: 0.28;
transform: scale(0.985);
}
to {
opacity: 0.82;
transform: scale(1.012);
}
}
.af-search-widget:hover::before,
.af-search-widget:focus-within::before {
opacity: 1;
border-color: rgba(103, 232, 249, 0.7);
box-shadow:
0 0 18px rgba(103, 232, 249, 0.42),
0 0 38px rgba(110, 231, 183, 0.17);
} .af-sidebar .af-search-sidebar-widget
.af-search-widget-description,
.af-sidebar-panel.af-search-sidebar-widget
.af-search-widget-description,
.af-search-widget
.af-search-widget-description {
display: block !important;
width: 100% !important;
min-width: 0 !important;
max-width: none !important;
height: auto !important;
min-height: 0 !important;
max-height: none !important;
margin: 0 0 0.85rem !important;
padding: 0 !important;
overflow: visible !important;
color: var(--afs-muted) !important;
font-family: inherit !important;
font-size: 0.92rem !important;
font-style: normal !important;
font-weight: 400 !important;
line-height: 1.55 !important;
white-space: normal !important;
overflow-wrap: anywhere !important;
word-break: normal !important;
text-overflow: clip !important;
opacity: 1 !important;
visibility: visible !important;
-webkit-box-orient: initial !important;
-webkit-line-clamp: unset !important;
line-clamp: unset !important;
}
.af-search-widget-form {
display: grid;
gap: 0.6rem;
margin: 0;
} .af-search-widget-field {
position: relative;
isolation: isolate;
overflow: hidden;
border-radius: 12px;
container-type: inline-size;
}
.af-search-widget-field::before {
position: absolute;
z-index: -1;
inset: -2px;
border-radius: 12px;
background: linear-gradient(
100deg,
rgba(103, 232, 249, 0.75),
rgba(110, 231, 183, 0.24),
rgba(167, 139, 250, 0.52)
);
content: "";
opacity: 0.28;
pointer-events: none;
animation:
afs-field-glow
1.8s ease-in-out infinite alternate;
}
@keyframes afs-field-glow {
from {
opacity: 0.22;
}
to {
opacity: 0.78;
}
} .af-search-widget-field-icon {
position: absolute;
z-index: 2;
top: 50%;
left: 0.75rem;
width: 19px;
height: 19px;
color: #9ef5ff;
opacity: 1;
visibility: visible;
pointer-events: none;
filter:
drop-shadow(
0 0 4px
rgba(103, 232, 249, 0.45)
);
transform:
translate3d(0, -50%, 0);
transform-origin: center;
animation:
afs-search-icon-full-travel
3.4s ease-in-out infinite alternate;
will-change: transform, opacity;
transition:
opacity 120ms ease,
visibility 120ms ease;
}
@keyframes afs-search-icon-full-travel {
0% {
color: #8beef8;
transform:
translate3d(0, -50%, 0)
rotate(-8deg)
scale(0.96);
}
100% {
color: #c2fbff; transform:
translate3d(10rem, -50%, 0)
rotate(8deg)
scale(1.08); transform:
translate3d(
calc(100cqw - 3.2rem),
-50%,
0
)
rotate(8deg)
scale(1.08);
}
} .af-search-widget-field:has(
.af-search-widget-input:not(:placeholder-shown)
)
.af-search-widget-field-icon {
visibility: hidden;
opacity: 0;
animation: none;
will-change: auto;
} .af-search-widget-field:focus-within:has(
.af-search-widget-input:placeholder-shown
)
.af-search-widget-field-icon {
color: #d0fcff;
filter:
drop-shadow(
0 0 8px
rgba(103, 232, 249, 0.88)
);
animation-duration: 1.8s;
}
.af-search-widget-input {
display: block;
width: 100%;
min-width: 0;
height: 44px;
margin: 0;
padding: 0.65rem 2.25rem 0.65rem 0.8rem;
border: 1px solid rgba(103, 232, 249, 0.48);
border-radius: 10px;
color: #fff !important;
background: var(--afs-field) !important;
caret-color: #fff;
box-shadow:
inset 0 1px rgba(255, 255, 255, 0.04);
font-family: inherit;
font-size: 0.9rem;
font-weight: 600;
line-height: 1.2;
outline: none;
appearance: none;
-webkit-appearance: none;
-webkit-text-fill-color: #fff;
transition:
border-color 150ms ease,
box-shadow 150ms ease,
background-color 150ms ease;
}
.af-search-widget-input:hover {
color: #fff !important;
background: #07182a !important;
-webkit-text-fill-color: #fff;
}
.af-search-widget-input:focus {
color: #fff !important;
background: #081a2c !important;
-webkit-text-fill-color: #fff;
}
.af-search-widget-input::placeholder {
color: #9aabc0 !important;
opacity: 1;
-webkit-text-fill-color: #9aabc0;
} .af-search-widget-field:has(
.af-search-widget-input:placeholder-shown
)
.af-search-widget-input::placeholder {
opacity: 0.78;
}
.af-search-widget-input:-webkit-autofill,
.af-search-widget-input:-webkit-autofill:hover,
.af-search-widget-input:-webkit-autofill:focus {
-webkit-text-fill-color: #fff;
caret-color: #fff;
box-shadow:
0 0 0 1000px
var(--afs-field)
inset;
transition:
background-color 9999s ease-out;
} .af-search-widget-input::-webkit-search-cancel-button {
cursor: pointer;
filter:
invert(85%)
sepia(44%)
saturate(845%)
hue-rotate(145deg)
brightness(105%);
opacity: 0.85;
}
.af-search-widget-field:focus-within::before {
opacity: 1;
}
.af-search-widget-field:focus-within
.af-search-widget-input {
border-color: #b9f9ff;
box-shadow:
0 0 0 2px rgba(103, 232, 249, 0.22),
0 0 18px rgba(103, 232, 249, 0.34);
} .af-search-widget-submit {
position: relative;
isolation: isolate;
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 44px;
gap: 0.48rem;
overflow: hidden;
margin: 0;
padding: 0.62rem 0.9rem;
border: 1px solid rgba(103, 232, 249, 0.44);
border-radius: 11px;
color: #9eefff !important;
background: #05121f !important;
box-shadow:
inset 0 1px rgba(255, 255, 255, 0.05),
0 0 8px rgba(103, 232, 249, 0.12);
cursor: pointer;
font-family: inherit;
font-size: 0.9rem;
font-weight: 850;
line-height: 1.2;
text-align: center;
text-shadow: none;
transition:
color 150ms ease,
border-color 150ms ease,
background-color 150ms ease,
box-shadow 150ms ease,
transform 150ms ease;
} .af-search-widget-submit::after {
position: absolute;
z-index: -1;
inset: 2px;
border: 1px solid rgba(103, 232, 249, 0.42);
border-radius: 8px;
content: "";
opacity: 0.38;
pointer-events: none;
transform: scale(0.96);
animation:
afs-submit-boundary
1.8s ease-in-out infinite alternate;
}
@keyframes afs-submit-boundary {
from {
opacity: 0.25;
transform: scale(0.96);
}
to {
opacity: 0.78;
transform: scale(1);
}
} .af-search-widget-submit::before {
position: absolute;
z-index: -1;
top: -35%;
left: -40%;
width: 30%;
height: 170%;
background: linear-gradient(
90deg,
transparent,
rgba(255, 255, 255, 0.28),
transparent
);
content: "";
opacity: 0;
pointer-events: none;
transform: skewX(-18deg);
animation:
afs-button-sheen
3.6s ease-in-out infinite;
}
@keyframes afs-button-sheen {
0%,
56% {
left: -40%;
opacity: 0;
}
68% {
opacity: 0.5;
}
100% {
left: 118%;
opacity: 0;
}
}
.af-search-widget-submit svg {
position: relative;
z-index: 2;
width: 18px;
height: 18px;
flex: 0 0 18px;
color: inherit;
transition:
color 150ms ease,
filter 150ms ease,
transform 170ms ease;
}
.af-search-widget-submit span {
position: relative;
z-index: 2;
color: inherit !important;
font-weight: 850;
opacity: 1 !important;
transition:
color 150ms ease,
transform 170ms ease;
} .af-search-widget-submit:hover,
.af-search-widget-submit:focus-visible {
color: #03111d !important;
border-color: #d4fbff;
background: linear-gradient(
135deg,
#7deeff,
#70e8bd
) !important;
box-shadow:
0 0 0 2px rgba(212, 251, 255, 0.42),
0 0 21px rgba(103, 232, 249, 0.75),
0 9px 19px rgba(0, 0, 0, 0.24);
text-shadow: none;
transform: translateY(-2px) scale(1.025);
}
.af-search-widget-submit:hover::after,
.af-search-widget-submit:focus-visible::after {
border-color: rgba(3, 17, 29, 0.36);
box-shadow:
inset 0 0 0 1px
rgba(255, 255, 255, 0.4),
0 0 9px
rgba(255, 255, 255, 0.5);
opacity: 1;
animation-duration: 600ms;
}
.af-search-widget-submit:hover svg,
.af-search-widget-submit:focus-visible svg {
color: #03111d !important;
filter:
drop-shadow(
0 1px 0
rgba(255, 255, 255, 0.32)
);
transform: scale(1.16) rotate(-6deg);
}
.af-search-widget-submit:hover span,
.af-search-widget-submit:focus-visible span {
color: #03111d !important;
opacity: 1 !important;
text-shadow: none !important;
transform: translateX(1px);
}
.af-search-widget-submit:focus-visible {
outline: 3px solid rgba(103, 232, 249, 0.82);
outline-offset: 3px;
} @media (max-width: 620px) {
.af-search-widget-input { font-size: 16px;
}
} @media (prefers-reduced-motion: reduce) {
.af-search-widget::before,
.af-search-widget-field::before,
.af-search-widget-field-icon,
.af-search-widget-submit::before,
.af-search-widget-submit::after {
animation: none;
}
.af-search-widget::before {
opacity: 0.58;
transform: none;
}
.af-search-widget-field::before {
opacity: 0.5;
} .af-search-widget-field-icon {
will-change: auto;
transform:
translate3d(0, -50%, 0);
} .af-search-widget-field:has(
.af-search-widget-input:not(:placeholder-shown)
)
.af-search-widget-field-icon {
visibility: hidden;
opacity: 0;
}
.af-search-widget-submit::after {
opacity: 0.5;
transform: none;
}
.af-search-widget-input,
.af-search-widget-submit,
.af-search-widget-submit svg,
.af-search-widget-submit span {
transition: none;
}
.af-search-widget-submit:hover,
.af-search-widget-submit:focus-visible,
.af-search-widget-submit:hover svg,
.af-search-widget-submit:focus-visible svg,
.af-search-widget-submit:hover span,
.af-search-widget-submit:focus-visible span {
transform: none;
}
}