<button onclick="openSearch()" class="search-trigger">Search Website</button>
<div id="searchOverlay" class="search-overlay">
<button class="close-btn" onclick="closeSearch()">×</button>
<div class="overlay-content">
<input type="text" placeholder="Type to search..." autofocus>
<p>Press Enter to see results</p>
</div>
</div>
.search-trigger {
font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
padding: 10px 20px;
background: #1f2937;
color: white;
border: none;
border-radius: 8px;
cursor: pointer;
}
.search-overlay {
font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
height: 100%;
width: 100%;
position: fixed;
z-index: 1000;
top: 0;
left: 0;
background-color: rgba(0,0,0, 0.95);
display: none;
animation: fadeIn 0.3s;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.overlay-content {
position: relative;
top: 25%;
width: 80%;
text-align: center;
margin: auto;
}
.overlay-content input {
padding: 15px;
font-size: 3rem;
border: none;
border-bottom: 2px solid #4b5563;
background: transparent;
color: white;
width: 100%;
outline: none;
}
.overlay-content input:focus {
border-color: #3b82f6;
}
.overlay-content p {
color: #9ca3af;
margin-top: 20px;
font-size: 1.2rem;
}
.close-btn {
position: absolute;
top: 20px;
right: 45px;
font-size: 4rem;
color: white;
background: none;
border: none;
cursor: pointer;
line-height: 1;
}