x
This commit is contained in:
Your Name committed
1 parent
74b9670c79
commit
73590e06c4
37 files changed
+964
-709
No files matched your search
@@ -1,20 +1,39 @@
|
||||
@import "tailwindcss";
|
||||
|
||||
@theme {
|
||||
--font-sans: var(--font-sarabun, ui-sans-serif), system-ui, sans-serif;
|
||||
--font-body: var(--font-sarabun, ui-sans-serif), system-ui, sans-serif;
|
||||
--font-display: var(--font-body);
|
||||
--font-sans: var(--font-body);
|
||||
|
||||
--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;
|
||||
--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: #FFFFFF;
|
||||
--color-text-main: #333333;
|
||||
--color-muted-text: #666666;
|
||||
--color-line-primary: #00B900;
|
||||
--color-line-primary-hover: #009900;
|
||||
|
||||
--shadow-brutal: 0 10px 25px rgba(0,0,0,0.05);
|
||||
--shadow-brutal-hover: 0 20px 40px rgba(0,0,0,0.1);
|
||||
--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;
|
||||
@@ -27,14 +46,14 @@
|
||||
|
||||
@layer base {
|
||||
body {
|
||||
@apply bg-pop-bg text-pop-black font-sans antialiased;
|
||||
@apply bg-surface-page text-text-main 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;
|
||||
@apply text-text-main font-semibold tracking-tight;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -48,11 +67,199 @@
|
||||
}
|
||||
|
||||
.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;
|
||||
@apply px-8 py-4 bg-brand-primary text-white 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-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;
|
||||
@apply px-8 py-4 bg-white 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-gray-100 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-white 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-white transition-colors hover:bg-brand-primary-hover;
|
||||
}
|
||||
|
||||
.ui-button-line {
|
||||
@apply inline-flex items-center justify-center rounded-full bg-line-primary px-4 py-2 text-xs font-bold uppercase tracking-widest text-white shadow-sm transition-colors hover:bg-line-primary-hover;
|
||||
}
|
||||
|
||||
.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-white 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-white/95 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-gray-600;
|
||||
}
|
||||
|
||||
.ui-input-shell {
|
||||
@apply rounded-2xl border border-gray-200 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-gray-200 bg-surface-page text-[10px] font-bold text-text-main transition-all duration-300 hover:border-brand-primary hover:bg-brand-primary hover:text-white;
|
||||
}
|
||||
|
||||
.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-gray-500;
|
||||
}
|
||||
|
||||
.ui-section-card {
|
||||
@apply rounded-3xl bg-white 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-accent;
|
||||
}
|
||||
|
||||
.ui-panel {
|
||||
@apply rounded-3xl bg-white shadow-card;
|
||||
}
|
||||
|
||||
.ui-panel-muted {
|
||||
@apply rounded-3xl bg-surface-page shadow-card;
|
||||
}
|
||||
|
||||
.ui-panel-border {
|
||||
@apply rounded-3xl border border-gray-100 bg-white shadow-card;
|
||||
}
|
||||
|
||||
.ui-panel-header {
|
||||
@apply flex items-center gap-3 border-b border-gray-100 pb-5;
|
||||
}
|
||||
|
||||
.ui-panel-title {
|
||||
@apply text-xl font-semibold text-text-main;
|
||||
}
|
||||
|
||||
.ui-panel-subtitle {
|
||||
@apply text-sm text-gray-500;
|
||||
}
|
||||
|
||||
.ui-form-label {
|
||||
@apply text-xs font-bold uppercase tracking-[0.18em] text-gray-500;
|
||||
}
|
||||
|
||||
.ui-form-shell {
|
||||
@apply w-full rounded-2xl border border-gray-200 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-gray-200 bg-white 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-white 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-white transition hover:bg-brand-primary disabled:cursor-not-allowed disabled:opacity-60;
|
||||
}
|
||||
|
||||
.ui-form-secondary-button {
|
||||
@apply rounded-full border border-gray-200 px-5 py-2 text-sm font-semibold text-gray-600 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-gray-300 text-brand-primary;
|
||||
}
|
||||
|
||||
.ui-status-badge {
|
||||
@apply rounded-full border px-3 py-1 text-xs font-bold;
|
||||
}
|
||||
|
||||
.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-gray-500 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-white px-6 py-16 text-center shadow-card;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -62,7 +269,7 @@
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
@apply bg-pop-bg;
|
||||
@apply bg-surface-page;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
|
||||
Reference in new issue
Block a user