+
+
# Unleash Documentation
@@ -20,9 +22,6 @@ hide-page-actions: true
With market-leading data governance, robust change and access controls, SaaS or self-hosted deployment options, multi-region support, and the flexibility of open-source, you have the freedom to choose the setup that works best for you while maintaining full control over your data.
-
-
-
diff --git a/fern/styles.css b/fern/styles.css
index d20f8fe3..285ea7f1 100644
--- a/fern/styles.css
+++ b/fern/styles.css
@@ -136,6 +136,36 @@ body:has(.landing-page) .fern-page-actions {
margin-top: 1rem;
margin-bottom: 2rem;
padding-bottom: 2.5rem;
+ position: relative;
+ overflow: hidden;
+}
+
+/* ── Hero animated background ── */
+.hero-bg-animation {
+ position: absolute;
+ inset: 0;
+ width: 100%;
+ height: 128%;
+ object-fit: cover;
+ object-position: center;
+ pointer-events: none;
+ user-select: none;
+ z-index: 0;
+ opacity: 0;
+ transition: opacity 0.4s ease;
+ top: -30%;
+}
+
+/* Show only in dark mode */
+.dark .hero-bg-animation {
+ opacity: 0.55;
+}
+
+/* Keep all hero content above the background */
+.hero h1,
+.hero-row {
+ position: relative;
+ z-index: 1;
}
.hero h1 {
@@ -159,6 +189,7 @@ body:has(.landing-page) .fern-page-actions {
.hero-text-column {
flex: 1;
min-width: 300px;
+ max-width: 600px;
display: flex;
flex-direction: column;
gap: 1rem;
@@ -218,6 +249,11 @@ body:has(.landing-page) .fern-page-actions {
.hero-video {
display: none;
}
+
+ /* Hide animated background on mobile */
+ .hero-bg-animation {
+ display: none;
+ }
}
/* Small mobile */