429 lines
14 KiB
CSS
429 lines
14 KiB
CSS
@import "tailwindcss";
|
|
|
|
@theme {
|
|
--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;
|
|
--color-pop-orange: #FFA07A;
|
|
--color-pop-red: #FF4500;
|
|
--color-pop-cyan: #E0FFFF;
|
|
--color-pop-green: #98FB98;
|
|
--color-pop-purple: #D8BFD8;
|
|
--color-pop-bg: #FFF0F5;
|
|
--color-pop-black: #333333;
|
|
|
|
/* 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);
|
|
|
|
--animate-pop-in: fade-in-up 0.6s ease-out forwards;
|
|
--animate-spin-slow: spin 15s linear infinite;
|
|
|
|
@keyframes fade-in-up {
|
|
0% { opacity: 0; transform: translateY(20px); }
|
|
100% { opacity: 1; transform: translateY(0); }
|
|
}
|
|
}
|
|
|
|
@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%),
|
|
radial-gradient(circle at bottom left, rgba(255,160,122,0.15), transparent 40%);
|
|
min-height: 100vh;
|
|
}
|
|
|
|
h1, h2, h3, h4 {
|
|
@apply text-pop-black font-semibold tracking-tight;
|
|
}
|
|
}
|
|
|
|
@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-pop-black/60;
|
|
}
|
|
|
|
.ui-shell-card {
|
|
@apply rounded-3xl border border-pop-black/10 bg-night-900 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-pop-pink px-6 py-3 text-xs font-bold uppercase tracking-widest text-pop-bg transition-colors hover:opacity-90;
|
|
}
|
|
|
|
.ui-button-secondary {
|
|
@apply inline-flex items-center justify-center rounded-full bg-pop-bg px-6 py-3 text-xs font-bold uppercase tracking-widest text-pop-black transition-colors hover:bg-pop-pink hover:text-pop-bg;
|
|
}
|
|
|
|
.ui-hero-button {
|
|
@apply inline-flex items-center justify-center rounded-full bg-pop-pink px-6 py-3 text-xs font-bold uppercase tracking-widest text-white transition-all shadow-lg hover:bg-pop-red hover:opacity-95;
|
|
}
|
|
|
|
.ui-input-shell {
|
|
@apply w-full rounded-full border border-pop-black/20 bg-transparent px-6 py-4 text-sm text-pop-black outline-none transition placeholder:text-pop-black/50 focus:border-pop-pink;
|
|
}
|
|
|
|
.ui-muted-text {
|
|
@apply text-pop-black/70;
|
|
}
|
|
|
|
.ui-hero-shell {
|
|
@apply relative flex min-h-[90vh] items-center justify-center overflow-hidden bg-night-900 text-pop-bg md:aspect-[21/9] md:min-h-0;
|
|
}
|
|
|
|
|
|
.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 drop-shadow-md md:text-7xl lg:text-8xl;
|
|
color: var(--color-pop-black);
|
|
}
|
|
|
|
.ui-hero-title-sm {
|
|
@apply !text-2xl sm:!text-3xl md:!text-4xl lg:!text-5xl;
|
|
}
|
|
|
|
.ui-hero-title-md {
|
|
@apply !text-3xl sm:!text-4xl md:!text-5xl lg:!text-6xl;
|
|
}
|
|
|
|
.ui-hero-title-lg {
|
|
@apply !text-4xl sm:!text-5xl md:!text-6xl lg:!text-7xl;
|
|
}
|
|
|
|
.ui-hero-title-xl {
|
|
@apply !text-5xl md:!text-7xl lg:!text-8xl;
|
|
}
|
|
|
|
.ui-hero-copy {
|
|
@apply mx-auto max-w-2xl pb-8 pt-4 text-lg font-light drop-shadow-md md:text-xl;
|
|
color: var(--color-pop-black);
|
|
}
|
|
|
|
.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-pop-black/80 via-pop-black/40 to-transparent;
|
|
}
|
|
|
|
.ui-banner-content {
|
|
@apply relative z-10 max-w-xl space-y-4 p-8 text-pop-bg md:p-16;
|
|
}
|
|
|
|
.ui-card-soft {
|
|
@apply rounded-2xl border border-pop-black/10 bg-night-900 shadow-sm;
|
|
}
|
|
|
|
.ui-dark-shell {
|
|
@apply bg-pop-black px-6 py-20 text-pop-bg;
|
|
}
|
|
|
|
.ui-dark-card {
|
|
@apply overflow-hidden rounded-3xl border border-pop-black/10 bg-night-900;
|
|
}
|
|
|
|
.ui-dark-card-title {
|
|
@apply text-xl font-serif font-light tracking-wide text-pop-black md:text-2xl;
|
|
}
|
|
|
|
.ui-dark-card-copy {
|
|
@apply text-sm font-light leading-relaxed text-pop-black/70;
|
|
}
|
|
|
|
.ui-dark-link {
|
|
@apply inline-flex items-center gap-2 text-xs font-bold uppercase tracking-widest text-pop-pink transition-colors hover:text-pop-black;
|
|
}
|
|
|
|
.brutal-box {
|
|
@apply bg-night-900 border border-pop-black/20 rounded-2xl shadow-brutal transition-all duration-300;
|
|
}
|
|
|
|
.brutal-box-hover {
|
|
@apply hover:-translate-y-2 hover:shadow-brutal-hover;
|
|
}
|
|
|
|
.brutal-button {
|
|
@apply px-8 py-4 bg-pop-pink text-pop-bg font-medium rounded-full shadow-brutal transition-all duration-300 hover:opacity-90 hover:-translate-y-1 hover:shadow-brutal-hover;
|
|
}
|
|
|
|
.brutal-button-alt {
|
|
@apply px-8 py-4 bg-transparent text-pop-pink font-medium rounded-full border border-pop-pink shadow-brutal transition-all duration-300 hover:bg-pop-pink hover:text-pop-bg hover:-translate-y-1 hover:shadow-brutal-hover;
|
|
}
|
|
}
|
|
|
|
/* Custom Scrollbar */
|
|
::-webkit-scrollbar {
|
|
width: 8px;
|
|
}
|
|
|
|
::-webkit-scrollbar-track {
|
|
@apply bg-pop-bg;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
@apply bg-pop-black/30 rounded-full;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb:hover {
|
|
@apply bg-pop-black/50;
|
|
}
|
|
|
|
.hide-scrollbar::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
.hide-scrollbar {
|
|
-ms-overflow-style: none;
|
|
scrollbar-width: none;
|
|
}
|
|
|
|
/* Smooth Scrolling */
|
|
html {
|
|
scroll-behavior: smooth;
|
|
}
|
|
|
|
/* Product Editorial Image Overrides */
|
|
.product-editorial img {
|
|
width: 100%;
|
|
max-width: 480px;
|
|
margin: 2rem auto;
|
|
display: block;
|
|
border-radius: 16px;
|
|
box-shadow: var(--shadow-brutal);
|
|
}
|
|
|
|
/* Fallback Thai Serif to Prompt for luxury classical look */
|
|
:lang(th) .font-serif {
|
|
font-family: 'Prompt', sans-serif !important;
|
|
}
|
|
|
|
.ui-prose p {
|
|
@apply mb-4 leading-relaxed;
|
|
}
|
|
.ui-prose p:last-child {
|
|
@apply mb-0;
|
|
}
|
|
.ui-prose ul {
|
|
@apply list-inside list-disc mb-4 space-y-1;
|
|
}
|
|
.ui-prose ol {
|
|
@apply list-inside list-decimal mb-4 space-y-1;
|
|
}
|
|
.ui-prose h1, .ui-prose h2, .ui-prose h3, .ui-prose h4 {
|
|
@apply font-serif font-semibold mt-8 mb-4 text-pop-black;
|
|
}
|
|
.ui-prose a {
|
|
@apply text-pop-pink underline hover:opacity-80 transition-opacity;
|
|
}
|
|
.ui-prose strong {
|
|
@apply font-bold;
|
|
}
|
|
.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 px-6;
|
|
z-index: 3;
|
|
}
|
|
|
|
.site-footer-navigation-inner {
|
|
@apply mx-auto grid;
|
|
}
|
|
|
|
.site-footer--mobile-columns-1 .site-footer-navigation-inner { @apply grid-cols-1; }
|
|
.site-footer--mobile-columns-2 .site-footer-navigation-inner { @apply grid-cols-2; }
|
|
.site-footer--container-narrow .site-footer-navigation-inner { max-width: 56rem; }
|
|
.site-footer--container-standard .site-footer-navigation-inner { max-width: 80rem; }
|
|
.site-footer--container-wide .site-footer-navigation-inner { max-width: 96rem; }
|
|
.site-footer--container-full .site-footer-navigation-inner { max-width: none; }
|
|
.site-footer--padding-sm .site-footer-navigation { @apply py-8; }
|
|
.site-footer--padding-md .site-footer-navigation { @apply py-12; }
|
|
.site-footer--padding-lg .site-footer-navigation { @apply py-20; }
|
|
.site-footer--padding-xl .site-footer-navigation { @apply py-28; }
|
|
.site-footer--gap-sm .site-footer-navigation-inner { @apply gap-4; }
|
|
.site-footer--gap-md .site-footer-navigation-inner { @apply gap-8; }
|
|
.site-footer--gap-lg .site-footer-navigation-inner { @apply gap-12; }
|
|
.site-footer--gap-xl .site-footer-navigation-inner { @apply gap-16; }
|
|
.site-footer--heading-sm .site-footer-column-heading { @apply text-xs; }
|
|
.site-footer--heading-md .site-footer-column-heading { @apply text-sm; }
|
|
.site-footer--heading-lg .site-footer-column-heading { @apply text-base; }
|
|
.site-footer--link-sm .site-footer-column-links { @apply text-xs; }
|
|
.site-footer--link-md .site-footer-column-links { @apply text-sm; }
|
|
.site-footer--link-lg .site-footer-column-links { @apply text-base; }
|
|
.site-footer--brand-logo-sm .site-footer-brand-logo { @apply h-6 w-auto; }
|
|
.site-footer--brand-logo-md .site-footer-brand-logo { @apply h-8 w-auto md:h-10; }
|
|
.site-footer--brand-logo-lg .site-footer-brand-logo { @apply h-12 w-auto; }
|
|
.site-footer--brand-logo-xl .site-footer-brand-logo { @apply h-16 w-auto; }
|
|
.site-footer--social-sm .site-footer-social { @apply h-8 w-8 text-[9px]; }
|
|
.site-footer--social-md .site-footer-social { @apply h-9 w-9 text-[10px]; }
|
|
.site-footer--social-lg .site-footer-social { @apply h-11 w-11 text-xs; }
|
|
.site-footer--finale-mobile-compact .site-footer-brand-finale { min-height: 35svh; }
|
|
.site-footer--finale-mobile-medium .site-footer-brand-finale { min-height: 55svh; }
|
|
.site-footer--finale-mobile-large .site-footer-brand-finale { min-height: 75svh; }
|
|
.site-footer--finale-logo-sm .site-footer-finale-logo { max-height: 4rem; max-width: min(72vw, 18rem); }
|
|
.site-footer--finale-logo-md .site-footer-finale-logo { max-height: 6rem; max-width: min(76vw, 24rem); }
|
|
.site-footer--finale-logo-lg .site-footer-finale-logo { max-height: 8rem; max-width: min(82vw, 32rem); }
|
|
.site-footer--finale-logo-xl .site-footer-finale-logo { max-height: 8rem; max-width: min(82vw, 32rem); }
|
|
|
|
@media (min-width: 768px) {
|
|
.site-footer--desktop-columns-2 .site-footer-navigation-inner { @apply grid-cols-2; }
|
|
.site-footer--desktop-columns-3 .site-footer-navigation-inner { @apply grid-cols-3; }
|
|
.site-footer--desktop-columns-4 .site-footer-navigation-inner { @apply grid-cols-4; }
|
|
}
|
|
|
|
/* 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--finale-curtain {
|
|
min-height: 100svh;
|
|
}
|
|
|
|
.site-footer--finale-curtain .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--finale-curtain .site-footer-brand-finale {
|
|
min-height: 0;
|
|
padding-top: 4rem;
|
|
padding-bottom: 4rem;
|
|
}
|
|
|
|
.site-footer--finale-curtain .site-footer-finale-wordmark {
|
|
@apply text-8xl;
|
|
}
|
|
|
|
.site-footer--finale-curtain .site-footer-navigation {
|
|
pointer-events: auto;
|
|
}
|
|
|
|
.site-footer--finale-static.site-footer--finale-desktop-compact .site-footer-brand-finale { min-height: 35svh; }
|
|
.site-footer--finale-static.site-footer--finale-desktop-half .site-footer-brand-finale { min-height: 50svh; }
|
|
.site-footer--finale-static.site-footer--finale-desktop-screen .site-footer-brand-finale { min-height: 100svh; }
|
|
.site-footer--finale-curtain.site-footer--finale-desktop-compact .site-footer-stage { grid-template-rows: 35svh auto; align-content: end; }
|
|
.site-footer--finale-curtain.site-footer--finale-desktop-half .site-footer-stage { grid-template-rows: 50svh auto; align-content: end; }
|
|
.site-footer--finale-curtain.site-footer--finale-desktop-screen .site-footer-stage { grid-template-rows: minmax(0, 1fr) auto; }
|
|
.site-footer--finale-logo-xl .site-footer-finale-logo { max-height: 12rem; max-width: min(68vw, 48rem); }
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.site-footer--finale-curtain .site-footer-stage {
|
|
display: block;
|
|
position: relative;
|
|
}
|
|
|
|
.site-footer--finale-curtain {
|
|
min-height: 0;
|
|
}
|
|
}
|