add announcement bar, styling changes

fern/docs.yml

@@ -11,6 +11,9 @@ instances:
 
 title: SignalWire
 
+announcement:
+  message: "Developer Workshop April 9th in Raleigh, NC: Build AI Voice Agents for the Modern Contact Center. <a href=\"https://info.signalwire.com/signalwire-aicamp-developer-workshop\" target=\"_blank\">Sign up →</a>"
+
 settings:
   folder-title-source: frontmatter
 

fern/styles.css

@@ -1,5 +1,14 @@
 /* Custom styles for SignalWire documentation */
 
+/* SignalWire brand colors */
+:root {
+  --sw-mist: #f1f8ff;       /* Backgrounds */
+  --sw-breeze: #b7d9ff;     /* Strokes, fills, accents */
+  --sw-deep-sea: #0336ab;   /* Emphasis, fills, accent */
+  --sw-pink: #f72a72;       /* Logo, accents, callouts on dark backgrounds */
+  --sw-blue: #044ef4;       /* Logo, links, fills, accents on light backgrounds */
+}
+
 
 /*
  * Diagram images: solid background + color inversion for dark mode.
@@ -47,6 +56,7 @@ img.diagram {
   font-size: 1.25rem !important;
   color: var(--grayscale-12) !important;
   letter-spacing: -0.01em;
+  margin-left: 0.35rem;
   position: relative;
   top: -1px;
 }
@@ -62,8 +72,10 @@ a[href*="status.signalwire.com"]::after {
   display: inline-block;
   width: 0.5rem;
   height: 0.5rem;
+  aspect-ratio: 1;
   margin-left: 0.375rem;
   border-radius: 50%;
+  line-height: 0;
   background-color: #9ca3af;
   vertical-align: middle;
   animation: status-pulse 2s ease-in-out infinite;
@@ -80,6 +92,102 @@ a[href*="status.signalwire.com"]::after {
   font-weight: 600;
 }
 
+/* Announcement bar — iridescent wash effect */
+@keyframes iridescent-wash {
+  0% {
+    opacity: 0;
+    background-position: -100% 0;
+  }
+  12% {
+    opacity: 1;
+    background-position: -60% 0;
+  }
+  70% {
+    opacity: 1;
+    background-position: 150% 0;
+  }
+  100% {
+    opacity: 0;
+    background-position: 200% 0;
+  }
+}
+
+/* Announcement bar — wash on page load */
+#fern-announcement {
+  position: relative;
+  overflow: hidden;
+  font-size: 0.825rem;
+  isolation: isolate;
+}
+
+/* Default (non-homepage): subtle wash */
+#fern-announcement::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(
+    105deg,
+    transparent 10%,
+    rgba(0, 122, 255, 0.2) 30%,
+    rgba(168, 56, 255, 0.25) 50%,
+    rgba(0, 122, 255, 0.2) 70%,
+    transparent 90%
+  );
+  background-size: 200% 100%;
+  opacity: 0;
+  animation: iridescent-wash 1.6s ease-out forwards;
+  pointer-events: none;
+  z-index: -1;
+}
+
+/* Homepage: intense wash */
+:has(.lp-page-container) #fern-announcement::after {
+  background-image: linear-gradient(
+    105deg,
+    transparent 10%,
+    rgba(0, 122, 255, 0.5) 30%,
+    rgba(168, 56, 255, 0.55) 50%,
+    rgba(0, 122, 255, 0.5) 70%,
+    transparent 90%
+  );
+}
+
+/* Hide heading anchors on homepage */
+.lp-page-container :is(h1, h2, h3, h4, h5, h6) a[href^="#"] {
+  display: none;
+}
+
+/* Get Started callout — subtle wash on hover */
+.hp-callout:has(a[href*="getting-started"]) {
+  position: relative;
+  overflow: hidden;
+}
+
+.hp-callout:has(a[href*="getting-started"])::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(
+    105deg,
+    transparent 10%,
+    rgba(0, 122, 255, 0.08) 30%,
+    rgba(168, 56, 255, 0.1) 50%,
+    rgba(0, 122, 255, 0.08) 70%,
+    transparent 90%
+  );
+  background-size: 200% 100%;
+  opacity: 0;
+  pointer-events: none;
+  z-index: 1;
+  border-radius: inherit;
+}
+
+.hp-callout:has(a[href*="getting-started"]):hover::after {
+  animation: iridescent-wash 1.2s ease-out forwards;
+}
+
+
+
 /* =============================================================================
    LANDING PAGE STYLING
    ============================================================================= */
@@ -380,13 +488,15 @@ a[href*="status.signalwire.com"]::after {
       grid-row: 2;
     }
 
-    /* Full-width separator line above the footer row */
+    /* Full-width separator line above the footer row — fades in from left */
     &::after {
       content: "";
       grid-column: 1 / -1;
       grid-row: 4;
       align-self: start;
-      border-top: 1px solid var(--grayscale-a5);
+      margin-top: 0.75rem;
+      height: 1px;
+      background: linear-gradient(to right, transparent, var(--grayscale-a5));
       pointer-events: none;
     }
 
@@ -397,6 +507,7 @@ a[href*="status.signalwire.com"]::after {
       max-width: none;
       width: fit-content;
       margin-left: auto;
+      margin-top: 0.75rem;
       display: flex;
       align-items: center;
       padding: 0.5rem 0.25rem 0;