108 lines
3.0 KiB
CSS
108 lines
3.0 KiB
CSS
@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;
|
|
|
|
--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-sage: #EAEFEA;
|
|
--color-spa-stone: #4B4B46;
|
|
--color-spa-forest: #1F3D2D;
|
|
--color-spa-gold: #D4AF37;
|
|
|
|
--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 {
|
|
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 {
|
|
.brutal-box {
|
|
@apply bg-white border border-gray-100 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-white font-medium rounded-full shadow-brutal transition-all duration-300 hover:bg-pop-red hover:-translate-y-1 hover:shadow-brutal-hover;
|
|
}
|
|
|
|
.brutal-button-alt {
|
|
@apply px-8 py-4 bg-white text-pop-pink font-medium rounded-full border border-pop-pink shadow-brutal transition-all duration-300 hover:bg-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-gray-300 rounded-full;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb:hover {
|
|
@apply bg-gray-400;
|
|
}
|
|
|
|
/* 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;
|
|
}
|
|
|