Docs: a website-owned landing page home, search dialog and a FlowFuse Docs header

nuxt/assets/css/style.css

@@ -478,8 +478,13 @@ dl.message-properties > dd {
     @apply flex items-start justify-between gap-4 rounded-lg p-4 text-left;
 }
 
+/* The site-wide `code` rule draws a bordered, padded box, which inside the dark block reads
+   as a second box. Pages that sit in .nohero reset it already; docs pages do not. */
 .ff-command__text {
     @apply text-sm text-gray-100 whitespace-pre-wrap break-all;
+    border: 0;
+    border-radius: 0;
+    padding: 0;
 }
 
 .ff-command__copy {
@@ -999,8 +1004,11 @@ h4:hover .header-anchor::before {
         font-weight: 400;
     }
 
+    /* The grey line under the header is a shadow, not a border, so it adds nothing to the
+       height that --ff-header-height below has to match. */
     .ff-website .ff-header {
         @apply bg-white w-full px-6 py-4 sm:py-6 md:py-0 top-0 z-50 sticky;
+        box-shadow: 0 1px 0 var(--color-gray-200);
     }
 
     /* The header pins itself to the top of the viewport, so anything else that wants to
@@ -2448,6 +2456,62 @@ lite-youtube::before {
     outline-offset: 3px;
 }
 
+/* Docs and handbook search: the field moves between the docs home's hero and a page's
+   sidebar, and into the search dialog and back (AlgoliaSearch.vue, `morph`). On a page
+   change the page itself swaps at once rather than cross-fading
+   (plugins/section-view-transitions.client.ts sets the class). */
+html.ff-section-transition::view-transition-old(root) {
+    display: none;
+}
+
+html.ff-section-transition::view-transition-new(root) {
+    animation: none;
+}
+
+/* The moving box carries the field's white, and its two snapshots ride inside it at their
+   real size, so the text cross-fades without stretching while the box changes shape. */
+::view-transition-group(ff-search) {
+    animation-duration: 0.3s;
+    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    border-radius: 6px;
+    background: #fff;
+    overflow: clip;
+}
+
+::view-transition-old(ff-search),
+::view-transition-new(ff-search) {
+    width: 100%;
+    height: 100%;
+    object-fit: none;
+    object-position: left center;
+}
+
+/* The old text is gone before the new one is fully in, so the two never read as one. */
+::view-transition-old(ff-search) {
+    animation-duration: 0.12s;
+}
+
+::view-transition-new(ff-search) {
+    animation-duration: 0.3s;
+}
+
+/* While the field moves, the moving box draws the frame, and the field and the search dialog
+   leave theirs out of the snapshots: two frames of different sizes would show as a box in a
+   box. <html> carries the class from just before a transition until it has finished. */
+html.ff-search-transition::view-transition-group(ff-search) {
+    box-sizing: border-box;
+    border: 1px solid #d1d5db;
+}
+
+html.ff-search-transition .ff-algolia--detached #algolia-search .aa-DetachedSearchButton,
+html.ff-search-transition .ff-algolia--detached .ff-algolia__standin {
+    border-color: transparent;
+}
+
+html.ff-search-transition .ff-search-dialog {
+    box-shadow: none;
+}
+
 /* View transition names for 'morphing-content' are set dynamically via JavaScript for AI modal transitions */
 
 /* View Transition styles for smooth morphing */