move to top banner

layouts/partials/sections/hero.html

@@ -1,26 +1,30 @@
 {{/*
-  The opening of every page: an optional note (the eyebrow), the statement,
-  the dek, the actions — then either the layer panel (when `fit:` is set)
-  or the field, a blue plate with the platform's four layers drawn as bars.
-  `bars: false` drops the field.
+  The opening of every page: a full-bleed dark band. On the left, an
+  optional note (the eyebrow), the statement, the dek, the actions; on the
+  right, the agent log (when `log:` is set), the layer panel (when `fit:`
+  is set), or the field — the platform's four layers drawn as bars.
+  `bars: false` drops the field. `logImage` sets a photo behind the whole band.
 */}}
 {{ $s := . }}
-<header class="hero{{ if $s.compact }} hero-compact{{ end }}">
+{{ $visual := or $s.log $s.fit (ne $s.bars false) }}
+<header class="hero{{ if $s.compact }} hero-compact{{ end }}{{ if $visual }} has-visual{{ end }}{{ if $s.logImage }} has-image{{ end }}">
+  {{ with $s.logImage }}<img class="hero-bg" src="{{ . | relURL }}" alt="" fetchpriority="high">{{ end }}
+  <div class="wrap hero-grid">
+  <div class="hero-copy">
   {{ with $s.eyebrow }}<p class="note" data-reveal><span class="note-live" aria-hidden="true"></span><span class="note-text">{{ . }}</span></p>{{ end }}
   <h1 class="statement" data-reveal style="--d:80ms">{{ $s.title | markdownify }}</h1>
   {{ with $s.subhead }}<p class="dek" data-reveal style="--d:140ms">{{ . | markdownify }}</p>{{ end }}
   {{ if $s.ctas }}<div class="actions" data-reveal style="--d:200ms">{{ partial "sections/ctas.html" $s.ctas }}</div>{{ end }}
+  </div>
 
   {{ with $s.log }}
     {{/*
       An agent's activity log, typed out line by line (see the script below).
       Lines take `tag` + `text`; `think: true` marks a reasoning step (greyed,
       with a pause); `done: true` closes the run. The window keeps a fixed
-      height and scrolls as lines arrive. `logImage` swaps the blue field for
-      a photo; `logCaption` credits it.
+      height and scrolls as lines arrive. `logCaption` credits the photo.
     */}}
-    <figure class="hero-field hero-log{{ if $s.logImage }} has-image{{ end }}" data-reveal style="--d:260ms">
-      {{ with $s.logImage }}<img class="log-bg" src="{{ . | relURL }}" alt="" fetchpriority="high">{{ end }}
+    <figure class="hero-log" data-reveal style="--d:260ms">
       <div class="log-window">
         <div class="log-bar">
           <span class="log-title">{{ $s.logTitle | default "agent · your-company.federated.computer" }}</span>
@@ -37,7 +41,6 @@
         </ol>
         </div>
       </div>
-      {{ with $s.logCaption }}<figcaption class="log-caption">{{ . }}</figcaption>{{ end }}
     </figure>
     <script>
       (function () {
@@ -106,4 +109,6 @@
     {{ end }}
   {{ end }}
   {{ end }}
+  </div>
+  {{ with $s.logCaption }}<p class="hero-caption">{{ . }}</p>{{ end }}
 </header>