admin/homaroma
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects 1 Releases Wiki Activity

x

Browse Source
This commit is contained in:
Your Name committed 2026-06-21 07:04:03 -04:00
1 parent f7ac94ca0d
commit 335f3b4f59
41 files changed
+809 -413
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

apps/spa/src/index.css
+60 -24
View File
@@ -99,11 +99,11 @@
}
.ui-section-subtitle {
@apply mx-auto max-w-2xl text-spa-stone;
@apply mx-auto max-w-2xl text-pop-black/60;
}
.ui-shell-card {
@apply rounded-3xl border border-spa-stone/10 bg-spa-light shadow-brutal transition-all duration-300;
@apply rounded-3xl border border-pop-black/10 bg-night-900 shadow-brutal transition-all duration-300;
}
.ui-shell-card-hover {
@@ -115,31 +115,40 @@
}
.ui-button-primary {
@apply inline-flex items-center justify-center rounded-full bg-spa-forest px-6 py-3 text-xs font-bold uppercase tracking-widest text-spa-light transition-colors hover:bg-spa-forest/90;
@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-spa-light px-6 py-3 text-xs font-bold uppercase tracking-widest text-spa-forest transition-colors hover:bg-spa-sage;
@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-black/5;
}
.ui-input-shell {
@apply w-full rounded-full border border-spa-light bg-spa-light px-6 py-4 text-sm text-spa-light outline-none transition placeholder:text-spa-light focus:border-spa-gold/80;
@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-spa-stone/70;
@apply text-pop-black/70;
}
.ui-hero-shell {
@apply relative flex min-h-[90vh] items-center justify-center overflow-hidden bg-night-900 text-spa-light md:aspect-[21/9] md:min-h-0;
@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-overlay {
@apply absolute inset-0 bg-neutral-900/40;
position: absolute;
inset: 0;
background: color-mix(in srgb, var(--color-pop-bg) 40%, transparent);
}
.ui-hero-overlay-strong {
@apply absolute inset-0 bg-gradient-to-t from-neutral-900/90 via-neutral-900/10 to-neutral-900/30;
position: absolute;
inset: 0;
background: linear-gradient(
to top,
color-mix(in srgb, var(--color-pop-bg) 90%, transparent),
color-mix(in srgb, var(--color-pop-bg) 10%, transparent),
color-mix(in srgb, var(--color-pop-bg) 30%, transparent)
);
}
.ui-hero-content {
@@ -147,11 +156,13 @@
}
.ui-hero-title {
@apply font-serif text-5xl font-light leading-tight tracking-wide text-spa-light drop-shadow-md md:text-7xl lg:text-8xl;
@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-copy {
@apply mx-auto max-w-2xl pb-8 pt-4 text-lg font-light text-spa-light drop-shadow-md md:text-xl;
@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 {
@@ -159,39 +170,39 @@
}
.ui-banner-overlay {
@apply absolute inset-0 bg-gradient-to-r from-spa-forest/80 via-spa-forest/40 to-transparent;
@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-spa-light md:p-16;
@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-spa-stone/10 bg-spa-light shadow-sm;
@apply rounded-2xl border border-pop-black/10 bg-night-900 shadow-sm;
}
.ui-dark-shell {
@apply bg-spa-forest px-6 py-20 text-spa-light;
@apply bg-pop-black px-6 py-20 text-pop-bg;
}
.ui-dark-card {
@apply overflow-hidden rounded-3xl border border-spa-light bg-spa-light;
@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-spa-light md:text-2xl;
@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-spa-light/70;
@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-spa-gold transition-colors hover:text-spa-light;
@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-spa-light border border-spa-stone/20 rounded-2xl shadow-brutal transition-all duration-300;
@apply bg-night-900 border border-pop-black/20 rounded-2xl shadow-brutal transition-all duration-300;
}
.brutal-box-hover {
@@ -199,11 +210,11 @@
}
.brutal-button {
@apply px-8 py-4 bg-pop-pink text-spa-light 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-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-spa-light 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-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;
}
}
@@ -217,11 +228,11 @@
}
::-webkit-scrollbar-thumb {
@apply bg-spa-sage rounded-full;
@apply bg-pop-black/30 rounded-full;
}
::-webkit-scrollbar-thumb:hover {
@apply bg-spa-sage;
@apply bg-pop-black/50;
}
/* Smooth Scrolling */
@@ -243,3 +254,28 @@ html {
: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;
}