x

apps/spa/src/index.css

@@ -1,12 +1,9 @@
 @import "tailwindcss";
 
 @theme {
-  --font-sans: 'Sarabun', ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
-  --font-heading: 'Prompt', ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
-  --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, 'Prompt', serif;
-  --font-sans-ja: '"Noto Sans JP"', ui-sans-serif, system-ui, sans-serif;
-  --font-sans-zh: '"Noto Sans SC"', ui-sans-serif, system-ui, sans-serif;
-  --font-sans-ko: '"Noto Sans KR"', ui-sans-serif, system-ui, sans-serif;
+  --font-sans: var(--font-sans-active, var(--font-sans-locale, 'Sarabun')), ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  --font-heading: var(--font-heading-active, var(--font-heading-locale, 'Prompt')), ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  --font-serif: var(--font-serif-active, var(--font-serif-locale, ui-serif)), Georgia, Cambria, "Times New Roman", Times, serif;
 
   --color-pop-pink: #FF6B6B;
   --color-pop-yellow: #FFF200;
@@ -20,10 +17,13 @@
 
   /* Spa Theme Colors */
   --color-spa-light: #FDFDF9;
+  --color-spa-sand: #F4EDE2;
   --color-spa-sage: #EAEFEA;
   --color-spa-stone: #4B4B46;
+  --color-spa-charcoal: #2E2E2A;
   --color-spa-forest: #1F3D2D;
   --color-spa-gold: #D4AF37;
+  --color-night-900: #111827;
 
   --shadow-brutal: 0 10px 25px rgba(0,0,0,0.05);
   --shadow-brutal-hover: 0 20px 40px rgba(0,0,0,0.1);
@@ -38,6 +38,37 @@
 }
 
 @layer base {
+  :root,
+  html {
+    --font-sans-locale: 'Sarabun';
+    --font-heading-locale: 'Prompt';
+    --font-serif-locale: ui-serif;
+  }
+
+  html[lang="en"] {
+    --font-sans-locale: 'Inter';
+    --font-heading-locale: 'Inter';
+    --font-serif-locale: ui-serif;
+  }
+
+  html[lang="ja"] {
+    --font-sans-locale: '"Noto Sans JP"';
+    --font-heading-locale: '"Noto Sans JP"';
+    --font-serif-locale: '"Noto Serif JP"';
+  }
+
+  html[lang="zh"] {
+    --font-sans-locale: '"Noto Sans SC"';
+    --font-heading-locale: '"Noto Sans SC"';
+    --font-serif-locale: '"Noto Serif SC"';
+  }
+
+  html[lang="ko"] {
+    --font-sans-locale: '"Noto Sans KR"';
+    --font-heading-locale: '"Noto Sans KR"';
+    --font-serif-locale: '"Noto Serif KR"';
+  }
+
   body {
     @apply bg-pop-bg text-pop-black font-sans antialiased;
     background-image: radial-gradient(circle at top right, rgba(255,107,107,0.15), transparent 40%),
@@ -51,6 +82,114 @@
 }
 
 @layer components {
+  .ui-page-shell {
+    @apply min-h-screen bg-pop-bg;
+  }
+
+  .ui-section-band {
+    @apply px-6 py-16 md:px-8 md:py-24;
+  }
+
+  .ui-section-inner {
+    @apply mx-auto max-w-7xl;
+  }
+
+  .ui-section-title {
+    @apply text-3xl font-semibold text-pop-black md:text-5xl;
+  }
+
+  .ui-section-subtitle {
+    @apply mx-auto max-w-2xl text-gray-500;
+  }
+
+  .ui-shell-card {
+    @apply rounded-3xl border border-spa-stone/10 bg-white shadow-brutal transition-all duration-300;
+  }
+
+  .ui-shell-card-hover {
+    @apply hover:-translate-y-1 hover:shadow-brutal-hover;
+  }
+
+  .ui-chip {
+    @apply inline-flex items-center justify-center rounded-full border px-4 py-2 text-xs font-bold uppercase tracking-widest transition;
+  }
+
+  .ui-button-primary {
+    @apply inline-flex items-center justify-center rounded-full bg-spa-forest px-6 py-3 text-xs font-bold uppercase tracking-widest text-white transition-colors hover:bg-spa-forest/90;
+  }
+
+  .ui-button-secondary {
+    @apply inline-flex items-center justify-center rounded-full bg-white px-6 py-3 text-xs font-bold uppercase tracking-widest text-spa-forest transition-colors hover:bg-spa-sage;
+  }
+
+  .ui-input-shell {
+    @apply w-full rounded-full border border-white/10 bg-white/5 px-6 py-4 text-sm text-white outline-none transition placeholder:text-white/40 focus:border-spa-gold/80;
+  }
+
+  .ui-muted-text {
+    @apply text-spa-stone/70;
+  }
+
+  .ui-hero-shell {
+    @apply relative flex min-h-[90vh] items-center justify-center overflow-hidden bg-night-900 text-white md:aspect-[21/9] md:min-h-0;
+  }
+
+  .ui-hero-overlay {
+    @apply absolute inset-0 bg-neutral-900/40;
+  }
+
+  .ui-hero-overlay-strong {
+    @apply absolute inset-0 bg-gradient-to-t from-neutral-900/90 via-neutral-900/10 to-neutral-900/30;
+  }
+
+  .ui-hero-content {
+    @apply relative z-10 mx-auto mt-16 w-full max-w-4xl space-y-6 px-8 text-center md:mt-0;
+  }
+
+  .ui-hero-title {
+    @apply font-serif text-5xl font-light leading-tight tracking-wide text-white drop-shadow-md md:text-7xl lg:text-8xl;
+  }
+
+  .ui-hero-copy {
+    @apply mx-auto max-w-2xl pb-8 pt-4 text-lg font-light text-white/90 drop-shadow-md md:text-xl;
+  }
+
+  .ui-banner-shell {
+    @apply relative mx-auto min-h-[350px] max-w-7xl overflow-hidden rounded-3xl shadow-brutal;
+  }
+
+  .ui-banner-overlay {
+    @apply absolute inset-0 bg-gradient-to-r from-spa-forest/80 via-spa-forest/40 to-transparent;
+  }
+
+  .ui-banner-content {
+    @apply relative z-10 max-w-xl space-y-4 p-8 text-white md:p-16;
+  }
+
+  .ui-card-soft {
+    @apply rounded-2xl border border-spa-stone/10 bg-white shadow-sm;
+  }
+
+  .ui-dark-shell {
+    @apply bg-spa-forest px-6 py-20 text-white;
+  }
+
+  .ui-dark-card {
+    @apply overflow-hidden rounded-3xl border border-white/5 bg-white/5;
+  }
+
+  .ui-dark-card-title {
+    @apply text-xl font-serif font-light tracking-wide text-spa-light md:text-2xl;
+  }
+
+  .ui-dark-card-copy {
+    @apply text-sm font-light leading-relaxed text-spa-light/70;
+  }
+
+  .ui-dark-link {
+    @apply inline-flex items-center gap-2 text-xs font-bold uppercase tracking-widest text-spa-gold transition-colors hover:text-white;
+  }
+
   .brutal-box {
     @apply bg-white border border-gray-100 rounded-2xl shadow-brutal transition-all duration-300;
   }
@@ -104,4 +243,3 @@ html {
 :lang(th) .font-serif {
   font-family: 'Prompt', sans-serif !important;
 }
-