Add holiday wishlist banner

client/src/App.tsx

@@ -41,6 +41,31 @@ function App() {
         <QueryClientProvider client={queryClient}>
             <TooltipProvider>
                 <Toaster />
+                <div
+                    className="snow-banner"
+                    role="region"
+                    aria-label="Holiday announcement"
+                >
+                    <div className="snow-banner__snow" aria-hidden="true">
+                        <span className="snowflake snowflake-1" />
+                        <span className="snowflake snowflake-2" />
+                        <span className="snowflake snowflake-3" />
+                        <span className="snowflake snowflake-4" />
+                        <span className="snowflake snowflake-5" />
+                        <span className="snowflake snowflake-6" />
+                        <span className="snowflake snowflake-7" />
+                        <span className="snowflake snowflake-8" />
+                    </div>
+                    <a
+                        className="snow-banner__link"
+                        href="https://www.amazon.co.uk/hz/wishlist/ls/2B4R5YZQ8U4B2?ref_=wl_share"
+                        target="_blank"
+                        rel="noreferrer"
+                    >
+                        The ponies have had a chat and put together an Amazon
+                        Wish-List for Christmas! Click here
+                    </a>
+                </div>
                 <Router />
             </TooltipProvider>
         </QueryClientProvider>

client/src/index.css

@@ -193,6 +193,124 @@
 
     body {
         @apply bg-background text-foreground;
-    font-feature-settings: "rlig" 1, "calt" 1;
+        font-feature-settings:
+            "rlig" 1,
+            "calt" 1;
+    }
+}
+
+.snow-banner {
+    position: sticky;
+    top: 0;
+    z-index: 50;
+    overflow: hidden;
+    background: linear-gradient(120deg, #0a3b6a, #0f5b8f);
+    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
+    animation: banner-slide-down 0.6s ease-out;
+}
+
+.snow-banner__link {
+    display: block;
+    padding: 14px 20px;
+    text-align: center;
+    font-family: "Merriweather", Helvetica, serif;
+    font-weight: 700;
+    color: #ffffff;
+    text-decoration: none;
+    letter-spacing: 0.01em;
+}
+
+.snow-banner__link:hover,
+.snow-banner__link:focus-visible {
+    text-decoration: underline;
+}
+
+.snow-banner__snow {
+    pointer-events: none;
+    position: absolute;
+    inset: 0;
+}
+
+.snowflake {
+    position: absolute;
+    top: -12px;
+    width: 6px;
+    height: 6px;
+    border-radius: 999px;
+    background: rgba(255, 255, 255, 0.8);
+    animation: snow-fall 6s linear infinite;
+}
+
+.snowflake-1 {
+    left: 8%;
+    animation-delay: 0s;
+    animation-duration: 5.5s;
+}
+
+.snowflake-2 {
+    left: 18%;
+    animation-delay: 1s;
+    animation-duration: 6.5s;
+}
+
+.snowflake-3 {
+    left: 32%;
+    animation-delay: 0.5s;
+    animation-duration: 5.8s;
+}
+
+.snowflake-4 {
+    left: 45%;
+    animation-delay: 1.4s;
+    animation-duration: 6.2s;
+}
+
+.snowflake-5 {
+    left: 58%;
+    animation-delay: 0.2s;
+    animation-duration: 5.9s;
+}
+
+.snowflake-6 {
+    left: 72%;
+    animation-delay: 1.1s;
+    animation-duration: 6.7s;
+}
+
+.snowflake-7 {
+    left: 84%;
+    animation-delay: 0.7s;
+    animation-duration: 5.6s;
+}
+
+.snowflake-8 {
+    left: 93%;
+    animation-delay: 1.6s;
+    animation-duration: 6.9s;
+}
+
+@keyframes banner-slide-down {
+    from {
+        transform: translateY(-100%);
+    }
+
+    to {
+        transform: translateY(0);
+    }
+}
+
+@keyframes snow-fall {
+    0% {
+        transform: translateY(-10px);
+        opacity: 0;
+    }
+
+    10% {
+        opacity: 0.9;
+    }
+
+    100% {
+        transform: translateY(60px);
+        opacity: 0;
     }
 }