Hero Section

Location

• GP Element: ID 4090 — ID86 Hero Search
• Hook: generate_after_header (priority 10)
• Display: general:front_page

Rendered HTML

<section class="id86-hero">
  <div class="id86-hero-copy">
    <h1>Practical instant documentation.<br>Learn fast. Take action.</h1>
    <div id="fusejs-hero" class="fusejs-hero">
      <div class="fusejs-hero-inner">
        <div class="fusejs-search-container">
          <span class="fusejs-search-icon">&gt;</span>
          <input type="text" id="fusejs-input" class="fusejs-input"
            placeholder="Search Git, Docker, grammar, or SEO..."
            autocomplete="off">
        </div>
        <div id="fusejs-results" class="fusejs-results" style="display:none;"></div>
      </div>
    </div>
    <nav class="id86-quick-topics" aria-label="Documentation topics">
      <span>Explore a topic:</span>
      <a href="/category/code/">Code</a>
      <a href="/category/devops/">DevOps</a>
      <a href="/category/english/">English</a>
      <a href="/category/seo/">SEO</a>
    </nav>
  </div>
</section>

Behavior

• Full viewport height: min-height: calc(100svh - 78px) on desktop, calc(100svh - 64px) on mobile.
• Background: radial + linear gradient overlay on deep navy (#0b2149 → #14326c → #2273bf).
• Search input is 2px light-blue border with prominent drop shadow.
• Typing in the search input triggers Fuse.js search; results appear below the input.
• On mobile the typing area header shrinks, search container reduces height, and quick topics stack with centered label.

CSS Dependencies

Class	Role
.id86-hero	Full-height flex container, gradient background
.id86-hero-copy	Centered content wrapper, max 900px
.id86-hero h1	Title typography, clamp-sized
.fusejs-hero	Search area wrapper (transparent background)
.fusejs-search-container	Flex row with icon, input, kbd, border/shadow
.fusejs-input	Styled input field
.fusejs-results	Dropdown results panel
.id86-quick-topics	Topic links row below search

Notes

• The heading uses font-weight: 500 for a lighter visual weight that does not compete with the search bar.
• Search results are rendered by js/id86-fusejs-global.js and shared with the command palette.
• Perfmatters optimizations are disabled on the front page so the search input is interactive immediately.