more htmx

static/css/main.css

@@ -1548,11 +1548,11 @@ footer {
     transition: opacity 200ms ease-in-out;
 }
 
-.cv-paper.htmx-swapping {
+.cv-page-content-wrapper.htmx-swapping {
     opacity: 0;
 }
 
-.cv-paper.htmx-settling {
+.cv-page-content-wrapper.htmx-settling {
     opacity: 1;
 }
 
@@ -2614,7 +2614,7 @@ html {
     opacity: 1;
     transform: translateY(-3px);
     box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
-    background: #3a3a3a;
+    background: #27ae60;
 }
 
 .back-to-top.at-bottom {
@@ -2665,7 +2665,7 @@ html {
     opacity: 1;
     transform: translateY(-3px);
     box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
-    background: #3a3a3a;
+    background: #27ae60;
 }
 
 .info-button.at-bottom {
@@ -2692,7 +2692,7 @@ html {
    Info Modal - Modern Glassmorphism Design
    ======================================== */
 
-/* Native <dialog> element - centered by default, no positioning needed */
+/* Native <dialog> element - force centering */
 .info-modal {
     border: none;
     border-radius: 24px;
@@ -2700,6 +2700,12 @@ html {
     max-width: 500px;
     width: calc(100% - 2rem);
     background: transparent;
+    /* Force centering - override any browser defaults */
+    position: fixed;
+    inset: 0;
+    margin: auto;
+    /* Constrain height so margin:auto can center vertically */
+    max-height: fit-content;
 }
 
 /* Native ::backdrop pseudo-element replaces manual backdrop div */
@@ -3730,3 +3736,23 @@ html {
         display: none;
     }
 }
+
+/* =============================================================================
+   HTMX CSS TRANSITIONS
+   ============================================================================= */
+
+/* Smooth fade transition for language changes (.cv-paper swap) */
+.cv-page-content-wrapper.htmx-swapping {
+    opacity: 0;
+    transition: opacity 200ms ease-out;
+}
+
+.cv-page-content-wrapper.htmx-settling {
+    opacity: 1;
+    transition: opacity 200ms ease-in;
+}
+
+/* Prevent layout shift during content fade */
+.cv-page-content-wrapper {
+    position: relative;
+}