From caf7c4bcfd43e40755e2a09ce1bb72545c33c316 Mon Sep 17 00:00:00 2001
From: Carlos Polop <carlospolop@gmail.com>
Date: Mon, 18 May 2026 20:51:42 +0200
Subject: [PATCH] Improve sponsor ad hover layout

---
 theme/pagetoc.css | 42 +++++++++++++++++++++++++++++++-----------
 1 file changed, 31 insertions(+), 11 deletions(-)

diff --git a/theme/pagetoc.css b/theme/pagetoc.css
index f2fd1eb4f..fe676f625 100644
--- a/theme/pagetoc.css
+++ b/theme/pagetoc.css
@@ -128,6 +128,7 @@
         display: none; /*changed via JS once ad is loaded*/
         flex-direction: column;
         text-decoration: none !important;
+        overflow: hidden;
         backdrop-filter: blur(6px);
     }
     .sidesponsor img {
@@ -159,12 +160,13 @@
         overflow: hidden;
     }
     .sidesponsor .sponsor-title{
-        margin-top: 5px;
-        margin-bottom: 5px;
+        margin-top: 3px;
+        margin-bottom: 3px;
         margin-left: 15px;
         margin-right: 15px;
         font-weight: 800;
         font-size: 2rem;
+        line-height: 1.08;
         color: var(--sponsor-fg);
     }
     .sidesponsor:hover .sponsor-title{
@@ -175,29 +177,37 @@
         font-size: 1.55rem;
         line-height: 1.15;
         overflow-wrap: anywhere;
+        animation: sponsorTextReveal .3s ease .12s both;
     }
     .sidesponsor .sponsor-description{
-        display:none;
+        display: block;
         margin-top: 5px;
         margin-bottom: 15px;
         margin-left: 15px;
         margin-right: 15px;
         color: var(--sponsor-fg);        
-        transition-property: all;
-        transition-timing-function: cubic-bezier(.4,0,.2,1);
-        transition-duration: .3s;
-        overflow: scroll;
+        max-height: 0;
+        opacity: 0;
+        visibility: hidden;
+        overflow: hidden;
+        transition:
+            opacity .18s ease .14s,
+            visibility 0s linear .32s;
     }
     .sidesponsor:hover .sponsor-description{
-        display:block;
         grid-area: sponsor-description;
         min-height: 0;
         max-height: 100%;
         margin-top: 0;
         margin-bottom: 0;
         font-size: calc(1em - 1px);
+        opacity: 1;
+        visibility: visible;
         overflow: auto;
         overscroll-behavior: contain;
+        transition:
+            opacity .18s ease .14s,
+            visibility 0s linear 0s;
     }
     .sidesponsor .sponsor-cta{
         margin-top: auto;
@@ -209,20 +219,30 @@
         border-radius: 8px;
         background-color: var(--fg);
         color: var(--bg);
+        font-weight: 800;
     }
     .sidesponsor:hover .sponsor-cta{
         grid-area: sponsor-cta;
         margin-top: 0;
         margin-bottom: 4px;
-        padding: 7px 10px;
+        padding: 10px 14px;
         box-sizing: border-box;
         max-width: 100%;
         overflow: hidden;
         text-overflow: ellipsis;
         white-space: nowrap;
-        font-size: 1.08rem;
-        font-weight: 700;
+        font-size: 1.2rem;
+        font-weight: 800;
         line-height: 1.1;
+        animation: sponsorTextReveal .3s ease .12s both;
+    }
+    @keyframes sponsorTextReveal {
+        0%, 45% {
+            opacity: 0;
+        }
+        100% {
+            opacity: 1;
+        }
     }
     .sidesponsor-bsa {
         max-height: 40%;