3.0.3.2

Search box animation

assets/css/header.css

@@ -165,8 +165,8 @@
 }
 
 .utci-search-toggle[aria-expanded="true"] {
-  color: #fff;
-  background: #c8922a;
+  color: #c8922a;
+  background: #fef3dc;
   border-color: #c8922a;
 }
 
@@ -486,6 +486,38 @@ body.tl-scrubbing * { transition: none !important; }
   left: 0;
   width: 100%;
   z-index: 60;
+  /* "Eyes opening": unfurl from the top edge while fading in, so the drop
+     shadow grows with the box instead of flashing in fully-formed. */
+  transform-origin: center center;
+  animation: utci-search-open 0.26s cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+@keyframes utci-search-open {
+  from {
+    opacity: 0;
+    transform: scaleY(0.05);
+  }
+  to {
+    opacity: 1;
+    transform: scaleY(1);
+  }
+}
+
+/* Reverse the reveal when dismissing — close from the vertical middle and
+   fade out rather than vanishing instantly. */
+.utci-search-overlay.is-closing {
+  animation: utci-search-close 0.2s cubic-bezier(0.4, 0, 1, 1) forwards;
+}
+
+@keyframes utci-search-close {
+  from {
+    opacity: 1;
+    transform: scaleY(1);
+  }
+  to {
+    opacity: 0;
+    transform: scaleY(0.05);
+  }
 }
 
 .utci-search-overlay .utci-search {