Simulations documentation (#917)

* added simulations and quickstart

* fixed simulations description to match v2 and added advanced

* a few fixes

* alpha badges

* adjusting alpha badge

* formatting alpha badge

* fix subheader and make it white

* scope white text for subtitle only to this page

* fixed faq

* more faq fixes

---------

Co-authored-by: Noah Raynor <noah.raynor@vapi.ai>
Co-authored-by: roshan <roshan@vapi.ai>

Author: 3 people

fern/assets/styles.css

@@ -38,6 +38,14 @@
   border: 1px solid #C7D2FE;
 }
 
+/* Alpha badge - purple to match dashboard */
+.vapi-badge-alpha {
+  background-color: rgba(168, 85, 247, 0.2) !important;
+  color: #A78BFA !important;
+  border: 1px solid rgba(168, 85, 247, 0.4) !important;
+  border-color: rgba(168, 85, 247, 0.4) !important;
+}
+
 /* Dark mode adjustments */
 :is(.dark) .vapi-badge-assistant {
   background-color: #134E4A;
@@ -57,6 +65,42 @@
   border: 1px solid #6366F1;
 }
 
+:is(.dark) .vapi-badge-alpha {
+  background-color: rgba(168, 85, 247, 0.2) !important;
+  color: #C4B5FD !important;
+  border: 1px solid rgba(168, 85, 247, 0.4) !important;
+  border-color: rgba(168, 85, 247, 0.4) !important;
+}
+
+/* Override Fern's pre-release availability badge to show "Alpha" with purple styling */
+.fern-docs-badge[title="Pre-release"] {
+  background-color: rgba(168, 85, 247, 0.2) !important;
+  border-color: rgba(168, 85, 247, 0.4) !important;
+  font-size: 0 !important;
+  position: relative !important;
+  min-width: 52px !important;
+  min-height: 24px !important;
+  display: inline-flex !important;
+}
+
+.fern-docs-badge[title="Pre-release"]::after {
+  content: "Alpha";
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  color: #A78BFA;
+  font-size: 0.75rem;
+  line-height: 1;
+  white-space: nowrap;
+}
+
+:is(.dark) .fern-docs-badge[title="Pre-release"] {
+  background-color: rgba(168, 85, 247, 0.2) !important;
+  color: #C4B5FD !important;
+  border-color: rgba(168, 85, 247, 0.4) !important;
+}
+
 /* for a grid of videos */
 
 .video-grid {
@@ -233,4 +277,9 @@ html.dark button[data-highlighted] .fern-api-property-meta {
 
 .light .fern-theme-default.fern-container {
   background-color: #fff !important;
+}
+
+/* Fix: Make subtitle white on Simulations pages in dark mode */
+:is(.dark) [id*="simulations"] .prose-p\:text-\(color\:--grayscale-a11\) :where(p):not(:where([class~=not-prose],[class~=not-prose] *)) {
+  color: var(--grayscale-12) !important;
 }

fern/docs.yml

@@ -290,6 +290,16 @@ navigation:
               - page: Advanced
                 path: observability/evals-advanced.mdx
                 icon: fa-light fa-clipboard-check
+          - section: Simulations
+            icon: fa-light fa-flask-vial
+            availability: pre-release
+            contents:
+              - page: Quickstart
+                path: observability/simulations-quickstart.mdx
+                icon: fa-light fa-rocket
+              - page: Advanced
+                path: observability/simulations-advanced.mdx
+                icon: fa-light fa-flask-vial
           - page: Boards
             path: observability/boards-quickstart.mdx
             icon: fa-light fa-chart-line