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

assets/css/custom.css

@@ -1,9 +1,16 @@
 /* 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, #1e2b33 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;
+}
+
 .container-prose {
   @apply w-full mx-auto;
   max-width: 768px;
@@ -62,6 +69,15 @@
   @apply bg-primary text-white transition transform duration-200 ease-in-out;
 }
 
+.btn-outline-tertiary2 {
+  @apply border border-tertiary2 text-tertiary2;
+}
+
+.btn-outline-tertiary2:hover,
+.btn-outline-tertiary2:focus {
+  @apply bg-tertiary2 text-white transition transform duration-200 ease-in-out;
+}
+
 .btn-outline-secondary {
   @apply border border-secondary text-secondary;
 }
@@ -99,6 +115,10 @@
   @apply text-primary no-underline hover:underline;
 }
 
+.text-link-tertiary2 {
+  @apply text-tertiary2 no-underline hover:underline;
+}
+
 .font-h1 {
   @apply font-headline font-medium text-3xl md:text-4xl leading-tight text-balance;
 }

assets/css/finder-hero.css

@@ -0,0 +1,75 @@
+/* Finder-window hero styles — loaded only by layouts/for-individuals/single.html
+   as a separate Tailwind sheet, so other pages do not ship the split-flap rules.
+
+   @reference imports Tailwind and the shared theme/utilities for @apply
+   resolution only — nothing from them is re-emitted here. Hugo pipes this file
+   to the Tailwind CLI with the project root as cwd and does not rewrite
+   @reference like it does @import, so the theme path is root-relative. The
+   @layer components wrapper keeps these rules in the same cascade layer they
+   would have inside main.css, so utility classes in the markup still win over
+   component rules. */
+@reference "tailwindcss";
+@reference "./assets/css/theme.css";
+
+/* Re-declare main.css's cascade layer order: layer order is fixed by first
+   occurrence per document, so without this a bare `@layer components` block
+   would corrupt the order if this sheet were ever loaded before main.css. */
+@layer properties, theme, base, components, utilities;
+
+@layer components {
+  /* Two stacked icons per slot; `.is-locked` on the .finder-hero root decides
+     which face shows. finder-hero.js toggles the class on each flap cycle. */
+  .finder-swap-icon {
+    position: relative;
+    display: inline-flex;
+    flex: 0 0 auto;
+    width: 1.25rem;
+    height: 1.25rem;
+  }
+
+  .finder-swap-icon i,
+  .finder-swap-icon img {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    object-fit: 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 (departure-board segment)
+     between its locked and unlocked label instead of per-letter flapping. */
+  .finder-path {
+    display: inline-flex;
+    min-width: 0;
+    perspective: 400px;
+  }
+
+  .finder-path-inner {
+    transform-style: preserve-3d;
+    transition: transform 0.6s ease-in-out;
+  }
+
+  .finder-path-front,
+  .finder-path-back {
+    backface-visibility: hidden;
+  }
+
+  .finder-path-back {
+    transform: rotateX(180deg);
+  }
+
+  .finder-hero:not(.is-locked) .finder-path-inner {
+    transform: rotateX(180deg);
+  }
+}

assets/css/hub-scene.css

@@ -0,0 +1,51 @@
+/* Page-scoped sheet for the for-teams hero, so other pages do not ship these
+   rules. See assets/css/finder-hero.css for the @reference/@layer rationale. */
+@reference "tailwindcss";
+@reference "./assets/css/theme.css";
+
+@layer properties, theme, base, components, utilities;
+
+@layer components {
+  /* Crossfade rotator for exactly three children: the 12s cycle is carved into
+     4s slots by the :nth-child delays, so a fourth child would never show. */
+  .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;
+    }
+  }
+}

assets/js/finder-hero.js

@@ -0,0 +1,87 @@
+/* Split-flap animation for the for-individuals finder hero: every element with
+   a `finder-flap` class cycles between its data-locked and data-unlocked text
+   like an airport departure board, while `.is-locked` on the `.finder-hero`
+   root swaps the accompanying icons and flips the title-bar path panel (see
+   finder-hero.css). */
+
+class FinderFlap {
+  constructor(el) {
+    this.el = el;
+    this.chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789';
+    this.raf = null;
+  }
+
+  setText(newText) {
+    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());
+    }
+  }
+}
+
+document.addEventListener('DOMContentLoaded', () => {
+  const root = document.querySelector('.finder-hero');
+  if (!root) {
+    return;
+  }
+  const flaps = Array.from(root.querySelectorAll('.finder-flap')).map((el) => ({ el, flap: new FinderFlap(el) }));
+  const reducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+  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]');
+  if (reducedMotion) {
+    return;
+  }
+  let providerIndex = 0;
+  let locked = true;
+  setInterval(() => {
+    locked = !locked;
+    if (locked && providerName && providerIcon) {
+      providerIndex = (providerIndex + 1) % providers.length;
+      providerName.textContent = providers[providerIndex].name;
+      providerIcon.src = providers[providerIndex].src;
+    }
+    root.classList.toggle('is-locked', locked);
+    flaps.forEach(({ el, flap }, index) => {
+      const text = locked ? el.dataset.locked : el.dataset.unlocked;
+      setTimeout(() => flap.setText(text), index * 140);
+    });
+  }, 5000);
+});

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"]
 ---