/* Global Styles for Grow a Garden 2 Wiki */
html {
scroll-behavior: smooth;
scroll-padding-top: 72px;
}
:root {
--color-primary: #2d8a4e;
--color-primary-dark: #1a5c32;
--color-accent: #f5c518;
--color-bg-light: #f0f9f0;
--color-bg-dark: #1a1a2e;
--color-text-dark: #ffffff;
--color-text-dark-muted: #b0b0c0;
}
body {
font-family: 'Nunito', sans-serif;
transition: background-color 0.3s, color 0.3s;
}
h1, h2, h3, h4, h5, h6 {
font-family: 'Baloo 2', cursive;
}
/* ========== DARK MODE STYLES ========== */
/* Note: We use .dark as a parent class on instead of because Tailwind CDN
doesn't support darkMode: 'class' out of the box. All dark mode overrides go here. */
/* Base dark background and text colors */
body.dark {
background-color: #1a1a2e !important;
color: #ffffff !important;
}
/* Header */
body.dark header {
background-color: #16213e !important;
border-bottom: 1px solid #2a2a4a !important;
}
body.dark header a,
body.dark header span {
color: #ffffff !important;
}
body.dark header nav a {
color: #b0b0c0 !important;
}
body.dark header nav a:hover {
color: #2d8a4e !important;
}
body.dark .dark\:bg-header {
background-color: #16213e !important;
}
body.dark header button {
background-color: transparent !important;
color: #ffffff !important;
}
body.dark header button:hover {
background-color: #2a2a4a !important;
}
/* Hero section */
body.dark .hero-gradient {
background: linear-gradient(135deg, #0d3d1f 0%, #062612 50%, #031a0b 100%) !important;
}
/* Light backgrounds */
body.dark section.bg-white,
body.dark div.bg-white,
body.dark .bg-white {
background-color: #1e2a45 !important;
border-color: #2a2a4a !important;
}
body.dark section.bg-gray-50,
body.dark .bg-gray-50 {
background-color: #16213e !important;
}
body.dark section.bg-green-50,
body.dark .bg-green-50 {
background-color: #0d2e1a !important;
}
body.dark section.bg-blue-50,
body.dark .bg-blue-50 {
background-color: #0d1a2e !important;
}
body.dark section.bg-yellow-50,
body.dark .bg-yellow-50 {
background-color: #2e2a0d !important;
}
body.dark section.bg-indigo-50,
body.dark .bg-indigo-50 {
background-color: #1a0d2e !important;
}
body.dark section.bg-pink-50,
body.dark .bg-pink-50 {
background-color: #2e0d1a !important;
}
body.dark section.bg-orange-50,
body.dark .bg-orange-50 {
background-color: #2e1a0d !important;
}
/* Gray text */
body.dark p.text-gray-600,
body.dark span.text-gray-600 {
color: #b0b0c0 !important;
}
body.dark p.text-gray-500,
body.dark span.text-gray-500,
body.dark .text-gray-500 {
color: #808090 !important;
}
body.dark p.text-gray-800,
body.dark span.text-gray-800 {
color: #ffffff !important;
}
body.dark h2.text-green-800,
body.dark h3.text-green-800,
body.dark h3.text-yellow-800,
body.dark h3.text-blue-800 {
color: #4ade80 !important;
}
body.dark h3.text-yellow-700,
body.dark h3.text-blue-700 {
color: #facc15 !important;
}
body.dark h3.text-green-700 {
color: #22c55e !important;
}
body.dark h3.text-orange-800,
body.dark h3.text-yellow-600,
body.dark h3.text-pink-600 {
color: #e879f9 !important;
}
body.dark span.text-green-600 {
color: #4ade80 !important;
}
body.dark span.text-blue-600 {
color: #60a5fa !important;
}
body.dark span.text-purple-600 {
color: #c084fc !important;
}
body.dark span.text-orange-600 {
color: #fb923c !important;
}
/* Borders and shadows */
body.dark div.border-green-200 {
border-color: #1a5c32 !important;
}
body.dark div.border-yellow-200 {
border-color: #5c521a !important;
}
body.dark div.border-blue-200 {
border-color: #1a3c5c !important;
}
body.dark hr {
border-color: #2a2a4a !important;
}
body.dark thead tr.border-green-200 th {
border-color: #1a5c32 !important;
}
body.dark tbody tr.border-green-100 td {
border-color: #0d2e1a !important;
}
/* Shadow cards */
body.dark div.shadow-sm {
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}
/* FAQ buttons */
body.dark .faq-btn {
color: #ffffff !important;
}
/* Mobile menu */
body.dark .mobile-menu {
background-color: #16213e !important;
}
body.dark .mobile-menu .mobile-link {
color: #ffffff !important;
}
body.dark .mobile-menu button {
color: #ffffff !important;
}
/* Cards */
body.dark .card-hover {
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
}
body.dark .card-hover:hover {
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4) !important;
}
/* CTA button */
body.dark a.bg-yellow-400 {
background-color: #f5c518 !important;
color: #1a1a2e !important;
}
body.dark a.bg-yellow-400:hover {
background-color: #ffd740 !important;
}
/* Accessibility skip nav */
body.dark a.sr-only:focus {
background-color: #2d8a4e !important;
color: #ffffff !important;
}
/* Toast */
body.dark .toast {
background-color: #2d8a4e;
color: #ffffff;
}