x

apps/spa/src/index.css

@@ -275,3 +275,89 @@ html {
 .ui-prose blockquote {
   @apply border-l-4 border-pop-pink pl-4 italic opacity-80 my-4;
 }
+
+/* Footer Curtain Reveal Effect */
+.global-main {
+  position: relative;
+  z-index: 2;
+  background: var(--color-pop-bg);
+}
+
+.site-footer {
+  @apply relative bg-pop-bg;
+  z-index: 1;
+}
+
+.site-footer-stage {
+  position: relative;
+}
+
+.site-footer-brand-finale {
+  @apply flex min-h-[55svh] items-center justify-center overflow-hidden border-t border-pop-black/10 bg-pop-bg px-6 py-20 text-center;
+}
+
+.site-footer-finale-logo {
+  @apply h-auto max-h-32 w-auto max-w-[min(82vw,32rem)] object-contain;
+}
+
+.site-footer-finale-wordmark {
+  @apply max-w-full break-words text-5xl font-semibold uppercase text-pop-black md:text-7xl;
+  letter-spacing: 0;
+}
+
+.site-footer-navigation {
+  @apply relative border-t border-pop-black/10 bg-night-900;
+  z-index: 3;
+}
+
+/* Desktop Fixed Curtain Reveal Effect (เปิดม่าน Logo แบบ Fixed ตาม pkh.kitizone.com) */
+@media (min-width: 1024px) {
+  .global-main {
+    position: relative;
+    z-index: 2;
+    background: var(--color-pop-bg);
+  }
+
+  .site-footer-with-finale {
+    min-height: 100svh;
+  }
+
+  .site-footer-stage {
+    position: fixed;
+    inset: 0;
+    z-index: 0;
+    min-height: 100svh;
+    display: grid;
+    grid-template-rows: minmax(0, 1fr) auto;
+    pointer-events: none;
+  }
+
+  .site-footer-brand-finale {
+    min-height: 0;
+    padding-top: 4rem;
+    padding-bottom: 4rem;
+  }
+
+  .site-footer-finale-logo {
+    @apply max-h-48 max-w-[min(68vw,48rem)];
+  }
+
+  .site-footer-finale-wordmark {
+    @apply text-8xl;
+  }
+
+  .site-footer-navigation {
+    pointer-events: auto;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .site-footer-stage {
+    display: block;
+    position: relative;
+  }
+
+  .site-footer-with-finale {
+    min-height: 0;
+  }
+}