Make Cloud Posse watermark clickable and link to cloudposse.com (#1820)

Convert the watermark from a non-interactive CSS background image to a clickable anchor element that links to cloudposse.com. The watermark now appears on all pages with proper theme switching (light/dark mode) and responsive behavior (hidden on mobile).

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-authored-by: Claude <[email protected]>

Author: osterman

website/src/components/Watermark/index.css

@@ -0,0 +1,47 @@
+/* Cloud Posse Logo - Fixed position in bottom right corner */
+.cloudposse-logo {
+  position: fixed;
+  bottom: 2%;
+  right: 2%;
+  width: 15em;
+  z-index: 100;
+  opacity: 0.5;
+  transition: opacity 0.2s ease-in-out;
+  text-decoration: none;
+}
+
+.cloudposse-logo:hover {
+  opacity: 0.8;
+}
+
+.cloudposse-logo img {
+  width: 100%;
+  height: auto;
+  display: block;
+}
+
+/* Theme-based logo switching */
+/* Light mode: show light logo, hide dark logo */
+.cloudposse-logo__light {
+  display: block;
+}
+
+.cloudposse-logo__dark {
+  display: none;
+}
+
+/* Dark mode: show dark logo, hide light logo */
+html[data-theme='dark'] .cloudposse-logo__light {
+  display: none;
+}
+
+html[data-theme='dark'] .cloudposse-logo__dark {
+  display: block;
+}
+
+/* Hide on mobile to avoid interfering with content */
+@media (max-width: 768px) {
+  .cloudposse-logo {
+    display: none;
+  }
+}

website/src/components/Watermark/index.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import './index.css';
+
+/**
+ * Watermark renders a fixed-position clickable Cloud Posse logo
+ * in the bottom-right corner of the page.
+ *
+ * Theme switching is handled via CSS using [data-theme] selectors.
+ */
+export default function Watermark(): JSX.Element {
+  return (
+    <a
+      href="https://cloudposse.com"
+      target="_blank"
+      rel="noopener noreferrer"
+      className="cloudposse-logo"
+      aria-label="Cloud Posse - Visit cloudposse.com"
+      title="Cloud Posse"
+    >
+      <img
+        src="/img/cloudposse-light.svg"
+        alt="Cloud Posse"
+        loading="lazy"
+        className="cloudposse-logo__light"
+      />
+      <img
+        src="/img/cloudposse-opaque.svg"
+        alt="Cloud Posse"
+        loading="lazy"
+        className="cloudposse-logo__dark"
+      />
+    </a>
+  );
+}

website/src/css/custom.css

@@ -115,17 +115,8 @@ div.atmos__effect::before, html[data-theme='dark'] div.navbar__logo::before {
     color: black;
 }
 
-html[data-theme='dark'] body {
-    background-image: url("/static/img/cloudposse-opaque.svg");
-}
-
 body {
     background-color: var(--ifm-background-color);
-    background-image: url("/static/img/cloudposse-light.svg");
-    background-position: 98% 98%;
-    background-repeat: no-repeat;
-    background-size: 15em;
-    background-attachment: fixed;
     font-family: 'Optimistic Text', -apple-system, ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
     font-size: 17px;
     line-height: 30px;

website/src/theme/Root.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import Watermark from '@site/src/components/Watermark';
+
+/**
+ * Root component that wraps the entire site.
+ * Used to add global elements like the watermark.
+ */
+export default function Root({ children }: { children: React.ReactNode }): JSX.Element {
+  return (
+    <>
+      {children}
+      <Watermark />
+    </>
+  );
+}