x
This commit is contained in:
Your Name committed
1 parent
c365add07f
commit
c449de2482
28 files changed
+694
-300
No files matched your search
@@ -1,10 +1,6 @@
|
||||
@import "tailwindcss";
|
||||
|
||||
@theme {
|
||||
--font-body: var(--font-body-active, var(--font-body-locale, ui-sans-serif)), system-ui, sans-serif;
|
||||
--font-display: var(--font-display-active, var(--font-display-locale, var(--font-body-locale, ui-sans-serif))), system-ui, sans-serif;
|
||||
--font-sans: var(--font-body);
|
||||
|
||||
--color-brand-primary: #FF6B6B;
|
||||
--color-brand-primary-hover: #FF4500;
|
||||
--color-brand-accent: #FFF200;
|
||||
@@ -47,8 +43,8 @@
|
||||
@layer base {
|
||||
:root,
|
||||
html {
|
||||
--font-body-locale: var(--font-sarabun, "Sarabun"), "Noto Sans Thai", ui-sans-serif, system-ui, sans-serif;
|
||||
--font-display-locale: var(--font-body-locale);
|
||||
--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"] {
|
||||
@@ -76,8 +72,12 @@
|
||||
--font-display-locale: var(--font-body-locale);
|
||||
}
|
||||
|
||||
html {
|
||||
font-family: var(--font-body-locale);
|
||||
}
|
||||
|
||||
body {
|
||||
@apply bg-surface-page text-text-main font-sans antialiased;
|
||||
@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;
|
||||
@@ -85,6 +85,7 @@
|
||||
|
||||
h1, h2, h3, h4 {
|
||||
@apply text-text-main font-semibold tracking-tight;
|
||||
font-family: var(--font-display-locale);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -205,6 +206,188 @@
|
||||
@apply italic text-brand-accent;
|
||||
}
|
||||
|
||||
.ui-hero-shell {
|
||||
position: relative;
|
||||
display: flex;
|
||||
min-height: 90vh;
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
background: var(--color-text-main);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.ui-hero-overlay {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: color-mix(in srgb, var(--color-text-main) 40%, transparent);
|
||||
}
|
||||
|
||||
.ui-hero-overlay-strong {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: linear-gradient(
|
||||
to top,
|
||||
color-mix(in srgb, var(--color-text-main) 90%, transparent),
|
||||
color-mix(in srgb, var(--color-text-main) 10%, transparent),
|
||||
color-mix(in srgb, var(--color-text-main) 30%, transparent)
|
||||
);
|
||||
}
|
||||
|
||||
.ui-hero-title {
|
||||
color: #fff;
|
||||
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: rgb(255 255 255 / 0.9);
|
||||
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 {
|
||||
border-radius: 9999px;
|
||||
background: var(--color-surface-card);
|
||||
padding: 1rem 2rem;
|
||||
color: var(--color-text-main);
|
||||
font-size: 0.875rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.1em;
|
||||
text-transform: uppercase;
|
||||
transition: background-color 300ms ease, box-shadow 300ms ease;
|
||||
}
|
||||
|
||||
.ui-hero-link {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
padding: 1rem 2rem;
|
||||
color: #fff;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.1em;
|
||||
text-transform: uppercase;
|
||||
transition: color 150ms ease;
|
||||
}
|
||||
|
||||
.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: #fff;
|
||||
}
|
||||
|
||||
.ui-banner-content > * + * {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.ui-section-dark {
|
||||
background: var(--color-text-main);
|
||||
padding: 5rem 1.5rem;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.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: #fff;
|
||||
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-white shadow-card;
|
||||
}
|
||||
@@ -265,6 +448,64 @@
|
||||
@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;
|
||||
}
|
||||
|
||||
Reference in new issue
Block a user