x

apps/website/src/app/globals.css

@@ -210,33 +210,71 @@
     @apply flex h-9 w-9 items-center justify-center rounded-full border border-line-primary/20 bg-surface-page text-[10px] font-bold text-text-main transition-all duration-300 hover:border-brand-primary hover:bg-brand-primary hover:text-surface-card;
   }
 
+  .global-main {
+    position: relative;
+    z-index: 2;
+    background: var(--color-surface-page);
+  }
+
   .site-footer {
-    @apply relative bg-surface-page;
+    position: relative;
     z-index: 1;
+    background-color: var(--color-surface-page);
   }
 
   .site-footer-stage {
-    @apply relative;
+    position: relative;
   }
 
   .site-footer-brand-finale {
-    @apply flex min-h-[55svh] items-center justify-center overflow-hidden border-t border-line-primary/20 bg-surface-page px-6 py-20 text-center;
+    display: flex;
+    min-height: 55svh;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    border-top: 1px solid color-mix(in oklab, var(--color-line-primary) 20%, transparent);
+    background-color: var(--color-surface-page);
+    padding-inline: calc(var(--spacing) * 6);
+    padding-block: calc(var(--spacing) * 20);
+    text-align: center;
   }
 
   .site-footer-finale-logo {
-    @apply h-auto max-h-32 w-auto max-w-[min(82vw,32rem)] object-contain;
+    height: auto;
+    max-height: calc(var(--spacing) * 32);
+    width: auto;
+    max-width: min(82vw, 32rem);
+    object-fit: contain;
   }
 
   .site-footer-finale-wordmark {
-    @apply max-w-full break-words text-5xl font-semibold uppercase text-text-main md:text-7xl;
+    max-width: 100%;
+    font-size: var(--text-5xl);
+    line-height: var(--tw-leading, var(--text-5xl--line-height));
+    font-weight: var(--font-weight-semibold, 600);
+    overflow-wrap: break-word;
+    color: var(--color-text-main);
+    text-transform: uppercase;
     letter-spacing: 0;
   }
 
+  @media (min-width: 48rem) {
+    .site-footer-finale-wordmark {
+      font-size: var(--text-7xl);
+      line-height: var(--tw-leading, var(--text-7xl--line-height));
+    }
+  }
+
   .site-footer-navigation {
-    @apply relative border-t border-line-primary/20 bg-surface-card px-6 py-20;
+    position: relative;
+    border-top: 1px solid color-mix(in oklab, var(--color-line-primary) 20%, transparent);
+    background-color: var(--color-surface-card);
+    padding-inline: calc(var(--spacing) * 6);
+    padding-block: calc(var(--spacing) * 20);
     z-index: 3;
   }
 
+  /* Desktop Fixed Curtain Reveal Effect (เปิดม่าน Logo แบบ Fixed ตาม pkh.kitizone.com) */
   @media (min-width: 1024px) {
     .global-main {
       position: relative;
@@ -252,22 +290,25 @@
       position: fixed;
       inset: 0;
       z-index: 0;
+      min-height: 100svh;
       display: grid;
       grid-template-rows: minmax(0, 1fr) auto;
-      min-height: 100svh;
       pointer-events: none;
     }
 
     .site-footer-brand-finale {
-      @apply min-h-0 py-16;
+      min-height: 0;
+      padding-block: calc(var(--spacing) * 16);
     }
 
     .site-footer-finale-logo {
-      @apply max-h-48 max-w-[min(68vw,48rem)];
+      max-height: calc(var(--spacing) * 48);
+      max-width: min(68vw, 48rem);
     }
 
     .site-footer-finale-wordmark {
-      @apply text-8xl;
+      font-size: var(--text-8xl);
+      line-height: var(--tw-leading, var(--text-8xl--line-height));
     }
 
     .site-footer-navigation {
@@ -277,8 +318,8 @@
 
   @media (prefers-reduced-motion: reduce) {
     .site-footer-stage {
-      position: relative;
       display: block;
+      position: relative;
     }
 
     .site-footer-with-finale {