fix(landing): iter 3 — terminal install, fixed header, drawer polish

[johnnichev]

Summary

Fourth iteration on the landing page post-Galaxy S23 review. Three issues from the latest feedback round plus a new desktop instruction.

Issues addressed

1. Hidden nav drawer leaving a faint line at the top of the header (Image #29)

Root cause: .nav-drawer was using transform: translateY(-110%) with border-bottom: 1px solid — the combination left a sub-pixel artifact at certain viewport widths and DPR ratios because the negative transform's effective position could land exactly at the 0-pixel row, rendering the border as a visible line.

Fix: Replaced pure-transform hiding with opacity: 0 + visibility: hidden + transform: translateY(-8px). The transition uses a delayed-visibility pattern so the drawer remains interactive during the fade-out animation but becomes completely non-rendering after:

```css
.nav-drawer {
opacity: 0;
visibility: hidden;
transform: translateY(-8px);
transition: opacity 0.25s, transform 0.25s, visibility 0s linear 0.25s;
}
.nav-drawer.open {
opacity: 1;
visibility: visible;
transform: translateY(0);
transition: opacity 0.25s, transform 0.25s, visibility 0s linear 0s;
}
```

The `visibility` transition delay flips from 0.25s (on close, so the element remains interactive while fading out) to 0s (on open, so it becomes interactive immediately). This is the canonical CSS pattern for "animate hide but guarantee non-interactive when hidden."

Also removed the now-redundant `.nav-drawer { display: block }` overrides from the responsive media queries — the drawer is always `display: block` (div default) with visibility controlling whether it's rendered.

2. Giant gap between "24 Built-in Tools" and "Multi-Agent Orchestration" (Image #30)

Root cause: The 8-feature grid-4 and the 4-feature grid-2 card sections are separated by `mt-16` (64px top margin). On mobile both grids collapse to single column, so the cards become one vertical list — but the 64px gap creates a visible "end of section" break mid-content, which reads as broken.

Fix: Added mobile/touch override in the compact-card block that reduces `.mt-16` from 64px to 14px (matching the in-grid gap):

```css
@media (max-width: 768px), (pointer: coarse) {
.mt-16 { margin-top: 14px !important; }
}
```

The cards now read as one continuous stack.

3. pip install button looks bad on desktop (Image #31)

Root cause: The old `.btn-pip` was a button labeled "pip install selectools" sized with `flex: 1` alongside "Try the Builder" and "Read the Docs". On any width where the three buttons couldn't comfortably share the row, the pip text got squished or truncated. It also didn't look like what it was — a terminal command you should copy.

Fix: Completely replaced with a terminal install component inspired by the nv-context-landing pattern the user linked to (`~/projects/nv-context-landing`). Adapted to selectools' design tokens (cyan accent, existing CSS variables, JetBrains Mono font).

Structure:

```
┌─ ● ● ● ~/your-project [Copy] ─┐
│ │
│ $ pip install selectools█ │
│ │
└────────────────────────────────────────────────────┘
```

Features:

• Rounded container with cyan-tinted hover glow and translateY lift
• Mac-style traffic-light dots (red/yellow/green)
• `~/your-project` filename in the chrome bar
• `$` prompt in cyan, command in white, blinking cyan caret
• Reveal-on-hover "Copy" button (always visible on touch devices)
• Whole component is click-to-copy — tap anywhere inside
• Enter/Space keyboard support for accessibility
• "Copied" flash on the Copy button with check-mark animation
• Bottom toast notification ("Copied to clipboard") for 1.6s
• Full Clipboard API with `execCommand` fallback for insecure contexts
• Mobile-optimized padding/font at `max-width: 640px`

The `copyPip()` function was replaced with a proper IIFE that handles click, keyboard, toast, and fallback cleanly.

Layout change: the pip install terminal is now above the "Try the Builder" and "Read the Docs" buttons, which become a standard two-button CTA row. This is a much better hierarchy — the install command is the primary CTA and deserves to be visually distinct from the secondary actions.

4. Desktop header auto-hide on scroll — removed (new instruction)

The user asked: "let's add fixed header to the desktop as well just like mobile, no collapsing header on scroll"

Fix: Removed the `allowHide` logic from the scroll-progress IIFE entirely. The `nav.classList.add/remove('nav-hidden')` calls are gone. Also removed the now-dead `.nav-hidden` CSS class and simplified the nav transition (from `transform + background` to just `background`).

The header is now permanently fixed on all viewports, desktop and mobile alike. Only the scroll-triggered background-opacity change (transparent → solid when scrolled > 80px) remains.

Prefers-reduced-motion

Added two new lines to the existing prefers-reduced-motion block:

• `.terminal-body .caret { animation: none; opacity: 1 }` — kill the caret blink
• `.terminal-install:hover { transform: none }` — kill the hover lift

Test plan (post-merge)

Desktop:

• Header is fixed at the top on scroll — never hides
• Nav background fades from transparent → solid when scrolled past 80px
• Nav progress bar tracks scroll position at the bottom of the nav
• Hero shows the terminal install component (not a button row)
• Hovering the terminal reveals a "Copy" button that slides in from the right
• Clicking anywhere on the terminal copies "pip install selectools"
• A toast appears at the bottom saying "Copied to clipboard"
• The Copy button flashes green with a check-mark animation
• The blinking cyan caret animates continuously (unless reduce-motion is set)

Mobile (Galaxy S23):

• Hamburger button visible, drawer completely invisible when collapsed
• No faint line at the top of the header when drawer is closed
• Opening the drawer reveals all nav links smoothly
• Header stays fixed on scroll — no hide-on-scroll-down
• Terminal install component is full-width with tighter padding
• Copy button is always visible (no hover reveal on touch)
• Tapping the terminal copies the command and shows the toast
• "Try the Builder" and "Read the Docs" buttons stack below the terminal
• Feature cards are compact and adjacent (no big gap between grid sections)

Regression:

• Pre-commit hooks pass (14/14)
• HTML balanced (style/script counts correct)
• `node --check` validates the JS

What's NOT in this PR

• Any changes to the iframe previews, comparison tables, or builder section (all stable after PR fix(landing): mobile iter 2 — pointer:coarse, copy, layout polish #42)
• Any docs site changes
• New copy or content restructuring

The changes are surgical: drawer visibility fix, card gap fix, terminal install component, and removing desktop nav-hide.