Redesign the product page heroes and roll out the Hub brand color

assets/css/custom.css

@@ -1,9 +1,100 @@
 /* custom classes: */
 .header-bg {
-  background-image: url(/img/home/header-background.avif), linear-gradient(to bottom, rgb(4.31% 5.88% 9.02%) 0%, rgb(7.84% 20.39% 32.94%) 38%, rgb(24.71% 54.51% 85.1%) 72%, rgb(60.39% 78.04% 96.08%) 90%);
+  background-image: url(/img/home/header-background.avif), linear-gradient(to bottom, var(--color-dark) 0%, rgb(7.84% 20.39% 32.94%) 38%, rgb(24.71% 54.51% 85.1%) 72%, rgb(60.39% 78.04% 96.08%) 90%);
   background-size: auto 100%;
 }
 
+.header-bg-hub {
+  background-image: url(/img/hub/header-clouds.png), url(/img/home/header-background.avif), linear-gradient(to bottom, #ffffff 0%, #eef3f7 55%, #dce8ee 100%);
+  background-size: auto 240px, auto 620px, 100% 100%;
+  background-repeat: repeat-x;
+  background-position: 50% 70px, bottom, center;
+}
+
+/* Two stacked icons per slot; `.is-locked` on the .finder-hero root, set by
+   script, picks the visible face. */
+.finder-swap-icon {
+  @apply relative inline-flex flex-none size-5;
+}
+
+.finder-swap-icon i,
+.finder-swap-icon img {
+  @apply absolute inset-0 flex items-center justify-center object-contain;
+  transition: opacity 0.4s ease;
+}
+
+.finder-hero.is-locked .finder-when-unlocked,
+.finder-hero:not(.is-locked) .finder-when-locked {
+  opacity: 0;
+}
+
+.finder-hero.is-locked .finder-flap-name {
+  @apply font-mono text-[13px] text-gray-600;
+}
+
+/* The title-bar path flips as one whole panel between its locked and unlocked
+   label instead of per-letter flapping. */
+.finder-path {
+  @apply inline-flex min-w-0 perspective-[400px];
+}
+
+.finder-path-inner {
+  @apply transform-3d transition-transform duration-600 ease-in-out;
+}
+
+.finder-path-front,
+.finder-path-back {
+  @apply backface-hidden;
+}
+
+.finder-path-back,
+.finder-hero:not(.is-locked) .finder-path-inner {
+  @apply rotate-x-180;
+}
+
+/* Crossfade rotator for exactly three children: the :nth-child delays carve the
+   12s cycle into three 4s slots, so a fourth child fades in on top of the first. */
+.idp-swap {
+  display: inline-grid;
+  place-items: center;
+}
+
+.idp-swap > * {
+  grid-area: 1 / 1;
+  opacity: 0;
+  animation: idp-cycle 12s infinite backwards;
+}
+
+.idp-swap > :nth-child(2) {
+  animation-delay: 4s;
+}
+
+.idp-swap > :nth-child(3) {
+  animation-delay: 8s;
+}
+
+@keyframes idp-cycle {
+  0% { opacity: 0; }
+  4% { opacity: 1; }
+  33% { opacity: 1; }
+  37% { opacity: 0; }
+  100% { opacity: 0; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .ad-pulse {
+    display: none;
+  }
+
+  .idp-swap > * {
+    animation: none;
+  }
+
+  .idp-swap > :first-child {
+    opacity: 1;
+  }
+}
+
 .container-prose {
   @apply w-full mx-auto;
   max-width: 768px;
@@ -34,22 +125,22 @@
   @apply bg-secondary border-secondary text-white;
 }
 
-.btn-tertiary2 {
-  @apply bg-tertiary2 border-tertiary2 text-white;
+.btn-hub {
+  @apply bg-hub border-hub text-white;
 }
 
 .btn-primary:hover,
 .btn-primary:focus,
 .btn-secondary:hover,
 .btn-secondary:focus,
-.btn-tertiary2:hover,
-.btn-tertiary2:focus {
+.btn-hub:hover,
+.btn-hub:focus {
   @apply text-white transition transform duration-200 ease-in-out shadow-md -translate-y-px;
 }
 
 .btn-primary:disabled,
 .btn-secondary:disabled,
-.btn-tertiary2:disabled {
+.btn-hub:disabled {
   @apply shadow-none translate-y-0;
 }
 
@@ -62,6 +153,15 @@
   @apply bg-primary text-white transition transform duration-200 ease-in-out;
 }
 
+.btn-outline-hub {
+  @apply border border-hub text-hub;
+}
+
+.btn-outline-hub:hover,
+.btn-outline-hub:focus {
+  @apply bg-hub text-white transition transform duration-200 ease-in-out;
+}
+
 .btn-outline-secondary {
   @apply border border-secondary text-secondary;
 }
@@ -99,6 +199,10 @@
   @apply text-primary no-underline hover:underline;
 }
 
+.text-link-hub {
+  @apply text-hub no-underline hover:underline;
+}
+
 .font-h1 {
   @apply font-headline font-medium text-3xl md:text-4xl leading-tight text-balance;
 }

assets/css/hero.css

@@ -52,7 +52,7 @@
 
   .hero-aura-secondary {
     right: -12%;
-    background: radial-gradient(circle, color-mix(in srgb, var(--color-tertiary2) 14%, transparent) 0%, transparent 70%);
+    background: radial-gradient(circle, color-mix(in srgb, var(--color-hub) 14%, transparent) 0%, transparent 70%);
   }
 
   /* Uses the same `container` constraint as the content sections below, so the
@@ -70,7 +70,7 @@
   }
 
   .hero-panel-primary   { --accent: var(--color-primary); }
-  .hero-panel-secondary { --accent: var(--color-tertiary2); }
+  .hero-panel-secondary { --accent: var(--color-hub); }
 
   .hero-panel-content {
     @apply flex-1 flex flex-col items-center;
@@ -142,7 +142,7 @@
      - encrypted vault / key    → secondary (teal) — the right segment */
   .hero-cryp-link   { stroke: var(--color-primary); }
 
-  .hero-hub-link { stroke: var(--color-tertiary2); }
+  .hero-hub-link { stroke: var(--color-hub); }
 
   /* Anchor: the icon/logo is centered on its declared point so the connecting
      dashed lines (drawn to that point) pass through the disc's centre. The label
@@ -167,9 +167,9 @@
   }
 
   .hero-hub-scene {
-    --scene-accent: var(--color-tertiary2);
+    --scene-accent: var(--color-hub);
     --scene-disc: #f1f6fb;
-    --scene-token: var(--color-tertiary2);
+    --scene-token: var(--color-hub);
     --scene-glow: color-mix(in srgb, var(--color-gray-600) 40%, transparent);
     --scene-cycle: 10s;
   }

assets/css/theme.css

@@ -113,7 +113,7 @@
   --color-primary-l2: #ebf5eb;
   --color-secondary: #008a7b;
   --color-tertiary: #005e71;
-  --color-tertiary2: #354960;
+  --color-hub: #354960;
   --color-dark: #1e2b33;
 
   --font-*: initial;

assets/js/finder-hero.js

@@ -0,0 +1,94 @@
+"use strict";
+
+/* One interval drives both halves of the effect: the per-element split-flap
+   text here, and the `.is-locked` icon and panel swap done in CSS. */
+
+class FinderFlap {
+  constructor(el) {
+    this.el = el;
+    this.lockedText = el.dataset.locked;
+    this.unlockedText = el.dataset.unlocked;
+    this.chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789';
+    this.raf = null;
+  }
+
+  show(locked) {
+    const newText = locked ? this.lockedText : this.unlockedText;
+    const oldText = this.el.textContent;
+    const length = Math.max(oldText.length, newText.length);
+    this.queue = [];
+    for (let i = 0; i < length; i++) {
+      const from = oldText[i] || '';
+      const to = newText[i] || '';
+      const start = Math.floor(i * 0.8);
+      const end = start + 8 + Math.floor(Math.random() * 8);
+      this.queue.push({ from, to, start, end, char: null });
+    }
+    cancelAnimationFrame(this.raf);
+    this.frame = 0;
+    this.update();
+  }
+
+  update() {
+    let output = '';
+    let complete = 0;
+    for (const item of this.queue) {
+      if (this.frame >= item.end) {
+        complete++;
+        output += item.to;
+      } else if (this.frame >= item.start) {
+        if (!item.char || Math.random() < 0.35) {
+          item.char = this.chars[Math.floor(Math.random() * this.chars.length)];
+        }
+        output += item.char;
+      } else {
+        output += item.from;
+      }
+    }
+    this.el.textContent = output;
+    if (complete < this.queue.length) {
+      this.frame++;
+      this.raf = requestAnimationFrame(() => this.update());
+    }
+  }
+}
+
+function initFinderHero() {
+  const root = document.querySelector('.finder-hero');
+  if (!root) {
+    return;
+  }
+  const flapElements = root.querySelectorAll('.finder-flap');
+  if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
+    root.classList.remove('is-locked');
+    flapElements.forEach((el) => {
+      el.textContent = el.dataset.unlocked;
+    });
+    return;
+  }
+  const flaps = Array.from(flapElements, (el) => new FinderFlap(el));
+  const providers = [
+    { name: 'Google Drive', src: '/img/clouds/google-drive.svg' },
+    { name: 'iCloud Drive', src: '/img/clouds/icloud.svg' },
+    { name: 'OneDrive', src: '/img/clouds/onedrive.svg' },
+    { name: 'Dropbox', src: '/img/clouds/dropbox.svg' },
+  ];
+  const providerName = root.querySelector('[data-finder-provider-name]');
+  const providerIcon = root.querySelector('[data-finder-provider-icon]');
+  let providerIndex = 0;
+  let locked = true;
+  setInterval(() => {
+    locked = !locked;
+    if (locked) {
+      providerIndex = (providerIndex + 1) % providers.length;
+      providerName.textContent = providers[providerIndex].name;
+      providerIcon.src = providers[providerIndex].src;
+    }
+    root.classList.toggle('is-locked', locked);
+    flaps.forEach((flap, index) => {
+      setTimeout(() => flap.show(locked), index * 140);
+    });
+  }, 5000);
+}
+
+initFinderHero();

content/for-individuals.de.html

@@ -1,4 +1,6 @@
 ---
 title: "Cryptomator"
 type: for-individuals
+darkNav: true
+flushHero: true
 ---

content/for-individuals.en.html

@@ -1,4 +1,6 @@
 ---
 title: "Cryptomator"
 type: for-individuals
+darkNav: true
+flushHero: true
 ---

content/for-teams.de.html

@@ -1,5 +1,6 @@
 ---
 title: "Cryptomator Hub"
 type: for-teams
+hubNav: true
 aliases: ["/hub"]
 ---

content/for-teams.en.html

@@ -1,5 +1,6 @@
 ---
 title: "Cryptomator Hub"
 type: for-teams
+hubNav: true
 aliases: ["/hub"]
 ---