579 lines
16 KiB
CSS
579 lines
16 KiB
CSS
@import "tailwindcss";
|
|
|
|
@theme {
|
|
--color-brand-primary: #FF6B6B;
|
|
--color-brand-primary-hover: #FF4500;
|
|
--color-brand-accent: #FFF200;
|
|
--color-brand-warm: #FFA07A;
|
|
--color-brand-cool: #E0FFFF;
|
|
--color-brand-success: #98FB98;
|
|
--color-brand-soft: #D8BFD8;
|
|
--color-surface-page: #FFF0F5;
|
|
--color-surface-nav-rest: #F9F8F5;
|
|
--color-surface-card: var(--color-surface-card);
|
|
--color-text-main: #333333;
|
|
--color-muted-text: #666666;
|
|
--color-line-primary: #00B900;
|
|
--color-line-primary-hover: #009900;
|
|
|
|
--color-pop-pink: var(--color-brand-primary);
|
|
--color-pop-yellow: var(--color-brand-accent);
|
|
--color-pop-orange: var(--color-brand-warm);
|
|
--color-pop-red: var(--color-brand-primary-hover);
|
|
--color-pop-cyan: var(--color-brand-cool);
|
|
--color-pop-green: var(--color-brand-success);
|
|
--color-pop-purple: var(--color-brand-soft);
|
|
--color-pop-bg: var(--color-surface-page);
|
|
--color-pop-black: var(--color-text-main);
|
|
|
|
--shadow-card: 0 10px 25px rgba(0,0,0,0.05);
|
|
--shadow-card-hover: 0 20px 40px rgba(0,0,0,0.1);
|
|
--shadow-brutal: var(--shadow-card);
|
|
--shadow-brutal-hover: var(--shadow-card-hover);
|
|
|
|
--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-body-locale: "Sarabun", "Noto Sans Thai", ui-sans-serif, system-ui, sans-serif;
|
|
--font-display-locale: "Sarabun", "Noto Sans Thai", ui-sans-serif, system-ui, sans-serif;
|
|
}
|
|
|
|
html[lang="en"] {
|
|
--font-body-locale: "Inter", "Segoe UI", ui-sans-serif, system-ui, sans-serif;
|
|
--font-display-locale: var(--font-body-locale);
|
|
}
|
|
|
|
html[lang="ja"] {
|
|
--font-body-locale: "Hiragino Sans", "Yu Gothic", "Noto Sans JP", ui-sans-serif, system-ui, sans-serif;
|
|
--font-display-locale: var(--font-body-locale);
|
|
}
|
|
|
|
html[lang="zh"] {
|
|
--font-body-locale: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", ui-sans-serif, system-ui, sans-serif;
|
|
--font-display-locale: var(--font-body-locale);
|
|
}
|
|
|
|
html[lang="ko"] {
|
|
--font-body-locale: "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", ui-sans-serif, system-ui, sans-serif;
|
|
--font-display-locale: var(--font-body-locale);
|
|
}
|
|
|
|
html[lang="vi"] {
|
|
--font-body-locale: "Inter", "Segoe UI", ui-sans-serif, system-ui, sans-serif;
|
|
--font-display-locale: var(--font-body-locale);
|
|
}
|
|
|
|
html {
|
|
font-family: var(--font-body-locale);
|
|
}
|
|
|
|
body {
|
|
@apply bg-surface-page text-text-main 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-text-main font-semibold tracking-tight;
|
|
font-family: var(--font-display-locale);
|
|
}
|
|
}
|
|
|
|
@layer components {
|
|
.brutal-box {
|
|
@apply bg-surface-card border border-line-primary/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-brand-primary text-surface-card font-medium rounded-full shadow-brutal transition-all duration-300 hover:bg-brand-primary-hover hover:-translate-y-1 hover:shadow-brutal-hover;
|
|
}
|
|
|
|
.brutal-button-alt {
|
|
@apply px-8 py-4 bg-surface-card text-brand-primary font-medium rounded-full border border-brand-primary shadow-brutal transition-all duration-300 hover:bg-surface-page hover:-translate-y-1 hover:shadow-brutal-hover;
|
|
}
|
|
|
|
.ui-card {
|
|
@apply rounded-2xl border border-line-primary/20 bg-surface-card shadow-card transition-all duration-300;
|
|
}
|
|
|
|
.ui-card-hover {
|
|
@apply hover:-translate-y-1 hover:shadow-card-hover;
|
|
}
|
|
|
|
.ui-button-primary {
|
|
@apply inline-flex items-center justify-center rounded-full bg-text-main px-6 py-3 text-xs font-bold uppercase tracking-widest text-surface-card transition-colors hover:bg-brand-primary;
|
|
}
|
|
|
|
.ui-button-brand {
|
|
@apply inline-flex items-center justify-center rounded-full bg-brand-primary px-6 py-3 text-xs font-bold uppercase tracking-widest text-surface-card transition-colors hover:bg-brand-primary-hover;
|
|
}
|
|
|
|
.ui-button-line {
|
|
@apply inline-flex items-center justify-center rounded-full px-4 py-2 text-xs font-bold uppercase tracking-widest shadow-sm transition-colors;
|
|
background-color: #00B900;
|
|
color: #ffffff;
|
|
}
|
|
|
|
.ui-button-line:hover {
|
|
background-color: #009900;
|
|
}
|
|
|
|
.ui-icon-button {
|
|
@apply rounded-full p-2 text-text-main transition-all hover:bg-brand-primary/10 hover:text-brand-primary md:p-2.5;
|
|
}
|
|
|
|
.ui-brand-wordmark {
|
|
@apply shrink-0 text-xl font-bold uppercase italic tracking-widest text-text-main md:text-2xl;
|
|
}
|
|
|
|
.ui-nav-chip {
|
|
@apply flex items-center gap-1.5 rounded-full border border-brand-primary/30 bg-surface-card px-3 py-2 text-[10px] font-bold uppercase tracking-wider text-text-main transition-all hover:bg-surface-page hover:text-brand-primary;
|
|
}
|
|
|
|
.ui-nav-panel {
|
|
@apply overflow-hidden rounded-xl border border-text-main/10 bg-surface-card shadow-2xl backdrop-blur-xl;
|
|
}
|
|
|
|
.ui-menu-link {
|
|
@apply block w-full text-left text-sm font-medium uppercase tracking-wide text-text-main/65 transition-colors hover:text-brand-primary;
|
|
}
|
|
|
|
.ui-menu-link-compact {
|
|
@apply block w-full text-left text-xs uppercase tracking-widest text-text-main/65 transition-colors hover:text-brand-primary;
|
|
}
|
|
|
|
.ui-menu-title {
|
|
@apply text-xs font-bold uppercase tracking-widest text-text-main;
|
|
}
|
|
|
|
.ui-eyebrow {
|
|
@apply text-xs font-bold uppercase tracking-[0.24em] text-brand-primary;
|
|
}
|
|
|
|
.ui-muted-text {
|
|
@apply text-muted-text;
|
|
}
|
|
|
|
.ui-input-shell {
|
|
@apply rounded-2xl border border-line-primary/20 bg-surface-page text-text-main outline-none transition focus:border-brand-primary focus:ring-2 focus:ring-brand-primary/20;
|
|
}
|
|
|
|
.ui-footer-link {
|
|
@apply transition-colors hover:text-brand-primary;
|
|
}
|
|
|
|
.ui-footer-social {
|
|
@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;
|
|
}
|
|
|
|
.ui-section-band {
|
|
@apply px-6 py-20 md:py-24;
|
|
}
|
|
|
|
.ui-section-shell {
|
|
@apply mx-auto max-w-7xl;
|
|
}
|
|
|
|
.ui-section-title {
|
|
@apply text-3xl font-semibold text-text-main md:text-5xl;
|
|
}
|
|
|
|
.ui-section-subtitle {
|
|
@apply text-muted-text;
|
|
}
|
|
|
|
.ui-section-card {
|
|
@apply rounded-3xl bg-surface-card shadow-card;
|
|
}
|
|
|
|
.ui-section-card-muted {
|
|
@apply rounded-3xl bg-surface-page shadow-card;
|
|
}
|
|
|
|
.ui-section-link {
|
|
@apply font-semibold text-brand-primary transition hover:text-brand-primary-hover;
|
|
}
|
|
|
|
.ui-accent-text {
|
|
@apply italic text-brand-primary;
|
|
}
|
|
|
|
.ui-hero-shell {
|
|
position: relative;
|
|
display: flex;
|
|
min-height: 90vh;
|
|
width: 100%;
|
|
align-items: center;
|
|
justify-content: center;
|
|
overflow: hidden;
|
|
background: var(--color-surface-page);
|
|
color: var(--color-text-main);
|
|
}
|
|
|
|
.ui-hero-overlay {
|
|
position: absolute;
|
|
inset: 0;
|
|
background: color-mix(in srgb, var(--color-surface-page) 40%, transparent);
|
|
}
|
|
|
|
.ui-hero-overlay-strong {
|
|
position: absolute;
|
|
inset: 0;
|
|
background: linear-gradient(
|
|
to top,
|
|
color-mix(in srgb, var(--color-surface-page) 90%, transparent),
|
|
color-mix(in srgb, var(--color-surface-page) 10%, transparent),
|
|
color-mix(in srgb, var(--color-surface-page) 30%, transparent)
|
|
);
|
|
}
|
|
|
|
.ui-hero-title {
|
|
color: var(--color-text-main);
|
|
font-family: var(--font-display-locale);
|
|
font-size: 3rem;
|
|
font-weight: 300;
|
|
line-height: 1.25;
|
|
letter-spacing: 0.025em;
|
|
filter: drop-shadow(0 4px 3px rgb(0 0 0 / 0.07)) drop-shadow(0 2px 2px rgb(0 0 0 / 0.06));
|
|
}
|
|
|
|
.ui-hero-copy {
|
|
margin-inline: auto;
|
|
max-width: 42rem;
|
|
padding-top: 1rem;
|
|
padding-bottom: 2rem;
|
|
color: color-mix(in srgb, var(--color-text-main) 90%, transparent);
|
|
font-size: 1.125rem;
|
|
font-weight: 300;
|
|
line-height: 1.75rem;
|
|
filter: drop-shadow(0 4px 3px rgb(0 0 0 / 0.07)) drop-shadow(0 2px 2px rgb(0 0 0 / 0.06));
|
|
}
|
|
|
|
.ui-hero-button {
|
|
@apply inline-flex items-center justify-center rounded-full px-6 py-3 text-xs font-bold uppercase tracking-widest transition-colors;
|
|
background-color: var(--color-surface-page);
|
|
color: var(--color-text-main);
|
|
box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
|
|
}
|
|
.ui-hero-button:hover {
|
|
opacity: 0.9;
|
|
}
|
|
|
|
.ui-hero-link {
|
|
@apply inline-flex items-center gap-2 text-xs font-bold uppercase tracking-widest transition-colors;
|
|
color: var(--color-brand-primary);
|
|
padding: 0.75rem 1.5rem;
|
|
}
|
|
|
|
.ui-hero-link:hover {
|
|
color: var(--color-surface-page);
|
|
}
|
|
|
|
.ui-banner-shell {
|
|
position: relative;
|
|
margin-inline: auto;
|
|
min-height: 360px;
|
|
max-width: 80rem;
|
|
overflow: hidden;
|
|
border-radius: 1.5rem;
|
|
box-shadow: var(--shadow-card);
|
|
}
|
|
|
|
.ui-banner-overlay {
|
|
position: absolute;
|
|
inset: 0;
|
|
background: linear-gradient(
|
|
to right,
|
|
color-mix(in srgb, var(--color-text-main) 75%, transparent),
|
|
color-mix(in srgb, var(--color-text-main) 35%, transparent),
|
|
transparent
|
|
);
|
|
}
|
|
|
|
.ui-banner-content {
|
|
position: relative;
|
|
z-index: 10;
|
|
max-width: 36rem;
|
|
padding: 2rem;
|
|
color: var(--color-surface-card);
|
|
}
|
|
|
|
.ui-banner-content > * + * {
|
|
margin-top: 1rem;
|
|
}
|
|
|
|
.ui-section-dark {
|
|
background: var(--color-text-main);
|
|
padding: 5rem 1.5rem;
|
|
color: var(--color-surface-card);
|
|
}
|
|
|
|
.ui-section-dark-card {
|
|
overflow: hidden;
|
|
border-radius: 1.5rem;
|
|
border: 1px solid color-mix(in srgb, var(--color-line-primary) 10%, transparent);
|
|
background: color-mix(in srgb, var(--color-surface-card) 60%, transparent);
|
|
}
|
|
|
|
.ui-section-dark-card-title {
|
|
color: var(--color-surface-card);
|
|
font-size: 2.25rem;
|
|
font-weight: 600;
|
|
line-height: 2.5rem;
|
|
}
|
|
|
|
.ui-section-dark-card-copy {
|
|
display: -webkit-box;
|
|
overflow: hidden;
|
|
-webkit-box-orient: vertical;
|
|
-webkit-line-clamp: 4;
|
|
color: rgb(255 255 255 / 0.7);
|
|
font-size: 0.875rem;
|
|
line-height: 1.625;
|
|
}
|
|
|
|
.ui-section-dark-link {
|
|
display: inline-flex;
|
|
color: var(--color-brand-accent);
|
|
font-size: 0.75rem;
|
|
font-weight: 700;
|
|
letter-spacing: 0.22em;
|
|
text-transform: uppercase;
|
|
transition: color 150ms ease;
|
|
}
|
|
|
|
@media (min-width: 768px) {
|
|
.ui-hero-shell {
|
|
aspect-ratio: 21 / 9;
|
|
min-height: 0;
|
|
}
|
|
|
|
.ui-hero-title {
|
|
font-size: 4.5rem;
|
|
line-height: 1;
|
|
}
|
|
|
|
.ui-hero-copy {
|
|
font-size: 1.25rem;
|
|
line-height: 1.75rem;
|
|
}
|
|
|
|
.ui-banner-content {
|
|
padding: 3.5rem;
|
|
}
|
|
|
|
.ui-section-dark-card-title {
|
|
font-size: 3rem;
|
|
line-height: 1;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 1024px) {
|
|
.ui-hero-title {
|
|
font-size: 6rem;
|
|
line-height: 1;
|
|
}
|
|
}
|
|
|
|
.ui-panel {
|
|
@apply rounded-3xl bg-surface-card shadow-card;
|
|
}
|
|
|
|
.ui-panel-muted {
|
|
@apply rounded-3xl bg-surface-page shadow-card;
|
|
}
|
|
|
|
.ui-panel-border {
|
|
@apply rounded-3xl border border-line-primary/20 bg-surface-card shadow-card;
|
|
}
|
|
|
|
.ui-panel-header {
|
|
@apply flex items-center gap-3 border-b border-line-primary/20 pb-5;
|
|
}
|
|
|
|
.ui-panel-title {
|
|
@apply text-xl font-semibold text-text-main;
|
|
}
|
|
|
|
.ui-panel-subtitle {
|
|
@apply text-sm text-muted-text;
|
|
}
|
|
|
|
.ui-form-label {
|
|
@apply text-xs font-bold uppercase tracking-[0.18em] text-muted-text;
|
|
}
|
|
|
|
.ui-form-shell {
|
|
@apply w-full rounded-2xl border border-line-primary/20 bg-surface-page px-4 py-3 text-sm text-text-main outline-none transition focus:border-brand-primary focus:ring-2 focus:ring-brand-primary/20;
|
|
}
|
|
|
|
.ui-form-shell-light {
|
|
@apply w-full rounded-2xl border border-line-primary/20 bg-surface-card px-4 py-3 text-sm text-text-main outline-none transition focus:border-brand-primary focus:ring-2 focus:ring-brand-primary/20;
|
|
}
|
|
|
|
.ui-form-inline-button {
|
|
@apply inline-flex items-center justify-center gap-2 rounded-full bg-text-main px-6 py-4 text-sm font-bold uppercase tracking-[0.16em] text-surface-card transition hover:bg-brand-primary disabled:cursor-not-allowed disabled:opacity-60;
|
|
}
|
|
|
|
.ui-form-inline-button-sm {
|
|
@apply inline-flex items-center justify-center gap-2 rounded-full bg-text-main px-5 py-2 text-sm font-semibold text-surface-card transition hover:bg-brand-primary disabled:cursor-not-allowed disabled:opacity-60;
|
|
}
|
|
|
|
.ui-form-secondary-button {
|
|
@apply rounded-full border border-line-primary/20 px-5 py-2 text-sm font-semibold text-muted-text transition hover:text-brand-primary;
|
|
}
|
|
|
|
.ui-form-danger-button {
|
|
@apply rounded-full border border-rose-100 p-2 text-rose-500 transition hover:bg-rose-50;
|
|
}
|
|
|
|
.ui-form-checkbox {
|
|
@apply h-4 w-4 rounded border-line-primary/20 text-brand-primary;
|
|
}
|
|
|
|
.ui-status-badge {
|
|
@apply rounded-full border px-3 py-1 text-xs font-bold;
|
|
}
|
|
|
|
.ui-status-badge-pending {
|
|
border-color: rgb(254 243 199);
|
|
background: rgb(255 251 235);
|
|
color: rgb(180 83 9);
|
|
}
|
|
|
|
.ui-status-badge-active {
|
|
border-color: rgb(209 250 229);
|
|
background: rgb(236 253 245);
|
|
color: rgb(4 120 87);
|
|
}
|
|
|
|
.ui-status-badge-shipped {
|
|
border-color: rgb(224 242 254);
|
|
background: rgb(240 249 255);
|
|
color: rgb(3 105 161);
|
|
}
|
|
|
|
.ui-status-badge-cancelled {
|
|
border-color: rgb(255 228 230);
|
|
background: rgb(255 241 242);
|
|
color: rgb(190 18 60);
|
|
}
|
|
|
|
.ui-status-badge-neutral {
|
|
border-color: color-mix(in srgb, var(--color-line-primary) 20%, transparent);
|
|
background: var(--color-surface-page);
|
|
color: color-mix(in srgb, var(--color-text-main) 80%, transparent);
|
|
}
|
|
|
|
.ui-tone-warning {
|
|
border-radius: 1rem;
|
|
border: 1px solid rgb(254 243 199);
|
|
background: rgb(255 251 235);
|
|
color: rgb(146 64 14);
|
|
}
|
|
|
|
.ui-tone-success {
|
|
border-radius: 1rem;
|
|
border: 1px solid rgb(209 250 229);
|
|
background: rgb(236 253 245);
|
|
color: rgb(4 120 87);
|
|
}
|
|
|
|
.ui-tone-error {
|
|
border-radius: 1rem;
|
|
border: 1px solid rgb(255 228 230);
|
|
background: rgb(255 241 242);
|
|
color: rgb(190 18 60);
|
|
}
|
|
|
|
.ui-tone-info {
|
|
border-radius: 1rem;
|
|
border: 1px solid rgb(224 242 254);
|
|
background: rgb(240 249 255);
|
|
color: rgb(3 105 161);
|
|
}
|
|
|
|
.ui-avatar-shell {
|
|
@apply flex h-20 w-20 items-center justify-center overflow-hidden rounded-full border border-brand-primary/20 bg-surface-page;
|
|
}
|
|
|
|
.ui-avatar-shell-sm {
|
|
@apply flex h-16 w-16 items-center justify-center overflow-hidden rounded-full border border-brand-primary/20 bg-surface-page;
|
|
}
|
|
|
|
.ui-tab-button {
|
|
@apply relative flex shrink-0 items-center gap-2 px-3 pb-4 text-sm font-bold transition;
|
|
}
|
|
|
|
.ui-tab-button-active {
|
|
@apply text-brand-primary;
|
|
}
|
|
|
|
.ui-tab-button-inactive {
|
|
@apply text-muted-text hover:text-text-main;
|
|
}
|
|
|
|
.ui-tab-count {
|
|
@apply rounded-full bg-surface-page px-2 py-0.5 text-[10px];
|
|
}
|
|
|
|
.ui-empty-panel {
|
|
@apply rounded-3xl bg-surface-card px-6 py-16 text-center shadow-card;
|
|
}
|
|
}
|
|
|
|
/* Custom Scrollbar */
|
|
::-webkit-scrollbar {
|
|
width: 8px;
|
|
}
|
|
|
|
::-webkit-scrollbar-track {
|
|
@apply bg-surface-page;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
@apply bg-surface-nav-rest rounded-full;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb:hover {
|
|
@apply bg-surface-nav-rest;
|
|
}
|
|
|
|
/* 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);
|
|
}
|
|
|
|
/* Announcement Bar Layout Shifting via CSS :has() */
|
|
body:has(.announcement-bar) .global-navbar[data-scrolled="false"] {
|
|
top: 44px; /* Adjusts Navbar down when AnnouncementBar is present at the top */
|
|
}
|
|
|
|
body:has(.announcement-bar) .global-main {
|
|
padding-top: 116px; /* 72px original pt + 44px AnnouncementBar */
|
|
}
|