search-popup

Summary

Full-screen modal-like search overlay triggered by clicking the magnifier icon in the header. Contains a centered logo, an oversized text input with a focus underline animation, and a top-right close button. Toggled via the .search-open-btn / .search-close-btn class pair.

HTML structure (minimal)

<div class="search__popup">
  <div class="container">
    <div class="row">
      <div class="col-xxl-12">
        <div class="search__wrapper">
          <div class="search__top d-flex justify-content-between align-items-center">
            <div class="search__logo"><a href="#"><img src="logo-white.png"></a></div>
            <div class="search__close">
              <button type="button" class="search__close-btn search-close-btn">
                <svg><path d="M17 1L1 17"/><path d="M1 1L17 17"/></svg>
              </button>
            </div>
          </div>
          <div class="search__form">
            <form action="#">
              <div class="search__input">
                <input class="search-input-field" type="text" placeholder="Type here to search...">
                <span class="search-focus-border"></span>
                <button type="submit"><svg><!-- magnifier --></svg></button>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Key SCSS tokens

.search__popup {
  position: fixed; inset: 0;
  background: rgba(0, 2, 41, 0.95);
  z-index: 99999;
  opacity: 0; visibility: hidden;
  transform: translateY(-30px);
  transition: all .35s cubic-bezier(.4,0,.2,1);
  display: flex; align-items: center;
  &.search-opened {
    opacity: 1; visibility: visible; transform: translateY(0);
  }
}
.search__input {
  position: relative;
  border-bottom: 1px solid rgba(255,255,255,0.2);
  padding: 25px 0;
}
.search-input-field {
  background: transparent;
  border: none;
  color: #fff;
  font-size: 32px;
  width: 100%;
  outline: none;
  &::placeholder { color: rgba(255,255,255,0.5); }
}
.search-focus-border {
  position: absolute; bottom: 0; left: 0;
  height: 2px; width: 0;
  background: var(--tp-theme-1);
  transition: width .35s ease;
}
.search-input-field:focus ~ .search-focus-border { width: 100%; }

Animation logic

// Toggle handlers in main.js
$('.search-open-btn').on('click', () => $('.search__popup').addClass('search-opened'));
$('.search-close-btn').on('click', () => $('.search__popup').removeClass('search-opened'));
$(document).on('keyup', e => {
  if (e.key === 'Escape') $('.search__popup').removeClass('search-opened');
});

Notable details

• The focus underline (search-focus-border) is a 2px sibling that scales from width: 0 to 100% on input focus — clean alternative to changing border directly.
• Background uses rgba(0,2,41,0.95) instead of solid black — lets some hero color bleed through for context.
• Same component is reused across all five home variants by toggling the search-opened class.

Use when

• Marketing sites that need a full-screen "spotlight" search rather than an inline input.
• Templates where the search affordance is iconographic (magnifier in header) rather than a visible input.
• Keyboard-first UX where Esc dismisses the overlay.

Caveats

• This element is visibility: hidden at first paint — the screenshot pipeline will fall back to a palette-gradient placeholder unless the toggle is fired in pre-shot scripts.
• jQuery-driven; port to a small native handler if you drop jQuery.