/* ========================================================================== AESTHETIC PIVOT: "THE MELLO VIBE" (WARM & BALANCED) Soft, flowing, innocent design with subtle blue shadow accents ========================================================================== */ /* 1. Import Fonts */ @import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,300;0,400;0,500;0,600;0,800;1,400&family=Pacifico&display=swap'); @font-face { font-family: 'Willow'; src: url('../fonts/willow.woff2') format('woff2'), url('../fonts/willow.ttf') format('truetype'); font-weight: normal; font-style: normal; font-display: swap; } :root { --font-heading: 'Willow', 'Montserrat', sans-serif; --font-body: 'Montserrat', sans-serif; /* The Balanced Palette */ --color-warm-paper: #FDFCF8; /* Creamy, warm off-white background */ --color-soft-charcoal: #433E3B; /* Warm, organic dark gray for text (replaces navy/black) */ --color-soft-border: #EAE6DF; /* Gentle sand/beige for thin borders */ --color-mello-shadow: rgba(174, 198, 207, 0.35); /* The Mello Blue, used ONLY for shadows to cool down the page */ } /* 2. Global Typography & Backgrounds */ body { font-family: var(--font-body) !important; color: var(--color-soft-charcoal) !important; } /* carries a literal bg-brandYellow Tailwind class (index.php). Pinning the background to an ID selector (rather than a bare `body` element selector) means it keeps winning on specificity no matter what bg-* utility class ends up on . */ #app-body { background-color: var(--color-warm-paper) !important; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading) !important; letter-spacing: 0.05em; } /* Hero Banner headline: a real script font (Pacifico, via Google Fonts). --font-heading is nominally 'Willow' but those font files were never actually added to the repo (see @font-face above), so every heading has silently been falling back to Montserrat. Scoped to just the hero banner rather than fixed globally, since most other headings are short, uppercase, functional UI labels (admin section titles, etc.) that a script font would make hard to read. text-transform is reset to none because script fonts are drawn for mixed case — the uppercase utility class on this element would otherwise force disconnected, harder-to-read capital letters. */ #hero-banner-text { font-family: 'Pacifico', cursive !important; text-transform: none !important; letter-spacing: 0.02em; } /* Admin sidebar brand header: same Pacifico treatment as the hero banner. The h1's uppercase/tracking-widest utility classes are reset here too, otherwise the script font gets forced into disconnected capitals. */ #admin-brand-text { font-family: 'Pacifico', cursive !important; text-transform: none !important; letter-spacing: 0.02em; } /* 3. Subdue the Borders (Warm Sand instead of Blue) */ .border-4, .border-2 { border-width: 1px !important; } .border-brandBlack { border-color: var(--color-soft-border) !important; } /* Text and Backgrounds shift to Soft Charcoal */ .text-brandBlack { color: var(--color-soft-charcoal) !important; } .bg-brandBlack { background-color: var(--color-soft-charcoal) !important; } .bg-gridGray { background-color: var(--color-warm-paper) !important; background-image: none !important; } /* 4. Transform Shadows (This is where the Mello Blue lives!) */ /* The blue is hidden in the transparency of the shadow, creating a beautiful floating effect against the warm background */ .shadow-chunky { box-shadow: 0 12px 35px -5px var(--color-mello-shadow), 0 4px 10px -3px rgba(0,0,0,0.03) !important; } .shadow-chunky-sm { box-shadow: 0 6px 20px -3px var(--color-mello-shadow) !important; } .shadow-\[8px_8px_0_0_\#4CAF50\], .shadow-\[8px_8px_0_0_\#FF9800\] { box-shadow: 0 15px 35px -5px var(--color-mello-shadow) !important; } .hover\:shadow-chunky:hover, .hover\:shadow-chunky-hover:hover { box-shadow: 0 22px 45px -5px var(--color-mello-shadow) !important; transform: translateY(-4px) !important; transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) !important; } /* 5. Soften the Corners */ .rounded-2xl, .rounded-3xl, .rounded-xl { border-radius: 1.25rem !important; }