Swap bots in hub hero card

assets/css/hero.css

@@ -209,16 +209,14 @@
     white-space: nowrap;
   }
 
-  /* Logo: identical halo on both scenes; the wobble animation is assigned per
-     scene (name + clock) next to each scene's other rules. */
+  /* Logo: the scene's centre bot; the wobble animation is assigned per scene
+     (name + clock) next to each scene's other rules. */
   .hero-scene-logo {
     position: absolute;
     top: 90px;
     left: 160px;
     width: 96px;
     height: 96px;
-    border-radius: 50%;
-    background: radial-gradient(circle, color-mix(in srgb, var(--color-primary) 14%, transparent) 0%, transparent 70%);
     transform: translate(-50%, -50%);
     display: flex;
     align-items: center;
@@ -324,10 +322,10 @@
     53%, 100% { transform: rotate(0deg); }
   }
 
-  /* Hub bot wobble — the same quick ±1.5° rock as the Cryptomator card (0.5%
-     steps ≈ the cryp scene's 1% steps on its half-length 5s clock), twice per
-     sequence: when the file lands (25%) and when the key lands (75%). */
-  @keyframes hero-hub-logo-wobble {
+  /* Cryptomator (top) wobble — the same quick ±1.5° rock as the Cryptomator
+     card (0.5% steps ≈ the cryp scene's 1% steps on its half-length 5s clock),
+     twice per sequence: when the file lands (25%) and when the key lands (75%). */
+  @keyframes hero-hub-top-wobble {
     0%, 25%   { transform: rotate(0deg); }
     25.5%     { transform: rotate(-1.5deg); }
     26%       { transform: rotate(1.5deg); }
@@ -341,9 +339,9 @@
     78%, 100% { transform: rotate(0deg); }
   }
 
-  /* Hub apex wobble — same rock, once per sequence, when the fingerprint
-     reaches it (50%). */
-  @keyframes hero-hub-apex-wobble {
+  /* Hub bot (bottom) wobble — same rock, once per sequence, when the
+     fingerprint reaches it (50%). */
+  @keyframes hero-hub-bot-wobble {
     0%, 50%   { transform: rotate(0deg); }
     50.5%     { transform: rotate(-1.5deg); }
     51%       { transform: rotate(1.5deg); }
@@ -353,41 +351,38 @@
   }
 
   /* ───── Hub scene: a diamond/prism of the four nodes ─────
-     Hub (top), Team (left), Cloud (right) and Cryptomator (bottom) form a
-     diamond, keeping the same outer width as the Cryptomator card. Data flows
-     along the lower V (Team → Cryptomator → Cloud); the Hub oversees from the
-     apex, connected down the top edges and a center axis to all three, and
-     issues the vault key down that axis to the bot. */
+     Cryptomator (top), Team (left), Cloud (right) and the Hub bot (bottom)
+     form a diamond, keeping the same outer width as the Cryptomator card. Data
+     flows along the upper V (Team → Cryptomator → Cloud); the Hub oversees
+     from the bottom, connected along the lower edges and the center axis, and
+     issues the vault key up that axis to the Cryptomator bot. */
 
   .hero-hub-anchor-team  { top: 90px;  left: 40px;  }
   .hero-hub-anchor-cloud { top: 90px;  left: 280px; }
-  .hero-hub-anchor-hub   { top: 30px;  left: 160px; }
+  .hero-hub-anchor-cryp  { top: 30px;  left: 160px; }
 
-  /* Hub is the subject of this card — its bot sits above the center at a slightly
-     reduced size (the tight viewBox makes it read large) so it stays balanced
-     within the scene, with a soft secondary glow + drop-shadow. */
+  /* The Cryptomator bot sits above the center at a slightly reduced size so it
+     stays balanced within the scene. */
   .hero-hub-anchor-img {
     width: 44px;
     height: 44px;
     object-fit: contain;
-    filter:
-      drop-shadow(0 3px 9px rgba(47, 72, 88, 0.30))
-      drop-shadow(0 0 1px rgba(47, 72, 88, 0.35));
     transform-origin: center bottom;
-    animation: hero-hub-apex-wobble var(--scene-cycle) ease-in-out infinite;
+    animation: hero-hub-top-wobble var(--scene-cycle) ease-in-out infinite;
   }
 
-  /* Cryptomator sits at the bottom vertex of the diamond at full size, the same
-     as the bot on the Cryptomator card (only the position differs). */
+  /* Hub bot — bottom vertex of the diamond. */
   .hero-hub-scene .hero-scene-logo {
     top: 150px;
     width: 78px;
     height: 78px;
   }
 
   .hero-hub-scene .hero-scene-logo-img {
-    width: 52px;
-    animation: hero-hub-logo-wobble var(--scene-cycle) ease-in-out infinite;
+    /* 52px like the old unpadded asset would get, scaled up by the canvas's
+       key-centering padding (988/887) so the drawn bot keeps its size. */
+    width: 58px;
+    animation: hero-hub-bot-wobble var(--scene-cycle) ease-in-out infinite;
   }
 
   /* Idle breathing — the outer anchor icons scale gently, offset in time so the
@@ -402,33 +397,34 @@
   .hero-cryp-anchor-cloud .hero-scene-icon { animation-delay: -4s; }
 
   /* Hub traveler — same shared scaffold as the Cryptomator card, mapped onto
-     the lower V of the diamond: Team (40,90) → bot (160,150) → Cloud (280,90).
-     Legs start and end exactly on the anchor centres, so the pops are hidden
-     behind the discs/logos. */
+     the upper V of the diamond: Team (40,90) → Cryptomator (160,30) → Cloud
+     (280,90). Legs start and end exactly on the anchor centres, so the pops
+     are hidden behind the discs/logos. */
   .hero-hub-traveler       { animation: hero-hub-travel var(--scene-cycle) ease-in-out infinite; }
   .hero-hub-traveler-file  { animation: hero-hub-file-arc var(--scene-cycle) ease-in-out infinite; }
   .hero-hub-traveler-vault { animation: hero-hub-vault-arc var(--scene-cycle) ease-in-out infinite; }
 
   /* Sequential story — four back-to-back quarter legs, no pause: the container
-     carries the file Team→bot (0–25%), HOLDS behind the bot through the
-     fingerprint (25–50%) and key (50–75%) steps, then carries the vault
-     bot→Cloud (75–100%). The loop's 100%→0% snap back to Team happens while
-     both faces are invisible behind the Cloud disc / Team disc. */
+     carries the file Team→Cryptomator (0–25%), HOLDS behind the Cryptomator
+     logo through the fingerprint (25–50%) and key (50–75%) steps, then carries
+     the vault Cryptomator→Cloud (75–100%). The loop's 100%→0% snap back to
+     Team happens while both faces are invisible behind the Cloud disc / Team
+     disc. */
   @keyframes hero-hub-travel {
-    0%       { transform: translate3d(0, 0, 0); }        /* Team (40,90) — file sets off immediately */
-    25%, 75% { transform: translate3d(120px, 60px, 0); } /* bot (160,150) — hold through fingerprint + key */
-    100%     { transform: translate3d(240px, 0, 0); }    /* Cloud (280,90) — vault arrives, invisible snap-back */
+    0%       { transform: translate3d(0, 0, 0); }         /* Team (40,90) — file sets off immediately */
+    25%, 75% { transform: translate3d(120px, -60px, 0); } /* Cryptomator (160,30) — hold through fingerprint + key */
+    100%     { transform: translate3d(240px, 0, 0); }     /* Cloud (280,90) — vault arrives, invisible snap-back */
   }
 
-  /* File face — visible from 0% on its Team→bot leg; pops away at 25% while
-     hidden behind the bot (no fades). */
+  /* File face — visible from 0% on its Team→Cryptomator leg; pops away at 25%
+     while hidden behind the Cryptomator logo (no fades). */
   @keyframes hero-hub-file-arc {
-    0%, 25%      { opacity: 1; } /* pops in behind the Team disc, travels to the bot */
-    25.01%, 100% { opacity: 0; } /* absorbed by the bot (encrypt) */
+    0%, 25%      { opacity: 1; } /* pops in behind the Team disc, travels to the Cryptomator logo */
+    25.01%, 100% { opacity: 0; } /* absorbed by the Cryptomator bot (encrypt) */
   }
 
-  /* Vault face — pops in behind the bot at 75%, after the key has landed, and
-     stays visible until the loop ends behind the Cloud disc. */
+  /* Vault face — pops in behind the Cryptomator logo at 75%, after the key has
+     landed, and stays visible until the loop ends behind the Cloud disc. */
   @keyframes hero-hub-vault-arc {
     0%, 75%      { opacity: 0; } /* hidden through the file, fingerprint and key steps */
     75.01%, 100% { opacity: 1; } /* carries on to the cloud until the loop snaps */
@@ -453,34 +449,36 @@
     transition: opacity 0.3s ease;
   }
 
-  /* Hub key — the Hub issues the vault key down the centre axis to the
-     Cryptomator bot on the third quarter leg (50–75%), after the fingerprint has
-     reached the Hub and before the vault sets off. Pops in behind the Hub bot,
-     pops away behind the Cryptomator bot. */
+  /* Hub key — the Hub issues the vault key up the centre axis to the
+     Cryptomator bot on the third quarter leg (50–75%), after the fingerprint
+     has reached the Hub and before the vault sets off. Pops in behind the Hub
+     bot, pops away behind the Cryptomator logo. */
   .hero-hub-key {
-    top: 30px;
+    top: 150px;
     left: 160px;
     width: 28px;
     height: 28px;
     margin-top: -14px;
     margin-left: -14px;
-    animation: hero-hub-key-drop var(--scene-cycle) ease-in-out infinite;
+    animation: hero-hub-key-rise var(--scene-cycle) ease-in-out infinite;
   }
 
-  @keyframes hero-hub-key-drop {
-    /* Step 3: only AFTER the fingerprint reaches the Hub does the key drop
-       Hub (160,30) -> bot (160,150), 50-75%. Constant size, single eased fall. */
+  @keyframes hero-hub-key-rise {
+    /* Step 3: only AFTER the fingerprint reaches the Hub does the key rise
+       Hub (160,150) -> Cryptomator (160,30), 50-75%. Constant size, single
+       eased climb. */
     0%, 50%      { opacity: 0; transform: translate3d(0, 0, 0); }
     50.01%       { opacity: 1; }
-    75%          { opacity: 1; transform: translate3d(0, 120px, 0); }
+    75%          { opacity: 1; transform: translate3d(0, -120px, 0); }
     75.01%, 100% { opacity: 0; transform: translate3d(0, 0, 0); }
   }
 
   /* Auth request — per the Hub security docs the member authenticates against
      Hub, which then issues the key; Hub itself NEVER talks to the cloud storage
      (zero knowledge), so the Hub↔Cloud edge deliberately stays static. A small
      fingerprint runs Team → Hub along the mgmt edge on the second quarter leg
-     (25–50%), between the file landing on the bot and the key drop. */
+     (25–50%), between the file landing on the Cryptomator logo and the key
+     rise. */
   .hero-hub-auth {
     top: 90px;
     left: 40px;
@@ -492,12 +490,13 @@
   }
 
   @keyframes hero-hub-auth-run {
-    /* Step 2: only AFTER the file reaches the bot does the fingerprint run
-       Team (40,90) -> Hub (160,30), 25-50%. Pops in behind the Team disc, pops
-       away behind the Hub bot. Constant size, single eased run. */
+    /* Step 2: only AFTER the file reaches the Cryptomator logo does the
+       fingerprint run Team (40,90) -> Hub (160,150), 25-50%. Pops in behind
+       the Team disc, pops away behind the Hub bot. Constant size, single
+       eased run. */
     0%, 25%      { opacity: 0; transform: translate3d(0, 0, 0); }
     25.01%       { opacity: 1; }
-    50%          { opacity: 1; transform: translate3d(120px, -60px, 0); }
+    50%          { opacity: 1; transform: translate3d(120px, 60px, 0); }
     50.01%, 100% { opacity: 0; transform: translate3d(0, 0, 0); }
   }
 

layouts/downloads/list.html

@@ -30,7 +30,7 @@
       </div>
       <div class="w-full md:w-2/3 lg:w-3/5">
         <div class="flex items-center mb-4">
-          <img src="/img/zero-knowledge-bot.svg" class="h-7 aspect-square" alt="Logo"/>
+          <img src="/img/zero-knowledge-bot.svg" class="h-7 aspect-988/877" alt="Logo"/>
           <span class="font-headline font-bold text-primary ml-2 pb-px">CRYPTOMATOR HUB</span>
         </div>
         <h2 class="font-h2 text-white mb-4">{{ i18n "hub_header_title" . | safeHTML }}</h2>

layouts/for-teams/single.html

@@ -12,7 +12,7 @@
       <div class="w-full md:w-2/3 lg:w-3/5">
         <div class="flex flex-wrap items-center gap-4 mb-4">
           <div class="flex items-center">
-            <img src="/img/zero-knowledge-bot.svg" class="h-8 aspect-square" alt="Logo"/>
+            <img src="/img/zero-knowledge-bot.svg" class="h-8 aspect-988/877" alt="Logo"/>
             <span class="font-headline font-bold text-primary ml-2 pb-px">CRYPTOMATOR HUB</span>
           </div>
           <div class="px-4 py-1 rounded-full text-xs lg:text-sm font-medium bg-red-600 text-white">

layouts/index.html

@@ -120,8 +120,8 @@ <h2 class="text-primary">CRYPTOMATOR</h2>
             <circle cx="160" cy="150" r="25" class="anchor-backdrop"/>
           </svg>
 
-          <div class="hero-scene-anchor hero-hub-anchor-hub">
-            <img src="/img/zero-knowledge-bot.svg" alt="" class="hero-hub-anchor-img"/>
+          <div class="hero-scene-anchor hero-hub-anchor-cryp">
+            <img src="/img/logo.svg" alt="" class="hero-hub-anchor-img"/>
           </div>
 
           <div class="hero-scene-anchor hero-hub-anchor-team">
@@ -135,7 +135,7 @@ <h2 class="text-primary">CRYPTOMATOR</h2>
           </div>
 
           <div class="hero-scene-logo">
-            <img src="/img/logo.svg" alt="" class="hero-scene-logo-img"/>
+            <img src="/img/zero-knowledge-bot.svg" alt="" class="hero-scene-logo-img"/>
           </div>
 
           <div class="hero-hub-traveler" aria-hidden="true">
@@ -223,7 +223,7 @@ <h4 class="font-medium lg:text-lg leading-relaxed">
         <div class="flex justify-between items-center p-4 border-b border-tertiary2">
           <h3>
             <div class="flex items-center">
-              <img src="/img/zero-knowledge-bot.svg" class="hidden md:block h-8 mr-2 aspect-887/877" alt="Logo"/>
+              <img src="/img/zero-knowledge-bot.svg" class="hidden md:block h-8 mr-2 aspect-988/877" alt="Logo"/>
               <span class="font-headline font-bold text-tertiary2 pb-px">CRYPTOMATOR HUB</span>
             </div>
           </h3>

layouts/pricing/single.html

@@ -162,7 +162,7 @@ <h3>
           <div class="flex justify-between items-center p-4 border-b border-primary">
             <h3>
               <div class="flex items-center">
-                <img src="/img/zero-knowledge-bot.svg" class="hidden md:block h-8 mr-2 aspect-square" alt="Logo"/>
+                <img src="/img/zero-knowledge-bot.svg" class="hidden md:block h-8 mr-2 aspect-988/877" alt="Logo"/>
                 <span class="font-headline font-bold text-primary pb-px">CRYPTOMATOR HUB</span>
               </div>
             </h3>
@@ -229,7 +229,7 @@ <h3>
           <div class="flex justify-between items-center p-4 border-b border-primary">
             <h3>
               <div class="flex items-center">
-                <img src="/img/zero-knowledge-bot.svg" class="hidden md:block h-8 mr-2 aspect-square" alt="Logo"/>
+                <img src="/img/zero-knowledge-bot.svg" class="hidden md:block h-8 mr-2 aspect-988/877" alt="Logo"/>
                 <span class="font-headline font-bold text-primary pb-px">CRYPTOMATOR HUB</span>
               </div>
             </h3>
@@ -320,7 +320,7 @@ <h3>
             <div class="flex-1">
               <div class="flex items-center gap-3 mb-3">
                 <div class="flex items-center">
-                  <img src="/img/zero-knowledge-bot.svg" class="h-8 mr-2 aspect-square" alt="Logo"/>
+                  <img src="/img/zero-knowledge-bot.svg" class="h-8 mr-2 aspect-988/877" alt="Logo"/>
                   <span class="font-headline font-bold text-primary pb-px">CRYPTOMATOR HUB</span>
                 </div>
                 <div class="inline-flex px-4 py-1 rounded-full text-sm font-medium tracking-wide uppercase bg-primary-l2 text-dark">
@@ -398,7 +398,7 @@ <h3 class="flex items-center gap-3 mb-4">
           <div>
             <h3 class="flex items-center gap-3 mb-4">
               <div class="flex items-center">
-                <img src="/img/zero-knowledge-bot.svg" class="hidden md:block h-8 mr-2 aspect-square" alt="Logo"/>
+                <img src="/img/zero-knowledge-bot.svg" class="hidden md:block h-8 mr-2 aspect-988/877" alt="Logo"/>
                 <span class="font-headline font-bold text-primary pb-px">CRYPTOMATOR HUB</span>
               </div>
               <div class="inline-flex px-4 py-1 rounded-full text-xs lg:text-sm font-medium tracking-wide uppercase bg-primary-l2 text-dark">

layouts/solutions/single.html

@@ -4,7 +4,7 @@
       <div class="max-w-4xl mx-auto">
         <div class="flex flex-wrap items-center justify-center gap-4 mb-6">
           <div class="flex items-center">
-            <img src="/img/zero-knowledge-bot.svg" class="h-8 aspect-square" alt="Logo"/>
+            <img src="/img/zero-knowledge-bot.svg" class="h-8 aspect-988/877" alt="Logo"/>
             <span class="font-headline font-bold text-primary ml-2 pb-px">CRYPTOMATOR HUB</span>
           </div>
           <span class="bg-primary text-white px-3 py-1 rounded-full text-sm font-medium">{{ .Title }}</span>