fix up search style edges

Author: motdotla

_includes/components/radar-nav.html

@@ -151,7 +151,7 @@
     </div>
 
     <nav data-radar-mobile-root class="radar-mobile-list" aria-label="Primary mobile">
-      <a href="/search" class="radar-mobile-link">Search</a>
+      <a href="/search" class="radar-mobile-link">Search <span aria-hidden="true">/</span></a>
       <a href="/" class="radar-mobile-link">Dotenvx <span aria-hidden="true">◈</span></a>
       <a href="/armor" class="radar-mobile-link">Armor <span aria-hidden="true">⛨</span></a>
       <button type="button" class="radar-mobile-link radar-mobile-subtrigger" data-radar-mobile-open="company">
@@ -162,7 +162,7 @@
         <span>Docs</span>
         <span aria-hidden="true">→</span>
       </button>
-      <a href="/pricing" class="radar-mobile-link">Pricing</a>
+      <a href="/pricing" class="radar-mobile-link">Pricing <span aria-hidden="true">$</span></a>
     </nav>
 
     <div data-radar-mobile-submenu="company" class="radar-mobile-list" hidden>

assets/css/main.src.css

@@ -2625,7 +2625,6 @@ html.storm .design-input:focus {
   display: flex;
   flex-direction: column;
   gap: 1.75rem;
-  max-width: 36rem;
   width: 100%;
 }
 
@@ -2638,6 +2637,16 @@ html.storm .design-input:focus {
   min-height: 1.5rem;
 }
 
+.site-search-page-results > .design-paragraph {
+  text-align: center;
+}
+
+@media (min-width: 900px) {
+  .site-search-page-results > .design-paragraph {
+    text-align: left;
+  }
+}
+
 .site-search-overlay {
   align-items: flex-start;
   background: color-mix(in srgb, var(--design-bg) 72%, transparent);
@@ -2788,7 +2797,7 @@ html.storm .design-input:focus {
   color: var(--design-mid);
 }
 
-@media (min-width: 768px) {
+@media (min-width: 1100px) {
   .radar-nav-search {
     display: inline-flex;
   }

search/index.md

@@ -5,12 +5,52 @@ permalink: /search/
 layout: radar
 ---
 
+<style>
+  .search-hero-ascii {
+    align-items: center;
+    display: flex;
+    height: 100%;
+    justify-content: center;
+    min-height: inherit;
+    width: 100%;
+  }
+
+  .search-hero-ascii-art {
+    color: var(--design-ink);
+    font-family: var(--design-font-mono);
+    font-size: 4.5rem;
+    font-weight: 400;
+    letter-spacing: 0;
+    line-height: 1;
+    margin: 0;
+    user-select: none;
+  }
+
+  @media (min-width: 900px) {
+    .search-hero-ascii {
+      height: 100%;
+      justify-content: flex-end;
+      min-height: inherit;
+    }
+
+    .search-hero-ascii-art {
+      font-size: 12rem;
+    }
+  }
+</style>
+
+{% capture search_hero_visual %}
+  <div class="search-hero-ascii" aria-hidden="true">
+    <span class="search-hero-ascii-art">/</span>
+  </div>
+{% endcapture %}
+
 {% include components/design-hero.html
   class="company-design-hero"
   eyebrow="Dotenvx"
   title="Search"
   description="Find docs, pricing, and product pages."
-  hide_visual=true
+  visual=search_hero_visual
 %}
 
 <section class="radar-section">