jeffemmett
/
xhivart-mirror
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fix CSS cascade layer issue preventing Tailwind utilities from working 

Wrap custom styles in @layer base and @layer components so Tailwind
utility classes (mx-auto, text-center, mb-6, etc.) can properly
override them per the CSS Cascade Layers spec.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Jeff Emmett 2026-02-03 13:03:44 +00:00
parent 10d05736d3
commit ec4702bf98
1 changed files with 260 additions and 255 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

57
src/app/globals.css
View File

@ -33,6 +33,8 @@
font-display: swap; font-display: swap;
} }
/* Base reset & defaults — in @layer base so Tailwind utilities can override */
@layer base {
:root { :root {
--bg-cream: #faf8f5; --bg-cream: #faf8f5;
--bg-dark: #1a1a1a; --bg-dark: #1a1a1a;
@ -64,13 +66,15 @@ body {
line-height: 1.8; line-height: 1.8;
} }
/* Typography */
h1, h2, h3, h4 { h1, h2, h3, h4 {
font-family: var(--font-cormorant), 'Cormorant Garamond', Georgia, serif; font-family: var(--font-cormorant), 'Cormorant Garamond', Georgia, serif;
font-weight: 300; font-weight: 300;
letter-spacing: 0.05em; letter-spacing: 0.05em;
} }
}
/* Component styles — in @layer components so Tailwind utilities can override */
@layer components {
.font-sans-alt { .font-sans-alt {
font-family: var(--font-montserrat), 'Montserrat', sans-serif; font-family: var(--font-montserrat), 'Montserrat', sans-serif;
} }
@ -251,31 +255,6 @@ h1, h2, h3, h4 {
color: var(--text-light); color: var(--text-light);
} }
/* Animations */
@keyframes fadeIn {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInUp {
from { opacity: 0; transform: translateY(40px); }
to { opacity: 1; transform: translateY(0); }
}
.fade-in {
animation: fadeIn 0.8s ease forwards;
}
.fade-in-up {
animation: fadeInUp 1s ease forwards;
}
/* Staggered animations */
.stagger-1 { animation-delay: 0.1s; }
.stagger-2 { animation-delay: 0.2s; }
.stagger-3 { animation-delay: 0.3s; }
.stagger-4 { animation-delay: 0.4s; }
/* Quote styling */ /* Quote styling */
.quote-mark { .quote-mark {
font-size: 4rem; font-size: 4rem;
@ -320,3 +299,29 @@ h1, h2, h3, h4 {
background: rgba(255, 255, 255, 0.08); background: rgba(255, 255, 255, 0.08);
border-color: var(--accent-gold); border-color: var(--accent-gold);
} }
}
/* Animations — keep unlayered so they always apply */
@keyframes fadeIn {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInUp {
from { opacity: 0; transform: translateY(40px); }
to { opacity: 1; transform: translateY(0); }
}
.fade-in {
animation: fadeIn 0.8s ease forwards;
}
.fade-in-up {
animation: fadeInUp 1s ease forwards;
}
/* Staggered animations */
.stagger-1 { animation-delay: 0.1s; }
.stagger-2 { animation-delay: 0.2s; }
.stagger-3 { animation-delay: 0.3s; }
.stagger-4 { animation-delay: 0.4s; }